【実践】ポートフォリオサイトをAIで作る ── 0からデプロイまで完全ハンズオン

この記事で作るもの

シンプルだけど実用的なポートフォリオサイトを、AIとの対話だけで作り、インターネットに公開する。プログラミング経験は一切不要。

完成イメージ：

• ヒーローセクション（名前 + キャッチコピー + プロフィール画像）
• 自己紹介セクション
• スキル一覧（アイコン付きカード）
• 実績/ポートフォリオ（カード形式）
• お問い合わせ・SNSリンク
• レスポンシブ対応（スマホ・タブレット・PC全対応）

所要時間: 約1〜2時間（初めてでも）

---

なぜポートフォリオサイトを作るのか

ポートフォリオサイトは「自分を紹介するための名刺」のようなもの。ただし紙の名刺と違い、24時間365日、世界中の誰でも見られる。

活用シーン別のメリット

活用シーン	具体的なメリット
就職・転職活動	履歴書やエントリーシートにURLを記載。面接官に「実際に動くもの」を見せられる
フリーランス営業	クライアントに実績をすぐ共有。「サイト見てください」の一言で済む
副業のアピール	スキルの証明になる。「何ができるか」を言葉でなく成果物で示せる
学習の記録	自分の成長を可視化。モチベーション維持にも効果的
SNSプロフィール	X（Twitter）やLinkedInのリンク欄に設定。信頼感がアップ

---

全体の流れ

---

Step 1: 環境を準備する

Node.jsのインストール

nodejs.org からLTS版（推奨版）をダウンロードしてインストール。

ターミナル（Mac）またはコマンドプロンプト（Windows）で確認：

node --version
# v22.x.x と表示されればOK

npm --version
# 10.x.x と表示されればOK

Claude Codeのインストール

npm install -g @anthropic-ai/claude-code

インストール後、APIキーの設定を行う：

claude
# 初回起動時にAnthropicアカウントとの連携画面が出る
# ブラウザで認証を完了させる

Gitのインストール確認

Cloudflare Pagesへの公開にはGitが必要。

git --version
# git version 2.x.x と表示されればOK

表示されない場合は git-scm.com からインストール。

---

Step 2: プロジェクトを作る

フォルダを作ってClaude Codeを起動

ターミナルを開いて以下を実行：

mkdir my-portfolio
cd my-portfolio
claude

Claude Codeが起動したら、以下の指示をそのまま貼り付ける。

プロジェクト生成の指示テンプレート

Astro + Tailwind CSSでシンプルなポートフォリオサイトを作ってください。

1ページ構成で以下のセクション：
- ヒーロー（名前 + キャッチコピー + プロフィール画像の丸い枠）
- 自己紹介（テキスト + 経歴のタイムライン）
- スキル一覧（アイコン付きカード形式、6つ）
- 実績/ポートフォリオ（カード形式で3つ、画像+説明+リンク）
- お問い合わせ（メールアドレス + SNSアイコンリンク）
- フッター（コピーライト）

デザイン：
- ダークモード（背景: #0f172a, テキスト: 白）
- アクセントカラー: #3b82f6（青）
- Noto Sans JPフォント（Google Fonts読み込み）
- レスポンシブ対応（モバイルファースト）
- セクション間にスムーズスクロール
- ヘッダーにナビゲーション（各セクションへのリンク）

生成されたプロジェクトを確認する

AIがファイル生成を完了したら、以下のコマンドで開発サーバーを起動：

npm run dev

ブラウザで http://localhost:4321 にアクセスすると、サイトのプレビューが表示される。

プロジェクトの構成

生成されるファイル構成は概ね以下のようになる：

my-portfolio/
├── src/
│   ├── layouts/
│   │   └── Layout.astro        # 共通レイアウト
│   ├── pages/
│   │   └── index.astro         # メインページ
│   ├── components/
│   │   ├── Hero.astro           # ヒーローセクション
│   │   ├── About.astro          # 自己紹介
│   │   ├── Skills.astro         # スキル一覧
│   │   ├── Portfolio.astro      # 実績
│   │   ├── Contact.astro        # お問い合わせ
│   │   └── Footer.astro         # フッター
│   └── styles/
│       └── global.css           # グローバルCSS
├── public/
│   └── images/                  # 画像ファイル置き場
├── astro.config.mjs
├── tailwind.config.cjs
└── package.json

---

