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はそのコードをもとに、公開可能で編集を続けられる完全なウェブサイトを作成します。

まだChatGPTでウェブサイトを作っていない場合は、Reactで作ることをおすすめします。Repaintが使う形式に近いため、デザインの細かい部分が変換の過程で失われる可能性が低くなります。HTMLでも問題ありませんが、何か問題があればRepaintとのチャットで後から修正できます。

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

コードを貼り付けると、Repaintはサイトを構築する前にいくつかの質問をします。ChatGPT版をそのまま使うのか、ゆるい参考として使うのか、あるいはもっと多くのページを持つ大きなサイトにするのかを決める機会になります。

コンテンツを計画する

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

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

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

スタイルを計画する

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

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

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

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

プランを確認する

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

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

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

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

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

生成の過程で細かい部分が失われることがあります。元のファイルがHTMLの場合、ReactのほうがRepaintの形式に近いため、これがより多く発生します。重要な詳細が失われた場合は、次のステップで修正できます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

まとめ

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

よくある質問

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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