AIが生成したコードをウェブサイトにする方法

はじめに

多くの人がAIを使ってウェブサイトを作っています。ChatGPT、Claude、Geminiといったツールは、説明したサイトのプレビュー付きで1つのコードファイルを快く生成してくれます。しかし、そのコードを手に入れたあと、次に何をすべきかは明確ではありません。どこかにホスティングし、ドメインを接続し、モバイルでも動作するようにし、その後も編集を続ける方法を考えなければなりません。

GitHubやNetlifyのような従来の開発者向けツールはそのファイルをオンラインでホスティングできますが、編集のたびにコードファイル、デプロイ、技術的な詳細を管理する必要があります。多くの人はそうした作業に関わりたくないものです。特に、そもそもAIがあったからこそコードを手に入れられたのですから。

このガイドでは、Repaintという新しいAIツールを使って、AIが生成したコードを実際に公開されたウェブサイトに変える方法を紹介します。コードから出発してサイトを公開し、AIとの会話で編集できるようになります。

AIが生成したコードの公開はなぜ難しいのか

AIのおかげで、ウェブサイトの動くコードファイルを手に入れることは以前よりずっと簡単になりました。問題は、ChatGPT、Claude、GeminiのようなAIチャットボットは、そのコードを実際のウェブサイトとしてホスティングするために作られていないことです。これらはファイルを渡すだけで、あとはあなた次第になります。そこからの現実的な選択肢は、GitHub、Netlify、Vercelのような開発者向けツールだけです。これらのツールは機能しますが、開発者向けに作られています。

開発者向けツールはAIが生成したコードを直接実行できるので便利です。デメリットは、変更のたびに特定のコードファイルを編集する必要があることです。コードを書かない人にとっては、簡単な編集をAIで行うだけのために、デプロイされたコードとの間でファイルを行き来させ続けることを意味します。

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

Repaintとは？

Repaintはウェブサイトを作成するためのAIプラットフォームです。すべてはチャットで完結します。希望を伝え、結果を確認し、サイトが思い通りになるまで繰り返します。

しかしRepaintは単なるコード生成の場ではなく、完全なウェブサイトプラットフォームです。つまり、AIチャットボットでは対応できないウェブサイト運営の部分を引き受けてくれます。

• サイトを公開し、実際にオンラインで訪問できるようにします。
• カスタムドメインを接続できるので、本物のURLでサイトを公開できます。
• サイトをAIで編集可能な状態に保つので、後から変更を加えられます。
• ページタイトル、ディスクリプション、サイト構成などのSEOの詳細を管理できます。
• サイトを拡張する必要があるときに、新しいページを作成できます。

これが、1つのコードファイルを所有していることと、サイトを長期的に管理できる本物の場所を持っていることの違いです。

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

ChatGPT、Claude、GeminiのようなチャットボットがウェブサイトをAIで作ると、結果は通常、依頼内容に応じてHTMLまたはReactの1つのコードファイルになります。これらのチャットボットはどれも、UIからファイルをコピーできるようになっています。

まずは、コードが生成された場所からコードをコピーしてください。次にRepaintのコードインポーターにアクセスして貼り付けます。これでウェブサイト構築プロセスが始まります。Repaintはあなたのコードを使って、公開・編集を続けられる完全なウェブサイトを作成します。

選べる場合は、Reactで生成してもらうことをおすすめします。Repaintが使っている形式に近いため、細かいデザインの詳細が変換時に失われる可能性が低くなります。HTMLでも問題ありません。何か問題があっても、後からRepaintとのチャットで修正できます。

特定のチャットボットからコードを取得した場合は、それぞれに合わせたガイドもご覧いただけます：ChatGPT、Claude、Gemini。

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

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

コンテンツを計画する

1つのコードファイルから作られたサイトは、通常リンクが新しいページではなくセクションへスクロールする1ページ構成です。しかし、ほとんどのビジネスでは1ページ以上が必要です。1ページのサイトを持っている場合は、Repaintに複数ページとして構築させることを検討すべきです。

この機会にコンテンツを追加することもできます。1つのコードファイルでは、ブログ記事のようなものを含む完全なウェブサイトをカバーすることはまずありません。Repaintにコードをインポートするときに、必要なものすべてを含めるよう範囲を広げられます。

新しいページは、既存のスタイルに合わせて作られます。

スタイルを計画する

デフォルトでは、Repaintは元のコードのスタイルをコピーします。つまり、色、レイアウト、タイポグラフィ、余白などの見た目を維持します。

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

• 元のコードをできる限り忠実に再現する
• 気に入った別のウェブサイトのスタイルに合わせる
• あなたのコンテンツに合わせたカスタムスタイルを作る
• Repaintのスタイルライブラリからスタイルを選ぶ
• Repaintにおまかせする

あまり悩みすぎる必要はありません。気に入らなければ、後から新しいバージョンを作るよう依頼できます。

