エンジニアのポートフォリオサイト、何を載せて何を捨てるか

「ポートフォリオ、3Dでぐりぐり動くやつにしたんですよ」

知り合いのエンジニアにそう見せられたサイトは、確かにかっこよかった。スクロールすると背景の図形がぬるぬる動く。でも僕は、彼が「何を作れる人なのか」を、3分見ても言えませんでした。

採用担当も、発注を考えている人も、同じです。彼らが知りたいのはただ一つ。「この人に頼むと、何が起きるのか」。それが分からないサイトは、どんなに動いてもスルーされます。

僕も昔、同じ失敗をしました。凝った演出を先に作り込んで、肝心の実績欄が「いろいろやってます」で終わっていた。今は逆です。何を載せるかを先に決めて、見た目はあとから足す。今日はその順番で、Claude Codeを使ってポートフォリオサイトを最短で立ち上げるまでを書きます。

この記事の要点

• ポートフォリオは作品集ではなく営業ページ。載せるのは成果物・自分の役割・数字の3点セット。
• 個人サイトに動的サーバーはいらない。Astroで静的サイトを作れば、速くて壊れにくくて、公開も無料。
• デプロイは Cloudflare Pages か Vercel。GitHubに繋げば push するだけで公開される。
• SEOとOGPは「検索する人の言葉をtitle・見出し・altに入れる」「シェアされたときの画像を用意する」の地味な作業がほぼ全部。
• Claude Codeには「要件・実装・SEOレビュー・公開前チェック」と仕事を分けて渡すと、差分が追えて事故らない。

まず決める：何を載せて、何を捨てるか

手を動かす前に、ここで9割が決まります。コードの話は後回しでいいです。

ポートフォリオに来る人は、あなたの人生に興味はありません。自分の問題を解いてくれそうかだけを見ています。だから載せる情報は、相手の判断材料になるものだけに絞ります。

載せるべきもの、捨てていいものを表にしました。

載せる	捨てる・後回し
作った成果物（できればデモURL・スクショ付き）	「Reactが好きです」みたいな気持ち
その案件での自分の役割（設計？実装？レビュー？）	学習中の技術を網羅したスキル一覧
数字（表示速度を1.2秒短縮、離脱を15%減 など）	React 80% のような自己採点バー
連絡手段（メール・GitHub・X）	凝った問い合わせフォーム（初期は不要）
顔写真か似顔絵（登壇・執筆狙いなら）	スクロール連動の3D背景

特に効くのが、真ん中の役割と数字です。「タスク管理SaaSを作りました」では弱い。「タスク管理SaaSのダッシュボードを設計から実装まで担当し、初回利用者が次の操作で迷う割合を減らしました」まで書くと、急に仕事として見えてきます。

数字がない、という人も多いはず。僕もそうでした。そういうときは、Before/Afterで書けば十分です。「導線がバラバラだった予約ボタンを1か所に整理した」——これだけでも、何も書いていない人より圧倒的に伝わります。

誰に向けるかで、中身を変える

同じ「ポートフォリオ」でも、見る人が変われば刺さる情報は変わります。全員に向けると、誰にも刺さりません。狙いを1つ決めましょう。

狙い	相手が一番見たいもの	必ず入れる要素
転職・副業に応募	技術範囲と担当範囲、チームでの動き方	使用技術、担当工程、チーム規模、GitHub
フリーランスで受注	何を相談できるか、頼みやすさ	サービス一覧、よくある相談、メールCTA、納品例
登壇・執筆の依頼	専門テーマ、過去の発信	登壇テーマ、記事リンク、短い自己紹介、写真
学習記録・発信	成長の過程、再現できる制作物	学習ログ、失敗メモ、デモURL、次の改善予定

たとえば転職向けなら、作品カードに「何を作ったか」だけでなく「自分が触った範囲」を必ず書く。フリーランス向けなら、いきなり細かい料金表を出すより、「既存サイトの表示速度改善」「LPのCTA改善」のように、相談の入口を見せたほうが連絡が来ます。

この「入口を見せる」考え方は、売るためのページ作り全般に共通します。コンバージョンを意識した設計は Claude CodeでLPを作る記事 に詳しく書いたので、受注を狙うなら合わせて読んでください。

