ClaudeのアーティファクトをウェブサイトにするAI活用ガイド

はじめに

多くの人がClaudeを使ってウェブサイトを作っています。Claudeに依頼すると、サイトはアーティファクトとして返ってきます。チャット内でそのままプレビューできる単一のファイルです。しかし、アーティファクトを手にしたあと、次に何をすればよいかは明確ではありません。どこかにホスティングし、ドメインを接続し、モバイルで動くようにし、その後の編集方法も考える必要があります。

Claudeにはアーティファクト用の「Publish」ボタンがありますが、その結果はclaude.siteのURL上にAnthropicのUIで包まれた形で公開されます。デモを共有するには十分ですが、ビジネスで使う本物のウェブサイトとしては不十分です。

このガイドでは、Repaintという新しいAIツールを使って、Claudeのアーティファクトを実際に公開されたウェブサイトに変える方法を紹介します。Repaintを使えば、アーティファクトから出発し、サイトを公開し、AIとのチャットで編集できます。

Claudeのアーティファクトを公開するのが難しい理由

Claudeはコードを生成できますが、本格的なウェブサイトビルダーではありません。自分のドメインで公開する方法を尋ねると、別のプラットフォームを案内されます。多くの場合、GitHub、Netlify、Vercelといった開発者ツールを推奨するか、従来のウェブサイトビルダーで作り直すよう提案されます。どちらも理想的ではありません。

開発者ツールはClaudeが生成したコードを直接動かせる点で便利です。一方で、変更のたびに特定のコードファイルを編集する必要があります。コードを書かない人にとっては、ちょっとした編集をAIで行うためだけに、デプロイ済みコードに対してファイルを出し入れし続けることになります。

多くの人はWordPress、Wix、Webflowなどのウェブサイトビルダーを使ってコードの複雑さを避けます。これらのプラットフォームは公開や編集をスムーズにしてくれます。しかし問題は、Claudeのアーティファクトを動かせないため、すべてを手作業で作り直す必要がある点です。そして以降の編集もすべて手作業になってしまいます。

だからこそ、Repaintのようなウェブサイト用AIビルダーを使うべきです。カスタムコードを動かせる柔軟性と、編集・公開を一箇所で行える利便性を両立できます。

Repaintとは？

Repaintはウェブサイトを作成するためのAIプラットフォームです。Claudeを便利にしているのと同じ、チャットベースのワークフローを軸に構築されています。普通の言葉で変更を依頼し、結果を確認し、サイトが思いどおりになるまで何度も繰り返せます。

ただしRepaintはコードを生成する場所ではなく、本格的なウェブサイトプラットフォームです。つまり、Claudeのアーティファクト公開ではカバーされない、実際のウェブサイトを運営する上で必要な部分を担ってくれます。

• AnthropicのUIに包まれない、通常のウェブサイトとしてサイトを公開できる。
• カスタムドメインを接続して、本物のURLで運用できる。
• AIでの編集が継続でき、後からでも変更を加えられる。
• ページタイトル、メタディスクリプション、サイト構造といったSEOの要素を管理できる。
• 単一のアーティファクトから、複数ページのサイトへと拡張できる。

これが、アーティファクトを共有するだけと、自分のサイトを長期的に管理できる場所を持つことの違いです。

ステップ1：Claudeからコードをインポートする

Claudeがウェブサイトを作ると、すべての内容がチャット内でプレビューできる単一のファイルにまとめられます。デフォルトではアーティファクトはHTMLですが、代わりにReact/TSXで出力するよう依頼することもできます。いずれの場合も、アーティファクトパネルの上部にコピーボタンがあります。

まずはClaudeのアーティファクトを開き、コードをコピーしてください。次にRepaintのコードインポーターを開いて貼り付けます。これでウェブサイトの構築プロセスが始まります。Repaintはそのコードをもとに、公開して編集を続けられる完全なウェブサイトを作り上げます。

まだClaudeでアーティファクトを作っていない場合は、Reactで出力するよう依頼するのがおすすめです。Repaintが内部で使っている形式に近いため、細かいデザインの要素が変換で失われる可能性が低くなります。HTMLでも問題ありませんが、その場合に発生する不具合はあとからRepaintとチャットして修正できます。

ステップ2：Repaintに作らせる内容を計画する

コードを貼り付けると、Repaintはサイトを構築する前にいくつか質問をします。これによって、Claudeで作ったバージョンをそのまま使うのか、ゆるやかなインスピレーションとして使うのか、あるいはページ数の多い大きなサイトに発展させるのかを決められます。

コンテンツを計画する

Claudeのアーティファクトは常に単一のファイルなので、通常はリンクが新しいページを開かずにセクションへスクロールする1ページ完結のサイトになります。しかし、ほとんどのビジネスには1ページ以上が必要です。アーティファクトが1ページサイトの場合は、Repaintに複数ページとして構築させることを検討すべきです。

