Claudeアーティファクトをウェブサイトとして公開する方法

Claudeのアーティファクト機能は、ウェブサイトを丸ごと生成する最速の方法のひとつです。必要なものを説明すると、ClaudeがHTMLとCSSを書き、チャット画面の中でそのままプレビューできます。見た目も申し分ありません。

ところが、そこで壁にぶつかります。 これを実際にインターネット上へ公開するには、どうすればいいのでしょう。

アーティファクトは、Claudeの中にあります。プレビューしたり、コードをコピーしたり、会話へのリンクを共有したりはできます。けれど、本物のウェブサイトではありません。名刺に載せられるURLがありません。Googleにも表示されません。会話を失えば、消えてしまいます。そして、独自ドメインにつなぐことは、もちろんできません。

このガイドでは、Claudeのアーティファクトを、独自のアドレス、SSL証明書、動作するお問い合わせフォーム付きの公開ウェブサイトにする方法を、5分以内でご紹介します。

Claudeのアーティファクトとは？

Claudeにウェブサイト、グラフ、インタラクティブなアプリなど、見た目のあるものを作ってほしいと頼むと、コードを生成し、会話の横のパネルにライブプレビューを表示します。Anthropicはこれを アーティファクトと呼んでいます。ブラウザで動く、それだけで完結したHTML/CSS/JSのファイルです。

ウェブサイトの生成において、アーティファクトは本当に見事です。コードはきれいで、デザインはモダンで、レスポンシブな動作もたいていそのまま機能します。問題は品質ではありません。届け方です。アーティファクトは、公開ではなくプレビューにすぎません。

ステップ1：Claudeからコードを取り出す

まず、アーティファクトのHTMLファイルを自分のパソコンに取り込む必要があります。方法は2つあります。

方法A：コードをコピーする

1. Claudeのアーティファクトのパネルをクリックして、広げます。
2. コードのアイコン（または「ソースを表示」）をクリックして、生のHTMLを表示します。
3. コピーをクリックして、コードブロック全体をコピーします。
4. テキストエディターを開きます（Windowsならメモ帳、MacならTextEdit。必ずプレーンテキストモードにしてください）。
5. コードを貼り付けて、デスクトップに index.html という名前で保存します。

方法B：アーティファクトをダウンロードする

Claudeのプランによっては、アーティファクトをHTMLファイルとして直接ダウンロードできます。アーティファクトのパネルにダウンロードボタンがあれば、そちらを使うほうが早いです。ダウンロードしたファイルの名前が index.html であることを確認してください（違う場合は名前を変更します）。

ステップ2：SiteDropにドロップする

これで、パソコンに index.html ファイルができました。インターネットに公開するには、次のようにします。

1. SiteDropにアクセスしてログインします（始めるのは無料です）。
2. index.html ファイルをSiteDropのダッシュボードにドラッグします。これだけです。ドラッグ1回。
3. 5秒もかからないうちに、SiteDropがサイトをグローバルCDNに配信し、無料のSSL証明書（HTTPS）で保護して、公開用のリンクを発行します。

これで、あなたのClaudeアーティファクトは本物のウェブサイトになり、世界中の誰でもアクセスできます。

ステップ3：自分のドメインを取得する

無料のSiteDropのリンクは共有には十分ですが、プロらしいアドレス（www.yourbusiness.com のような）がほしい場合は、SiteDropのダッシュボードから直接取得できます。

1. ダッシュボードで、サイトの設定を開きます。
2. 希望するドメイン名を検索します。
3. 取得します。DNSの設定はすべてSiteDropが自動で行います。レジストラの管理画面も、ネームサーバーのレコードも、48時間の待ち時間もありません。

ステップ4：動作するお問い合わせフォームを手に入れる（無料）

Claudeのアーティファクトにお問い合わせフォームが含まれていれば（ほとんどの事業用ウェブサイトにはあったほうがいいでしょう）、SiteDropが自動で接続します。フォームから送信されたメッセージは、 SiteDropの内蔵受信箱 に届きます。メールホスティングも、外部のフォームツールも、月額の契約も要りません。