技術選択：静的サイトで十分すぎる

ここで凝りたくなる気持ちを、ぐっと抑えます。

個人のポートフォリオに、サーバーで動くアプリは要りません。表示する内容はほぼ固定で、更新もたまに。問い合わせもメールリンクで足ります。つまり静的サイト——ビルド時にHTMLを作って配るだけのサイト——で必要十分です。

静的サイトの何がいいかというと、こうです。

• 速い。出来上がったHTMLを返すだけなので、表示が一瞬。
• 壊れにくい。動くサーバーがない＝落ちるサーバーもない。
• タダで公開できる。後述の Cloudflare Pages や Vercel の無料枠で足りる。
• AIに任せやすい。構成が単純なぶん、Claude Codeに渡す文脈が小さく、差分も追える。

僕が選ぶのは Astro です。理由は、必要なところ以外にJavaScriptをほぼ送らないので、デフォルトで軽いから。このブログ自体もAstroで動かしています。Astroの仕組み自体をちゃんと知りたい人は Astro入門の記事 を先に読むと、この先の手順がすっと入ります。

Next.jsでもいいのでは、とよく聞かれます。ダメではないです。でも個人ポートフォリオでNext.jsを選ぶと、サーバー機能やルーティングの学習コストが、得られるものに見合いません。最初の1枚を出すなら、軽いほうが勝ちます。

Claude Codeに渡す依頼文

ここからClaude Codeの出番です。注意点は一つだけ。「おしゃれなポートフォリオ作って」とは絶対に頼まないこと。

これをやると、AIは見た目の好みだけで巨大な差分を出してきて、あとで読めなくなります。僕が必ず渡すのは、目的・読者・ファイル・制約・完了条件の5点です。

Astroで個人ポートフォリオサイトを作ります。
目的は、採用担当者と小規模案件の発注者に、実績と連絡先を3分以内で伝えることです。

要件:
- 1ページ構成。Hero, About, Projects, Services, Contact を含める
- データは src/data/profile.ts に集約する
- src/pages/index.astro と src/styles/global.css を実装する
- Reactや重いUIライブラリは使わない
- 画像にはalt属性を入れる
- モバイル幅でもCTAボタンが折り返して読めるようにする

まず実装方針と変更予定のファイルを短く説明してから、編集に入ってください。

最後の「まず方針を説明してから」が地味に大事です。生成されたコードをいきなり受け取ると、初心者ほど意図を見失います。AIの計画を一度読むワンクッションを、必ず挟みます。依頼文をもっと磨きたいなら Claude CodeでSEOを改善する記事 のレビュー依頼の作り方も参考になります。

データと見た目を分ける

実装の前に、設計の勘どころを一つ。プロフィール情報を1ファイルに集めることです。

名前、肩書き、実績、連絡先を src/data/profile.ts にまとめておくと、ページ側のHTMLは表示に集中できます。すると後で「文言だけ直して」「カードの並びだけ変えて」とClaude Codeに小さく頼めて、差分レビューが一気に楽になります。

// src/data/profile.ts
export const profile = {
  name: "Masa Tanaka",
  role: "フロントエンドエンジニア / Claude Code活用支援",
  location: "Tokyo, Japan",
  summary:
    "Astro、React、TypeScriptで、速く読めて運用しやすいWebサイトを作ります。小さな改善を計測しながら積み上げるのが得意です。",
  skills: ["Astro", "TypeScript", "React", "CSS", "SEO", "Content Ops"],
  links: {
    email: "[email protected]",
    github: "https://github.com/example",
    x: "https://x.com/example",
  },
} as const;

