Claude（クロード）でWebサイトを作成する方法｜アーティファクトの使い方と公開手順
「Claude（クロード）でWebサイトが作れるらしいけど、どうやるの？」「ChatGPTやGeminiと何が違うの？」。この記事は、ClaudeでのWebサイト作成に興味がある方に向けて書いています。
結論から言うと、Claudeの「アーティファクト」機能を使えば、会話だけでWebサイトのHTMLを作り、その場でプレビューまでできます。アーティファクトは無料プランでも利用でき、公開リンクで共有することもできます。ただし、会社の公式サイトとして運用するなら、HTMLを書き出してサーバーやホスティングサービスで公開するのが基本です。複数ページの本格的なサイトを作りたい場合は、開発向けの「Claude Code」という選択肢もあります。
この記事では、Claudeでサイトを作る手順、プロンプト例、公開方法、注意点までを、ホームページ制作会社の視点で解説します。
目次
Claude（クロード）とは？サイト作成で使える機能
Claudeは、Anthropic社が開発した対話型の生成AIです。長い文章の読み書きや、指示に沿った丁寧な出力、コードの生成を得意としています。Webサイト作成に関係する主な機能は次の2つです。
アーティファクト：チャットでサイトを作ってプレビュー
アーティファクトとは、Claudeが作ったHTMLページやReactのコンポーネント、図などを、チャットの横に独立した画面として表示する機能です。Webサイトを作るよう依頼すると、コードと一緒に実際の見た目がプレビューされ、会話で修正を重ねられます。Free、Pro、Maxなど全プランで利用できます。
Claude Code：本格的なサイト制作向け
Claude Codeは、パソコン上のファイルを直接読み書きしながら、コードを書いたり修正したりするAIツールです。複数ページで構成されたサイトや、WordPressのテーマ、既存サイトの改修など、より本格的な制作に向いています。有料プランが対象で、ターミナル（コマンド入力画面）などの基本的な知識があると使いやすくなります。
Claudeでサイトを作る手順（アーティファクト）
ここでは、アーティファクトを使って1ページのWebサイトを作る流れを紹介します。
ステップ1：材料をそろえる
Claudeは長い文章を読み込むのが得意です。会社案内、パンフレットの文章、お客様の声、サービスの料金表などをそのまま貼り付けると、内容を踏まえたサイトを作ってくれます。材料が多いほど、自社らしいサイトになります。
ステップ2：条件を伝えて生成する
次のようなプロンプトで依頼します。
「次の会社情報をもとに、1ページで完結するWebサイトをHTMLで作ってください。
・業種・地域：福岡市の注文住宅の工務店
・ターゲット：初めて家を建てる30代の子育て世帯
・目的：完成見学会の予約を増やしたい
・載せる項目：キャッチコピー、選ばれる理由3つ、施工事例、家づくりの流れ、よくある質問、見学会の案内、予約ボタン
・雰囲気：木のぬくもりを感じる、あたたかく落ち着いた配色
・スマートフォンでの表示を優先してください
・書かれていない情報は作らず【要確認】と書いてください
【会社情報を貼り付け】」
最後の「書かれていない情報は作らず【要確認】と書いて」という一文を入れると、架空の情報が入るのを防ぎやすくなります。
ステップ3：プレビューで確認する
アーティファクトのプレビューで見た目を確認します。文章の量やボタンの位置、スマートフォンでの見え方を意識してチェックしましょう。
ステップ4：会話で修正する
修正は1〜2点ずつ、変えたくない部分も明示して依頼します。
- 「施工事例をカード形式にして、写真の下に一言コメントを入れてください。ほかは変えないでください」
- 「キャッチコピーを、子育て世帯の不安に寄り添う表現で5案出してください」
ステップ5：情報を正しく直す
【要確認】と書かれた部分や、店名・住所・電話番号・料金などを、実際の情報に置き換えます。公開前の最重要チェックです。
ステップ6：書き出して公開する
完成したら、コードをコピーして「index.html」として保存し、レンタルサーバーやホスティングサービスにアップロードします。
Claudeで作ったサイトの公開方法
Claudeで作ったサイトの公開方法は、大きく2つあります。
Claudeの公開リンクで共有する
Free、Pro、Maxプランでは、アーティファクトを公開して、リンクを知っている人にClaudeのアカウントなしで見てもらうことができます。TeamやEnterpriseプランでは、初期設定では組織内での共有に限られます。
手軽に共有できるため、社内での確認や、制作会社とのイメージ共有に便利です。ただし、独自ドメインやアクセス解析、問い合わせフォームの送信処理は使えないため、公式サイトとしての運用には向きません。
HTMLを書き出して外部で公開する
会社や店舗の公式サイトとして使うなら、HTMLを書き出してレンタルサーバーやCloudflare Pages、Netlifyなどで公開しましょう。独自ドメインやアクセス解析、フォームサービスを組み合わせて使えます。無料で公開する方法はAIでホームページを完全無料で作成・公開する方法で解説しています。
Claude・ChatGPT・Geminiの違い
サイト作成に使う生成AIとして、よく比較される3つの特徴を整理します。
| AI | サイト作成での特徴 | 向いている使い方 |
|---|---|---|
| Claude | 長い資料を読み込んで丁寧にまとめるのが得意。アーティファクトでプレビュー | 会社資料をもとにした原稿づくり、1ページサイトの試作 |
| ChatGPT | 利用者が多く情報が豊富。コードブロックでプレビュー、有料のChatGPT Sitesで公開も | 原稿づくり、アイデア出し |
| Gemini | Canvasでプレビューしやすい。Googleのサービスと連携しやすい | 試作、Googleサービスとの組み合わせ |
どれが優れているというより、「手元の材料」と「目的」に合わせて使い分けるのがおすすめです。ChatGPTの使い方はChatGPTでホームページを作成する方法、Geminiの使い方はGeminiでホームページを作成する方法で紹介しています。
Claudeでサイトを作るときの注意点
- 公開リンクは誰でも見られる：リンクを知っている人なら閲覧できるため、未公開情報や個人情報を含むページは公開しない
- フォームは見た目だけ：問い合わせフォームは送信の仕組みが入っていないことが多い。フォームサービスなどで対応する
- 更新の手間：HTMLで作ったサイトは、文章を変えるたびにコードの修正と再アップロードが必要
- 入力する情報に注意：顧客情報や社外秘の数字はプロンプトに入れない
制作会社から見たClaudeの活用ポイント
ホームページ制作の現場から見ると、Claudeの強みは「たくさんの資料を読み込んで、筋の通った文章にまとめる力」です。会社案内、過去の提案書、お客様アンケートなど、バラバラの資料をまとめて渡すと、強みやメッセージを整理した原稿のたたき台を作ってくれます。
スゴヨクでも、AIを原稿の下書きやコーディングの補助、公開前のチェックなどに取り入れています。ただし、どのAIを使っても、競合との違いの判断や、問い合わせにつながる導線の設計は人が考える部分です。AIで浮いた時間をそこに使うことが、成果への近道です。
Claudeでサイトを作るときのプロンプト集
用途別に、Claudeにそのまま使えるプロンプト例を紹介します。【 】を自社の内容に置き換えて使ってください。
| 用途 | プロンプトの例 |
|---|---|
| 資料から原稿を作る | 次の会社案内とお客様アンケートを読み、ホームページのトップページに載せる「選ばれる理由」を3つ、根拠付きで作ってください。資料にない情報は作らないでください |
| LPの試作 | 次の商品情報をもとに、1ページ完結のLPをHTMLで作ってください。構成は悩み→解決策→理由→声→料金→FAQ→申し込みの順で |
| デザインの調整 | 今のページの配色を【色】基調に変え、見出しを大きく、行間を広げてください。ほかは変えないでください |
| 多言語化 | このページの文章を、日本の文化に詳しくない海外の旅行者にも伝わる自然な英語にしてください |
| 公開前チェック | このHTMLの誤字脱字、リンクの抜け、画像のalt属性の抜け、スマホで読みにくい箇所を指摘してください |
Claudeならではの使い方のコツ
- 資料はまとめて渡す：長い文章も読み込めるため、会社案内や過去の提案書を丸ごと貼り付けてOK
- 「資料にない情報は作らない」と明記する：事実と異なる内容が入るのを防ぐ
- 役割を決める：「あなたは中小企業のWebディレクターです」と立場を指定すると、提案の視点が定まる
よくある質問
Q. Claudeは無料でWebサイトを作れますか？
はい。アーティファクトは無料プランでも利用でき、Webサイトの作成とプレビュー、公開リンクでの共有ができます。ただし、利用回数には上限があります。
Q. Claudeで作ったサイトに独自ドメインは使えますか？
Claudeの公開リンクで独自ドメインを使う方法は、公式には案内されていません。独自ドメインで公開したい場合は、HTMLを書き出してサーバーやホスティングサービスで公開しましょう。
Q. Claude Codeとアーティファクトはどちらを使えばいいですか？
1ページのサイトや試作ならアーティファクトで十分です。複数ページのサイトや既存サイトの改修など、本格的な制作を自分で行いたい場合はClaude Codeが向いています。
Q. Claudeで作ったサイトはスマホに対応できますか？
プロンプトで「スマートフォンでの表示を優先して」と伝えれば、多くの場合スマホ対応のサイトを作ってくれます。公開前に実機で確認しましょう。
まとめ：Claudeは「資料からサイトを組み立てる」のが得意
- Claudeのアーティファクトを使えば、会話だけでWebサイトを作成・プレビューできる（無料プランでも可）
- 公式サイトとして運用するなら、HTMLを書き出してサーバーやホスティングで公開する
- 本格的な制作にはClaude Code。どの方法でも、事実確認と導線設計は人が行う
とはいえ、AIで作ったサイトを「問い合わせが増えるサイト」に仕上げるには、原稿や導線、SEOの専門的な設計が欠かせません。スゴヨクでは、AIも活用しながら「売れる」ホームページを制作し、公開後の改善まで伴走しています。
まずは無料相談から、お気軽にご相談ください。