このタイミングでコンテンツを追加することもできます。Claudeのアーティファクトには、ブログ記事のような大量のページ群はまず含まれません。アーティファクトをRepaintにインポートする際に、必要なものをすべて含められるよう範囲を広げることができます。

追加したページも、すでに持っているスタイルに合わせて作られます。

スタイルを計画する

デフォルトでは、Repaintは元のスタイルをコピーします。つまり、色、レイアウト、タイポグラフィ、余白といった見た目をそのまま引き継ぎます。

ただし、必ずしも元のスタイルを維持する必要はありません。気に入らない場合は、Repaintにサイトの再デザインを依頼できます。Repaintは次のことができます。

• 元のデザインをできる限り忠実に再現する
• 気に入っている別のウェブサイトのスタイルに合わせる
• コンテンツに合わせたカスタムスタイルを作る
• Repaintのスタイルライブラリからスタイルを選ぶ
• Repaintに決めてもらう

ここで悩みすぎる必要はありません。生成結果が気に入らなければ、あとから新しいバージョンを作り直してもらえます。

プランを確認する

何かを生成する前に、Repaintはこれから作る内容を具体的に書き出します。どのページを、どんなコンテンツで、どんなスタイルで作るかです。確認して最後の修正を加えてください。サイト全体を作り直すよりも、プランを修正するほうがずっと早く済みます。

確定すれば、Repaintが新しいウェブサイトを構築してくれます。

ステップ3：ウェブサイトを生成する

プランを確定すると、Repaintはサイトの構築を始めます。各ページの進行状況メッセージが表示されます。シンプルなトップページなら1〜2分ほどです。ページ数の多い大規模なサイトでは、もう少し時間がかかることがあります。

Repaintは単に貼り付けたコードをホスティングするわけではありません。Claudeのアーティファクトを素材として扱い、プランに記された内容に沿ってサイトを構築します。完全な再現を依頼した場合は、できる限り元に近づけようとします。ページの追加や別のスタイルを依頼した場合は、アーティファクトを出発点として活用します。

生成の過程で細かい要素が失われることもあります。アーティファクトがHTMLの場合に起こりやすく、ReactのほうがRepaintの内部形式に近いためです。重要な部分が失われた場合は、次のステップで修正できます。

ステップ4：AIでサイトを編集する

Repaintが最初のバージョンを生成すると、画面の右側にそれが表示されます。あとはClaudeで行うのと同じ要領で変更を加えられます。変更したい内容を入力するとRepaintがサイトを更新し、その結果を確認できます。

たとえば、Repaintには次のような依頼ができます。

• 新しいページを追加する
• 色やフォントを変更する
• お問い合わせフォームを追加する
• 画像を生成する
• テキストを書き直す

公開して問題ないと感じるまで、変更を続けられます。

ステップ5：サイトを公開する

サイトの準備ができたら、公開ボタンをクリックしてください。Repaintがサイトをオンラインに公開し、誰にでも共有できるライブURLが発行されます。URLはhttps://xxxxxx-xxxxxx-xxxxxx.sites.repaint.comのような形になります。

ここで、あなたの作業はインターネット上の本物のウェブサイトになります。スマートフォンで開いたり、誰かに送ったり、実際のブラウザでテストしたりできます。公開されたアーティファクトのようにAnthropicのUIに包まれることもありません。

コードをエクスポートしたり、別の場所にファイルをデプロイしたりする必要もありません。これ以降、サイトの編集と公開はRepaint上で行います。あとから変更したい場合は、Repaintにサイトの更新を依頼して、同じボタンで新しいバージョンを公開できます。

ステップ6：ドメインを接続する

自分のURLを使う準備ができたら、ウェブサイト設定 > ドメインに移動し、カスタムドメインを接続をクリックしてください。これには有料プランが必要です。料金の詳細はこちらで確認できます。

ドメインはClaudeとRepaintのどちらでもなく、別のプラットフォームで管理されています。GoDaddy、Namecheap、Cloudflareなどのドメインプロバイダーに登録されているはずです。どこかに移動する必要はなく、ドメインプロバイダーの設定を更新して、ドメインがRepaintのサイトを指すようにするだけです。

初めての場合でも心配いりません。Repaintに手順を聞けば、ステップバイステップで案内してくれます。

設定の反映には数時間かかることがあります。Repaintでドメインが「確認済み」と表示されれば、あなたのウェブサイトは自分のドメインで公開された状態になります。

まとめ

Claudeを使えば、アーティファクト内に最初のバージョンのウェブサイトを簡単に作れますが、それを本物のサイトとしてオンラインに公開し、運用し続けるのは依然として大変です。Repaintを使えば、そのアーティファクトを実際に公開でき、ドメインに接続でき、AIで編集を続けられるウェブサイトに変えられます。Repaintを使えば、Claudeのアーティファクトを公開済みのサイトにすることが、これまで以上に簡単になります。

