Claudeでホームページ作成｜失敗しない進め方

Claudeを使うと、ホームページの構成案・文章・画面の試作・コード作成を進められます。ただし、画面ができたことと、顧客が安心して使えるサイトを公開できたことは別です。最初は目的を一つに絞った1ページを作り、スマートフォン表示、リンク、問い合わせ先、更新方法を確認してから公開へ進みます。

本記事は、これから小規模な会社・店舗・サービスのホームページを作りたい担当者向けです。Claudeの画面で試す方法と、コードを管理する方法を分け、依頼文、修正例、公開判定、失敗時の切り分けまで説明します。既存WordPressの改修が目的の場合は、Claude CodeでWordPressを改善する手順も確認してください。

公式情報の確認日：2026年10月27日。機能・共有条件は変更されるため、利用するアカウントの画面と公式説明を照合してください。

Claudeでホームページを作る方法は、目的で選ぶ

「Claudeで作る」という言い方には、画面のデザインを相談すること、HTMLを生成すること、既存のコードを直すことなどが含まれます。同じものとして比較すると、試作はできたのに更新できない、公開したつもりでも社外の人が見られない、といった混乱が起きます。

公式ヘルプでは、Artifactsの例に1ページのWebサイトが挙げられ、Designは画面・試作品・LP等を作る入口とされています。名称だけで完成範囲を決めず、生成結果をどこで動かし、誰が見られるかまで確認します。出典：Artifacts公式説明、Claude Design公式ガイド。

初心者なら、最初から会員機能や決済を含めず、サービスの説明と既存の問い合わせ窓口へのリンクを持つ1ページから検討すると、確認する範囲を限定できます。一方、在庫・予約・顧客データを扱う場合は、見た目だけで採用せず、必要な機能と運用体制を先に設計してください。

作成前に用意する情報：不明点をAIに埋めさせない

Claudeへの依頼文より先に、読者と事業の事実を整理します。料金、所在地、対応範囲、問い合わせ先が曖昧なままだと、もっともらしい文章や架空の実績で空白が埋まる可能性があります。未確定の情報は、そのまま「未確定」と渡します。

参考サイトは「余白の取り方」「情報のまとまり」など、参考にする点を限定してください。他社の文章、固有の図、写真、実績をそのまま自社の素材として使う指示は避けます。顧客情報、認証情報、未公開資料は、組織で許可された入力範囲を確認するまで渡さないでください。

そのまま調整できるホームページ作成プロンプト

以下は、架空の法人向けサービスを想定した依頼例です。実際の制作実績や、必ずこの出力になることを示すものではありません。角括弧の部分を自社の承認済み情報へ置き換え、未確定事項が残る場合は試作用として扱います。

法人向けサービスのホームページを、まず1ページの試作として作成してください。
対象読者：[誰が、どの課題を抱えているか]
ページの目的：[問い合わせ等、一つの主目的]
掲載可能な事実：[サービス内容、対応範囲、確認済み料金、会社情報]
主な行動先：[既存の問い合わせページURL。未定なら接続しない]
構成：対象者と便益 → 提供範囲 → 利用の流れ → 条件・注意点 → FAQ → 相談先
デザイン：[自社の色・ロゴ・雰囲気]

最初に不足情報を質問し、構成案だけを提示してください。
私が確認した後に、ブラウザで確認できるHTMLとCSSを作成してください。
不明な料金・住所・電話・実績・資格・顧客の声を補わないでください。
問い合わせの送信処理、外部サービスへの接続、公開は行わないでください。
スマホで読める文字と余白を確保し、横にはみ出す要素を作らないでください。
本文と、未確認事項・テスト項目を分けて出力してください。

大切なのは、一度の依頼で全工程を完了させようとしないことです。情報不足の確認、構成の合意、画面作成、修正、動作確認という区切りを設けると、どこで意図がずれたかを判断できます。生成が途中で止まった場合も、残ったファイルや未実装の箇所を確認してから続行を依頼します。

Claudeで作成から確認まで進める7つの手順

1．公式画面で、制作の入口を確認する

Claude公式画面を開き、メッセージ欄の「Output → Design」、またはArtifactsタブのDesignから画面案を作成します。会話で構成だけを相談してから、Designへ進む方法でも構いません。Artifactsには、設定のCapabilitiesにある「Create and edit files」（旧表示は「Cloud code execution and file creation」）が必要です。組織管理の項目が使えない場合は管理者へ確認し、利用のために無断で権限を広げないでください。

