Claude Codeで最初のWebサイトを作る：プロダクト要件から独自ドメイン公開まで

名前を決め、ドメインも取得しました。次に必要なのは、そのドメインを開いた人がプロダクトを理解し、次の行動まで進めるWebサイトです。

この記事では、Claude Codeを使って公開可能なプロダクトサイトを作ります。例にするのは、まだ一般登録を始めていない顧客フィードバック管理ツールです。サイトの役割は、フリーランスにプロダクトを説明し、興味を持った人から先行利用の申し込みを受け付けることです。

作業はコーディングツールの中で進めます。ページ作成、レイアウト調整、フォーム接続、動作確認、デプロイまでを扱います。Webサイト自体にチャットボットなどのAI機能を追加する必要はありません。

最初に開発方法を決める

Claude Codeは、プロジェクトを読み取り、ファイルを編集し、コマンドを実行できます。同じWebサイトを継続的に作り、修正していく作業に向いています。この記事ではローカルターミナル上のClaude Codeを使います。

Webサイト専用のディレクトリを用意し、確定したプロダクト名、原稿、利用可能な素材を置きます。既存プロジェクトがある場合は現在の構成を引き継ぎます。新規プロジェクトなら、まずシンプルな1ページサイトの実装案を提示してもらいます。

Claude Codeがすでに使える状態なら、その接続方法を継続して構いません。従量課金のAPI接続を選ぶ場合に、モデルサービスを設定します。

BetterToken経由でClaude Codeを使う場合は、Claude Code接続ガイドに従ってAPI KeyとBase URLを設定します。設定値はローカル開発環境に保存し、コーディングツールから利用します。公開Webサイトには含めません。利用できるモデルと接続条件は、現在のアカウント設定に基づきます。

設定後、Claude CodeにWebサイトのディレクトリを確認させ、既存ファイル、技術スタック、起動方法を整理してもらいます。サードパーティ製ゲートウェイの互換性はクライアントや機能によって異なるため、必要なモデルと機能が動作することを開発前に確認します。

ステップ1：そのまま制作に使える要件をAIに渡す

「高級感があって先進的なサイトを作って」だけでは、誰向けのプロダクトなのか、メインボタンで何をさせたいのかが伝わりません。

確定した名前と素材を渡した後、次のようなタスクを送ります。

目標：フリーランス向け顧客フィードバック管理ツールの初版Webサイトを作成する。顧客からの修正依頼を一か所で確認でき、チャット履歴から要件を探す手間を減らすプロダクト。まだ一般登録は開始しておらず、メインボタンは「先行利用を申し込む」とする。

変更可能な範囲：今回はトップページのみ作成する。プロダクト紹介、明確にデモと表示した利用例、3つの主な用途、よくある質問、先行利用の申し込み導線を含める。プロダクト名と素材は提供した内容を使用する。

実装しないこと：ログイン、決済、プロダクト管理画面は追加しない。顧客数、利用者の声、提携企業ロゴを創作しない。

完了条件：まずブラウザで開けるプレビューを用意し、PCとスマートフォンの両方に対応する。先行利用の導線が実サービスに未接続の場合は、デモであることを明記する。

確認方法：ページが起動すること、スマートフォン表示、メインボタンの動作を確認し、実際に確認した内容を報告する。

この要件で初版の範囲を十分に定められます。細部はページを見てから追加します。

最初のレビューでは、プロダクトを正しく説明できているかを確認します。顧客のフィードバックはどこから届くのか。訪問者が試す理由は何か。ボタンを押した後に何が起きるのか。色やアニメーションは後から調整できますが、ページはまずこれらの質問に答える必要があります。

ステップ2：修正内容をページ上の具体的な場所に結び付ける

初版ができたら、「もっと洗練して」と伝えるより、理解や操作を妨げている場所を具体的に示す方が効果的です。

たとえば、スマートフォンのファーストビューを大きな画像が占め、プロダクトの説明を見るまでスクロールが必要な場合は、次のように依頼します。

目標：現在のトップページのスマートフォン向けファーストビューを調整し、訪問者が最初にプロダクトの用途と「先行利用を申し込む」ボタンを見られるようにする。

