💻 Claude Code入門 📖 約20分で読めます

Claude Codeでウェブサイトを0から作る実践ガイド

プロジェクト作成からデプロイまでの完全チュートリアル

クロガイド｜Claude＆Claude Codeを無料で学ぼう

AI基礎からプロンプト術、Claude Codeの使い方まで。知識レッスンとクイズ式トレーニングで、AIスキルを段階的にアップ。ユーザー登録不要、すべて無料で今すぐ始められます。

はじめに ― Claude Codeでウェブサイトを作るメリット

ウェブサイトの構築は、HTML・CSS・JavaScriptの基礎から、レスポンシブデザイン、パフォーマンス最適化、デプロイまで多くの工程を含みます。Claude Codeを活用すれば、これらの工程を対話形式で効率的に進めることができます。

この記事では、ポートフォリオサイトを題材に、プロジェクト作成からデプロイまでの全工程をClaude Codeとの実際の会話形式で解説します。

この記事で作るもの

サイト種類: 個人ポートフォリオサイト（シングルページ）
技術: HTML5 + Tailwind CSS + バニラJavaScript
機能: ヒーローセクション、実績紹介、スキル一覧、お問い合わせフォーム
対応: レスポンシブデザイン（モバイル・タブレット・デスクトップ）

Step 1: プロジェクトの初期セットアップ

まず、Claude Codeでプロジェクトのディレクトリ構造を作成します。ターミナルでプロジェクトのルートディレクトリに移動し、Claude Codeを起動しましょう。

プロジェクト作成の会話例

> ポートフォリオサイトのプロジェクトを作成して。
> ディレクトリ構造は以下の通りにして：
> - src/ (HTML, CSS, JS)
> - src/assets/images/ (画像)
> - dist/ (ビルド出力)
> Tailwind CSSをCDNで使う構成にして。

Claude Code:
ポートフォリオサイトのプロジェクトを作成します。

まず、ディレクトリ構造を作成します...
[ディレクトリ作成]

次に、基本的なHTML・CSSファイルを配置します...
[ファイル作成完了]

✓ プロジェクト構造が完成しました。

Claude Codeはディレクトリの作成からファイルの雛形生成まで一括で行ってくれます。この時点で以下のような構造ができあがります。

portfolio/
├── src/
│   ├── index.html
│   ├── css/
│   │   └── custom.css
│   ├── js/
│   │   └── main.js
│   └── assets/
│       └── images/
├── package.json
├── tailwind.config.js
└── CLAUDE.md

ポイント: CLAUDE.mdを最初に作る

プロジェクト作成時にCLAUDE.mdも一緒に作ることで、以降の会話でClaude Codeがプロジェクトの文脈を理解した状態で作業できます。技術スタック、デザイン方針、ファイル構成を記載しておきましょう。

Step 2: HTML構造の構築

サイトの骨格となるHTML構造を作成します。セマンティックなマークアップを意識して、Claude Codeに指示を出しましょう。

HTML構造の作成指示

> index.htmlにポートフォリオサイトの構造を作って。
> セクション構成：
> 1. ナビゲーション（固定ヘッダー）
> 2. ヒーローセクション（名前・肩書き・CTAボタン）
> 3. Aboutセクション（自己紹介）
> 4. Worksセクション（実績カード×6）
> 5. Skillsセクション（スキルバー表示）
> 6. Contactセクション（お問い合わせフォーム）
> 7. フッター
> SEOを意識したmeta情報も入れて。
> アクセシビリティ属性（aria-label等）も追加して。

重要なのは、各セクションの具体的な構成要素まで指定することです。「ポートフォリオサイトを作って」だけでは、Claude Codeがどのようなセクション構成にすべきか判断できません。

生成されるHTMLの品質を上げるコツ

指示の観点	良い指示の例	効果
セマンティクス	「header, main, section, footerタグを使って」	適切なHTML5タグが使われる
アクセシビリティ	「aria-label, role属性を付けて」	スクリーンリーダー対応になる
SEO	「OGP・meta descriptionも設定して」	検索・SNSシェア対応になる
構造	「h1は1つだけ、h2をセクション見出しに」	見出し階層が正しくなる

Step 3: Tailwind CSSでデザインを構築

HTML構造ができたら、Tailwind CSSでビジュアルデザインを実装します。Claude Codeにデザインの方向性を具体的に伝えることがポイントです。

デザイン指示の会話例

> ヒーローセクションをデザインして。
> - 背景: グラデーション（青紫→紺色）
> - 名前: 白色、太字、text-5xl
> - 肩書き: text-xl、半透明の白
> - CTAボタン: 白背景に青紫文字、hover時に拡大
> - 中央寄せ、画面高さ100vhで表示
> - フェードインアニメーション付き

