Claude Codeでホームページを作る手順と注意点

Claude Codeでできるホームページ制作の範囲

Claude Codeは、ターミナルやエディタから呼び出して使う、ファイル操作を前提としたコーディング支援です。チャット画面のClaudeが「文章で相談して答えをもらう」ものだとすると、Claude Codeは「サイトのファイルを実際に読み書きしながら作業を進める」ものだとイメージすると分かりやすくなります。

• 白紙の状態から、構成（トップページ・下層ページ）を相談しながらHTML/CSSを組み立てる
• 既存サイトのファイルを読み込み、デザインや文言、レイアウトを修正する
• 複数ページにまたがる一括修正（ヘッダーの表記統一、リンク切れの修正など）を、内容を確認しながら進める
• 画像の配置、レスポンシブ対応（スマホ表示崩れ）の調整案を出す
• 作業前にファイルをバックアップしてから上書きする、といった安全な手順を踏みながら進める

ただし「見た目だけ整った完成品を一発で出す」道具ではありません。要望を伝え、出てきた案を確認し、直しを繰り返す前提で使うと失敗が減ります。

新規制作の基本的な流れ

1. 目的とページ構成を決める — 「何のためのサイトか」「誰に見てもらうか」「最低限必要なページ（トップ、会社概要、お問い合わせなど）」を先に整理しておくと、Claude Codeへの指示がぶれません。
2. 参考にしたい見た目や既存サイトを伝える — 「このサイトのような雰囲気で」「シンプルで文字中心に」など、方向性を最初に共有します。
3. トップページから作ってもらう — 一度に全ページを頼むより、トップページを作って確認し、方向性が合っていることを確かめてから他のページへ進める方が手戻りが少なくなります。
4. 実際にブラウザで表示を確認する — できあがったファイルを実際に開き、パソコンとスマホ両方の見た目を確認します。
5. 公開前に最終確認する — 誤字、リンク切れ、連絡先情報、著作権表記などを人の目で確認してから公開します。

既存サイトを修正する場合の流れ

すでに動いているホームページに手を入れる場合は、新規制作よりも「事故を防ぐ手順」が重要になります。

• 修正前に、対象ファイルの現在の内容をバックアップしておく（Claude Codeにバックアップ手順ごと依頼できます）
• 「このページのこの部分だけ直したい」のように、直す範囲を具体的に絞って伝える
• 一括置換のような広い範囲の修正は、まず1ページで試してから他のページへ広げる
• 本番環境（実際に公開されているサーバー）へ反映する前に、変更内容の差分を確認する
• 反映後は、実際のURLを開いて表示と動作を確認する

これらの手順は、Claude Code自身に「バックアップを取ってから進めて」「差分を見せて」と依頼すれば、確認しながら一緒に進めてくれます。すべてを一人で判断する必要はありません。

公開前に人間が確認すべきこと

Claude Codeは実行前の確認や変更内容の説明を挟む設計になっていますが、最終的に「公開してよいか」を判断するのは人間の役割です。