React / Next.jsで作るポートフォリオの例やポイントを紹介！

• どんなポートフォリオ/ポートフォリオサイトを作れば良いのだろうか…

こんなお悩みを抱えている方は、多いのではないでしょうか？

ポートフォリオは、転職時も副業・フリーランスをやる場合も必須になります。

この記事では、フロントエンドエンジニア志望の方を対象に、React / Next.jsを使ったポートフォリオ / ポートフォリオサイト制作の例やポイントを紹介します。

👇 メンターやってます 👇

模写修行やこのメディアを作ったメンバー中心に、Web制作業界を目指す方のための学習支援サービス 『Hello Mentor』 を運営しています。

• 基礎学習後にやるべきことがわからない...
• スクール卒だけど実力不足だと感じている...
• 自分のコードが正しい書き方かわからない...
• 未経験から1人で転職できる気がしない...
• 独立するためのノウハウがない...

特に上記のような方は、ぜひ下記のリンクからサービス詳細をご覧ください。

Hello MentorのLINEを登録すると、過去ウェビナーの一部をプレゼントしています。また、今後開催するウェビナーや講義にも無料で参加できるチャンスがあります。

👆 無料でプレゼント 👆

ポートフォリオとポートフォリオサイトの違い

ポートフォリオとポートフォリオサイトの定義を記載します。

• ポートフォリオ = 自分が制作した成果物 / 実績
• ポートフォリオサイト = ポートフォリオを紹介するサイト

一般的にはこのような定義になります。

ポートフォリオサイトには、自分のプロフィール / スキル / 得意なことなども紹介することが多いです。また、料金を記載をしたり、ブログを運営したり、サービスサイトのような位置付けにしている方もいます。

React / Next.jsで作るポートフォリオの例やポイント

ポートフォリオは、転職時や副業・フリーランスをやる場合に必須になります。

実務の実績があればもちろん載せるべきですが、ほとんどの方はないと思います。従って、企画から自分で考えて、実績になるような自分のサイトやアプリケーションを作る必要があります。

どんなポートフォリオを作れば良いか、考え方のポイントや例を紹介します。

ポートフォリオのポイント

React / Next.jsを勉強した方が作るポートフォリオになるので、下記の条件を満たす企画にすると良いです。

• React / Next.jsを使うべきアプリケーションを作る
• バックエンドができない場合はFirebaseやSupabaseなどのBaaSを使用
• 3ヶ月以内にローンチできるものを作る
• 出来れば多くの人に使われるものを作る / もしくは自分が使うものを作る

ヒットするサービスを作るのは超難易度が高いので、最後の項目は出来ればで良いです。ニッチでも良いので、なるべく需要があるアプリケーションを作りましょう。

また、開発するアプリケーションのジャンルは、熱量を持って取り組めるものが良いです。プログラミングスクールRUNTEQさんの卒業生のポートフォリオ、『二郎系ラーメン検索サービス』がとても良い事例だと思いました。

年間180杯ラーメンを食べる際に感じていた「二郎系特化かつ位置情報までまとめているサービス」がないという経験から開発。

参考：ジロリアス：二郎系ラーメン検索サービス：ポートフォリオ紹介

ポートフォリオの例

駆け出しエンジニアの方の事例がなかったので、下記の2つを紹介します。

• フロントエンドのみで開発できて、お手本になるサイト
• バズるかも？しれないアイディア

サルワカ道具箱

• サルワカ道具箱｜Webブラウザで使える便利なツール集

サルワカ道具箱は、下記のようなブラウザで動くツール集です。

• 文字数カウント
• 画像のサイズ変更
• PNG→JPEG変換
• WebP画像へ変換
• などなど

このように、動的に何かが表示されたりするサービスは、Reactを使いこなしてる感があって、評価が高いと思います。

自分が詳しい分野で、ユーザーの役に立つツールがないか考えてみると良いです。

(仮) 前略プロフィール リバース

パッと思いついたアイディアです。

今見ると独特のUIをしているので、そのUIをほぼ真似て前略プロフィールを復活させるのはどうでしょうか？30代の方には、エモい！と思われて、もしかしたらバズるかも？しれません。

多機能にしなければ、FirebaseやSupabaseなどのBaaSを使って開発できます。

ポートフォリオサイトは必要？例やポイント紹介！

転職時や副業・フリーランスをやる場合、ポートフォリオを見せれれば良いので、ポートフォリオサイトは必須ではありません。

必須ではありませんが、ポートフォリオサイトを作っておくメリットもあります。

正直どれも大きなメリットではありません。他の方法でも代替できるので、作りたい方だけ作るくらいの気持ちで良いでしょう。

ポートフォリオサイトのポイント

• 転職時に高評価を得たい
• 副業・フリーランスで案件を取りたい

このような場合、その目的が達成できるようなデザイン / 構成 / コンテンツにすべきです。

ブログで発信も出来れば、見る側は人となりがわかるので良いです。

第三者目線で良いサイトにするためには、身近な人で良いのでFB(フィードバック)をもらうのがおすすめです。

これらを聞いて改善し、より良いポートフォリオサイトにしましょう。

ポートフォリオサイトの例

サイト構成の一例です。

トップページ

トップページのコンテンツ例です。

• 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の勉強は、下記の順番で進めると良いです。

1. HTML・CSSの勉強
2. JavaScriptの勉強
3. React / Next.js / TypeScriptの勉強
4. React / Next.jsを使ったアプリケーションを作ってみる
5. ポートフォリオ制作
6. ポートフォリオサイト制作

プログラミングは、とにかく手を動かして作ることが大事です。1~3の基礎学習は早めにクリアして、実際にサイトやアプリケーションをたくさん作りましょう。

1~3の基礎学習に役立つ記事をいくつか作っているので、下記を参考にしてみてください。また、コーディングの練習には、弊社が運営している、模写修行もご活用ください。

【2024年版】web制作の独学に使える学習サイト15選！ JavaScriptの勉強ができるおすすめの本やサイト紹介！ 【初心者向け】React / Next.jsの勉強方法と手順を紹介！ 【注意点あり】React / Next.jsの勉強本おすすめ8選！

基礎学習後...迷子になっていませんか？