ChatGPTで作ったウェブサイトを公開する方法

はじめに

ChatGPTを使ってウェブサイトを作る人が増えています。デフォルトでは、単一のReactまたはHTMLファイルが出力されます。しかし、コードを手にしてもその次のステップが分かりにくいのです。どこかにホスティングし、ドメインを接続し、モバイルでも動作させ、その後も編集を続けられるようにする必要があります。

GitHubやNetlifyのような従来の開発者向けツールならHTMLファイルをオンラインに公開できますが、編集のたびにコードファイル、デプロイ、技術的な詳細を管理しなければなりません。多くの人はそういったことを避けたいはずです。

このガイドでは、Repaintという新しいAIツールを使って、ChatGPTで作ったウェブサイトを実際に公開されたサイトに変える方法を紹介します。Repaintを使えば、コードからスタートし、サイトを公開し、AIとの会話で編集を続けることができます。

ChatGPTからの公開が難しい理由

ChatGPTはコードのプレビューを生成できますが、完全なウェブサイトビルダーではありません。サイトを公開しようとすると、他のプラットフォームを使うように案内されます。GitHub、Netlify、Vercelといった開発者向けツールを勧められるか、従来のウェブサイトビルダーで作り直すよう提案されます。どちらも理想的とは言えません。

開発者向けツールはChatGPTが生成したコードを直接実行できる点で便利ですが、変更のたびに特定のコードファイルを編集する必要があります。コーディングをしない人にとっては、簡単な編集をAIで行うために、ファイルをデプロイ済みコードと出し入れし続けることになります。

多くの人はコードの複雑さを避けるために、WordPress、Wix、Webflowなどのウェブサイトビルダーを使います。これらのプラットフォームでは編集の公開がスムーズです。しかし、ChatGPTが生成したサイトを動かすことはできないため、すべてを手作業で作り直す必要があります。そして、その後の編集もすべて手作業で行うことになります。

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

Repaintとは？

Repaintはウェブサイトを作るためのAIプラットフォームです。ChatGPTを便利にしているのと同じ、チャットベースのワークフローを中心に設計されています。普通の言葉で変更を依頼し、結果を確認して、サイトが思い通りになるまで反復することができます。

ただしRepaintは、コードを生成するだけの場所ではなく、完全なウェブサイトプラットフォームです。つまり、ChatGPTが扱わないウェブサイト運営の部分を引き受けてくれます。

• サイトを公開して、実際に人が訪問できるようにします。
• カスタムドメインを接続できるので、サイトを本来のURLで公開できます。
• AIで編集可能な状態を保ち、後からでも変更を加えられます。
• ページのタイトルや説明、サイト構造などのSEOの詳細を管理しやすくします。
• サイトを拡張する必要があれば、新しいページを作成できます。

これが、ウェブサイトのプレビューを生成することと、長期的に管理できる本物の場所を持つことの違いです。

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

ChatGPTはウェブサイトを作るとき、単一のコードファイルを生成し、それをキャンバスに表示します。通常はReactですが、HTMLの場合もあります。いずれにせよ、キャンバス上部のボタンを使ってコードをコピーしたり、ファイルをダウンロードしたりできます。

まず、ChatGPTが作ったファイルをダウンロードするか、コードをコピーしてください。次にRepaintに移動し、ファイルをアップロードするかコードを貼り付けて、作りたいものを説明します。Repaintはそれをもとに、公開後も編集を続けられるウェブサイトを作ります。

ステップ2：Repaintが作るものを計画する

コードを追加すると、Repaintはウェブサイトを構築する前にいくつかの質問をします。ChatGPT版をそのまま使うのか、大まかな参考にするのか、ページを増やして大きなサイトにするのかを決められます。

コンテンツを計画する

ChatGPTは、リンクが新しいページではなくセクションにスクロールする1ページ構成のサイトを作ることがよくあります。しかし、ほとんどのビジネスでは1ページでは足りません。1ページのサイトがある場合は、Repaintに複数ページとして構築させることを検討してください。

このタイミングでコンテンツを追加することもできます。ChatGPTは通常、ブログ記事のような大量のページセットは作りません。サイトをRepaintにインポートする際に、欲しいものをすべて含めるようスコープを広げることができます。

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