Step 3: 内容をカスタマイズ

ここからが一番重要な工程。AIが作ったテンプレートを自分だけのサイトに変えていく。以下のセクション別テンプレートを参考に、Claude Codeへ指示を出そう。

ヒーローセクションのカスタマイズ

ヒーローセクションを以下の内容に変更してください：

名前: 山田太郎
英語名: Taro Yamada
キャッチコピー: 「コードとデザインで、ビジネスを加速させる」
サブテキスト: Webデザイナー / フロントエンドエンジニア

プロフィール画像は public/images/profile.jpg を使用してください。
画像は丸くトリミングして、周囲に青い光彩エフェクトを付けてください。

自己紹介セクションのカスタマイズ

自己紹介セクションを以下に変更してください：

テキスト:
「東京在住のWebデザイナー。5年間のWeb制作会社勤務を経て、
2025年にフリーランスとして独立。UI/UXデザインとフロントエンド
開発を得意とし、これまでに50以上のWebサイトを手がけてきました。
クライアントの課題をデザインの力で解決することを大切にしています。」

経歴タイムライン:
- 2018年: 〇〇大学 情報学部 卒業
- 2018年: 株式会社△△入社 Webデザイナーとして配属
- 2021年: チームリーダーに昇格 大手クライアント案件を担当
- 2023年: 社内MVPを受賞
- 2025年: フリーランスとして独立

スキルセクションのカスタマイズ

スキル一覧を以下の6つに変更してください。
各カードにはアイコン（絵文字でOK）、スキル名、習熟度（パーセント表示のバー）、
簡単な説明を入れてください：

1. HTML/CSS - 95% - 「セマンティックなマークアップとモダンCSS」
2. JavaScript - 85% - 「React, Vue.jsでのSPA開発」
3. Figma - 90% - 「ワイヤーフレームからプロトタイプまで」
4. UI/UXデザイン - 88% - 「ユーザーリサーチに基づく設計」
5. Astro - 80% - 「高速な静的サイト構築」
6. WordPress - 75% - 「テーマ開発・カスタマイズ」

実績セクションのカスタマイズ

実績セクションを以下の3つのプロジェクトに変更してください：

カード1:
- タイトル: ECサイトリニューアル
- 画像: public/images/project1.jpg（なければダミー画像を生成）
- 説明: アパレルブランドのECサイトをフルリニューアル。売上が前年比150%に向上。
- 使用技術: Next.js, Tailwind CSS, Shopify
- リンク: #（ダミー）

カード2:
- タイトル: SaaSダッシュボード
- 画像: public/images/project2.jpg
- 説明: BtoB向けSaaSのダッシュボードUI/UXを設計・実装。ユーザーの操作時間を30%削減。
- 使用技術: React, TypeScript, Recharts
- リンク: #

カード3:
- タイトル: コーポレートサイト
- 画像: public/images/project3.jpg
- 説明: IT企業のコーポレートサイトをAstroで構築。PageSpeed Insightsスコア99を達成。
- 使用技術: Astro, Tailwind CSS, Cloudflare Pages
- リンク: #

お問い合わせセクションのカスタマイズ

お問い合わせセクションを以下に変更してください：

見出し: 「お仕事のご相談はこちら」
説明文: 「Web制作・デザインのご依頼を承っています。お気軽にご連絡ください。」

リンク一覧（アイコン付き）:
- メール: example@email.com
- X (Twitter): @example_user
- GitHub: github.com/example_user
- LinkedIn: linkedin.com/in/example_user

---

Step 4: デザインを調整

サイトの内容が入ったら、次は見た目を自分好みに仕上げていく。

デザインパターンの選択肢

まずは全体のデザインの方向性を決めよう。以下の4パターンから選ぶと統一感が出る。

パターン	特徴	向いている人
ダークモード × ミニマル	黒背景、白文字、余白多め	エンジニア、デザイナー
ライトモード × クリーン	白背景、グレー文字、読みやすい	ライター、コンサル、ビジネス系
グラデーション × リッチ	背景にグラデーション、アニメーション多め	クリエイター、映像系
モノクロ × タイポグラフィ重視	白黒、フォントの大小で魅せる	写真家、建築、アート系

配色の変更

サイト全体の配色を以下に変更してください：