Claude Code:
ヒーローセクションのスタイリングを実装します。

Tailwind CSSのユーティリティクラスで構成し、
カスタムアニメーションはcustom.cssに記述します。

[index.html のヒーローセクションを更新]
[custom.css にアニメーション定義を追加]

✓ ヒーローセクションのデザインが完成しました。

セクションごとのデザイン指示テンプレート

効果的なデザイン指示の構成

レイアウト: 配置方法（Grid / Flexbox / 中央寄せ等）を指定
色彩: 背景色・文字色・アクセントカラーを具体的に
タイポグラフィ: フォントサイズ・太さ・行間を指定
余白: padding / marginの大きさを指定
装飾: 影・角丸・ボーダー・グラデーション等
アニメーション: ホバー効果・スクロールアニメーション

プロのTips: デザインの参考サイトのURLをClaude Codeに伝えると、類似のデザインテイストで実装してくれます。「○○のサイトのような雰囲気で」と伝えるのも効果的です。

Step 4: JavaScriptでインタラクティブ機能を追加

静的なページに動きを加えます。よくあるインタラクション機能をClaude Codeに実装してもらいましょう。

JavaScript機能の実装指示

> 以下のJavaScript機能をmain.jsに実装して：
> 1. スムーススクロール（ナビリンクをクリックで対応セクションへ）
> 2. ナビバーのスクロール時背景変化（透明→白）
> 3. スクロールアニメーション（Intersection Observer使用）
> 4. モバイルハンバーガーメニューの開閉
> 5. お問い合わせフォームのバリデーション
> バニラJSで書いて。ES6+構文を使用。

JavaScriptの実装で重要なのは、使用するAPIやライブラリを明確にすることです。「スクロールアニメーション」だけでは、jQueryを使うか、GSAPを使うか、Intersection Observerで自前実装するか、Claude Codeが判断に迷います。

機能ごとの指示のポイント

機能	指示に含めるべき詳細
フォームバリデーション	必須項目、メール形式チェック、エラーメッセージの表示位置
スクロールアニメーション	トリガー位置（何%表示で発火）、アニメーション種類
ハンバーガーメニュー	開閉アニメーション、オーバーレイの有無、aria属性
画像の遅延読み込み	プレースホルダーの種類、フェードイン有無

Step 5: レスポンシブデザインの実装

モバイル・タブレット・デスクトップの3段階でレスポンシブ対応を行います。

レスポンシブ対応の指示例

> サイト全体をレスポンシブ対応にして。
> ブレークポイント：
> - モバイル: ~767px（1カラム、ナビはハンバーガー）
> - タブレット: 768px~1023px（2カラムグリッド）
> - デスクトップ: 1024px~（3カラムグリッド、最大幅1280px）
>
> 特に以下を確認して修正して：
> - Worksセクションのカード配置
> - ヒーローセクションのフォントサイズ
> - ナビゲーションの切り替え
> - 画像のサイズ調整

Claude Codeでレスポンシブ確認する方法

Claude Codeは実際のブラウザ表示を確認できませんが、以下のように依頼できます。

「各ブレークポイントでのレイアウトをテキストで図示して」
「レスポンシブ関連のCSSをすべて一覧にして確認させて」
「モバイルで横スクロールが出る原因がないかチェックして」

Step 6: パフォーマンス最適化とデプロイ

サイトが完成したら、パフォーマンス最適化を行い、デプロイします。

最適化とデプロイの指示例

> サイトを本番用に最適化して：
> 1. CSSのminify
> 2. JSのminify
> 3. 画像の最適化設定（WebP形式への変換案内）
> 4. metaタグの最終確認
> 5. Netlifyへのデプロイ用設定ファイル（netlify.toml）作成
> 6. _redirectsファイルの作成

Claude Code:
本番環境への最適化を実施します。

1. package.jsonにビルドスクリプトを追加...
2. netlify.tomlを作成...
3. metaタグを確認・修正...

[最適化完了]

デプロイ手順:
$ npm run build
$ netlify deploy --prod --dir=dist

デプロイ先ごとの設定

デプロイ先	必要な設定	Claude Codeへの指示例
Netlify	netlify.toml, _redirects	「Netlifyデプロイ用の設定ファイルを作って」
Vercel	vercel.json	「Vercel用の設定を追加して」
GitHub Pages	.github/workflows/deploy.yml	「GitHub Actionsでデプロイするワークフローを作って」
レンタルサーバー	.htaccess, FTP設定	「XServer向けの.htaccessを作って」