※ 当サイトの記事には、広告を含む場合があります。
- どんなポートフォリオ/ポートフォリオサイトを作れば良いのだろうか…
こんなお悩みを抱えている方は、多いのではないでしょうか?
ポートフォリオは、転職時も副業・フリーランスをやる場合も必須になります。
この記事では、フロントエンドエンジニア志望の方を対象に、React / Next.jsを使ったポートフォリオ / ポートフォリオサイト制作の例やポイントを紹介します。
私たちが運営しているHello Mentorでは、実務でReact / Next.jsを使っているメンターもいます。学習サポートから高評価が得られるポートフォリオの制作支援まで行っています。
Hello Mentorは、本気でエンジニアを目指す方を応援します。興味を持っていただけましたら、ぜひ下記のリンクからサービス詳細をご覧ください。
Hello Mentor\ 公式LINE始めました /
👇 友達登録でプレゼント 👇
自称日本一詳しいweb制作ロードマップ解説動画
※ 他にも無料学習相談や
学習に役立つ情報など特典あり
この記事の目次
ポートフォリオとポートフォリオサイトの違い
ポートフォリオとポートフォリオサイトの定義を記載します。
- ポートフォリオ = 自分が制作した成果物 / 実績
- ポートフォリオサイト = ポートフォリオを紹介するサイト
一般的にはこのような定義になります。
ポートフォリオサイトには、自分のプロフィール / スキル / 得意なことなども紹介することが多いです。また、料金を記載をしたり、ブログを運営したり、サービスサイトのような位置付けにしている方もいます。
React / Next.jsで作るポートフォリオの例やポイント
ポートフォリオは、転職時や副業・フリーランスをやる場合に必須になります。
実務の実績があればもちろん載せるべきですが、ほとんどの方はないと思います。従って、企画から自分で考えて、実績になるような自分のサイトやアプリケーションを作る必要があります。
どんなポートフォリオを作れば良いか、考え方のポイントや例を紹介します。
ポートフォリオのポイント
React / Next.jsを勉強した方が作るポートフォリオになるので、下記の条件を満たす企画にすると良いです。
- React / Next.jsを使うべきアプリケーションを作る
- バックエンドができない場合はFirebaseやSupabaseなどのBaaSを使用
- 3ヶ月以内にローンチできるものを作る
- 出来れば多くの人に使われるものを作る / もしくは自分が使うものを作る
ヒットするサービスを作るのは超難易度が高いので、最後の項目は出来ればで良いです。ニッチでも良いので、なるべく需要があるアプリケーションを作りましょう。
また、開発するアプリケーションのジャンルは、熱量を持って取り組めるものが良いです。プログラミングスクールRUNTEQさんの卒業生のポートフォリオ、『二郎系ラーメン検索サービス』がとても良い事例だと思いました。
年間180杯ラーメンを食べる際に感じていた「二郎系特化かつ位置情報までまとめているサービス」がないという経験から開発。
参考:ジロリアス:二郎系ラーメン検索サービス:ポートフォリオ紹介
ジロリアスのように、自分が感じたリアルな課題を解決するサービスを作ると良いです。
ポートフォリオの例
駆け出しエンジニアの方の事例がなかったので、下記の2つを紹介します。
- フロントエンドのみで開発できて、お手本になるサイト
- バズるかも?しれないアイディア
サルワカ道具箱
サルワカ道具箱は、下記のようなブラウザで動くツール集です。
- 文字数カウント
- 画像のサイズ変更
- PNG→JPEG変換
- WebP画像へ変換
- などなど
このように、動的に何かが表示されたりするサービスは、Reactを使いこなしてる感があって、評価が高いと思います。
自分が詳しい分野で、ユーザーの役に立つツールがないか考えてみると良いです。
(仮) 前略プロフィール リバース
パッと思いついたアイディアです。
今見ると独特のUIをしているので、そのUIをほぼ真似て前略プロフィールを復活させるのはどうでしょうか?今30代の方には、エモい!と思われて、もしかしたらバズるかも?しれません。
多機能にしなければ、FirebaseやSupabaseなどのBaaSを使って開発できます。
React / Next.jsで作るポートフォリオサイトの例やポイント
転職時や副業・フリーランスをやる場合、ポートフォリオを見せれれば良いので、ポートフォリオサイトは必須ではありません。
1から作らなくても、Notion等で自己紹介やポートフォリオをまとめても良いと思います!
必須ではありませんが、ポートフォリオサイトを作っておくメリットもあります。
- それ自体が1つのポートフォリオになる
- 自由な表現が可能なので個性を出せる
- やりたいことを自由に試せる
- 仕事を取るのに役に立つかもしれない
正直どれも大きなメリットではありません。他の方法でも代替できるので、作りたい方だけ作るくらいの気持ちで良いでしょう。
ポートフォリオサイトのポイント
- 転職時に高評価を得たい
- 副業・フリーランスで案件を取りたい
このような場合、その目的が達成できるようなデザイン / 構成 / コンテンツにすべきです。
ブログで発信も出来れば、見る側は人となりがわかるので良いです。
第三者目線で良いサイトにするためには、身近な人で良いのでFB(フィードバック)をもらうのがおすすめです。
- 分かりにくいところはないか
- 自分のことが伝わっているか
- 率直な感想
これらを聞いて改善し、より良いポートフォリオサイトにしましょう。
ポートフォリオサイトの例
サイト構成の一例です。
- トップページ
- ブログ(一覧/カテゴリ/個別)
- お問い合わせ
- 404
トップページ
トップページのコンテンツ例です。
- About (簡単な自己紹介)
- Skills (できる言語等)
- Career (今でのキャリアを時系列で記載)
- Works (実績紹介)
- Blog (最新記事を数記事+一覧ページへのリンク)
簡単な職務経歴書のようなページにすると良いと思います。
ブログ
せっかくReact / Next.jsをやっているのであれば、ヘッドレスCMSを使ってブログを作るのはどうでしょうか。
ヘッドレスCMSは、microCMSかNewtのどちらかが良いです。
microCMS | 使用例が多く有名 |
---|---|
Newt | ヘッドレスフォームもあるので、お問い合わせを作る場合は楽 |
ブログの内容は、学んだことのアウトプットや仕事のことを書くと、アピールになるのでおすすめです!
お問い合わせ
お問い合わせが来ることは稀なので、あまり工数をかけなくても良いと思います。
作り方は、下記の選択肢があります。
- React Hook Form等を使って作る
- HubSpot / formrun / NewtのForm App等を使う
- Google Formを使う
- SNSのDMで連絡を受け付ける
好きな方法を取ると良いでしょう。
React / Next.jsでポートフォリオを作るまでの学習手順
React / Next.jsの勉強は、下記の順番で進めると良いです。
- HTML・CSSの勉強
- JavaScriptの勉強
- React / Next.js / TypeScriptの勉強
- React / Next.jsを使ったアプリケーションを作ってみる
- ポートフォリオ制作
- ポートフォリオサイト制作
プログラミングは、とにかく手を動かして作ることが大事です。1~3の基礎学習は早めにクリアして、実際にサイトやアプリケーションをたくさん作りましょう。
1~3の基礎学習に役立つ記事をいくつか作っているので、下記を参考にしてみてください。また、コーディングの練習には、弊社が運営している、模写修行もご活用ください。無料の教材もあります。
web制作の学習サイト15選!独学向け・無料あり! 【無料あり】JavaScriptの勉強ができるおすすめの本やサイト紹介! 【初心者向け】Reactの勉強方法と手順を紹介! 【注意点あり】React / Next.jsの勉強本おすすめ6選!一緒に高評価が得られるポートフォリオを作りませんか?
私たちが運営しているHello Mentorは、メンター全員が今も現役のエンジニアです。フロントエンドエンジニアで、React / Next.jsを教えられるメンバーがいます。
学習サポートだけでなく、ポートフォリオ制作支援や転職・独立支援まで、現役のエンジニアが行います。
プログラミングは独学可能ですが、プロのサポートがあれば、効率的かつ安心して学習ができます。
メンティーさんからは、『圧倒的に効率化できている!』と嬉しい声をいただいています。
厳しい時代も生き残れるエンジニアになりたい方は、まずは無料相談にお越しください。(強引な営業等、一切ありません!)
Hello Mentor\ 公式LINE始めました /
👇 友達登録でプレゼント 👇
自称日本一詳しいweb制作ロードマップ解説動画
※ 他にも無料学習相談や
学習に役立つ情報など特典あり
web制作ロードマップ解説動画プレゼント👉
LINE登録でGET
転職希望の方は時に、GitHub使って開発して、コードを公開しましょう!