背景色: #0a0a0a（ほぼ黒）
メインテキスト: #e5e5e5（オフホワイト）
アクセントカラー: #6366f1（インディゴ）
サブアクセント: #a855f7（パープル）
カード背景: #1a1a2e（ダークネイビー）
ボーダー: #2a2a4a

ヒーローセクションの背景にアクセントカラーからサブアクセントへの
グラデーションを薄く入れてください。

タイポグラフィの調整

フォントを以下のように変更してください：

見出し: Noto Sans JP（Bold, 700）
本文: Noto Sans JP（Regular, 400）
英字・コード: Inter

ヒーローの名前: 3rem（48px）
セクション見出し: 2rem（32px）
本文: 1rem（16px）
行間: 1.8

アニメーションの追加

以下のアニメーションを追加してください：

- 各セクション: スクロールで画面に入ったらフェードイン（下から上に）
- スキルのプログレスバー: 画面に入ったら0%からアニメーション
- 実績カード: ホバーで少し浮き上がる（shadow増加 + translateY -4px）
- ナビゲーションリンク: ホバーでアンダーライン左から右にスライド
- ヒーローのテキスト: ページ読み込み時にタイプライター風に表示

レスポンシブデザインの確認

レスポンシブデザインを以下の基準で調整してください：

モバイル（〜640px）:
- スキルカードは1列表示
- 実績カードは1列表示
- ヒーローの文字サイズを小さく
- ナビゲーションはハンバーガーメニュー

タブレット（641px〜1024px）:
- スキルカードは2列表示
- 実績カードは2列表示

PC（1025px〜）:
- スキルカードは3列表示
- 実績カードは3列表示
- 最大幅1200pxで中央寄せ

---

Step 5: GitHubにアップロード

サイトが完成したら、まずGitHubにコードを保存する。

GitHubアカウントの準備

github.com でアカウントを作成（無料）。

Claude Codeでの操作

Claude Codeに以下を指示するだけでOK：

GitHubに my-portfolio という名前のリポジトリを作成してpushしてください。
リポジトリはpublicで。

手動でやる場合

# Gitの初期化
git init
git add .
git commit -m "Initial commit: portfolio site"

# GitHubでリポジトリを作成後
git remote add origin https://github.com/ユーザー名/my-portfolio.git
git branch -M main
git push -u origin main

---

Step 6: Cloudflare Pagesで公開

なぜCloudflare Pagesか

項目	Cloudflare Pages	Vercel	Netlify
帯域制限	無制限	100GB/月	100GB/月
ビルド回数	500回/月	100回/月（Hobby）	300分/月
独自ドメイン	無料SSL付き	無料SSL付き	無料SSL付き
料金	完全無料	無料枠あり	無料枠あり
CDN	世界300拠点以上	グローバル	グローバル

デプロイ手順（詳細）

1. Cloudflareアカウントの作成

dash.cloudflare.com にアクセスし、メールアドレスとパスワードでアカウントを作成。無料プランを選択。

2. Pagesプロジェクトの作成

1. ダッシュボードの左メニューから「Workers & Pages」をクリック
2. 「Create」ボタンをクリック
3. 「Pages」タブを選択
4. 「Connect to Git」をクリック

3. GitHubとの連携

1. 「Connect GitHub」をクリック
2. GitHubの認証画面で「Authorize Cloudflare Pages」を許可
3. 「Only select repositories」で my-portfolio を選択
4. 「Install & Authorize」をクリック

4. ビルド設定

設定項目	入力値
Production branch	main
Framework preset	Astro
Build command	npm run build
Build output directory	dist

5. デプロイ実行

「Save and Deploy」をクリック。ビルドが始まり、1〜3分で完了する。

6. URL確認

デプロイが成功すると、my-portfolio-xxx.pages.dev というURLが発行される。このURLにアクセスして、サイトが正しく表示されることを確認。

---

Step 7: 独自ドメイン・SEO設定

pages.dev のURLでも十分だが、独自ドメインとSEO設定を加えると本格的なサイトになる。

独自ドメインの取得と設定

1. ドメインの取得

サービス	特徴	.com の年間費用
エックスサーバードメイン	国内最安レベル	約1,300円
お名前.com	国内最大手	約1,400円
Cloudflare Registrar	原価販売で最安	約1,200円（$8.57）

おすすめはCloudflare Registrar。Cloudflareのダッシュボード内でドメイン取得からDNS設定まで一括管理できる。

2. Cloudflareにドメインを追加

