模写修行メディア

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

※ 当サイトの記事には、広告を含む場合があります。

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

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

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

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

私たちが運営しているHello Mentorでは、実務でReact / Next.jsを使っているメンターもいます。学習サポートから高評価が得られるポートフォリオの制作支援まで行っています。

Hello Mentorは、本気でエンジニアを目指す方を応援します。興味を持っていただけましたら、ぜひ下記のリンクからサービス詳細をご覧ください。

現役フロントエンドエンジニアがサポート

詳しいサービス内容を見る

サブスク&契約期間に縛りがないサービスです!

Hello Mentor\ 公式LINE始めました /

👇 友達登録でプレゼント 👇

自称日本一詳しいweb制作ロードマップ解説動画

※ 他にも無料学習相談や
学習に役立つ情報など特典あり

登録して特典をもらう

この記事の目次

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

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

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

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

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

この記事の内容
この記事では、ポートフォリオ / ポートフォリオサイト、両方に触れます。

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

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

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

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

転職希望の方は時に、GitHub使って開発して、コードを公開しましょう!

gakuのアイコン

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

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

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

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

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

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

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

ジロリアスのように、自分が感じたリアルな課題を解決するサービスを作ると良いです。

gakuのアイコン

ポートフォリオの例

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

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

サルワカ道具箱

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

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

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

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

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

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

前略プロフィールとは?
2004年にローンチされた、プロフサイトの先駆けとなったサービスです。15年前くらいに人気だったサービスで、当時の中高生はアカウントを持っている方が多かったです。

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

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

個人開発経験者がサポート

詳しいサービス内容を見る

需要のあるサービス作りもアドバイス

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

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

1から作らなくても、Notion等で自己紹介やポートフォリオをまとめても良いと思います!

gakuのアイコン

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

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

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

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

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

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

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

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

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

サイト構成の一例です。

トップページ

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

  • About (簡単な自己紹介)
  • Skills (できる言語等)
  • Career (今でのキャリアを時系列で記載)
  • Works (実績紹介)
  • Blog (最新記事を数記事+一覧ページへのリンク)

簡単な職務経歴書のようなページにすると良いと思います。

ブログ

せっかくReact / Next.jsをやっているのであれば、ヘッドレスCMSを使ってブログを作るのはどうでしょうか。

ヘッドレスCMSは、microCMSかNewtのどちらかが良いです。

microCMS使用例が多く有名
Newtヘッドレスフォームもあるので、お問い合わせを作る場合は楽

ブログの内容は、学んだことのアウトプットや仕事のことを書くと、アピールになるのでおすすめです!

gakuのアイコン

お問い合わせ

お問い合わせが来ることは稀なので、あまり工数をかけなくても良いと思います。

作り方は、下記の選択肢があります。

  • 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の基礎学習に役立つ記事をいくつか作っているので、下記を参考にしてみてください。また、コーディングの練習には、弊社が運営している、模写修行もご活用ください。無料の教材もあります。

web制作の学習サイト15選!独学向け・無料あり! 【無料あり】JavaScriptの勉強ができるおすすめの本やサイト紹介! 【初心者向け】Reactの勉強方法と手順を紹介! 【注意点あり】React / Next.jsの勉強本おすすめ6選!

一緒に高評価が得られるポートフォリオを作りませんか?

Hello Mentor(ハローメンター)

私たちが運営しているHello Mentorは、メンター全員が今も現役のエンジニアです。フロントエンドエンジニアで、React / Next.jsを教えられるメンバーがいます。

学習サポートだけでなく、ポートフォリオ制作支援や転職・独立支援まで、現役のエンジニアが行います。

プログラミングは独学可能ですが、プロのサポートがあれば、効率的かつ安心して学習ができます。

メンティーさんからは、『圧倒的に効率化できている!』と嬉しい声をいただいています。

gakuのアイコン

厳しい時代も生き残れるエンジニアになりたい方は、まずは無料相談にお越しください。(強引な営業等、一切ありません!)

イケてるポートフォリオを作りませんか?

詳しいサービス内容を見る

サブスク&契約期間に縛りがないサービスです!

Hello Mentor\ 公式LINE始めました /

👇 友達登録でプレゼント 👇

自称日本一詳しいweb制作ロードマップ解説動画

※ 他にも無料学習相談や
学習に役立つ情報など特典あり

登録して特典をもらう

web制作ロードマップ解説動画プレゼント👉

LINE登録でGET

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

フリーランス8年を経て法人化(3期目)、業界歴は12年目。コンテンツ制作、ライティング、マーケティング、デザイン、コーディング、プログラミング(フロント)、幅広くやってます!webサービスを作るのが好き!

\Share/

模写修行のトップページのスクリーンショット
模写修行

実務レベルを体験するためのコーディング練習教材