副業AIエンジニアへの第一歩|GitHub対応ポートフォリオ実装手順【転職・フリーランス対応版】

AI×仕事効率化

未経験〜実務経験3年未満のエンジニア転職では、職務経歴書よりも「GitHubに何が置いてあるか」が合否を分ける時代になりました。2026年5月時点では、GitHubのリポジトリ構成・READMEの完成度・コミット履歴の質が、書類選考の通過率に直結する一次評価軸として完全に定着しています。

しかし「ポートフォリオを作ろう」と決めても、テーマ決め・要件定義・実装・README作成・ホスティング・運用更新まで一人で全部やるのは、本業を持つ社会人にとって週末を完全に潰すレベルの負担です。本記事では、Claude CodeとChatGPTを組み合わせて、GitHub+Vercelに公開するエンジニア転職ポートフォリオを最短2週間で仕上げるための実装手順を、2026年5月時点の最新ノウハウで具体的に解説します。

スポンサーリンク

なぜいま「AIで作るポートフォリオ」なのか

採用側がGitHubで見ているポイントは、ここ1年で大きく変わりました。コード量よりも、READMEの読みやすさ・課題設定の妥当性・コミットの粒度といった「意思疎通の質」が重視されています。これは、AIによってコード生成自体のハードルが下がった結果、書ける/書けないよりも「何を作るか」「どう説明するか」を判断軸に置く企業が増えたからです。

つまり、AIを使ってポートフォリオを作ること自体は今や減点要素ではなく、「AIをどう使ってどう仕上げたか」を言語化できる候補者の方が、むしろ高く評価される傾向にあります。実際、2026年現在の中途求人では「Claude CodeやGitHub Copilotを使った開発経験」を歓迎要件に挙げる企業も急増しており、AI活用そのものがスキルとして評価される時代に入っています。

ポートフォリオ作成の全体フロー(5ステップ)

最短ルートは次の5ステップで構成されます。

  1. テーマ選定(自分の興味×実務想定の交差点をClaudeで壁打ち)
  2. 要件定義書をClaudeにMarkdownで作らせる
  3. Claude Codeで実装+自動テスト+PRレビュー
  4. README・スクリーンショット・デモ動画の整備
  5. Vercel/Cloudflare Pagesへデプロイし、READMEに公開URLを記載

各ステップでAIに任せられるのはほぼ8割。残り2割は「自分の言葉で説明できる/手で修正できる」状態に持っていくことが目的です。AIに任せきりの成果物は、面接で1問深掘りされた瞬間に化けの皮が剥がれます。

STEP1:テーマ選定はClaudeに壁打ち

ポートフォリオ作成で最も多くの人が躓くのが、実は「コードを書くこと」ではなく「何を作るかを決められないこと」です。世の中には「ToDoアプリ」「天気予報アプリ」のような定番テーマがあふれていますが、これらは採用担当の目に止まりません。テンプレ通りの題材で量産されたリポジトリは、最初の3秒で「これは見たことある」と判定され、スクロールされてしまいます。

「Webサービスを作る」ではテーマが広すぎます。Claudeに対して、次のようなプロンプトで5案ほど出してもらいましょう。

私は[現職]の経験が[年数]年あり、[興味分野]に強い関心があります。
GitHubに公開して中途エンジニア採用の書類選考で「実務で活きる思考力」が
伝わるポートフォリオのテーマ案を、技術スタック・想定ユーザー・差別化ポイントと
セットで5つ提案してください。
要件: 2週間で完成、フロント+API+DBの最小構成、外部API課金は月1,000円以内。

ここで重要なのは「2週間」「課金1,000円以内」など、現実的な制約を最初に渡すこと。曖昧なテーマは後工程で必ず破綻します。出てきた案からひとつ選んだら、さらに「このテーマの差別化ポイントを3つ深掘りして」と追い質問することで、面接で語れるストーリーが自然に積み上がります。

STEP2:要件定義書をMarkdownで生成