スタイルを計画する

デフォルトでは、RepaintはあなたのChatGPTサイトのスタイルをコピーします。つまり、色、レイアウト、タイポグラフィ、余白といった同じ見た目が保たれます。

ただし、そのスタイルを維持する必要はありません。気に入らなければ、Repaintにサイトを再デザインするよう依頼できます。Repaintは次のようなことができます。

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

あまり悩む必要はありません。出来上がりが気に入らなければ、後から新しいバージョンを作ってもらえます。

プランを確認する

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

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

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

プランを確認すると、Repaintはサイトの構築を開始します。各ページの作業が進む様子が進捗メッセージとして表示されます。シンプルなホームページなら1〜2分で済むこともあります。ページ数の多い大きなサイトはもっと時間がかかります。

Repaintはコードをホスティングしているだけではありません。ChatGPT版を素材として使い、指定されたプランに沿ったサイトを構築します。元のデザインの正確な再現を依頼した場合は、できるだけ近づけます。ページの追加や別のスタイルを依頼した場合は、ChatGPT版を出発点として使います。

インポート後に細部の調整が必要になる場合があります。希望と異なるところがあれば、次のステップでRepaintとチャットして修正できます。

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

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

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

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

サイトが公開できる状態になるまで、変更を続けることができます。

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

サイトの準備ができたら、公開ボタンをクリックしてください。Repaintはサイトをオンラインに公開し、誰にでも共有できるURLを発行します。

これでChatGPTのコードがインターネット上の実際のウェブサイトになります。スマートフォンで開いたり、誰かに送ったり、実際のブラウザでテストしたりできます。

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

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

自分のURLを使う準備ができたら、Repaintにドメインを接続したいと伝えるだけで、追加するDNSレコードを教えてくれます。独自ドメインは無料トライアルとすべての有料プランに含まれています。料金の詳細はこちらをご覧ください。

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

初めての場合でも心配いりません。Repaintに手順を案内するように頼んでください。何をすればよいかをステップバイステップで教えてくれます。

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

まとめ

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

よくある質問

RepaintでChatGPTのウェブサイトを公開するのにどれくらい時間がかかりますか？

サイトがすでに完成していれば、数分で済むはずです。コードの共有、サイトの計画、サイトの生成には通常2〜5分かかります。その後の公開までの時間は、どれだけ調整を加えるかによります。

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

Repaintは14日間無料で試せます。作成、編集、公開、独自ドメインの接続も含まれます。有料プランは月額$25からで、ホスティングと週間AI利用枠が含まれます。

トライアルが終了すると、有料プランを始めるまでワークスペースは一時停止します。作業内容は保存され、いつでも再開できます。詳しくは料金ページをご覧ください。

GitHub Pages、Netlify、Vercelを使うのではダメですか？

特にコードの管理に慣れているのであれば、それでも構いません。これらのツールはファイルをオンラインに置くのに優れています。しかし、意味のある変更を加えるたびにコードに戻る必要があり、ChatGPT、エディタ、ホスティングツールの間でファイルをコピーし続けることになります。

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

問題を修正するためにコードの知識は必要ですか？

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

サイトの見た目はChatGPT版とまったく同じになりますか？

Repaintに元のデザインを再現するよう伝えれば、見た目はほぼ同じになるはずです。ただし、Repaintはファイルをそのままホストするのではなくコードからサイトを再構築するため、細部が失われることもあります。その場合も、いくつかのプロンプトですべて修正できるはずです。

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

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

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

はい。元のChatGPTサイトでは、お問い合わせフォームはおそらく動作しなかったでしょう。しかしRepaintにサイトを移すと、送信内容を保存し、誰かが入力したらメールで通知する本物のお問い合わせフォームに変えられます。ボタンは、実際のページやセクションへのリンクであれば動作するはずです。リンク先がないボタンは、Repaintに接続を依頼できます。

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

ChatGPTで作られたサイトは通常、画像ファイルを内部に保存していません。たいていは別の場所にホスティングされた画像へのリンクになっています。コードをインポートすると、Repaintはそれらの画像を取得・保存し、新しいサイトで永続的に利用できるようにします。Repaintは画像を生成することもできます。

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

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

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

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