Claude Codeでコーポレートサイトを作らせる実践手順｜プロンプト全公開
生徒Claude Codeって名前は聞いたことあるんですが、ターミナルで動くんですよね？ 難しそうで…。コーポレートサイトとか本当に作れるんですか？
ペン博士作れるよ！ターミナルに慣れてないと最初は緊張するけど、コマンド自体はシンプルだよ。プロンプトの書き方がコツで、今日はそこを全部公開するね。
Claude Codeは、Anthropicが開発したターミナル上で動くAIコーディングエージェントです。ファイルの作成・編集・コマンド実行まで自律的に行ってくれるため、コーポレートサイトのような複数ファイルで構成されるプロジェクトでも、指示ひとつで骨格を一気に作れます。
この記事では、実際にClaude Codeを使ってコーポレートサイトを作る手順を、要件整理からファイル生成・修正指示・公開まで通しで紹介します。使ったプロンプトもそのまま公開するので、ぜひ自分の案件で試してみてください。
目次
Claude Codeとは？ 基本の動き
Claude Codeは、ターミナル（コマンドライン）上でAnthropicのAI「Claude」と会話しながらコーディング作業を進めるツールです。ファイルを読む・書く・コマンドを実行するという操作をAIが自律的に行います。
Claude Codeとは？の詳しい解説記事もありますが、本記事では「使い方の実践」に絞って進めます。インストール方法や基本コマンドはClaude Codeを使いこなす豆知識もあわせてどうぞ。
# Claude Code のインストール（npmが必要）
npm install -g @anthropic-ai/claude-code
# バージョン確認
claude --version
# プロジェクトディレクトリで起動
cd my-corporate-site
claude起動するとターミナルにプロンプト入力欄が現れます。ここに日本語で指示を書けば動き始めます。
STEP 1：要件を整理してからAIに渡す
Claude Codeに丸投げする前に、要件を自分の言葉で箇条書きにする作業が欠かせません。要件が曖昧なまま指示すると、AIも曖昧な成果物を作ってしまいます。
最低限、次の項目を決めておきましょう。
- サイト名・会社名・業種
- 必要なページ（トップ・会社概要・サービス・お問い合わせ など）
- デザインの方向性（シンプル／プロフェッショナル／カラフル など）
- ブランドカラーとフォント
- 使う技術（純HTML/CSS/JS のみ か、フレームワークを使うか）
今回のサンプルは「IT企業向けのシンプルなコーポレートサイト。4ページ構成。HTML/CSS/JSのみ。メインカラーは紺」という設定で進めます。
STEP 2：ディレクトリ設計の指示
まずプロジェクトの骨格を作ってもらいます。ファイル構成を最初に決めることで、後の作業が一貫します。
HTMLとCSSとJavaScriptのみ（フレームワークなし）で
IT企業のコーポレートサイトを作ります。
まず以下のディレクトリ構成とファイルを作成してください。
ページ：トップ(index.html) / 会社概要(about.html) / サービス(service.html) / お問い合わせ(contact.html)
共通：css/style.css / js/main.js
各HTMLファイルは共通のheaderとfooterを含む最小限の雛形にしてください。「フレームワークなし」「最小限の雛形」のように制約を明示するのがポイントです。指定しないとClaudeが独自判断でReactなどを使い始めることがあります。
STEP 3：各ページのコンテンツを生成する
骨格ができたら、ページごとにコンテンツを作成していきます。一度に全ページを指示するのではなく、1ページずつ指示するほうが品質が上がります。
index.html のmainセクションを作成してください。
構成：
1. ヒービーローセクション（キャッチコピー + サブテキスト + CTAボタン）
2. 特徴3つ（アイコン代わりに絵文字 + 見出し + 説明文）
3. サービス紹介（3カード、サービス名は仮テキストでOK）
4. お問い合わせへのCTAバナー
デザイン：メインカラー #1a3a6b（紺）、サブカラー #ffffff、フォントはGoogle Fontsから Noto Sans JP を使用。このように「構成」「デザイン」を分けて伝えると、AIが迷いなく実装できます。
contact.html にお問い合わせフォームを追加してください。
フィールド：お名前（必須）/ 会社名（任意）/ メールアドレス（必須）/ お問い合わせ内容（必須・textarea）
バリデーション：JavaScriptで必須チェックを実装してください。
送信後：アラートで「送信しました」と表示する（実際のメール送信は不要）。
見た目：style.cssの既存スタイルに合わせてください。フォームは「実際の送信は不要」とスコープを明示しておくと、バックエンド処理を勝手に実装しようとするのを防げます。
STEP 4：修正指示のコツ
生成されたコードが意図と違う場合、修正指示を出します。このとき「なんかおかしい」ではなく、具体的に何がどう違うかを伝えるのが大事です。
ヒーローセクションのレイアウトを修正してください。
現在：テキストが左寄りになっている
期待する状態：テキストを画面中央に配置、縦方向にも中央揃え
条件：flexboxを使って実装してください。min-heightは100vhにしてください。スマートフォン（640px以下）での表示を改善してください。
問題：
- ナビゲーションのリンクが横に並びすぎて崩れる
- サービスカードが3列のまま小さくなって読めない
修正：
- ナビはハンバーガーメニューに変更（js/main.jsにトグル処理を追加）
- サービスカードは1列表示に変更修正の際は「現状」と「期待する状態」を分けて書くと、Claudeが差分を明確に理解して的確に直せます。
STEP 5：自分でレビューする重要性
Claude Codeは非常に優秀ですが、生成されたコードを必ず自分でレビューすることが欠かせません。見た目が動いていても、次のような問題が潜んでいることがあります。
- フォームのバリデーションが甘く、空文字が送信できてしまう
- XSS（クロスサイトスクリプティング）対策が抜けている
- alt属性やaria属性が空でアクセシビリティが低い
- CSSの指定が重複・衝突していて一部のブラウザで崩れる
- 不要なconsole.logがコードに残ったまま
特にお問い合わせフォームやログイン処理などのセキュリティに関わる部分は、自分で動作確認とコードレビューを必ず行いましょう。
生成したコードをセキュリティ観点でレビューしてください。
チェックポイント：
- XSS（クロスサイトスクリプティング）のリスクがないか
- フォーム入力値のサニタイズはできているか
- 不要なconsole.logやデバッグコードが残っていないか
問題があれば修正もあわせてお願いします。このようにAI自身にセキュリティレビューを依頼するプロンプトを使うのも有効です。ただし最終確認は必ず自分の目で行ってください。
STEP 6：仕上げと公開準備
コンテンツとデザインが整ったら、公開前の仕上げを行います。
- 全ページをブラウザで確認（PC・スマートフォンの両方）
- ページタイトル（titleタグ）・metaディスクリプションの設定
- OGP設定（SNSシェア時のサムネイル・テキスト）
- 画像のalt属性確認
- リンク切れチェック
- GitHub Pagesまたはレンタルサーバーにアップロード
各ページのSEO対策として以下を追加してください。
- titleタグ：「ページ名 | 会社名」の形式
- metaディスクリプション：120字以内で各ページの説明文
- OGPタグ（og:title / og:description / og:type）を全ページのheadに追加
会社名は「テックラボ株式会社」、サイトURLは「https://example.com」としてください。公開はGitHub Pagesが無料で手軽です。独自ドメインを使う場合はさくらインターネットやエックスサーバーなどのレンタルサーバーにFTPでアップロードする方法が一般的です。
Claude Codeを使う上での注意点まとめ
Claude Codeは便利ですが、万能ではありません。次の点に注意して使いましょう。
| 注意点 | 対策 |
|---|---|
| 生成コードに誤りが含まれる | 必ず自分でレビュー・動作確認する |
| 過剰な実装をすることがある | 「〇〇は不要」「シンプルに」と明示する |
| APIキーや秘密情報を扱わせない | .envファイルを使い、コードに直書きしない |
| バージョンや仕様が古い可能性 | 重要な仕様は公式ドキュメントで確認する |
| 大量のファイル変更を一気に行う | こまめにgitコミットして差分を管理する |
特にAPIキーや認証情報はコードに直接書かず、.envファイルで管理するルールを最初から守りましょう。Claude Codeがコード内に書こうとした場合はすぐに止めて修正させてください。
まとめ
Claude Codeを使えば、コーポレートサイトの骨格を数分で作れます。ただし「AIに全部やらせる」ではなく「AIと一緒に作る」姿勢が大切です。要件を明確にしてからプロンプトを書き、生成されたコードは必ず自分でレビューする。この流れを守れば、AIを最大限活用しながら品質の高いサイトを作れます。
・要件整理が最重要：曖昧な指示は曖昧な成果物を生む。まず自分で要件を言語化する
・1ページずつ丁寧に：一気に全部ではなく段階的に指示して品質を上げる
・必ずレビューする：動いていても中身の確認は必須。セキュリティは特に注意
Claude Codeを使いこなすには、HTML/CSS/JavaScriptの基礎知識が土台になります。WithCodeでしっかり基礎を身につけてから実践に臨むと、AIの力をより引き出せます。
よくある質問（FAQ）
Q1. Claude Codeでサイトを作るのは無料ですか？
A. Claude Codeの利用は契約プランやAPI利用量に応じて費用がかかります。ホスティングは無料枠を活用できます。
Q2. 完全ノーコードで作れますか？
A. 大部分をAIが生成しますが、内容確認・修正・公開の工程で基礎的な知識があるとスムーズです。
Q3. 実務レベルの品質になりますか？
A. プロンプトとレビューの質次第です。公開前に人による最終チェックを行うことが前提になります。
関連記事｜AIツール活用
- MCPサーバー自作入門｜Claude Codeと外部ツールをつなぐ実践ガイド
- Windsurf使い方ガイド｜Cursor代替のAIエディタを実務検証【2026年版】
- AIでポートフォリオサイトを作る手順｜Web制作初心者向け完全ガイド
- AI時代のプログラミング学習ロードマップ【2026年版】｜何をどの順で学ぶか
WithCodeを体験できる初級コース公開中！
初級コース(¥49,800)が完全無料に！
- 期間：1週間
- 学習内容：
ロードマップ/基礎知識/環境構築/HTML/CSS/LP・ポートフォリオ作成
→ 正しい学習方法で「確かな成長」を実感できるカリキュラム。
副業・フリーランスが主流になっている今こそ、自らのスキルで稼げる人材を目指してみませんか？
未経験でも心配することはありません。初級コースを受講される方の大多数はプログラミング未経験です。まずは無料カウンセリングで、悩みや不安をお聞かせください！