変更可能な範囲：トップページのファーストビューのレイアウトとスタイルのみ変更する。

具体的な変更：スマートフォンではデモ画像をボタンの下に移動し、現在の文章は維持する。PCでは現在の左右レイアウトを維持する。

完了条件：スマートフォンで横スクロールが発生せず、画像が見出しやボタンに重ならず、PCレイアウトに影響がないこと。

確認方法：スマートフォン幅とPC幅を1種類ずつ確認する。今回の変更によって発生した問題だけを修正する。

変更のたびにページを開き直し、実際の表示が依頼内容と一致しているか確認します。ブラウザ操作ツールが利用できる場合は、AIに直接プレビューさせます。利用できない場合は自分で開き、スクリーンショットと再現手順を渡します。

納得できるバージョンができたら、次の修正に進む前に復元可能な状態を残します。後の方向性が合わなかった場合でも、安定版へすぐ戻れます。

ステップ3：「先行利用の申し込み」を実際に受け取れるようにする

このサイトで最も重要なのは複雑な操作ではなく、申し込みが届くことです。

初版では、設定済みの外部フォームをボタンから開く方法でも十分です。メールアドレスを集めるためだけにアカウントシステムを作る必要はありません。フォームではメールアドレスと、任意項目として「現在、顧客からのフィードバックをどのように管理していますか？」を尋ねます。情報を先行利用の連絡とプロダクト調査に使うことも記載します。

実際のフォームURLをClaude Codeに渡し、デモ導線と差し替えてもらいます。その後、Webサイトから自分でテスト申し込みを送り、受信側に記録が表示されることを確認します。

サイト内フォームを使う場合は、実際の送信サービスに接続し、送信中、成功、失敗の3状態を実装します。成功メッセージは、受信側でデータ保存が確認された後に表示します。

画面上のフィードバックは、実際に完了した処理と一致させます。表示用セクションを増やすより重要な部分です。

ステップ4：独自ドメインを接続する前に公開プレビューを確認する

ローカルプレビューを確認したら、現在の技術スタックに対応するホスティングへ公開します。まず公開テストURLを取得し、別の端末から画像、リンク、フォームを確認します。

たとえばVercelでは、購入済みドメインをプロジェクトに追加し、そのプロジェクトに表示された値でDNSを設定します。現在のプロジェクトが提示するDNSレコードを使用します。ドメインをメールにも使っている場合は、既存のMXレコードなどを残します。詳細はVercelのカスタムドメインドキュメントで確認できます。

ドメイン接続後、自分のドメインからアクセスし、申し込みまでの流れをもう一度通します。ページが開くか、プロダクトを理解できるか、申し込みを完了できるかを確認します。

このような固定の紹介ページは、アクセスのたびにモデルを呼び出しません。モデルが関わるのは開発段階だけで、公開後は通常のWebプロジェクトとして動きます。将来、訪問者向けのコンテンツ生成、分析、チャットを追加する場合は、実行時のモデル接続を別機能として設計します。

ステップ5：実際に使えるWebサイトと一緒に公開する

サイトを紹介するときは、実際のページ画像、分かりやすいプロダクト説明、機能する導線を使います。テスターを募集している段階なら、ページと公開資料の両方に「先行利用を申し込む」と記載します。

Webサイトが完成したら、NewName.aiのスタートアップディレクトリで類似プロダクトの説明方法を確認し、自分のプロダクトも投稿できます。実際の機能、現在のページ画像、アクセス可能なURLを中心に紹介します。

その後、アクセスや申し込みから得た具体的な反応をWebサイトへ反映します。通常のチャットアプリとの違いが伝わらないなら説明を直します。ボタンは押されるのに申し込みが完了しないなら、フォームと導線を確認します。明確な課題を一つずつ解決しながら改善を続けます。

名前はプロジェクトに個性を与え、ドメインは住所を与えます。AIを使ったWeb制作の成果は、プロダクトの構想を、誰かが訪れ、理解し、次の行動を取れるサイトへ変えることです。