「ポートフォリオを作らないといけないのは分かってるけど、何から手をつければいいか分からない」という状態から抜け出すための記事です。2026年はChatGPT・GitHub Copilot・Claude などのAIツールを使えば、制作時間を大幅に短縮しながら質の高いポートフォリオが作れます。具体的なプロンプト例と手順をまとめました。
- ポートフォリオの目的は「技術力の証明」ではなく「採用担当との会話のきっかけ作り」
- プラットフォームはGitHub Pages（無料・技術力アピール）が現時点でのスタンダード
- ChatGPTでREADME・Claude で自己PR文・GitHub Copilotでコードを生成する3ツール分担が効率的
- 未経験者はCRUD+認証が1本動けば評価される。完璧を目指して未完成のまま出すのが最大のNG
採用担当者はポートフォリオで何を見ているのか
転職活動や案件獲得の場面で「GitHubのURLを送ってください」と言われた経験があるエンジニアは多いでしょう。ただし、コードを公開するだけでは不十分な場合があります。
採用担当者がポートフォリオで確認したいのは主に次の4点です。
- 技術スタックの実用レベル：履歴書に書いた言語・フレームワークを本当に使えるか
- コードの品質と思考プロセス：変数名、コメント、テスト、設計方針
- 問題解決の姿勢：なぜそのアーキテクチャを選んだか、どんな課題をどう解決したか
- 継続性と学習意欲：コミット履歴、最近更新されているか
特に注目すべきは3番目です。技術力そのものより「思考プロセスの言語化」が採用判断の決め手になるケースが増えています。これはREADMEやドキュメントで補完できる部分であり、まさにAIツールが最も力を発揮できる領域です。
ポートフォリオで採用担当者が評価する4つの軸
ポートフォリオを作るプラットフォーム比較
「ポートフォリオは何で作るのがいい？」はよくある質問です。2026年時点での主要な選択肢と特徴を整理します。
GitHub Pages
リポジトリをそのまま公開できる。技術系の採用担当者への訴求力が高い。
- ✅ 無料
- ✅ Git管理が自然にアピールになる
- ✅ カスタムドメイン対応
- ❌ HTMLの知識が必要
- ❌ バックエンドは動かせない
Notion
ノーコードで素早く作れる。エンジニア以外の採用担当にも読みやすい。
- ✅ 15分で公開できる
- ✅ 更新が簡単
- ✅ PDF出力も可能
- ❌ 技術力のアピールは弱い
- ❌ デザインのカスタマイズに限界
自作Webサイト
フロントエンド技術を直接アピールできる最強の選択肢。
- ✅ 技術力の直接証明
- ✅ デザイン自由度が高い
- ✅ フルスタック展示が可能
- ❌ 制作コストが高い
- ❌ 維持管理が必要
| プラットフォーム | 費用 | 制作時間 | 技術アピール度 | おすすめ対象 |
|---|---|---|---|---|
| GitHub Pages | 無料 | 2〜4時間 | ★★★★☆ | 転職活動中のエンジニア全般 |
| Notion | 無料〜有料 | 15〜30分 | ★★☆☆☆ | 急ぎで用意したい未経験者 |
| 自作サイト（React/Next.js等） | 無料〜 | 2日〜1週間 | ★★★★★ | フロントエンド職希望者 |
| Wix / Studio | 無料〜有料 | 1〜2時間 | ★★☆☆☆ | デザイン重視のクリエイター系 |
AIツールでポートフォリオ制作を効率化する方法
2026年のポートフォリオ制作において、AIツールは「補助輪」ではなく「加速装置」です。うまく使えば制作時間を半分以下に削減しながら、ドキュメントの質を上げることができます。
3つのAIツールの役割分担を明確にするとうまくいきます。
ChatGPT — READMEと技術説明文を生成する
最も汎用的。対話形式で要件を整理しながら文章を作れるGitHubリポジトリのREADMEは採用担当者が最初に読む「玄関」です。ここが雑だとコードを読む前に離脱されます。ChatGPTを使うと、プロジェクトの情報を渡すだけで整ったREADMEを生成できます。
以下の情報からGitHub用のREADME.mdを作成してください。 プロジェクト名: TaskFlow（タスク管理アプリ） 技術スタック: React 18 + TypeScript + Node.js + PostgreSQL 主な機能: - ドラッグ&ドロップでタスクのステータス管理 - チームメンバーへのタスク割り当て - Slack通知連携 こだわった点: - React.memoとuseMemoで再レンダリングを最小化 - PostgreSQLのインデックス設計でクエリを高速化 出力形式: Markdown、バッジあり、 スクリーンショット置き場のセクションも含める
このプロンプトのポイントは「こだわった点」を明示することです。技術選定の意図を言語化することで、採用担当者が面接で深堀りしたくなる内容になります。
GitHub Copilot — ポートフォリオサイトのコードを書く
IDE統合型。コードを書きながらリアルタイムに補完GitHub PagesでポートフォリオサイトのHTMLとCSSを書く際、GitHub Copilotは強力な補完を提供します。コメントで「何を作りたいか」を書くだけで、コードの雛形を生成してくれます。
/* スキルカードのコンポーネント - 言語名とアイコンを表示 - 習熟度をプログレスバーで示す（0-100%） - ダークモード対応 - アニメーション: フェードインで表示 */ .skill-card { /* Copilotが以降を補完してくれる */
Copilotは月額$10〜の有料ツールですが、学生は無料で利用できます。VSCode拡張としてインストールすれば、HTMLファイルを書きながらリアルタイムに提案を受けられます。
Claude — 自己PR文とプロジェクト説明をブラッシュアップ
長文・文章品質に強い。書いた文章の改善に最適ポートフォリオの「About me」や各プロジェクトの説明文は、書いたはいいが「なんか平凡な文章になってしまう」という悩みがあります。Claudeは文章の改善指示に強く、自分で書いた下書きを洗練させるのに適しています。
以下の自己紹介文をエンジニアのポートフォリオ用に改善してください。 【条件】 - 読み手: Web系企業の採用担当者 - 文字数: 150〜200字程度 - 誇張せず、実績ベースで書く - 「技術が好きです」ではなく具体的なエピソードで示す 【元の文章】 バックエンドエンジニアとして3年働いています。 Pythonが得意でFlaskも使えます。 チームワークを大切にしていて、 コミュニケーション能力があると思います。
「コミュニケーション能力があると思います」のような主観的な表現を、具体的な事実ベースの記述に変換してくれます。
ChatGPT × GitHub Copilot × Claude の役割分担フロー
ポートフォリオに載せるべきコンテンツ：チェックリスト
採用担当者が確認したい情報と、実際のポートフォリオに含まれていないことが多い情報には乖離があります。以下のチェックリストを使って確認してください。
- プロフィール・自己紹介：名前、経験年数、得意な技術領域、今後やりたいこと
- 技術スタック一覧：言語・フレームワーク・クラウド・DBをカテゴリ別に整理。「習熟度」は「実務経験あり / 個人開発で使用 / 学習中」程度のシンプルな3段階にする
- 成果物（最低2〜3本）：動作するURLかGitHubリンク。スクリーンショット必須
- 各プロジェクトのREADME：概要・技術選定理由・工夫した点・苦労した点
- 連絡先：メールまたはSNSアカウント（GitHub、X/Twitter等）
- 職務経歴・学歴：任意だが、転職用途なら含めると採用担当が確認しやすい
- ブログ・アウトプット：ZennやQiitaの記事があればリンクを載せる（学習姿勢のアピール）
成果物の見せ方で差がつくポイント
単にGitHubリポジトリのURLを貼るだけではなく、以下の情報を添えると採用担当者の理解が格段に上がります。
- なぜこのプロジェクトを作ったか（動機・解決したかった問題）
- 技術選定の理由（「なぜNextJSにしたか」「なぜPostgreSQLではなくMongoDBにしたか」）
- 一番苦労した部分と解決方法
- 実際に動作するデモURL（できれば）
これらはChatGPTに「プロジェクトの情報を渡して、採用担当向けの説明文を生成する」プロンプトを使えば効率よく書けます。
未経験者・第二新卒向けのポートフォリオ戦略
未経験者がポートフォリオで最も陥りやすいミスは「完璧なものを作ろうとして結局未完成のまま提出すること」です。
未経験者が最低限作るべきもの
CRUD + 認証があるWebアプリ
「登録・一覧・編集・削除」と「ログイン機能」が動けば基礎力の証明になります。TODO管理でも十分。フロントエンド志望ならReact、バックエンド志望ならRails/Django等。
外部API連携か外部サービス統合
天気API・地図API・Stripe等の外部サービスとの連携経験があると「実務に近いことをやれる」評価になります。
デプロイ済みの状態
VercelやRenderなどの無料枠でデプロイして、URLで確認できる状態にしておく。「ローカルでは動くんですが…」は採用担当者が確認できないためNG。
経験者向けポートフォリオの差別化戦略
実務経験がある場合、「作った成果物の数」よりも「技術的な意思決定の質」で差がつきます。
アーキテクチャと設計の意図を言語化する
経験者が採用時に問われるのは「どういう判断をしてきたか」です。例えば同じマイクロサービス構成でも、「なぜモノリスから分割したか」「どのタイミングでDB分離を決めたか」を書いているポートフォリオは少ない。
Claude や ChatGPT に「このアーキテクチャ決定の背景をドキュメントにまとめて」と頼むと、自分が口頭で説明してきたことを整理されたテキストにしてくれます。
生成AIを活用したプロジェクトを1本入れる
2026年の求人市場では「生成AIを使った開発経験」を問う企業が急増しています。LLM APIを使った小さなツールを1本作ってポートフォリオに加えるだけで、他の候補者との差別化につながります。
- OpenAI API / Anthropic API を使ったChatbotアプリ
- RAGを使った社内文書検索ツール（モック版）
- コード生成・レビューを自動化するCLIツール
ポートフォリオに載せてはいけないNGリスト
作り方と同じくらい重要なのが「何を載せてはいけないか」です。
- 前職・現職の業務コード：守秘義務違反になる可能性が高い。たとえリファクタしても元のロジックを含む場合はNG
- 複数人のチーム開発での成果を自分ひとりの作品として見せる：面接で深掘りされたときに答えられない
- 動作しないコード・未完成のプロジェクト：マイナス評価になる。完成させるか非表示にする
- チュートリアルのそのままコピー：「どこを自分でカスタマイズしたか」が分からないと評価しにくい
- 数年間更新されていないリポジトリ：最終コミットの日付は採用担当者が確認します
- 個人情報・機密情報を含むコード：APIキーやパスワードのハードコーディング（実際に流出例あり）
ポートフォリオ公開後にやること
作って公開して終わりではなく、継続的に育てることが重要です。
GitHub README のSEO対策
GitHubリポジトリのREADMEに適切なキーワード（技術スタック名、ドメイン名）を含めておくと、Google検索からポートフォリオに流入することがあります。特にGitHub PagesのURLはGoogleにインデックスされやすいです。
定期的なコミットを維持する
転職活動中でも週1〜2回のコミットを維持することを目標にしましょう。Contribution Graphが真っ白な状態は「学習を止めている」印象を与えます。小さな改善（READMEの更新、バグ修正）でも十分です。
トランスファーは転職先に合わせて変える
応募先によって見せたいプロジェクトは変わります。BtoB SaaS企業に応募するならAPI設計を重視した成果物を、スタートアップならスピード感と多様な技術経験を前面に出す、といった調整が有効です。
まとめ：AIツールを使ってポートフォリオを戦略的に作る
エンジニアのポートフォリオは「完璧な成果物コレクション」である必要はありません。採用担当者との面接を有利に進めるための「会話の素材」として機能すれば十分です。
- プラットフォーム：迷ったらGitHub Pages + 自作HTMLが最もコスパが良い
- ChatGPT：README・プロジェクト説明文の生成に使う
- GitHub Copilot：HTMLとCSSのコード補完に使う
- Claude：自己PR文・自己紹介文の改善に使う
- 未経験者：CRUD+認証が動く成果物1本を完成させることが最優先
- 経験者：技術選定の意図言語化と生成AIプロジェクトの追加で差別化
AIツールは「考える作業を代替する」ものではなく、「アウトプットの速度を上げるもの」です。プロジェクトの背景・意図・苦労した点は自分が理解している必要があります。面接でAIが代わりに答えることはできないからです。
エンジニア転職の準備を並行して進めている方は、エンジニア転職活動の進め方3ヶ月完結ロードマップも参考にしてください。転職エージェントの選び方についてはエンジニア転職エージェントおすすめ8選で詳しく解説しています。
フリーランスAIエンジニア。AIパイプライン開発と技術キャリアについて発信しています。