// 各案件は「役割」と「結果」を必ず1文ずつ入れる
export const projects = [
  {
    title: "予約導線を整理した店舗サイト",
    role: "設計・実装を担当",
    description:
      "スマホでのメニュー閲覧と予約ボタンを1か所に整理し、予約前の迷いを減らしました。",
    image: "/projects/booking-site.webp",
    alt: "予約ボタンとメニューが見やすい店舗サイトの画面",
    tags: ["Astro", "SEO", "Responsive"],
    url: "https://example.com/booking",
  },
  {
    title: "タスク管理SaaSのダッシュボード",
    role: "UI設計からフロント実装まで担当",
    description:
      "カード・ステータス・検索を再設計し、初回利用者が次の操作を選びやすい画面にしました。",
    image: "/projects/task-dashboard.webp",
    alt: "タスクカードが並ぶSaaSダッシュボードの画面",
    tags: ["TypeScript", "UI Design", "Dashboard"],
    url: "https://example.com/dashboard",
  },
] as const;

role というフィールドをわざわざ足しているのがポイントです。「何を作ったか」と「自分がどこを担当したか」は別物で、後者がないと評価しようがありません。

トップページとCSSをコピペで動かす

次の index.astro は、そのまま貼れば動く最小例です。問い合わせはフォームを作らず、メールリンクにしています。初期版は、スパム対策つきフォームを作り込むより、まず公開して見られる状態にするほうがずっと価値があります。

---
import { profile, projects } from "../data/profile";
import "../styles/global.css";
---

<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>{profile.name} | ポートフォリオ</title>
    <meta name="description" content={`${profile.role}の実績と連絡先をまとめたポートフォリオ。`} />
    <!-- OGP: SNSでシェアされたときに表示される情報 -->
    <meta property="og:title" content={`${profile.name} | ポートフォリオ`} />
    <meta property="og:description" content={profile.summary} />
    <meta property="og:image" content="/ogp.png" />
    <meta property="og:type" content="website" />
  </head>
  <body>
    <main>
      <section class="hero">
        <p class="eyebrow">{profile.location}</p>
        <h1>{profile.name}</h1>
        <p class="lead">{profile.summary}</p>
        <div class="actions">
          <a class="button primary" href="#projects">実績を見る</a>
          <a class="button secondary" href={`mailto:${profile.links.email}`}>相談する</a>
        </div>
      </section>

      <section id="projects" class="section">
        <h2>実績</h2>
        <div class="project-grid">
          {projects.map((project) => (
            <article class="project-card">
              <img src={project.image} alt={project.alt} width="960" height="540" loading="lazy" />
              <div class="project-body">
                <h3>{project.title}</h3>
                <p class="role">{project.role}</p>
                <p>{project.description}</p>
                <ul class="tag-list">{project.tags.map((tag) => <li>{tag}</li>)}</ul>
                <a href={project.url} target="_blank" rel="noreferrer">詳しく見る</a>
              </div>
            </article>
          ))}
        </div>
      </section>

      <section class="section contact">
        <h2>連絡先</h2>
        <p>サイト制作、改善レビュー、Claude Code導入の相談はメールで受け付けています。</p>
        <a class="button primary" href={`mailto:${profile.links.email}`}>{profile.links.email}</a>
      </section>
    </main>
  </body>
</html>

見出しは h1 を1ページに1つ、各セクションを h2、カード内を h3 にしています。階層を整えると、検索エンジンにもスクリーンリーダーにも構造が伝わります。読み上げ対応を深掘りしたいなら Claude Codeでアクセシビリティを直す記事 も合わせてどうぞ。

見た目はCSSだけで十分です。Tailwindもアニメーションライブラリも、初期版には要りません。

/* src/styles/global.css */
:root {
  --bg: #f7f3ec;
  --panel: #ffffff;
  --text: #1f2933;
  --muted: #5f6c7b;
  --accent: #0f766e;
  --line: #d8dee4;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Noto Sans JP", system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.75;
}

.hero, .section {
  width: min(1120px, calc(100% - 32px));
  margin: 0 auto;
}

.hero { padding: 80px 0 56px; }
.section { padding: 64px 0; }
.eyebrow { color: var(--accent); font-weight: 700; margin: 0 0 12px; }
h1 { font-size: clamp(2.4rem, 7vw, 4.5rem); line-height: 1.05; margin: 0 0 20px; }
h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0 0 20px; }
.lead { max-width: 760px; color: var(--muted); font-size: 1.2rem; }
.role { color: var(--accent); font-weight: 700; margin: 4px 0 8px; }

