Claude CodeでWeb制作する方法｜サイト作成の手順と公開前チェック

Claude CodeでWeb制作を進めるには、作るサイトの目的と素材を決め、作業フォルダーでコードを生成し、ブラウザ表示を見ながら修正します。最初は「1ページ・HTMLとCSS・外部送信なし」の小さなサイトにすると、ファイルと画面の対応を理解しやすくなります。

この記事の主題はClaude Codeを使ったWebサイト制作です。「Claude CodeのWeb版」は、ブラウザからクラウドの開発環境を利用する別の意味なので、先に区別します。以下のカフェサイトは作業を説明する架空の例で、実店舗の制作実績や受注成果ではありません。

Web制作とWeb版、Artifactsの違い

本稿はローカルのCLIを軸に進めます。公式はターミナルの始め方とクラウドでの利用方法を分けて案内しています。既存リポジトリをクラウドで扱う場合は、GitHubへの接続・権限・環境設定も必要になるため、同じ手順だと思って進めないでください。

手順1：作るサイトと完成条件を決める

いきなり「おしゃれなホームページを作って」と頼むより、誰が何を判断し、次に何をするサイトかを決めます。企業サイト、商品LP、採用サイトでは必要な構成が違います。

実案件では仮の店名や金額を正式情報へ差し替え、権利を確認した写真・ロゴを渡します。参考サイトは色や余白、導線の観点を言語化する材料とし、他社の文章・デザイン・素材をそのまま複製する依頼にはしません。

手順2：作業フォルダーでClaude Codeを起動する

公式のOS別案内に沿ってClaude Codeを導入・認証し、claude --versionで動作を確認します。利用には対象の契約やConsole等の利用条件があり、Claudeの無料チャットと同じ条件ではありません。公式料金を確認してください。

新しい練習用フォルダーを作り、その中で開始する例です。同名のフォルダーが既にある場合は、内容を上書きせず別名を選びます。

mkdir sample-cafe
cd sample-cafe
claude

既存サイトを改修する場合は、新規練習とは違います。変更前のバックアップやバージョン管理を用意し、作業対象を限定します。本番の認証情報や顧客データを含むフォルダーを、確認せずに作業範囲へ入れないでください。

手順3：構成と制約を渡し、ファイルを作る

以下は新規の静的ページを依頼するための編集例です。実行時にファイル編集やコマンド実行の確認が出たら、何が作られるかを見て判断してください。

このsample-cafeフォルダー内だけに、架空のカフェ紹介サイトを作ってください。
最初に構成と作成ファイルを提案し、確認を待ってください。

目的：来店前にメニューと営業時間を確認できること。
掲載する事実：店名はサンプルカフェ。コーヒー600円。営業時間11〜18時。
構成：ファーストビュー、メニュー、営業案内。
実装：index.html、style.css。外部ライブラリなし。
白を基調に、文字のコントラストと余白を重視。390pxでも横にはみ出さないこと。
写真は用意していないので、無断転載せず、写真なしで成立させてください。
架空の実績、口コミ、住所、予約受付、送信フォームは追加しないでください。
主要ボタンはページ内のメニューへ移動させてください。
作成後は、ファイルの変更点とブラウザで確認する手順を報告してください。

内容を確認して制作を進めた場合、最低限の成果物の構成は次のようになります。これは想定する構成例であり、この指示だけで必ず同一ファイルが完成するという保証ではありません。

sample-cafe/
  index.html   # 見出し・メニュー・営業案内
  style.css    # 色・余白・画面幅ごとのレイアウト

HTMLではメイン見出しを1つにし、メニューのリンク先とIDを一致させます。生成結果にhref="#menu"があれば、移動先にid="menu"があるかを見る、という具体的な確認ができます。

手順4：ブラウザで表示し、具体的に直す

単純なHTMLとCSSの確認なら、作成したindex.htmlをブラウザで開けます。ローカルサーバーが必要な構成では、使っている環境の手順に従います。Pythonを利用できる端末なら、サイトのフォルダーで次のように起動し、http://127.0.0.1:8000/へアクセスする方法があります。

python -m http.server 8000 --bind 127.0.0.1

これは端末内で表示を確かめる方法で、インターネットへ一般公開するコマンドではありません。Pythonがない場合や既存フレームワークを使う場合は、別のプレビュー方法が必要です。

修正依頼は「見にくい」から一段具体化します。端末幅、該当箇所、どう見え、どうしたいかを指定してください。

390px幅では、メニューのボタンが2行に折れて隣の説明に近づいています。
ボタンを1列に並べ、押す領域と本文の間隔を確保してください。
文言と料金は変更せず、style.cssの該当箇所だけを調整してください。
修正後は、1280px側のレイアウトを崩していないかも確認してください。

Claude Codeが画面を見られるかは、使っている環境や許可されたツールによります。何も接続せずにブラウザ画面を自動確認できたと考えないでください。画面を渡す場合は個人情報を除き、スクリーンショットと対象幅を共有すると説明しやすくなります。

手順5：公開前のチェックと、実装が必要な機能

予約、ログイン、決済、データ保存は、画面のHTMLだけで完成しません。バックエンドや外部サービス、認証、個人情報の取り扱い、運用責任まで設計が必要です。公開はホスティング先の手順で行い、確認していない送信機能を「問い合わせ可能」と表示しないでください。

Web制作でAIに任せる範囲の考え方

Claude Codeには構成案、HTML・CSSの実装、指定箇所の修正、変更内容の整理を任せやすい一方、何を売り、どんな事実を掲載し、誰が公開を承認するかは人が決める必要があります。すべてを一度に頼むより、設計→実装→表示→修正→公開判断を分けると、変更の理由を追いやすくなります。

当研究所の見解は、「ページが表示された」だけを完成条件にしないことです。目的の情報へ進めるか、誤った表現がないか、問い合わせが実際に処理できるかまで分けて確認します。これらの確認を行ったことと、集客・売上が増えることも別の評価です。

仕様の確認日：2026年11月2日。ここでは制作フローの説明と架空の仕様例を示しています。Claude Codeによる実案件の納品記録、画面操作の実行記録、成果の検証ではありません。

ツールの選び方や業務での使い分けに迷う場合は、AI活用・マーケティングの相談窓口をご利用ください。