Cloudflare Registrarで取得した場合は自動的に追加される。他のレジストラで取得した場合は以下の手順：

1. Cloudflareダッシュボード → 「Websites」 → 「Add a site」
2. ドメイン名を入力（例: yamada-portfolio.com）
3. 無料プランを選択
4. Cloudflareが指定するネームサーバー（2つ）をメモ
5. ドメインのレジストラ側でネームサーバーをCloudflareのものに変更
6. 反映まで数時間〜最大48時間待つ

3. PagesにカスタムドメインをCDNに紐づけ

1. Workers & Pages → 該当プロジェクト → Custom domains
2. 「Set up a custom domain」をクリック
3. ドメイン名を入力 → 「Activate domain」
4. SSL証明書が自動発行される（数分）

SEO対策の基本設定

ポートフォリオサイトでも最低限のSEO対策をしておくと、名前で検索したときに表示されやすくなる。

メタタグの設定

Claude Codeに以下を指示：

以下のSEO設定を追加してください：

- title: 「山田太郎 | Webデザイナー・フロントエンドエンジニア」
- meta description: 「東京のフリーランスWebデザイナー山田太郎のポートフォリオ。
  UI/UXデザイン、フロントエンド開発の実績を紹介しています。」
- canonical URL: https://yamada-portfolio.com
- lang属性: ja
- OGP設定（og:title, og:description, og:image, og:url）
- Twitter Card設定（summary_large_image）
- favicon（public/favicon.svg を作成）

構造化データ（JSON-LD）の追加

以下の構造化データをhead内にJSON-LD形式で追加してください：

- @type: Person
- name: 山田太郎
- jobTitle: Webデザイナー
- url: https://yamada-portfolio.com
- sameAs: [X, GitHub, LinkedInのURL]

Google Search Consoleへの登録

1. search.google.com/search-console にアクセス
2. 「プロパティを追加」→ URLプレフィックスでサイトURLを入力
3. Cloudflareの場合、DNS TXTレコードで所有権を確認
4. サイトマップ（/sitemap-index.xml）を送信

---

よくあるトラブルと対処法

ビルドエラー系

トラブル	原因	対処法
npm run build でエラー	パッケージの不整合	node_modules と package-lock.json を削除して npm install し直す
TypeScriptエラー	型定義の問題	エラーメッセージをそのままClaude Codeに貼り付けて「修正して」と指示
画像が見つからない	パスが間違っている	画像は public/images/ 直下に置き、/images/xxx.jpg で参照する

デザイン崩れ系

トラブル	原因	対処法
スマホでレイアウトが崩れる	レスポンシブ未対応	「スマホ表示で崩れている。幅375pxで正しく表示されるように修正して」と指示
フォントが適用されない	Google Fonts読み込み失敗	<link> タグのURLを確認。Claude Codeに「フォントが読み込まれていない。確認して」と指示
画像が大きすぎる/小さすぎる	サイズ指定漏れ	max-width: 100% と height: auto が設定されているか確認
ダークモードで文字が見えない	コントラスト不足	「背景色と文字色のコントラスト比を4.5:1以上にして」と指示

デプロイ系

トラブル	原因	対処法
Cloudflareでビルド失敗	Node.jsバージョン不一致	環境変数 NODE_VERSION に 22 を設定
「Page not found」が出る	ビルド出力ディレクトリの設定ミス	Astroの場合は dist を指定しているか確認
CSSが反映されない	キャッシュの問題	ブラウザのキャッシュをクリアするか、シークレットモードで確認
GitHubのpushが拒否される	認証エラー	gh auth login で再認証する

---

ポートフォリオ公開後にやるべきこと

サイトを公開したら終わりではない。以下のステップで継続的に改善していこう。

やること	タイミング	具体的な方法
Googleアナリティクス設置	公開直後	GA4のトラッキングコードを埋め込む
SNSプロフィールにURL設定	公開直後	X, LinkedIn, GitHubのbioにURLを記載
OGP表示の確認	公開直後	OGP確認ツール でSNSシェア時の見え方を確認
PageSpeed Insightsで計測	公開直後	モバイル90点以上を目指す
実績の追加	新しいプロジェクト完了時	カードを追加してpush
デザインの見直し	3〜6ヶ月ごと	トレンドやフィードバックを反映

---

応用: さらにサイトを進化させるアイデア

