Claude CodeでWebサイト・LPを爆速で作る方法｜プロンプト実例付き完全ガイド
「Webサイトを新しく作りたいけど、外注すると数十万円かかるし、納期も数週間はかかる…」
「LPをすぐ作って広告を回したいのに、社内にコーディングできる人がいない…」
こうした悩みを抱えている方は多いのではないでしょうか。
実は今、Claude Code（クロードコード）というAIコーディングツールを使えば、自然言語で指示を出すだけで本格的なWebサイトやLPを作成できる時代になっています。
Claude Codeは、Anthropic社が提供するCLI型のAI開発エージェントです。
ターミナル上で「こういうLPを作って」と日本語で指示するだけで、HTML・CSS・JavaScriptのコード生成からファイル配置まで自動で実行してくれます。
この記事では、Claude Codeを使ってWebサイト・LPを爆速で作成する具体的な方法を、プロンプトの実例付きで徹底解説します。
環境構築から実際の制作手順、成果を出すプロンプトの書き方、クオリティを上げるTipsまで、この記事を読めば今日からClaude CodeでのWeb制作を始められます。
Claude Codeとは？基本を30秒で理解する
Claude Codeとは、Anthropic社が提供するAIコーディングツールで、ターミナルから自然言語で指示するだけでコードの生成・編集・実行を自動で行えるCLI型の開発エージェントです。
Web制作の文脈でいえば、「こういうLPを作って」と日本語で伝えるだけで、HTML・CSS・JavaScriptのファイルをまるごと自動生成してくれるツールだと考えてください。
2025年2月にプレビュー版としてリリースされ、同年5月に正式公開。
その後も急速に進化を続けており、2026年現在では最も注目されているAIコーディングツールの1つとなっています。
Claude Codeの概要と主な特徴
Claude Codeの最大の特徴は、「自律的にコーディングを進めてくれる」という点です。
従来のコード補完ツールのように1行ずつ提案するのではなく、プロジェクト全体の構造を理解した上で、ファイルの作成・編集・コマンド実行・Git操作まで一貫して自動で行います。
| 提供元 | Anthropic社（米国のAI企業） |
| ツール形式 | CLI（コマンドライン）／VS Code拡張／デスクトップアプリ／Web版 |
| 利用料金 | Proプラン（月額$20・約3,000円）以上で利用可能 |
| 使用モデル | Claude Sonnet 4.6（デフォルト）/ Opus 4.6も利用可 |
| 主な用途 | Webサイト・LP制作、アプリ開発、バグ修正、リファクタリング、テスト作成など |
| 対応OS | macOS / Linux / Windows（WSL経由） |
利用するにはClaude Proプラン（月額$20・約3,000円）以上の契約が必要です。
Claude Code自体に追加料金はかからず、Claudeのサブスクリプションの利用枠内で使える仕組みになっています。
ヘビーに使いたい場合は、Max 5x（月額$100）やMax 20x（月額$200）といった上位プランも用意されています。
他のAIコーディングツールとの違い
AIコーディングツールとしては、CursorやGitHub Copilotも有名ですよね。
「Claude Codeは他のツールと何が違うの？」と気になる方も多いと思います。
結論からいうと、Claude Codeは「自律型エージェント」として大きな単位のタスクを丸ごと任せられるのが最大の差別化ポイントです。
| 比較項目 | Claude Code | Cursor | GitHub Copilot |
|---|---|---|---|
| タイプ | CLI型エージェント | AI統合IDE | コード補完ツール |
| 自律性 | 高い（指示後に自律実行） | 中程度（エディタ内で協調） | 低い（1行〜数行の補完中心） |
| 得意な作業単位 | プロジェクト全体・大きなタスク | ファイル単位・中規模タスク | 行〜関数単位 |
| 使用AIモデル | Claudeモデル専用 | 複数モデル選択可 | GPT系モデル中心 |
| 操作環境 | ターミナル／VS Code／Web | 専用エディタ（VS Codeベース） | 各種エディタの拡張機能 |
| 料金目安 | 月額$20〜（Claudeプランに含まれる） | 月額$20〜 | 月額$10〜 |
Cursorはエディタ上で人間と協調しながらコードを書くスタイルで、細かい修正や既存コードの編集に向いています。
一方、Claude Codeは「LP全体を作って」「このバグを直してテストも書いて」といった大きなタスクを丸投げできるのが強みです。
Web制作の現場では、ゼロからサイトやLPを立ち上げるフェーズでClaude Codeが特に力を発揮します。
Web制作においてClaude Codeが強い理由
数あるAIコーディングツールの中で、なぜWeb制作にClaude Codeが特に向いているのでしょうか。
その理由は大きく3つあります。
- ✓日本語の理解力が高い：Claudeは日本語での指示理解に優れており、「ファーストビューにCTAボタンを配置して」といった自然な日本語がそのまま通る
- ✓HTML/CSS/JSの生成精度が高い：Web制作に必要なフロントエンド技術の生成品質が高く、レスポンシブ対応やアニメーションも自然に組み込んでくれる
- ✓プロジェクト全体を一括で生成できる：フォルダ構成の作成からファイル生成、依存関係のインストールまで1回の指示で完結する
特にLP制作においては、「ファーストビュー → 課題提起 → 特徴説明 → 実績 → CTA」といったセクション構成を指示するだけで、デザイン付きのHTMLが一式生成されるケースも珍しくありません。
もちろん、生成されたコードをそのまま本番に使えるかどうかはケースバイケースですが、「たたき台を爆速で作る」用途としてはこれ以上ないツールと言えます。
Claude CodeでWebサイト・LPを作るメリットと注意点
Claude CodeによるWeb制作は、従来の開発フローと比べて圧倒的なスピードとコスト削減が期待できます。
一方で、現時点ではまだ万能ではなく、知っておくべき限界もあります。
ここでは、メリット・注意点・向き不向きを整理して、Claude Codeを導入すべきかどうかの判断材料をお伝えします。
開発スピード・コスト・品質面のメリット
Claude CodeでWebサイトやLPを作る最大の魅力は、なんといっても開発スピードです。
従来なら数日〜数週間かかっていた作業が、プロンプト1つで数分〜数十分に短縮されるケースもあります。
- ✓開発スピードが圧倒的に速い：LP1ページなら、プロンプトを投げてから数分で初版が完成することも
- ✓外注コストを大幅にカット：LP制作を外注すると数十万円かかるところ、月額$20のClaude Proプランだけで制作できる
- ✓A/Bテスト用の複数パターンを即座に用意できる：「CTAの色を変えたバージョンも作って」と追加指示するだけ
- ✓修正・イテレーションが高速：「ファーストビューの文言をこう変えて」「余白をもう少し広げて」といった微調整もすぐ反映される
- ✓非エンジニアでも制作に参加できる：日本語の指示で動くため、マーケ担当者やディレクターが直接プロトタイプを作れる
ある導入事例では、開発チームの83%が生産性向上を実感し、66%が1日あたり1〜2時間の時間短縮を達成したという報告もあります。
特にマーケティング部門にとっては、「思いついたLPをすぐ形にできる」というスピード感が大きな武器になります。
広告キャンペーンに合わせたLPを即座に用意したり、複数パターンのLPでA/Bテストを回したりと、施策の回転速度そのものが上がるのが最大のメリットです。
現時点での限界・注意すべきポイント
一方で、Claude Codeにも現時点ではいくつかの限界があります。
過度な期待は禁物なので、事前に把握しておきましょう。
- ✕デザインの独自性には限界がある：生成されるデザインは「きれいだが汎用的」になりがち。ブランド独自の世界観を追求するなら、プロのデザイナーとの併用が必要
- ✕生成コードの品質にばらつきがある：プロンプトの精度によって出力結果が大きく変わる。最低限のHTML/CSSの知識があると、品質チェックがしやすい
- ✕利用枠の制限がある：Proプランでは5時間ごとに利用枠がリセットされる仕組み。長時間の連続作業では枠を使い切ることがある
- ✕画像素材は自動で用意されない：HTML/CSS/JSは生成してくれるが、写真やイラストなどの画像素材は別途用意する必要がある
- ✕本番環境へのデプロイは別途必要：コードの生成まではやってくれるが、サーバーへのアップロードやドメイン設定などは手動で行う必要がある
とくに重要なのは、「Claude Codeは完璧なサイトを一発で作ってくれるツールではない」という点です。
あくまで「高速でたたき台を作り、人間がブラッシュアップする」というワークフローが前提になります。
プロンプトの書き方次第で出力品質は大きく変わるので、この記事の後半で紹介するプロンプトテンプレートを活用することで、品質のばらつきは大幅に抑えられます。
向いているケース・向いていないケース
ここまでのメリット・注意点を踏まえて、Claude CodeでのWeb制作が向いているケースと向いていないケースを整理しておきます。
- LP・キャンペーンページをスピード重視で量産したい
- プロトタイプや社内提案用のモックアップを素早く作りたい
- A/Bテスト用に複数パターンのLPを用意したい
- 外注コストを抑えて自社でWeb制作を内製化したい
- エンジニアのリソースが限られている中で施策を回したい
- シンプルなコーポレートサイトやポートフォリオを作りたい
- ピクセル単位のデザイン精度が求められるブランドサイト
- 複雑なバックエンド連携が必要なECサイトやSaaS
- 大規模なCMS構築やWordPressのフルカスタマイズ
- 厳密なセキュリティ要件がある金融・医療系サイト
- 既存の大規模コードベースの改修がメインの案件
まとめると、Claude Codeは「スピード重視でLPやシンプルなWebサイトを作りたい」「まずたたき台を素早く形にしたい」というニーズにベストマッチします。
逆に、デザインの独自性や複雑な機能実装が必要なプロジェクトでは、Claude Codeだけで完結させるのは難しいケースが多いです。
その場合も、「Claude Codeでベースを爆速で作り、プロのデザイナーやエンジニアが仕上げる」というハイブリッド運用であれば、全体の工期を大幅に短縮できます。
- 広告運用と連動してLPを素早く回したいマーケティング担当者
- 開発リソースが不足している中小企業のWeb担当者
- 新規事業のMVP（最小限の機能を持つ製品）を素早く検証したいスタートアップ
- 社内向けのツールやダッシュボードを自分で作りたいビジネスサイドの方
- AI活用による業務効率化を検討しているDX推進担当者
【実践】Claude CodeでWebサイト・LPを作る手順
ここからは、実際にClaude Codeを使ってWebサイトやLPを作る具体的な手順を解説します。
環境構築からコード生成、デプロイまでの一連の流れを、初めての方でもわかるようにステップごとにお伝えします。
Claude Codeは「プロンプトを投げるだけ」で動くツールですが、事前準備と作業の進め方を押さえておくだけで、出力の品質が格段に変わります。
環境構築（インストール〜初期設定）
Claude Codeを使い始めるまでの準備は、実はとてもシンプルです。
2026年現在はネイティブインストーラーが用意されており、コマンド1行でインストールが完了します。
1
Claude公式サイト（claude.ai）でアカウントを作成し、Proプラン（月額$20・約3,000円）以上に加入します。Claude Codeは無料プランでは利用できないため、有料プランへの登録が必須です。
2
ターミナルを開いて、以下のコマンドを実行します。
macOS（Homebrew）：brew install anthropic/tap/claude-code
Windows：winget install Anthropic.ClaudeCode（Git for Windowsが必要）
Linux / npm：npm install -g @anthropic-ai/claude-code
インストール後、claude --version で正しく入ったか確認しましょう。デスクトップアプリやVS Code拡張でも利用可能です。
3
ターミナルで claude と入力して初回起動します。ブラウザが自動で開くので、ClaudeアカウントでログインすればOKです。APIキーの手動設定は不要で、OAuthによる認証だけで完了します。
4
Web制作用のフォルダを作成し、そのフォルダ内でClaude Codeを起動します。
mkdir my-lp-project
cd my-lp-project
claude
Claude Codeは起動したフォルダを作業ディレクトリとして認識するため、必ず専用フォルダの中で起動することが重要です。
初回起動時に「権限モード」を聞かれますが、初心者の方は「Suggested」を選んでおけば安心です。
このモードでは、ファイルを変更する前に必ず確認が入るため、意図しない変更が起きることはありません。
Webサイト作成の基本フロー
環境構築ができたら、さっそくWebサイトを作ってみましょう。
Claude CodeでのWebサイト作成は、大まかに「要件を伝える → コードを生成させる → 確認・修正する」の繰り返しです。
たとえば、シンプルなコーポレートサイトを作る場合、以下のようにプロンプトを投げます。
– 業種：Web制作会社
– ページ構成：ヘッダー、ファーストビュー（キャッチコピー＋CTAボタン）、サービス紹介（3つ）、実績セクション、お問い合わせフォーム、フッター
– デザイン：モダンでクリーンなデザイン、カラーは紺×白ベース
– レスポンシブ対応必須
– HTML/CSSのみで作成（JavaScriptは最小限）
これだけの指示で、Claude Codeはフォルダ構成の作成から、HTMLファイル・CSSファイルの生成まで一気に実行してくれます。
- ✓ページの目的とターゲットを最初に明記する
- ✓セクション構成を箇条書きで具体的に指定する
- ✓カラーやフォント、デザインの方向性を伝える
- ✓技術要件（レスポンシブ対応、使用フレームワーク等）を明示する
- ✓一度に全部作らせず、セクション単位で段階的に進めるのも有効
生成されたコードは、ブラウザで開いてすぐ確認できます。
気に入らない部分があれば、「ファーストビューの背景色をもっと濃くして」「CTAボタンのサイズを大きくして」といった追加指示を出すだけで修正が反映されます。
LP作成の具体的な進め方
Claude CodeでLPを作成するには、ファーストビュー・CTAボタン・特徴セクションなど各構成要素をプロンプトで明示し、段階的に指示を出すのが効果的です。
LPはWebサイトよりも「コンバージョンにつなげる」という明確な目的があるため、プロンプトにもその意図を盛り込むことが重要です。
以下は、BtoB向けサービスのLPを作る場合のプロンプト例です。
【目的】無料トライアルへの申し込みを獲得するLP
【ターゲット】中小企業の経営者・DX担当者
【セクション構成】
1. ファーストビュー：キャッチコピー＋サブコピー＋CTAボタン（無料で始める）
2. 課題提起：ターゲットが抱える3つの課題を提示
3. サービス紹介：3つの特徴をアイコン付きで説明
4. 導入実績：数字で示す（導入社数、満足度、削減時間）
5. 利用者の声：3件のテスティモニアル
6. 料金プラン：3プランの比較表
7. FAQ：5問
8. CTA：最終の申し込みボタン
【デザイン】
– カラー：ブルー（#2563EB）×ホワイト×ライトグレー
– フォント：ゴシック体ベース
– モダンで信頼感のあるデザイン
– レスポンシブ対応必須
– HTML/CSS/JSで1ファイルにまとめて出力
このように、LPの目的・ターゲット・セクション構成・デザインの方向性を具体的に伝えることで、実用レベルのLPが一発で生成されます。
- ✕ダミーテキストや数値はそのまま本番に使わない（必ず実際の情報に差し替える）
- ✕画像はClaude Codeでは生成されないので別途用意する（プレースホルダー画像が入る）
- ✕フォーム送信先（バックエンド処理）は別途実装が必要
- ✕生成後は必ずスマホ表示でのレイアウト崩れをチェックする
デプロイ・公開までの流れ
Claude Codeで生成したWebサイトやLPは、そのままではローカル環境にあるHTMLファイルです。
実際にインターネット上で公開するには、サーバーにアップロード（デプロイ）する必要があります。
静的なHTML/CSSサイトであれば、以下のような無料〜低コストのホスティングサービスで簡単に公開できます。
| サービス名 | 料金 | 特徴 | おすすめシーン |
|---|---|---|---|
| Vercel | 無料枠あり | GitHubと連携して自動デプロイが可能。操作が簡単 | React/Next.jsを使ったサイト |
| Netlify | 無料枠あり | ドラッグ&ドロップでデプロイ可能。フォーム処理も対応 | 静的HTML/CSSサイト全般 |
| GitHub Pages | 無料 | GitHubリポジトリから直接公開できる | ポートフォリオ・テスト公開 |
| Cloudflare Pages | 無料枠あり | 高速CDN配信。カスタムドメイン対応 | 本番運用のLP・Webサイト |
たとえばNetlifyの場合、以下のようにClaude Codeに指示するだけでデプロイの準備まで進められます。
Claude Codeが必要な設定ファイルを生成してくれるので、あとはNetlifyの管理画面からGitHubリポジトリを連携するか、生成されたファイルをドラッグ&ドロップするだけで公開が完了します。
AI活用によるWeb制作の効率化なら、freedoorにご相談ください
「Claude Codeを使ってみたいが、社内にノウハウがない」「AI活用で制作フローを効率化したい」といったお悩みをお持ちではありませんか？freedoorでは、AIを活用したWeb制作・DX推進のご支援を行っています。
成果を出すプロンプトの書き方とテンプレート集
Claude Codeのプロンプトは、ページの目的・ターゲット・デザインの方向性・必要な要素を具体的に記述することで、意図通りのコードが生成されやすくなります。
同じClaude Codeを使っていても、プロンプトの書き方次第で出力品質には大きな差が生まれます。
ここでは、Web制作で成果を出すためのプロンプト設計の原則と、すぐに使えるテンプレートを紹介します。
プロンプト設計の基本原則（5つのポイント）
Claude Codeに質の高いWebサイト・LPを作ってもらうには、以下の5つのポイントを押さえたプロンプトが効果的です。
この5つのポイントを押さえるだけで、「なんか思ってたのと違う…」という出力ミスが大幅に減ります。
逆に、「かっこいいサイトを作って」のような曖昧な指示では、Claude Codeの真価を引き出せません。
Webサイト作成用プロンプトテンプレート
ここからは、そのままコピペして使えるプロンプトテンプレートを紹介します。
まずは、コーポレートサイトやサービスサイトを作る際のテンプレートです。
【サイトの目的】
（例：Web制作会社のコーポレートサイト。問い合わせ獲得が目標）
【ターゲット】
（例：Web制作を外注したい中小企業の経営者・マーケ担当者）
【ページ構成】
– ヘッダー：ロゴ＋ナビゲーション（レスポンシブ対応のハンバーガーメニュー）
– ファーストビュー：キャッチコピー＋サブコピー＋CTAボタン
– サービス紹介：3つのサービスをカード形式で表示
– 実績セクション：数字で示す実績（導入社数・満足度等）
– お客様の声：3件のテスティモニアル
– お問い合わせセクション：簡易フォームまたはCTAボタン
– フッター：会社情報＋リンク一覧
【デザイン要件】
– メインカラー：#（カラーコードを指定）
– サブカラー：#（カラーコードを指定）
– デザインテイスト：（モダン／クリーン／コーポレート等）
– レスポンシブ対応必須（スマホ・タブレット・PC）
【技術要件】
– 使用技術：HTML/CSS/JavaScript（またはReact/Tailwind等を指定）
– ファイル構成：（1ファイル or 分割）
– アニメーション：（スクロールアニメーション等の有無）
【 】内を自社の情報に置き換えるだけで、そのまま使えます。
セクション構成は増減しても問題ないので、自社のニーズに合わせてカスタマイズしてください。
LP作成用プロンプトテンプレート
次に、LP（ランディングページ）に特化したテンプレートです。
LPはコンバージョン獲得が最大の目的なので、CTAの配置やコピーの訴求力がポイントになります。
【LPの目的】
（例：SaaSサービスの無料トライアル申し込みを獲得する）
【ターゲット】
（例：業務効率化に悩む中小企業の経営者・DX担当者）
【コンバージョンポイント】
（例：「無料で始める」ボタンのクリック → 申し込みフォームへ遷移）
【LP構成（上から順に）】
1. ファーストビュー
– キャッチコピー：（例：「たった5分で業務が変わる」）
– サブコピー：（例：サービスの概要を1〜2文で）
– CTAボタン：（例：「無料で始める」）
2. 課題提起
– ターゲットが抱える3つの課題を提示
3. 解決策（サービス紹介）
– 3つの特徴をアイコン＋見出し＋説明文で表示
4. 導入実績・数字
– 導入社数／満足度／削減時間などをカウンター風に表示
5. お客様の声
– 3件のテスティモニアル（名前・肩書き・コメント）
6. 料金プラン（任意）
– 3プランの比較表
7. FAQ
– アコーディオン形式で5問
8. 最終CTA
– キャッチコピー＋CTAボタンの繰り返し
【デザイン要件】
– メインカラー：#2563EB（ブルー）
– 背景：ホワイト×ライトグレーの交互セクション
– CTAボタン：目立つオレンジ系（#F97316）
– フォント：ゴシック体ベース、見出しは太字
– スクロール時のフェードインアニメーション付き
– レスポンシブ対応必須
【技術要件】
– HTML/CSS/JSの1ファイル構成
– 外部ライブラリの使用は最小限
– 画像はプレースホルダーで構わない
LP特有のポイントとして、CTAボタンのカラーをメインカラーとは別に指定するのが効果的です。
メインカラーがブルーならCTAはオレンジなど、補色関係にある色を使うとボタンが目立ちやすくなります。
修正・ブラッシュアップ時のプロンプト例
初回生成されたコードは「たたき台」です。
ここからブラッシュアップしていく際のプロンプト例を紹介します。
修正指示は「どこを」「どのように」変えたいかを具体的に伝えるのがコツです。
| 修正したい内容 | プロンプト例 |
|---|---|
| レイアウトの調整 | 「ファーストビューの余白を上下40pxに広げて、キャッチコピーのフォントサイズを48pxに変更してください」 |
| カラーの変更 | 「CTAボタンの色を#F97316に変更し、ホバー時に少し暗くなるエフェクトを追加してください」 |
| セクションの追加 | 「実績セクションとCTAの間に、導入フロー（4ステップ）のセクションを追加してください。アイコン＋見出し＋説明文の構成で」 |
| テキストの差し替え | 「ファーストビューのキャッチコピーを『売上を3倍にするマーケティングDX』に、サブコピーを『AIと人の力で、御社の成長を加速させます』に変更してください」 |
| アニメーションの追加 | 「各セクションにスクロール時のフェードインアニメーション（Intersection Observer使用）を追加してください」 |
| レスポンシブの修正 | 「スマホ表示（375px幅）でサービスカードが縦1列になるよう修正し、フォントサイズも調整してください」 |
- ✓1回の指示で修正するのは1〜3箇所に絞る（一度に大量の修正を依頼すると品質が下がる）
- ✓数値は具体的に指定する（「もう少し大きく」ではなく「48pxに」）
- ✓修正前の状態を理解した上で指示する（「現在のFVの背景画像を削除して、グラデーション背景に変更して」）
- ✓意図が伝わりにくい場合はスクリーンショットを添付する（Claude Codeは画像も読み取れる）
- ✓大きくイメージと違う場合は
/clearでセッションをリセットし、プロンプトを練り直すのも有効
修正を繰り返すうちにコードが複雑になってきたら、「現在のコードを整理してリファクタリングしてください」と依頼するのもおすすめです。
Claude Codeはコードの整理・最適化も得意なので、保守性の高いコードに整えてくれます。
さらにクオリティを上げるためのTips
Claude Codeの基本的な使い方とプロンプトの書き方を押さえたら、次はさらにクオリティを上げるためのテクニックを身につけましょう。
ここでは、プロが実践している3つのTipsを紹介します。
これらを活用することで、Claude Codeの出力品質が一段階上がります。
CLAUDE.mdファイルの活用法
CLAUDE.mdとは、プロジェクトのルート（一番上のフォルダ）に配置する設定ファイルで、Claude Codeに「このプロジェクトのルールや前提情報」を記憶させるためのものです。
この仕組みを使うと、毎回プロンプトで同じ指示を繰り返す必要がなくなり、出力の一貫性が格段に向上します。
| 配置場所 | プロジェクトのルートディレクトリ（例：my-lp-project/CLAUDE.md） |
| ファイル形式 | Markdown形式（.md） |
| 役割 | Claude Codeにプロジェクトのルール・構造・前提情報を伝える「指示書」 |
| 効果 | 毎回の指示を簡略化でき、出力の一貫性・品質が大幅に向上する |
Web制作プロジェクトでのCLAUDE.mdの記述例を紹介します。
## プロジェクト概要
– このプロジェクトはBtoB SaaSサービスのLPです
– ターゲット：中小企業の経営者・DX担当者
– 目的：無料トライアルの申し込み獲得
## デザインルール
– メインカラー：#2563EB（ブルー）
– サブカラー：#F8FAFC（ライトグレー）
– CTAカラー：#F97316（オレンジ）
– フォント：Noto Sans JP（Google Fonts）
– 角丸：8px統一
– シャドウ：box-shadow: 0 2px 8px rgba(0,0,0,0.08)
## コーディングルール
– HTML/CSS/JSで構成（フレームワーク不使用）
– レスポンシブ対応必須（ブレイクポイント：768px / 1024px）
– セマンティックHTMLを使用する
– CSSのクラス命名はBEM記法に従う
– 画像はWebP形式を優先し、alt属性を必ず設定する
## 禁止事項
– インラインスタイルは使用しない
– jQueryは使用しない
– 不要なコメントアウトを残さない
このファイルをプロジェクトフォルダに置いておくだけで、Claude Codeはこのルールに沿ったコードを生成するようになります。
特に複数ページを持つWebサイトの制作では、CLAUDE.mdの有無でページ間のデザインの統一感が大きく変わるので、ぜひ活用してください。
画像・アセットの効率的な組み込み方
Claude CodeはHTML/CSS/JSのコードは生成できますが、写真やイラストなどの画像素材は生成しません。
ただし、画像の扱い方を工夫することで、効率的にリッチなWebサイトを作れます。
また、画像の最適化もClaude Codeに依頼できます。
「imgタグにloading=”lazy”を追加して」「pictureタグで WebP/PNG のフォールバックを設定して」といった指示で、パフォーマンスを意識したマークアップにしてくれます。
レスポンシブ対応・アクセシビリティを指示するコツ
制作したWebサイトやLPの品質をプロレベルに引き上げるには、レスポンシブ対応とアクセシビリティが欠かせません。
Claude Codeにこれらを適切に実装させるには、具体的な指示がポイントになります。
| 品質向上のテーマ | Claude Codeへの指示例 |
|---|---|
| レスポンシブ対応 | 「ブレイクポイントは375px（スマホ）/ 768px（タブレット）/ 1024px（PC）の3段階で設定してください」 |
| スマホ表示の最適化 | 「スマホ表示では3カラムのカードを縦1列に変更し、フォントサイズを14px基準に調整してください」 |
| アクセシビリティ | 「WAI-ARIAのrole属性を適切に設定し、全てのimgタグにalt属性を追加してください。キーボードナビゲーションにも対応してください」 |
| 表示速度の改善 | 「CSSをクリティカルCSS（FV表示に必要な分）とそれ以外に分割し、画像にはloading=”lazy”を設定してください」 |
| SEO対策 | 「metaタグ（title、description、OGP）を適切に設定し、見出しタグの階層構造を正しくしてください」 |
- ✓「このコードのアクセシビリティ上の問題点を洗い出して修正してください」
- ✓「Lighthouseのスコアが上がるようにパフォーマンス最適化を実施してください」
- ✓「スマホ表示（375px幅）でレイアウトが崩れている箇所がないかチェックして修正してください」
- ✓「HTML/CSSのバリデーションを実施して、エラーがあれば修正してください」
- ✓「コードをリファクタリングして、重複を削除し、保守しやすい構造に整理してください」
Claude Codeは「コードを書く」だけでなく、「コードのレビューや品質チェック」も得意です。
生成→チェック→修正のサイクルを回すことで、外注に出したのと遜色ないレベルのWebサイトに仕上げることも十分可能です。
AIを活用した業務効率化・DX推進をお考えなら
freedoorでは、Claude CodeをはじめとするAIツールの導入支援から、社内のDX推進まで一貫してサポートしています。「何から始めればいいかわからない」という段階からお気軽にご相談ください。
よくある質問
-
AClaude Codeは無料プランでは利用できません。利用するには、Claude Proプラン（月額$20・約3,000円）以上の契約が必要です。Claude Code自体に追加料金はかからず、Claudeのサブスクリプションの利用枠内で使える仕組みです。まずはProプランから始めて、利用量が足りなくなったらMax 5x（月額$100）やMax 20x（月額$200）へのアップグレードを検討するのがおすすめです。
-
Aはい、Claude Codeは日本語の自然言語で指示するだけでコードを生成してくれるため、プログラミング未経験でもWebサイトやLPの作成は可能です。ただし、生成されたコードの品質をチェックしたり、細かい修正を依頼したりする場面では、HTML/CSSの基礎知識があるとスムーズです。まずはシンプルなLPから試してみて、徐々にスキルを身につけていくのがおすすめです。
-
Aはい、Claude Codeで生成したコードは商用利用が可能です。生成されたHTML/CSS/JavaScriptのコードはそのまま自社サイトやクライアント向けの制作物として使用できます。ただし、外部のライブラリやフォント、画像素材を組み込んでいる場合は、それぞれのライセンス条件を個別に確認してください。
-
AClaude CodeでWordPressのテーマやテンプレートファイル（PHP）を生成することは可能です。ただし、WordPress特有のデータベース設定やプラグインの導入・設定、サーバー環境の構築は別途手動で行う必要があります。静的なHTML/CSSサイトを作成する場合に比べると難易度は上がるため、WordPressに詳しいエンジニアとの併用が現実的です。
-
AゼロからWebサイトやLPを新規作成するなら、Claude Codeが向いています。「LP全体を作って」といった大きな単位のタスクを自律的に実行してくれるのが強みです。一方、既存のコードを修正したり、コードを見ながら微調整したりする作業には、エディタ統合型のCursorが便利です。実際の開発現場では、新規作成はClaude Code、微調整はCursorと使い分けるケースが多くなっています。
-
Aプロンプトの精度次第ですが、具体的な要件（カラーコード、セクション構成、フォント指定等）を伝えれば、プロのコーダーが作成したものに近いクオリティのLPが生成されます。ただし、ブランド独自の世界観やピクセル単位の精密なデザインを再現するには、プロのデザイナーによる調整が必要になるケースもあります。「素早くたたき台を作り、必要に応じてプロが仕上げる」というハイブリッド運用が最もコストパフォーマンスに優れています。
freedoorでは、AI活用によるWeb制作・DX推進のご支援を行っています
「Claude Codeを使ってみたいが、社内にノウハウがない」「AIを活用してWeb制作や業務効率化を進めたいが、何から手を付ければいいかわからない」――そんなお悩みをお持ちではありませんか？freedoorでは、AIツールの導入支援からWebマーケティングの戦略設計まで、企業のデジタル施策をワンストップでサポートしています。まずはお気軽にご相談ください。
