模写修行メディア

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

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

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

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

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

👇 メンターやってます 👇

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

0からweb制作やプログラミングの勉強を始める方はもちろん、12ヶ月以上独学している方や既にお仕事をしている方にもご利用いただいています!

模写武者くんのアイコン
  • 独学に限界を感じている...
  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業のアドバイスが欲しい...

このような方は、ぜひ下記のリンクからサービス詳細をご覧ください。個別説明会もお気軽にお申し込みください。

※ 少人数運営のため人数制限あり ※

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

転職・独立成功者も出ています!

👆 メンターやってます 👆

この記事の目次

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

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

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

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

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

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

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を使って開発できます。

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

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

転職サポートも可能です!

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

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

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

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

独学に限界を感じていませんか?

現役エンジニアによるメンタリングサービス作りました!

模写修行やこのメディアを作ったエンジニア中心に、メンタリングサービスHello Mentorを運営しています。

👇 こんな方のためのサービスです。

  • 独学に限界を感じている...
  • 何をどこまで勉強すれば良いかわからない...
  • 自分の書き方が正しいかわからない...
  • 検索しても解決しない問題が多い...
  • 転職や副業のアドバイスが欲しい...

メンターを務めるのは、今も現役でコードを書いているエンジニアのみです。駆け出しの方やメンターだけをやっている方はいません。

高額な料金はかかりません。サブスク&入会金・解約料なしなので、リスクなく始められます。

少しでも興味がある方は、ぜひ下記のリンクからサービスサイトをご覧ください。個別説明会もお気軽にお越しください。(無理な営業等一切ございません!)

※ 少人数運営のため人数制限あり ※

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

転職・独立成功者も出ています!

この記事を書いた人

Gakuのアイコン

Gaku / @gaku92014091

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

当メディア運営メンバーでメンターやってます!👉

詳しく見る

\Share/

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

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