Claudeでホームページを作って公開する方法
「ホームページを作って」とClaudeに頼むと、会話の横にできあがったページが表示されます。ここまではとても簡単ですが、そのページをお客様に見てもらうには、もう一歩必要です。この記事では、Claudeでホームページを作るところから、人に見せる・自分のサイトとして公開する・あとから直すところまでを、実際のClaudeの画面で順に紹介します。例として、架空のカフェ「こもれび珈琲」のホームページを作ります。
1. Claudeでできること
Claudeは、Anthropicが提供するAIアシスタントです。ホームページづくりでは、次のことができます。
- ページを作る: 伝えた内容をもとに、HTMLのファイルを作ります。会話の横にプレビューが表示されます。
- 会話で直す: 「見出しを大きく」「メニューを足して」と頼むと、ページを書き直します。
- 保存する・見せる: できたHTMLをダウンロードしたり、Artifactsとして公開してリンクで見せたりできます。
- 自分のサイトとして公開する: コネクタでホスティングサービスとつなぐと、Claudeがアップロードまで行います。
この記事の画面は、2026年11月時点のWeb版Claudeのものです。画面の表記や使える機能は、プランや時期によって変わることがあります。
2. Claudeでホームページを作る
STEP1：作りたいページを伝える
Claudeを開き、入力欄に作りたいページの内容を書いて送ります。お店の名前、見る人、載せる情報、雰囲気を具体的に書くのがコツです（書き方は6章で詳しく紹介します）。
STEP2：プレビューで確かめる
しばらく待つと、会話の右側にできあがったページが表示されます。左上の目のアイコンでプレビュー、</> のアイコンでHTMLのコードに切り替えられます。
Claudeの返事もよく読みましょう。この例では、住所や電話番号に仮の文字が入っていることを、Claudeが自分から教えてくれました。渡していない情報は、Claudeが仮の内容で埋めることがあります。
STEP3：会話で直す
気になるところは、そのまま会話で伝えます。「メニューにチーズケーキ（450円）を足して」「スマホで見たときに文字を少し大きく」のように、どこをどう直したいかを書くと、思ったとおりに直りやすくなります。
3. できたページを保存する・人に見せる
プレビューの右上にある「コピー」を押すとHTMLがコピーされます。横の ▼ を押すと、次の2つが選べます。
- HTMLとしてダウンロード: パソコンにHTMLファイルとして保存します。あとでホスティングサービスにアップロードするときに使います。
- Artifacts を公開: ページをClaudeの「Artifacts」として公開し、リンクで見せられるようにします。
Artifactsとして公開すると
「Artifacts を公開」を押すと、Claudeがページを公開します。公開した直後は「あなたのみ」、つまり自分だけが見られる状態です。
公開したページを開き、右上の「共有」を押すと、見られる人を選べます。メールアドレスで人を招待するか、「リンクを知っている全員」（閲覧だけで、編集はできない）にします。
Artifactsは、試作を家族や仕事仲間に見てもらうには手軽です。一方で、URLはClaudeのもので、お店の名前のURLや独自ドメインは使えません。名刺やお店の案内に載せる正式なサイトにするなら、次の章の方法で公開します。
4. 自分のサイトとして公開する2つの方法
| 方法 | やること | 直すとき |
|---|---|---|
| ダウンロードして | 「HTMLとしてダウンロード」で保存し、 | Claudeで直して、 |
| コネクタで | ホスティングサービスの | 「ここを直して」と |
ダウンロードしてアップロードする方法は、どのホスティングサービスでも使えます。サービスの選び方と手順はHTMLファイルを無料で公開する方法を比較で紹介しています。
コネクタは、Claudeとほかのサービスをつなぐ仕組みです。中身はMCP（Model Context Protocol）という、AIが外部のサービスを操作するための共通の仕組みで、つないだサービスの操作をClaudeに任せられます。一度つないでおけば、直すたびにファイルを出し入れする必要がなくなります。次の章で、すぐサイトのコネクタを例に手順を紹介します。
5. コネクタで公開まで任せる手順
STEP1：コネクタのページで「Claude に接続」
すぐサイトは、Claudeのコネクタディレクトリに「Sugusite」として掲載されています。すぐサイト（Sugusite）のページを開き、「Claude に接続」を押します。
STEP2：すぐサイトにログインする
すぐサイトの「AIとの接続」画面が開きます。ログインしてください。アカウントが無い方は、この画面から新規登録できます（30日間の無料トライアル付き）。
STEP3：内容を確かめて「許可する」
Claudeができることと、できないことが表示されます。確かめたら「許可する」を押します。Claudeの画面に戻れば、接続は完了です。パスワードの変更やカードの登録、プランの変更はClaudeからはできないようになっています。
STEP4：「作って公開して」と頼む
新しい会話で、作りたいページと「すぐサイトで公開して」を一緒に頼みます。
STEP5：Claudeの操作を確かめて許可する
Claudeがすぐサイトを操作する前に、何をしようとしているかが表示されます。下の例は、komorebi-coffee という名前でサイトを作ろうとしているところです。内容がよければ「1回だけ許可する」を押します。毎回確かめるのが面倒な操作は「常に許可する」にもできます。
ファイルをアップロードするときは、送るHTMLの中身も確かめられます。
STEP6：公開されたページを開く
アップロードが終わると、Claudeが公開したURLを教えてくれます。この例では https://komorebi-coffee.mysugusite.com が公開されたURLです。開くと、誰でも見られるページになっています。
STEP7：あとから会話で直す
公開したあとも、会話で頼むだけで直せます。Claudeはサーバー上のファイルを読み直してから書き換えるので、手元にファイルが無くても大丈夫です。
ほかのAI（ChatGPT・Claude Code・Cursorなど）でのつなぎ方は、AIからすぐサイトを操作する（MCP連携）の使い方で紹介しています。
6. Claudeに頼むときのコツ
「ホームページを作って」だけでも形にはなりますが、次のことを最初に伝えると、直す回数が減ります。
- 誰の、何のためのページか: 「駅前の小さなカフェ。近所の方に営業時間とメニューを知ってもらいたい」のように、目的と見る人を伝えます。載せる内容や順番をClaudeが考えやすくなります。
- 載せる情報: 店名・住所・電話番号・営業時間・メニューと値段など、実際の情報を渡します。渡さない情報は、Claudeがもっともらしい仮の内容で埋めてしまいます。
- ページの構成: 「上から順に、お店の紹介・メニュー・アクセス・お問い合わせ」のように並び順を伝えます。
- 雰囲気: 「木のぬくもりがある、落ち着いた色合い」のように言葉で伝えます。参考にしたいサイトの雰囲気を説明するのも効果的です。
- 作りの条件: 「1つのHTMLファイルで」「スマホで見やすく」「外部のJavaScriptは使わないで」と添えると、公開しやすい形で作ってくれます。
- まず確認したいときは、そう伝える: コネクタで公開するときは「まずパスワード付きのプレビューで見せて」と頼むと、関係者だけが見られる状態で確かめてから公開できます。
この記事の画面で使った依頼文は次のとおりです。
依頼文を一から考えるのが難しいときは、AIで簡単ホームページデザイン！のプロンプト作成ツールを使ってください。ホームページの目的・載せる情報・内容・色のイメージを入れると、Claudeにそのまま貼り付けられる依頼文ができます。
写真は、Claudeに説明して作ってもらうよりも、実際のお店や商品の写真を使うほうが伝わります。AIで画像を作る方法はAIで簡単画像作成！で紹介しています。
7. 公開する前に確かめること
Claudeが作ったページは見た目が整っていても、中身に思わぬ間違いが混ざることがあります。公開する前に、とくに次の点を確かめてください。
- 情報が正しいか: 住所・電話番号・営業時間・値段を、一文字ずつ確認します。Claudeは渡していない情報を作って書くことがあり、「○○」のような仮の文字が残っていることもあります。
- お問い合わせフォームが動くか: Claudeが作るフォームは見た目だけで、送信しても誰にも届かないことがよくあります。HTMLだけのサイトでフォームを使うには、フォーム送信サービスを使うか、メールソフトが開くリンク（mailto）にします。
- 画像の権利: ほかのサイトの画像のURLが入っていないか確認します。使う写真は、自分で撮ったものか、使ってよいと確認できたものにします。
- スマホで見やすいか: 公開したURLをスマホで開き、文字が小さすぎないか、横にはみ出していないかを確認します。
ほかのサイトから読み込んでいるプログラムなど、確かめておきたいことの一覧は、AIでホームページを作って公開する方法にまとめています。
8. すぐサイトについて
最後に、この記事を書いている私たちのサービス、すぐサイトのアピールをさせてください。
すぐサイトは、HTMLファイルをアップロードするだけでホームページを公開できる、日本のホスティングサービスです。自分で作ったHTMLやAIに作ってもらったページをそのまま公開できるほか、文章と写真を入れるだけで作れる飲食店向けのテンプレートや、今のサイトをURLから取り込む機能もあります。料金は1サイト月額220円（税込）で、お店や会社のサイトなど商用にも使えます。初回30日間は無料で、クレジットカードを登録せずに試せます。
Claudeのコネクタディレクトリに掲載
すぐサイトは、Claudeのコネクタディレクトリに掲載されています。URLを入力しなくても、ディレクトリのページから「Claude に接続」を押すだけでつなげます。
Claudeがすぐサイトの決まりを知っている
つないだClaudeは、すぐサイトの使い方（URLの決まり方、画像の容量、お問い合わせフォームの作り方など）と、あなたのアカウントやサイトの状態を確かめてから作業します。「フォームを付けたい」と頼めば、HTMLだけで動く方法を提案します。
公開前の確認がしやすい
ファイルやフォルダごとにパスワードをかけられるので、できたページをまず関係者だけに見てもらい、確認が済んでから公開する、という進め方ができます。
パスワードはClaudeに渡らない
接続はブラウザでのログインと許可で行い、Claudeにパスワードを教える必要はありません。パスワードの変更やカードの登録、プランの変更など大切な操作は、Claudeからはできないようにしています。
詳しくはAIに話しかけるだけでホームページを公開のページをご覧ください。