プランを確認する

生成を始める前に、Repaintは作成する内容を正確に書き出します：どのページを、どんなコンテンツで、どんなスタイルで作るのか。よく確認して、最後の修正を加えてください。サイト全体を再生成するより、プランを修正する方がはるかに早いです。

確認すると、Repaintが新しいウェブサイトを構築します！

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

プランを確認すると、Repaintがサイトの構築を開始します。各ページを進めていくにつれて進捗メッセージが表示されます。シンプルなトップページなら1〜2分で終わります。ページ数が多い大規模なサイトは、もう少し時間がかかることがあります。

Repaintは貼り付けたコードを単にホスティングしているわけではありません。元のコードを素材として使い、プランで示されたサイトを構築します。完全な再現を依頼した場合は、元のコードに忠実に合わせようとします。ページの追加や別のスタイルを依頼した場合は、元のコードを出発点として使います。

生成中に詳細が変換時に失われることがあります。元のファイルがHTMLの場合により頻繁に起こります。ReactのほうがRepaintが使う形式に近いためです。重要な詳細が失われた場合は、次のステップで修正できます。

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

Repaintが最初のバージョンを生成すると、画面の右側に表示されます。これでチャットボットと同じ方法で変更を加えられます。変えたい内容を入力すると、Repaintがサイトを更新し、その結果を確認できます。

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

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

サイトが公開できる状態だと感じるまで、変更を続けられます。

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

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

ここからは、あなたの作業がインターネット上の本物のウェブサイトになります。スマートフォンで開いたり、誰かに送ったり、実際のブラウザでテストしたりできます。

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

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

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

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

初めての場合でも心配いりません。Repaintに案内を頼んでみてください。何をすべきか、ステップバイステップで正確に教えてくれます。

変更が反映されるまで数時間かかることがあります。Repaintにドメインが確認済みと表示されれば、サイトは自分のドメインで公開されています。

まとめ

AIのおかげでウェブサイトの最初のバージョンを生成するのは簡単ですが、そのコードをオンラインに公開し維持するのは依然として難しいものです。Repaintを使えば、そのコードを公開でき、ドメインを接続でき、AIで編集を続けられる本物のウェブサイトに変える方法が得られます。Repaintは、AIが生成したコードを公開されたサイトに変えることを、これまで以上に簡単にしてくれます。

よくある質問

コードを生成するために使ったAIツールによって違いはありますか？

特にありません。コードファイルがあれば、Repaintはそれを使えます。インポート元として最も多いツールはChatGPT、Claude、Geminiです。これらを使った場合は、それぞれに合わせたガイドがあります：ChatGPT、Claude、Gemini。

コードがHTMLかReactかは関係ありますか？

関係ありませんが、Reactのほうがやや変換しやすい傾向があります。Repaintはどちらにも対応できます。コードを生成する際に選べるなら、Reactを指定してください。HTMLファイルしかなくても問題なく動作します。インポート後にRepaintとのチャットで小さな問題を修正できます。

AIが生成したコードをRepaintでウェブサイトにするのにどれくらい時間がかかりますか？

コードが完成しているなら、ほんの数分で済みます。コードの共有、サイトの計画、サイトの生成は通常2〜5分です。その後の公開までの時間は、どれだけ調整を行うかによって変わります。

Repaintで公開する費用はどれくらいですか？

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

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

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

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

問題を解決するためにコードを書けないといけませんか？

いいえ。Repaintはコードを書かない人のために作られています。コードをインポートしたあと、二度とコードを管理する必要はありません。何かおかしいと感じたら、AIとのチャットで修正できます。コードを知っていればより細かい指示を出すのに役立ちますが、必須ではありません。

サイトは元のコードと完全に同じ見た目になりますか？

元のコードを再現するようRepaintに指示すれば、ほぼ同じ見た目になります。Repaintはコードを独自のウェブサイト形式に変換するため、細部が失われることもあります。元のコードがHTMLの場合、変換の問題はより起こりやすくなります。その場合でも、いくつかの指示で修正できるはずです。

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

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

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

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

Repaintはコード内の画像、アイコン、その他のアセットを扱えますか？

AIが生成したコードは、通常その中に画像ファイルを保存していません。たいていの場合、Unsplashのような他所でホスティングされている画像にリンクしています。コードをインポートすると、Repaintはそれらの画像を取得・保存し、新しいサイトで永続的に利用できるようにします。Repaintは画像を生成することもできるので、追加が必要な場合にも対応できます。

SEO設定、アナリティクス、メタデータを追加できますか？

はい。Repaintに頼むだけで、カスタムコード、アナリティクス、メタデータを追加できます。技術的なSEOの設定や、他のプラットフォームのスクリプトや埋め込みの追加にも対応できます。Google Analyticsを追加するには、GA IDを共有するだけです。

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

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