ベースのポートフォリオが完成したら、以下の機能追加にも挑戦してみよう。すべてClaude Codeへの指示だけで実装できる。

追加機能	指示の例	難易度
ブログ機能	「Astroのコンテンツコレクションでブログを追加して」	中
ダーク/ライトモード切替	「トグルボタンでダークモードとライトモードを切り替えられるようにして」	低
お問い合わせフォーム	「Cloudflare Workers + Resendでお問い合わせフォームを実装して」	中
多言語対応	「日本語と英語の切り替えに対応して」	高
ページ遷移アニメーション	「View Transitions APIでページ遷移アニメーションを追加して」	低
アクセス解析ダッシュボード	「Cloudflare Web Analyticsを導入して」	低

---

FAQ（よくある質問）

Q1. プログラミングの知識がゼロでも本当にできる？

A. できる。 この記事の手順はすべて「Claude Codeに指示を出す → AIがコードを書く」という流れ。HTML/CSS/JavaScriptの知識がなくても、日本語で「こうしたい」と伝えるだけでサイトが完成する。ただし、ターミナル（コマンドライン）の基本操作（コマンドを打つ、Enterで実行）だけは必要。

Q2. 完成までの費用はいくらかかる？

A. Claude CodeのAPI料金のみ。 ポートフォリオサイト1つの構築にかかるAPI費用は数百円程度。ホスティング（Cloudflare Pages）は無料。独自ドメインを取得する場合は年間1,200〜1,500円程度。合計で年間2,000円以下に収まるケースがほとんど。

Q3. Astro以外のフレームワーク（Next.js、Nuxtなど）でも作れる？

A. 作れる。 Step 2の指示テンプレートで「Astro + Tailwind CSS」の部分を「Next.js + Tailwind CSS」や「Nuxt 3 + UnoCSS」に変えるだけ。ただし、静的なポートフォリオサイトであればAstroが最も軽量で高速なのでおすすめ。Next.jsはSSR（サーバーサイドレンダリング）やAPIルートが必要な場合に選ぶと良い。

Q4. サイトを更新するときはどうすればいい？

A. ローカルで修正してgit pushするだけ。 Claude Codeを起動して「実績にこのプロジェクトを追加して」と指示 → 修正が反映されたら git add . && git commit -m "Add new project" && git push で自動的にCloudflare Pagesがリビルドしてくれる。デプロイ待ちは1〜3分程度。

Q5. ポートフォリオに載せる実績がまだない場合は？

A. 架空のプロジェクトや学習成果を載せてOK。 「個人プロジェクト」として作ったものを掲載するのは全く問題ない。例えば「練習で作ったToDoアプリ」「模写したWebサイト」「APIを使ったダッシュボード」など。大切なのは何を作れるかを示すこと。実績が増えてきたら順次差し替えていこう。

Q6. スマホだけで作れる？

A. 残念ながら難しい。 Claude CodeはターミナルベースのCLIツールなので、PCが必要。Macでも Windowsでも Linuxでも動作する。最低限のスペックはメモリ8GB以上のPCがあれば十分。

Q7. ポートフォリオに必要な画像はどうやって用意する？

A. 以下の方法がある。

• Unsplash / Pexels: 無料のストック画像。プロジェクトのサムネイルに使える
• スクリーンショット: 作ったサイトやアプリの画面キャプチャ
• Figmaでモックアップ作成: ブラウザやスマホのフレームに画面をはめ込む
• AI画像生成: DALL-E、Midjourney等で生成（利用規約を確認）

---

まとめ

ポートフォリオサイトは、バイブコーディングの最初の実践プロジェクトとして最適。完成したサイトは実際に名刺やSNSに載せられる実用的なもの。

この記事で解説したステップを振り返ると：

1. 環境構築: Node.js + Claude Codeをインストール（15分）
2. プロジェクト生成: AIに指示を出してサイトの雛形を作成（10分）
3. 内容カスタマイズ: セクション別テンプレートで自分の情報に差し替え（30分）
4. デザイン調整: 配色・フォント・アニメーションを好みに（20分）
5. GitHub + Cloudflare Pages: 無料でインターネットに公開（25分）
6. ドメイン・SEO: 独自ドメインとメタタグで本格的なサイトに（20分）

「自分のサイトがインターネットに公開されている」── この感動が、次のプロジェクトへのモチベーションになる。まずは手を動かして、今日中に公開してみよう。