.actions, .tag-list {
  display: flex; flex-wrap: wrap; gap: 12px; padding: 0; list-style: none;
}

.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 18px;
  border: 1px solid var(--accent); border-radius: 6px;
  text-decoration: none; font-weight: 700;
}
.button.primary { background: var(--accent); color: #fff; }
.button.secondary { background: transparent; color: var(--accent); }

.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.project-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 8px; overflow: hidden;
}
.project-card img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16 / 9; object-fit: cover;
}
.project-body { padding: 20px; }
.contact { border-top: 1px solid var(--line); }

@media (max-width: 640px) {
  .hero { padding-top: 56px; }
  .button { width: 100%; }
}

色は単色の濃淡だけにしないほうが、ポートフォリオらしさが出ます。生成AIっぽい紫グラデーションは避けて、背景は紙のような淡色、アクセントは青緑にしました。自分の作品画像が強い人は、UIの色をむしろ抑えると実績が前に出ます。

ローカルで確認するコマンドはこれだけです。

npm create astro@latest my-portfolio
cd my-portfolio
npm run dev

デプロイ：Cloudflare Pages か Vercel に置く

作ったら公開します。個人ポートフォリオなら、選択肢は実質この2つです。どちらもGitHubと繋げば、pushするだけで自動公開されます。

	Cloudflare Pages	Vercel
向いている人	とにかく速く・安く出したい	Next.jsも使う／管理画面の手厚さ重視
無料枠	帯域・ビルドが太め	個人利用に十分
設定	ビルド出力 dist を指定するだけ	フレームワーク自動検出
独自ドメイン	無料、設定も簡単	無料

僕は静的サイトなら Cloudflare Pages を選ぶことが多いです。世界中に配信網があって表示が速く、無料枠も太い。手順はGitHubにリポジトリを作って push し、ダッシュボードでそのリポジトリを選んで、ビルドコマンドとビルド出力先を指定するだけ。Astroなら出力先は dist です。

GitHubに上げる流れはこうです。

git init
git add .
git commit -m "first portfolio"
git branch -M main
git remote add origin https://github.com/yourname/my-portfolio.git
git push -u origin main

あとはダッシュボード側で、ビルドコマンドに npm run build、ビルド出力ディレクトリに dist を入れれば公開されます。詳しい連携手順は Cloudflare Pagesの公式ドキュメント が一次情報なので、迷ったらそこを見るのが確実です。Vercelを選ぶ場合も、リポジトリを選ぶとAstroを自動で検出してくれます。

ここで一つだけ注意。.env や顧客情報を含むファイルを、間違ってGitHubに上げないこと。.gitignore に .env が入っているか、push前に必ず確認します。

SEOとOGPで、見つけてもらう・シェアされる

公開しただけでは、誰も来ません。最低限のSEOとOGPをやります。難しい話ではなく、地味な作業の積み重ねです。

SEOでやることは、検索する人が使う言葉を、title・description・見出し・画像のaltに自然に入れること。ポートフォリオなら「フロントエンドエンジニア ポートフォリオ」「Astro 制作」「Claude Code 活用支援」のように、相手が打ち込みそうな言葉を選びます。順位を魔法で上げる裏技はありません。

OGPは、SNSでURLを貼ったときに出る、あのカード（画像とタイトル）の設定です。これがないと、シェアされても味気ないテキストリンクになり、クリック率が落ちます。上の index.astro に入れた og:image 用に、public/ogp.png を1枚用意しておきます。1200×630ピクセルが基本サイズです。

このあたりはClaude Codeにレビューさせると速いです。

このAstroポートフォリオをSEOとOGPの観点でレビューしてください。
確認してほしい項目:
- titleとdescriptionが具体的で、検索されそうな言葉が入っているか
- h1/h2/h3の階層が崩れていないか
- 画像altが内容を説明しているか
- og:title / og:description / og:image が揃っているか
- 内部リンクと外部リンクが自然か
修正案は理由付きで、必要な差分だけ出してください。

altや代替テキストの細かいルールは、MDNの img要素リファレンス が信頼できます。ファーストビューのメイン画像だけは loading="lazy" を付けないこと。ここを遅延させると、表示完了の体感がかえって遅くなります。