テーマが決まったら、次のような要件定義書を作成させます。

選んだテーマ: [テーマ]
このテーマで、以下を含む要件定義書をMarkdownで作ってください。
- 解決する課題(誰の、何の困りごとか)
- ペルソナと利用シーン
- 機能要件(MUST/WANT)
- 非機能要件(性能/セキュリティ/可用性)
- 技術スタックと選定理由
- 画面遷移図と主要API一覧
- データモデル(テーブル定義)

このMarkdownはそのまま docs/requirements.md としてリポジトリにコミットします。採用担当が見たときに「設計から考えられる人」という印象を与えるための、極めて費用対効果の高い資産になります。要件定義書がある時点で、コードしか書けない候補者から一歩抜け出せます。

STEP3:Claude Codeで実装と自動テスト

実装フェーズはClaude Codeに任せます。要件定義書をプロジェクトルートに置いた状態で、次のように依頼します。

docs/requirements.md の内容を読み込み、Next.js (App Router) + TypeScript +
Prisma + SQLite の構成でプロジェクトを初期化してください。
各機能ごとにブランチを切り、PRのタイトルと説明文も生成してください。
最低限のVitestユニットテストを各ロジック関数に追加してください。

ポイントは「機能ごとにブランチを切らせる」「PRの説明文を書かせる」ことです。これにより、後でGitHub上のコミット履歴がきれいに並び、「設計→実装→テスト→マージ」の流れが可視化されます。採用担当にとっては、これが何より見たい情報です。プルリクエストのレビューを自分で書き込んでマージする運用にすれば、ひとり開発でも「コードレビュー文化を理解している」ことが伝わります。

STEP4:READMEは「採用担当向け」に振り切る

技術スタックの羅列だけのREADMEはNGです。Claudeに次のプロンプトを投げます。

このリポジトリのREADMEを、中途エンジニア採用の書類選考で読まれることを
想定して作り直してください。最初の3行で「何を解決するアプリか・対象ユーザー・
技術的工夫の要点」が伝わること。
セクション構成: 概要 / デモ / 解決した課題 / 技術選定理由 /
苦労した点と工夫 / 今後の拡張案。
スクリーンショットはdocs/screenshots/に配置する前提でimgタグを入れる。

「苦労した点と工夫」のセクションは絶対に外さないでください。面接時のアイスブレイクとして、ほぼ100%ここから質問が始まります。逆に言えば、ここに書いたことは必ず深掘りされるので、自分が本当に手を動かして得た知見だけを書くこと。AIに丸投げした内容を書くと、面接で詰みます。

STEP5:VercelデプロイとREADMEへのリンク追加

Vercelの公開URLが取得できたら、READMEの先頭に「🔗 デモ: https://…」を追加します。GitHubのリポジトリ説明欄(Aboutセクション)にも同じURLを記載することで、検索流入したリクルーターが1クリックで動作確認できる導線を作れます。

Vercelを選ぶ理由は、GitHub連携が自動で、プレビュー環境がPRごとに作られる点です。Cloudflare PagesでもOKですが、Next.js (App Router) を使う場合はVercelの方が躓きが少なくおすすめです。

やってはいけない3つのアンチパターン

AIで作るからこそ陥りやすい失敗パターンが3つあります。1つ目は「巨大なテーマを1つ作る」こと。SaaSクローンのような大規模アプリを目指すと、2週間では絶対に終わりません。中途半端なまま公開すると、未完成のフォームやリンク切れが採点をマイナスに振ります。最初は機能を絞った1ページアプリで構いません。

2つ目は「AIが生成したコードをそのまま貼る」こと。型エラーや未使用変数が残っているコードはGitHub上で一目でわかります。Claude Codeが書いたコードでも、必ずnpm run lintnpm run typecheckを通し、警告ゼロの状態でコミットしてください。これを怠ると「AIに書かせただけ」という印象が確定してしまいます。