よくある質問

Claudeに組み込まれているアーティファクト公開機能をそのまま使うのではダメですか？

使うこともできますが、その結果はAnthropicのUIに包まれた、Claudeがホスティングするサンドボックス上に置かれ、自分のドメインに乗せることはできません。デモを共有するなら十分ですが、ほとんどのビジネスが本物のサイトに求めるものとは異なります。Repaintなら、自分のドメイン、自分のブランド、AnthropicのUIなしで通常のウェブサイトを持てます。

ClaudeのアーティファクトをRepaintでウェブサイトにするのにどれくらい時間がかかりますか？

アーティファクトがすでにできていれば、数分しかかかりません。コードの共有、サイトの計画、サイトの生成までは通常2〜5分ほどです。そのあと公開までの時間は、調整の量によって変わります。

Repaintで公開するのにいくらかかりますか？

Repaintへのコードインポート、サイトの生成、編集、公開はすべて無料です。無料プランの主な制限は、使用量に上限があること、カスタムドメインが使えないこと、サイトにRepaintのバッジが表示されることです。有料プランは年払いで月額20ドル、月払いで月額25ドルから始まります。これには拡張された使用枠、カスタムドメインのサポートが含まれ、Repaintのバッジも非表示になります。

GitHub Pages、Netlify、Vercelをそのまま使ってはいけないのですか？

特にコード管理に慣れているなら、もちろん使えます。これらのツールはファイルをオンラインに公開するのが得意です。ただし、意味のある変更を加えるたびにコードに戻ることになり、Claude、エディタ、ホスティングツールの間でファイルをコピーし続けることになります。

Repaintが違うのは、単なるファイル配信の場ではなく、本格的なウェブサイトプラットフォームである点です。AIで編集を続けられ、同じ場所から変更を公開でき、ページ管理、SEO設定の更新、画像の最適化、フォームの接続、カスタムドメインの利用までできます。最初のデプロイのためだけでなく、長期的なウェブサイト運営のために作られています。

問題を直すのにコードの知識は必要ですか？

必要ありません。Repaintはコードを書かない人のために作られています。Claudeからコードをインポートしたあとは、二度とコードを管理する必要はありません。何かおかしい場合は、AIとのチャットで修正できます。コードがわかれば細部まで指示しやすくなりますが、必須ではありません。

サイトはClaudeのアーティファクトと完全に同じ見た目になりますか？

元のデザインを再現するようRepaintに伝えれば、ほぼ同じ見た目になります。Repaintはコードを独自のウェブサイト形式に変換するため、一部の細部が失われることがあります。変換上の問題はアーティファクトがHTMLの場合に起こりやすくなります。その場合でも、数回のやり取りですべて直せるはずです。

AIが間違えた場合はどうなりますか？

更新のたびに、Repaintはサイトのすべてのバージョンを保存しています。Repaintに戻すよう依頼すれば、以前のバージョンに戻ります。特定の時点に戻したい場合は、過去のバージョンを手動で復元することもできます。そのため、サイトを壊す心配なく自由に変更を加えられます。

インポート後、フォームやボタンは動きますか？

はい。元のClaudeのアーティファクトでは、お問い合わせフォームはおそらく機能していませんでした。しかしRepaintにサイトを移すと、フォームを実際のお問い合わせフォームに変換でき、送信があった際にメール通知を受け取れます。ボタンも、実在するページやセクションにリンクしていれば動作します。どこにもリンクしていないボタンがあれば、Repaintに接続を依頼できます。

Claudeのアーティファクトに含まれる画像、アイコン、その他のアセットもRepaintで扱えますか？

Claudeのアーティファクトは通常、画像ファイルそのものを内部に保存しません。多くの場合、別の場所にホスティングされた画像にリンクしています。コードをインポートすると、Repaintはそれらの画像を取得して保存できるので、新しいサイトでも継続して利用できます。必要に応じてRepaintで画像を生成することもできます。

SEO設定、解析、メタデータも追加できますか？

はい。Repaintに依頼するだけで、カスタムコード、解析、メタデータを追加できます。技術的なSEOの設定もしてもらえますし、他のプラットフォームのスクリプトや埋め込みも追加できます。Google Analyticsを追加したい場合は、GAのIDを共有するだけで大丈夫です。

Repaintはホスティングの代わりになりますか？それとも別のホスティングが必要ですか？

Repaintはホスティングプラットフォームです。あなたのウェブサイトを動かします。GitHub Pages、Netlify、Vercel、その他のウェブサイトビルダーなど、別のホスティングプラットフォームは必要ありません。