エンジニアポートフォリオサイトが必要な理由
エンジニアの転職活動において、ポートフォリオサイト（個人サイト）は強力な差別化ツールです。GitHubのプロフィールや作成したアプリへのリンクだけでなく、「あなたという人間・エンジニアとしての思想・成長ストーリー」を体系的に伝える場所として機能します。
採用担当者がポートフォリオサイトで確認すること：
・実際に作ったプロダクトとその説明
・技術スタックと習熟度
・ブログ記事・技術発信からの知識量・思考力の把握
・サイト自体のデザイン・コードの品質（エンジニアなら自分でサイトを作っているはず）
・コンタクトフォームへの連絡手段
本記事では、Next.jsを使って採用担当者に好印象を与えるポートフォリオサイトをゼロから構築する方法を解説します。
ポートフォリオサイトの構成設計
転職で高評価されるポートフォリオサイトの必須セクションと推奨コンテンツを解説します。
必須セクション：
①ヒーローセクション（名前・職種・一言キャッチコピー・CTA）
②自己紹介（経歴・転職理由・ITへの情熱）
③スキル一覧（言語・フレームワーク・ツール・習熟度）
④プロジェクト一覧（制作物・使用技術・GitHub/デモリンク）
⑤Contact（連絡先フォーム・メール・SNSリンク）
あるとさらに好印象なセクション：
⑥ブログ・記事一覧（技術発信の実績）
⑦職務経歴ライン（タイムライン形式で経歴を可視化）
⑧GitHub活動グラフの表示（継続的な学習の証明）
技術スタックの選択とプロジェクトセットアップ
ポートフォリオサイトに最適な技術スタックを紹介します。
おすすめ技術スタック（2025年版）：
・Next.js 15（App Router）：SSG/ISRで高速・SEO最適化
・TypeScript：型安全な実装でコードの品質をアピール
・Tailwind CSS：素早く美しいUIを実装
・Framer Motion：スムーズなアニメーションでプロ感を演出
・Contentlayer2 or MDX：ブログ記事をMarkdownで管理
・Vercel：自動デプロイ・カスタムドメイン
・Resend or EmailJS：コンタクトフォームのメール送信
プロジェクト作成：
npx create-next-app@latest portfolio --typescript --tailwind --app でセットアップ開始。
プロジェクトカードコンポーネントの実装
ポートフォリオで最も重要なプロジェクト一覧セクションのコンポーネント設計を解説します。
プロジェクトデータの型定義（TypeScript）：
各プロジェクトについてtitle・description・tags（技術スタック）・githubUrl・demoUrl・thumbnailUrlなどのフィールドを定義します。
プロジェクトカードの設計ポイント：
・サムネイル画像：実際の画面キャプチャを使う（白紙や適当な画像はNG）
・技術タグ：使用技術を一目で確認できる
・GitHub・デモリンク：採用担当者がすぐに確認できるように
・プロジェクトの説明：なぜ作ったか・どんな問題を解決するかを1〜2行で
SEO最適化とパフォーマンス改善
ポートフォリオサイトのSEO・パフォーマンスを最適化して、Googleで自分の名前が検索されたときにヒットするようにします。
Next.jsのMetadata APIを活用：
layout.tsxやpage.tsxにexport const metadata = { title・description・og:image等 } を設定します。
パフォーマンス最適化：
・next/imageを使った画像最適化（WebP自動変換・レイジーロード）
・フォントの最適化（next/font使用）
・不要なClientコンポーネントの最小化
Core Web Vitals改善：
LCP（最大コンテンツ描画）・CLS（レイアウトシフト）・INP（インタラクション応答性）を改善することで、Googleのページ品質評価が向上します。Vercel Analyticsで継続的にモニタリングしましょう。