2．構成案を読み、読者が判断できる順に並べる

「何のサービスか」「自分が対象か」「何を依頼できるか」「条件は何か」「どう相談するか」が追えるかを確認します。長い企業理念から始まる、同じ強みを何度も説明する、注意点が最後まで見えない、といった場合は画面を作る前に直します。

3．機能を限定した1ページを作る

最初の出力は、情報の並びと読みやすさを見る試作です。不要なアニメーションや外部ライブラリーを増やさず、見出し、本文、画像、行動先を確認します。AI生成画像を使う場合も、実在の店舗、社員、導入顧客、実測結果と誤認させない素材にしてください。

4．表示されたページとコード・ファイルを区別する

Designで作成した画面は、右上の「Export」からstandalone HTMLまたは.zipとして書き出します。HTMLは保存したファイルをブラウザで開き直し、zipは展開して入口のファイルと素材の配置を確認します。Claude内のプレビューだけでなく、外へ取り出しても文字・画像・リンクが表示されるかを確かめてください。出典：Design公式の書き出し方法。

通常の会話からコードを受け取る方法なら、「CSSを含む完全なHTML1ファイルで出力」と指定し、テキスト編集ソフトでUTF-8の「index.html」として保存します。ファイル名が「index.html.txt」になっていないか確認し、保存ファイルをブラウザで開いて日本語とレイアウトを確認します。外部画像を参照するコードなら、その画像の保存・配信方法も必要です。このローカル確認は、インターネットでの一般公開ではありません。

5．修正を一つずつ依頼する

「もっと良くして」ではなく、対象箇所、症状、期待する状態、変えない箇所を伝えます。例えば「スマホで最初のボタンが画面外になる。見出しの意味は維持し、余白と文字サイズを調整して」は、確認可能な依頼です。一度に文章、配色、構造、フォームを変えない方が、原因を追いやすくなります。

6．読む・押す・戻るを確認する

PCだけでなくスマートフォンの幅でも、冒頭、長い見出し、表、ボタン、フッターを読みます。メニュー、ページ内リンク、問い合わせ先を実際に押して、意図した場所へ進めるか確認します。入力や送信を伴うテストは、テスト環境と担当者の許可を用意してから行ってください。

7．公開先と責任者を決め、承認後に反映する

社内確認用のリンク共有か、独自ドメインの公式ページかで、公開の手続きは異なります。公開先の管理画面で対象ファイルと権限を確認し、既存サイトへ入れる場合は戻せる状態を作ります。公開後はログアウトした状態や別の端末でも確認し、管理者だけが見えるプレビューを公開完了と扱わないでください。

修正指示の例：見た目と問い合わせ導線を分ける

ページを見て気になったことを、修正対象と確認条件へ変換します。「信頼感がない」という印象でも、所在地がないのか、提供条件が曖昧なのか、文字が小さいのかで対応は変わります。

問い合わせボタンを置く場合、例えばリンク先が「#consultation」なら、ページ内に対応する「id=”consultation”」を持つ案内が必要です。そこから既存のフォームへ進む設計と、ページ内で情報を送信する設計も別です。ボタンが動いたことだけで、問い合わせが担当者へ届いたと判断しないようにします。

Claude Codeを使う場合：編集範囲と戻し方を決める

Claude Codeは、制作フォルダーや既存コードを扱う工程で検討する選択肢です。インストールや認証は利用環境で変わるため、公式クイックスタートを確認してください。本記事では契約やインストールを代行するのではなく、制作時の確認手順を示します。

この方法では、バックアップした制作フォルダーや検証環境を使い、調査→変更案→小さな実装→差分・テスト→公開承認と進めます。コード作成に必要のない本番パスワードや全サイトの管理権限は渡しません。WordPressはテーマ・プラグイン・追加CSSの影響もあるため、本稿の1ページ試作とは分け、既存WordPressの改善手順へ進んでください。

共有リンクと正式公開の違い：無料だけで判断しない

2026年10月27日に確認した公式ヘルプでは、Artifactsの新規作成はFreeを含む全プランで利用できますが、新しいリンク共有はPro・Max・Team・Enterpriseが対象で、閲覧者にもClaudeアカウントが必要です。Team・Enterpriseの組織外共有は管理者設定にも左右され、外部アプリ接続等を含む一部の成果物はリンク共有に制限があります。出典：Artifactsの共有に関する公式説明。