3つ目は「READMEに自分の言葉がない」こと。AIが生成した一般論だけのREADMEは、採用担当が一番嫌う成果物です。「なぜこの技術を選んだか」「実装中に何で詰まったか」を、必ず自分の文章で1段落以上書いてください。50字でも構いません。自分の体温が宿った文章が1段落あるだけで、評価は大きく変わります。

採用担当に響くコミット履歴の作り方

コミットメッセージは「feat: ログイン機能を追加」のようなConventional Commits形式に統一します。Claudeに「直近10件のコミットメッセージをConventional Commits形式にリライトするスクリプトを書いて」と依頼すれば、git rebase -i 用のメッセージリストを自動生成してくれます。

PRも同様に、「変更概要・テスト観点・スクリーンショット」の3点が揃ったテンプレートで揃えると、リポジトリ全体の見栄えが一段上がります。.github/pull_request_template.md を1ファイル置くだけで、それ以降のPRが自動的にこの構成になります。

面接で聞かれる「3つの定番質問」への準備

ポートフォリオを面接で見せると、ほぼ確実に聞かれる質問が3つあります。1つ目は「なぜこの技術スタックを選んだのですか?」。これにはSTEP2で書いた「技術選定理由」が答えになります。Next.jsを選んだ理由を「採用率が高いから」と答えるのは弱い回答。「App Routerでサーバーコンポーネントを使い、初回表示を高速化したかったから」と答えられると、即戦力感が伝わります。

2つ目は「実装中に一番苦労したのはどこですか?」。READMEの「苦労した点」に書いた内容をそのまま語ります。具体的なエラーメッセージや、Claudeとの試行錯誤の過程まで話せると、面接官は「この人は本当に手を動かした」と判断します。

3つ目は「AIをどこまで使いましたか?」。ここを正直に答えるのが2026年の正解です。「要件定義の壁打ちと初稿生成はClaudeに任せ、エラー対応とコードレビューは自分で行いました」のように、AIと自分の役割分担を明確に語れる候補者は、AI時代のエンジニア像にぴったり合致します。

公開後の運用と評価

ポートフォリオは「公開して終わり」ではありません。週1回、Claudeに「直近のIssueとPRを見て、次に改善すべき点を3つ提案して」と聞き、軽くでいいので運用を続けてください。GitHubのコントリビューショングラフが緑色で埋まっていることは、それ自体が「継続的に手を動かせる人」という強いシグナルになります。

2026年5月現在、面接で「ポートフォリオを直近で更新したのはいつですか?」と聞かれるケースが急増しています。1ヶ月以上更新がないと「作ったまま放置している」と判断されかねません。週次の小さな改善を積み重ねることが、書類選考の通過率を底上げします。

関連記事と次のアクション

ポートフォリオが完成したら、次は職務経歴書の最適化と面接対策です。あわせて読みたい: AI×30代転職|職務経歴書をClaude・ChatGPTで最適化する完全ガイドと、AI×40代転職|ミドル層の面接対策をChatGPT・Claudeで完全攻略する方法を合わせて読むと、書類〜面接までの一気通貫の準備が整います。発信を続けて副業案件にもつなげたい方は、PV3倍を実現した、AI×ブロガーの100記事設計プロンプト術も参考になります。

💼 転職活動でよく使われるサービス

🤖 生成AIを仕事に活かしませんか?

▶ DMM 生成AI CAMP 学び放題
月額でChatGPT・Claude等をマスター

まとめ

AIで作るエンジニア転職ポートフォリオは、もはや「アリかナシか」ではなく「どう使うか」の段階に入りました。要件定義からREADMEまでAIにドラフトを任せ、自分は意思決定と説明にリソースを集中する。この役割分担ができる候補者は、2026年の中途エンジニア採用市場で確実に上位に立てます。週末の2時間×2週間からで構いません。まずはClaudeへの最初の壁打ちから始めてみてください。

コメント

タイトルとURLをコピーしました