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

この記事で作るもの

シンプルなプロフィールサイトを、AIとの対話だけで作り、インターネットに公開する。

完成イメージ：

• 自己紹介セクション
• スキル一覧
• 実績/ポートフォリオ
• お問い合わせリンク
• レスポンシブ対応（スマホOK）

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

---

全体の流れ

---

Step 1: 環境を準備する

Node.jsのインストール

nodejs.org から最新版をダウンロードしてインストール。

確認：

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

Claude Codeのインストール

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

---

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

ターミナルを開いて：

mkdir my-portfolio
cd my-portfolio
claude

Claude Codeが起動したら、以下のように指示：

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

1ページ構成で以下のセクション：
- ヒーロー（名前 + キャッチコピー）
- 自己紹介
- スキル一覧（アイコン付き）
- 実績（カード形式で3つ）
- お問い合わせ（SNSリンク）

デザイン：
- ダークモード（背景: #0f172a, テキスト: 白）
- アクセントカラー: #3b82f6（青）
- Noto Sans JPフォント
- レスポンシブ対応

---

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

AIが作ったサイトのテキストを自分の情報に変更：

ヒーローの名前を「山田太郎」に変更して。
キャッチコピーを「Webデザインで世界を変える」にして。
自己紹介を以下に変更して：
「東京在住のWebデザイナー。5年間の制作会社勤務を経て、
2025年にフリーランスとして独立。UI/UXデザインが得意。」

スキルや実績も同様に、自分の内容に差し替えていく。

---

Step 4: デザインを調整

見た目が気に入らなければ、自然言語で修正指示を出す：

ヒーローセクションの文字をもっと大きくして。
スキルのカードにホバーエフェクトを追加して。
全体的にもう少し余白を広げて。

---

Step 5: 公開する

GitHubにpush

GitHubにリポジトリを作ってpushして

Cloudflare Pagesで公開

1. Cloudflare Dashboard にログイン
2. Workers & Pages → Create → Pages → Connect to Git
3. GitHubリポジトリを選択
4. ビルド設定: Framework preset = Astro
5. Save and Deploy

これだけで、あなたのポートフォリオが世界中に公開される。しかも無料。

---

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

トラブル	対処法
ビルドエラー	エラーメッセージをClaude Codeに貼って「修正して」
デザインが崩れる	「スマホで見たらレイアウトが崩れる。修正して」
画像が表示されない	画像のパスが間違っている可能性。AIに確認してもらう
Cloudflareでエラー	デプロイログをコピーしてAIに貼る

---

まとめ

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

「自分のサイトがインターネットに公開されている」── この感動が、次のプロジェクトへのモチベーションになる。