僕がやらかした落とし穴

正直に書きます。最初に作ったポートフォリオは、見事に空振りでした。

一つ目は、演出を先に作り込んだこと。 スクロール連動の派手な動きから手をつけたら、肝心の実績欄が後回しになり、結局「いろいろやってます」で公開。当然、何の反応もありませんでした。今は逆順です。中身を固めてから、余白と色だけ整える。

二つ目は、実績が抽象的だったこと。 「Reactできます」と書いていた頃は連絡ゼロ。「予約画面の離脱を減らすためにフォーム項目を整理した」に書き換えたら、初めて問い合わせが来ました。Claude Codeに「各案件を、課題・担当・実装・結果の4点で書き直して」と頼むと、一気に具体的になります。

三つ目は、公開前チェックを飛ばしたこと。 リンク切れ、OGP画像の貼り忘れ、スマホで折り返さないボタン。初心者のポートフォリオで本当によく見る事故です。公開前に npm run build を通し、スマホ幅でHero・実績・連絡先を実際に見る。これをサボると、せっかく来た人を入口で逃します。

公開前チェックは、実装と同じ依頼にまとめないのがコツです。レビュー専用のターンを別に作ると、見落としが減ります。

• titleに「誰の何のサイトか」が入っている
• descriptionが120文字以内で、相手のメリットが分かる
• Heroに名前・肩書き・CTAがある
• 実績が3件以上、各案件に役割と結果が書いてある
• 画像にalt・width・heightがある
• OGP画像が設定されている
• 内部リンクと外部リンクが最低1つずつある
• npm run build が成功する
• スマホ幅でボタンとカードが重ならない

よくある質問

Q. 実績がまだありません。何を載せればいい？ A. 業務でなくても構いません。自分用に作った小さなツール、学習で作ったクローン、改善した自分のブログでもOK。大事なのは「なぜ作ったか」「どこで詰まってどう直したか」を書くこと。完成品より過程のほうが、初心者は評価されやすいです。

Q. 静的サイトだと問い合わせフォームは作れない？ A. 作れます。フォーム送信を受けるサービス（FormspreeやCloudflareのフォーム連携など）を使えば、サーバーなしで送信を受け取れます。ただし初期版はメールリンクで十分。フォームは反応が出てきてから足しましょう。

Q. Cloudflare PagesとVercel、結局どっちがいい？ A. 静的サイトだけなら Cloudflare Pages、将来Next.jsも触るなら Vercel、くらいの選び方でOKです。どちらも無料枠で個人ポートフォリオは余裕で動きます。後から乗り換えるのも難しくありません。

Q. ドメインは独自のものを買うべき？ A. 仕事につなげたいなら買ったほうがいいです。yourname.com のような独自ドメインは信頼感が違います。年1,000円台から取れて、Cloudflare Pages にも無料で繋げます。最初は無料の *.pages.dev で公開し、反応を見てから買うのもありです。

Q. Claude Codeに作らせると、自分の実力にならないのでは？ A. 丸投げするとそうなります。でも「方針を説明させてから読む」「差分の意図を質問する」を挟めば、むしろ設計の意図を学べます。AIを写経の相手ではなく、レビューしてくれる先輩として使うのがコツです。

まとめ

ポートフォリオサイトで差がつくのは、技術力そのものより何を載せるかの判断です。成果物・自分の役割・数字。この3点を具体的に書けば、派手な演出がなくても伝わります。

技術は静的サイトで十分。Astroで作って Cloudflare Pages か Vercel に置けば、速くて壊れにくいサイトが無料で公開できます。SEOとOGPは地味な作業の積み重ね、Claude Codeには「要件・実装・レビュー・公開前チェック」と仕事を分けて渡す。

そして何より、まず小さく公開すること。完璧を待つと永遠に出せません。出してから、案件が増えたら実績を足し、反応がなければCTAを変える。ポートフォリオは育てるものです。Claude Codeは、その継続改善の相棒として使うと、ちゃんと価値が出ます。受注まで本気で設計するなら、研修・相談ページ や 教材一覧 ものぞいてみてください。