これは、ほかのホスティングと比べた大きな強みのひとつです。サイトをアップロードした瞬間から、お問い合わせフォームが本当に動きます。

より良いClaudeアーティファクトを作るコツ

ウェブサイトの品質は、プロンプトの質で決まります。Claudeからより良いアーティファクトを引き出すコツをご紹介します。

事業について具体的に伝える

「マンチェスターにある、Paws & Shineという出張ドッグトリミング店の1ページのウェブサイトを作ってください。キャッチコピー付きのヒーローセクション、4つのサービスと料金を載せたサービスセクション、お客様の声、お問い合わせフォームを入れてください。温かみのあるティールとクリーム色の配色で、モダンな丸みを帯びたデザインにしてください。」

具体的に伝えるほど、仕上がりは洗練されます。実際の店名、実際のサービス、実際の料金、好みの色を入れましょう。

すべてを1つのファイルにまとめてもらう

プロンプトに「CSSはすべてHTMLファイルの中にインラインで書いてください」や「1つで完結するindex.htmlにしてください」と加えましょう。そうすれば、SiteDropへのアップロードがスムーズになります。ファイルは1つ、ドラッグは1回で完了です。

モバイル対応を依頼する

プロンプトに「モバイル、タブレット、デスクトップのすべてに完全対応したレスポンシブにしてください」と加えましょう。Claudeはたいていうまくやってくれますが、はっきり伝えておけば、ブレークポイントを飛ばされる心配がありません。

SiteDropのプロンプトクリエイターを使う

良いプロンプトの書き方に自信がありませんか？ SiteDropのプロンプトクリエイター なら、事業についていくつか質問するだけで、Claudeに貼り付けるのにぴったりのプロンプトを作ってくれます。技術的な細かい部分は、すべてお任せです。

Claudeの会話リンクを共有するだけではだめなのか

Claudeでは会話のリンクを共有でき、受け取った人はアーティファクトを見られます。それなのに、なぜSiteDropが必要なのでしょう。共有された会話のリンクには、次のような問題があるからです。

• 本物のURLではありません— Claudeの会話リンクを、名刺やGoogleのビジネスプロフィールに載せることはできません。
• ドメインがありません— あなたのウェブサイトは、事業名ではなく claude.ai/share/... にあることになります。
• クロールされません— 検索エンジンやAIの回答エンジンが、見つけたり引用したりできません。
• お問い合わせフォームがありません— 訪問者があなたに連絡できません。
• 消えてしまうかもしれません— Anthropicが共有のポリシーを変更したり、あなたが会話を失ったりすれば、リンクは切れます。
• Claudeのブランドが表示されます— あなたの事業のブランドではありません。

SiteDropでホスティングされたサイトは、あなたのものです。あなたのドメイン、あなたのブランド、あなたのお問い合わせフォーム、あなたのアクセス解析。他社の製品の中にあるプレビューではなく、本物のウェブサイトです。

公開したあとは、何ができる？

• ビジュアルで内容を編集— SiteDropの ビジュアルエディター を使えば、ページ上で直接、テキスト、画像、内容を変更できます。
• 自分の画像を追加— プレースホルダー画像を、事業の本物の写真に差し替えます。
• いつでも更新— Claudeで変更を加えてアーティファクトを作り直し、SiteDropに再アップロードすれば、公開サイトはすぐに更新されます。
• 訪問者を確認— SiteDropのダッシュボードで、サイトを何人が訪れたかを確認できます。

全体の流れを、順を追って確認

1. Claudeを開いて、ウェブサイトの内容を説明します（または プロンプトクリエイターを使います）。
2. Claudeがアーティファクトを生成します。プレビューして、気に入ったか確認します。
3. コードをコピーするか、HTMLファイルをダウンロードします。
4. ファイルをSiteDropにドラッグします。
5. ウェブサイトが公開されます。希望すれば、独自ドメインも取得できます。

所要時間は合計5分以内。費用は、始めるだけなら無料です。