2026年9月16日より前の会話で作成されたlegacy artifactsには、Free・Pro・Maxで「Publish」を使う公開方式があります。これは新規Artifactsとは別で、古い検索結果の「無料で誰でも見られる」という手順を、現在の新規作成へそのまま適用しないでください。

自社の公式サイトとして運営するなら、URLとドメインの所有、配信先、暗号化通信、更新権限、フォームの受信先、保守担当を別途確認します。共有リンクは社内確認に適していても、必要な検索設定や計測を自社で管理できるとは限りません。必要な管理項目が満たせるかを、採用する公開方法ごとに確認します。

制作を試せることと、運用費がずっとゼロであることは違います。既存契約で対応できる範囲を先に確認し、費用が発生する公開先や機能をAIの判断だけで申し込まないでください。

公開前のチェックリスト：見た目以外も確認する

完成判定を「きれいに見える」だけにすると、問い合わせや運用の不具合を見落とします。担当者が実際に確認した結果と、まだ試していない項目を分けて残します。

フォームに顧客データを入れたり、外部サービスへ送信したりするテストは、読み取り確認とは異なります。実際の顧客情報をテストに流用せず、許可された環境・入力・宛先で行います。アクセス解析のイベントも、ボタンのクリック、送信操作、実際の有効問い合わせを区別して確認してください。

うまくいかないときの切り分け

エラーを直すために、認証やアクセス制御を無条件で外す指示は避けます。試行錯誤で状態が分からなくなったら、変更前へ戻して、再現する最小の問題から調べ直します。

魚見の実務視点：作れた量より、運営できる範囲を見る

当メディアでは、記事の構成、内部リンク、LP、表示、計測を別々の作業として確認してきました。その過程で、AIが作った文章や画面がそろっていても、重複した説明、読者に不要な作業ラベル、リンクやスマートフォン表示の問題が残ることがありました。制作と確認を分ける必要がある、という運用上の学びです。

ホームページ制作でも、何ページ作れたかより、次の担当者が直せるか、問い合わせを受けられるか、変更が失敗した時に戻せるかを重視します。未確定の内容、接続していない機能、確認していない操作は、管理用の引き継ぎ記録に残します。公開本文の未確定事項を放置するのではなく、解消するか掲載を見送ってから公開してください。

本記事は、Claudeで商用サイトを制作した工数削減やCV改善を当メディアが実測したという事例ではありません。公式仕様と制作上の確認方法を整理した解説であり、上記の依頼文は説明用の例です。実際に検証する場合は、従来の制作時間、AIへの指示、修正、確認、保守までを同じ作業範囲で記録してください。

Claudeのホームページ作成でよくある質問

プログラミング未経験でも始められますか？

構成や文章、1ページの試作から始めることはできます。ただし、コードや公開設定を理解しなくても本番運用を任せられるという意味ではありません。必要な範囲は管理者や制作担当者の確認を受けます。

無料プランだけで作成・公開までできますか？

確認日時点ではFreeでもArtifactsを作成できますが、新しいリンク共有はPro以上が対象です。自社ドメインへ配信する場合の契約・費用も別で、作成から運用まで一律に無料とはいえません。

Claudeの共有リンクを自社サイトの代わりにできますか？

目的と必要な管理項目によります。閲覧条件、URL、検索設定、計測、問い合わせ、更新と保守の要件を満たせるかを確認し、試作の共有と正式サイトの公開を混同しないようにします。

WordPressの記事や既存サイトも変更できますか？

構成・原稿・コードの修正案を作る用途はありますが、新規HTMLの手順をそのまま既存サイトへ適用しないでください。検証環境、バックアップ、変更範囲、テーマとの関係を確認して進めます。

作ったホームページは検索で上位に出ますか？

制作手段だけでは決まりません。公開・取得の状態、検索意図、情報の根拠、ページ構成などを確認する必要があり、Claudeで作ったことが掲載順位や問い合わせを保証するわけではありません。

まとめ：試作・実装・公開・運用を分けて進める

Claudeでホームページを作るなら、まず誰に何を伝える1ページかを決め、確認済みの事実から構成を作ります。画面案を調整した後に、動作、公開条件、受信、更新方法まで確認してください。AIに任せる作業が増えても、未確認のものを完成として扱わないことが、失敗を減らす基本です。

• 既存サイトの改善：Claude CodeとWordPressの実務手順
• 画面案の検討：Claudeでデザインを作成する方法
• 変更と確認の流れ：AIでWebサイトを改善する進め方