ポートフォリオサイト制作
ポートフォリオサイトは自分をアピールする名刺代わり。AIを活用して、魅力的なポートフォリオを作りましょう。
このレッスンでは、Claude Codeを使って実際にポートフォリオサイトを1から作成します。完成コードも掲載しているので、初めての方でも安心です。
ポートフォリオに必要な要素
自己紹介
名前、肩書き、プロフィール写真
実績・作品
過去の制作物をビジュアルで紹介
スキル
得意な技術、使えるツール
お問い合わせ
連絡先、問い合わせフォーム
事前準備
Claude Codeとは？
Claude Codeは、Anthropic社が提供するAIコーディングアシスタントです。ターミナル（コマンドプロンプト）上で動作し、自然な日本語の指示でファイルの作成・編集を行ってくれます。プログラミング未経験でも、やりたいことを言葉で伝えるだけでコードを書いてくれる強力なツールです。
プロジェクトフォルダの作成
まず、ポートフォリオサイトのファイルを保存するフォルダを作成します。ターミナル（Windowsの場合はコマンドプロンプトまたはPowerShell）を開いて、以下のコマンドを入力してください。
mkdir portfolio-site cd portfolio-site
次に、Claude Codeを起動します。
claude
※ Claude Codeが未インストールの場合は、npm install -g @anthropic-ai/claude-code でインストールしてください。
Step 1: プロジェクトの初期化
Claude Codeが起動したら、以下の指示を入力してください。AIがポートフォリオサイトのHTMLファイルを自動で作成してくれます。
Claude Codeに以下を入力：
ポートフォリオサイトを作成します。以下の構成でindex.htmlファイルを作成してください。Tailwind CSS（CDN版）を使用。1ページ完結のスクロール型。セクション：ヒーロー、自己紹介、スキル、実績、お問い合わせ
AIが行うこと
-
1.
index.htmlファイルを新規作成します - 2. Tailwind CSSのCDNリンクを含むHTML構造を生成します
- 3. 指定した5つのセクション（ヒーロー、自己紹介、スキル、実績、お問い合わせ）を含むページを作成します
※ Claude Codeがファイルの作成許可を求めてきたら「Yes」を選択してください。
完成コード
Claude Codeが生成するコードは毎回少し異なりますが、以下のような完成形になります。このコードをそのままコピーして使うこともできます。
index.html
コピーして使えます<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>山田太郎 - Portfolio</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
html { scroll-behavior: smooth; }
</style>
</head>
<body class="bg-gray-50 text-gray-800">
<!-- ナビゲーション -->
<nav class="fixed top-0 w-full bg-white/90 backdrop-blur shadow-sm z-50">
<div class="container mx-auto px-6 py-4 flex justify-between items-center">
<a href="#" class="text-xl font-bold text-gray-800">T.Yamada</a>
<div class="hidden md:flex space-x-8">
<a href="#about" class="text-gray-600 hover:text-blue-600">自己紹介</a>
<a href="#skills" class="text-gray-600 hover:text-blue-600">スキル</a>
<a href="#works" class="text-gray-600 hover:text-blue-600">実績</a>
<a href="#contact" class="text-gray-600 hover:text-blue-600">お問い合わせ</a>
</div>
</div>
</nav>
<!-- ヒーローセクション -->
<section class="min-h-screen flex items-center justify-center bg-gradient-to-br from-blue-600 to-purple-700 text-white">
<div class="text-center px-6">
<p class="text-lg mb-4 tracking-widest">Web Designer / UI Designer</p>
<h1 class="text-5xl md:text-7xl font-bold mb-6">山田太郎</h1>
<p class="text-xl md:text-2xl mb-10 text-blue-100">使いやすさを、美しさに。</p>
<a href="#works" class="inline-block border-2 border-white px-8 py-3 rounded-full hover:bg-white hover:text-blue-700 transition">実績を見る</a>
</div>
</section>
<!-- 自己紹介セクション -->
<section id="about" class="py-20">
<div class="container mx-auto px-6 max-w-4xl">
<h2 class="text-3xl font-bold text-center mb-12">自己紹介</h2>
<div class="flex flex-col md:flex-row items-center gap-12">
<div class="w-48 h-48 bg-gray-300 rounded-full flex items-center justify-center text-gray-500 text-sm">
写真
</div>
<div class="flex-1">
<h3 class="text-2xl font-bold mb-4">山田 太郎<span class="text-base font-normal text-gray-500 ml-3">Taro Yamada</span></h3>
<p class="text-gray-600 leading-relaxed mb-4">
東京を拠点に活動するWebデザイナーです。ユーザーにとって「使いやすく、美しい」デザインを追求しています。
企業サイトからWebアプリまで、幅広いプロジェクトに対応。クライアントの課題を丁寧にヒアリングし、
最適なデザインソリューションを提案します。
</p>
<p class="text-gray-600 leading-relaxed">
制作実績は50件以上。「デザインの力でビジネスを前に進める」をモットーに、
日々新しい技術やトレンドを学び続けています。
</p>
</div>
</div>
</div>
</section>
<!-- スキルセクション -->
<section id="skills" class="py-20 bg-white">
<div class="container mx-auto px-6 max-w-4xl">
<h2 class="text-3xl font-bold text-center mb-12">スキル</h2>
<div class="grid md:grid-cols-2 gap-8">
<div>
<div class="flex justify-between mb-2">
<span class="font-medium">HTML / CSS</span>
<span class="text-gray-500">90%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-3">
<div class="bg-blue-600 h-3 rounded-full" style="width: 90%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-2">
<span class="font-medium">JavaScript</span>
<span class="text-gray-500">75%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-3">
<div class="bg-yellow-500 h-3 rounded-full" style="width: 75%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-2">
<span class="font-medium">Figma</span>
<span class="text-gray-500">85%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-3">
<div class="bg-purple-500 h-3 rounded-full" style="width: 85%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-2">
<span class="font-medium">Photoshop / Illustrator</span>
<span class="text-gray-500">80%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-3">
<div class="bg-red-500 h-3 rounded-full" style="width: 80%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-2">
<span class="font-medium">WordPress</span>
<span class="text-gray-500">70%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-3">
<div class="bg-green-500 h-3 rounded-full" style="width: 70%"></div>
</div>
</div>
<div>
<div class="flex justify-between mb-2">
<span class="font-medium">UI/UXデザイン</span>
<span class="text-gray-500">85%</span>
</div>
<div class="w-full bg-gray-200 rounded-full h-3">
<div class="bg-indigo-500 h-3 rounded-full" style="width: 85%"></div>
</div>
</div>
</div>
</div>
</section>
<!-- 実績セクション -->
<section id="works" class="py-20">
<div class="container mx-auto px-6 max-w-5xl">
<h2 class="text-3xl font-bold text-center mb-12">実績</h2>
<div class="grid md:grid-cols-3 gap-8">
<!-- 作品1 -->
<div class="group relative overflow-hidden rounded-lg shadow-lg">
<img src="https://via.placeholder.com/600x400/3b82f6/ffffff?text=Corporate+Site" alt="企業サイト" class="w-full h-64 object-cover group-hover:scale-110 transition duration-300">
<div class="absolute inset-0 bg-blue-600/80 opacity-0 group-hover:opacity-100 transition duration-300 flex items-center justify-center">
<div class="text-center text-white">
<p class="font-bold text-lg">株式会社ABC コーポレートサイト</p>
<span class="text-sm bg-white/20 px-3 py-1 rounded-full mt-2 inline-block">企業サイト</span>
</div>
</div>
</div>
<!-- 作品2 -->
<div class="group relative overflow-hidden rounded-lg shadow-lg">
<img src="https://via.placeholder.com/600x400/8b5cf6/ffffff?text=EC+Site" alt="ECサイト" class="w-full h-64 object-cover group-hover:scale-110 transition duration-300">
<div class="absolute inset-0 bg-purple-600/80 opacity-0 group-hover:opacity-100 transition duration-300 flex items-center justify-center">
<div class="text-center text-white">
<p class="font-bold text-lg">Organic Shop ECサイト</p>
<span class="text-sm bg-white/20 px-3 py-1 rounded-full mt-2 inline-block">ECサイト</span>
</div>
</div>
</div>
<!-- 作品3 -->
<div class="group relative overflow-hidden rounded-lg shadow-lg">
<img src="https://via.placeholder.com/600x400/10b981/ffffff?text=Web+App" alt="Webアプリ" class="w-full h-64 object-cover group-hover:scale-110 transition duration-300">
<div class="absolute inset-0 bg-green-600/80 opacity-0 group-hover:opacity-100 transition duration-300 flex items-center justify-center">
<div class="text-center text-white">
<p class="font-bold text-lg">TaskFlow タスク管理アプリ</p>
<span class="text-sm bg-white/20 px-3 py-1 rounded-full mt-2 inline-block">Webアプリ</span>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- お問い合わせセクション -->
<section id="contact" class="py-20 bg-white">
<div class="container mx-auto px-6 max-w-2xl">
<h2 class="text-3xl font-bold text-center mb-12">お問い合わせ</h2>
<form class="space-y-6">
<div>
<label class="block text-sm font-medium mb-2">お名前</label>
<input type="text" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="山田 花子">
</div>
<div>
<label class="block text-sm font-medium mb-2">メールアドレス</label>
<input type="email" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="example@email.com">
</div>
<div>
<label class="block text-sm font-medium mb-2">メッセージ</label>
<textarea rows="5" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="お気軽にご連絡ください"></textarea>
</div>
<button type="submit" class="w-full bg-blue-600 text-white py-3 rounded-lg hover:bg-blue-700 transition font-medium">送信する</button>
</form>
</div>
</section>
<!-- フッター -->
<footer class="bg-gray-800 text-white py-8 text-center">
<p class="text-gray-400">© 2024 Taro Yamada. All rights reserved.</p>
</footer>
</body>
</html>
ポイント：上記のコードを index.html という名前でファイルに保存するだけで、ポートフォリオサイトが完成します。Claude Codeを使えば自動で作成されますが、手動でコピー&ペーストしてもOKです。
ブラウザで確認
作成したサイトをブラウザで表示してみましょう
-
1.
エクスプローラー（Finder）で
portfolio-siteフォルダを開きます -
2.
index.htmlファイルをダブルクリックします - 3. ブラウザ（Chrome推奨）が自動的に開き、サイトが表示されます
各セクションの確認ポイント
ヒーローセクション
画面いっぱいに青~紫のグラデーション背景が表示され、中央に名前「山田太郎」とキャッチコピー「使いやすさを、美しさに。」が表示されます。「実績を見る」ボタンをクリックすると、実績セクションまでスクロールします。
自己紹介セクション
丸いプロフィール写真エリア（プレースホルダー）の横に、名前とプロフィール文が表示されます。スマホでは縦並びになります。
スキルセクション
色付きのプログレスバーで各スキルの習熟度が表示されます。HTML/CSS 90%、JavaScript 75%、Figma 85%など、視覚的にわかりやすくなっています。
実績セクション
3つの作品カードが横並びで表示されます。カードにマウスを乗せると画像が拡大し、オーバーレイで作品名とカテゴリーが表示されます。
お問い合わせセクション
お名前・メールアドレス・メッセージの入力フォームと「送信する」ボタンが表示されます。（このフォームは見た目のみで、実際の送信機能はありません）
カスタマイズしてみよう
サイトが表示されたら、次は自分の情報に置き換えていきましょう。Claude Codeに以下のように指示するだけで、簡単にカスタマイズできます。
Claude Codeに以下を入力：
以下の変更をしてください： ・名前を「あなたの名前」に変更 ・カラーテーマを青系から緑系に変更 ・スキルの内容を以下に変更： - Webデザイン 85% - 動画編集 70% - SNS運用 90% - ライティング 75% ・プロフィール文を自分の自己紹介に変更
カスタマイズのヒント
色を変えたい場合
「カラーテーマを赤系に変更して」「ヒーローの背景をオレンジのグラデーションにして」など、日本語で色の指示をするだけでOKです。
セクションを追加したい場合
「実績の下に"お客様の声"セクションを追加して」のように指示すると、新しいセクションが追加されます。
プロフィール写真を入れたい場合
写真ファイルを同じフォルダに入れて、「プロフィール写真を photo.jpg に変更して」と指示します。
実績の画像を変えたい場合
作品のスクリーンショットをフォルダに入れて、「作品1の画像を work1.jpg に変更して」と指示します。
よくあるエラーと対処法
ページが真っ白になる
原因1：Tailwind CSSのCDNが読み込めていない
対処 → インターネット接続を確認してください。オフラインではTailwind CDNが動作しません。HTMLの<head>内に <script src="https://cdn.tailwindcss.com"></script> があるか確認してください。
原因2：HTMLタグの閉じ忘れ
対処 → Claude Codeに「HTMLの構文エラーがないかチェックして修正してください」と指示してください。
レイアウトが崩れる
原因：Tailwind CSSのクラス名の打ち間違い
対処 → 手動でコードを編集した場合、クラス名にタイプミスがないか確認してください。例えば flx（正しくは flex）のような間違いです。Claude Codeに「レイアウトが崩れているので確認して修正して」と伝えると自動で直してくれます。
画像が表示されない
原因：画像ファイルのパスが間違っている
対処 → 画像ファイルが index.html と同じフォルダにあるか確認してください。ファイル名の大文字・小文字も区別されるので注意（Photo.jpg と photo.jpg は別ファイルとして扱われます）。
スマホで見るとデザインが違う
原因：レスポンシブ対応の問題
対処 → ブラウザの開発者ツール（F12キー）でスマホ表示を確認できます。Claude Codeに「スマホ表示で崩れている部分を修正して」と指示すると、レスポンシブ対応を調整してくれます。
ポートフォリオのコツ
実績は厳選する
量より質。最も自信のある作品を3〜6点程度に絞る
プロセスも見せる
完成品だけでなく、制作過程や工夫した点も紹介
更新を続ける
定期的に新しい作品を追加して鮮度を保つ
まとめ
- ✓ 自己紹介、実績、スキル、連絡先が基本構成
- ✓ AIに構成→各セクションの順で作成を依頼
- ✓ 実績は厳選して質を重視
- ✓ 定期的に更新して最新の状態を保つ