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

はじめに

多くの人がGeminiを使ってウェブサイトを作成しています。Canvasツールを有効にすると、Geminiは1つのHTMLまたはReactファイルを生成し、プレビューを横に並べて表示してくれます。しかし、コードが手に入った後の次のステップは明確ではありません。どこかにホストし、ドメインを接続し、モバイルでも動くようにして、その後も編集を続けられるようにする必要があります。

GitHubやNetlifyのような従来の開発者向けツールはファイルをオンラインにホストできますが、編集のたびにコードファイル、デプロイ、技術的な詳細を管理することになります。多くの人はそうしたことには関わりたくないはずです。

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

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

Geminiはコードを生成できますが、本格的なウェブサイトビルダーではありません。独自のドメインで公開する方法を尋ねると、他のプラットフォームを紹介されます。通常はGitHub、Netlify、Vercelといった開発者向けツールを勧められるか、Framer、Wix、Squarespaceのような従来のウェブサイトビルダーで作り直すことを提案されます。どちらも理想的とは言えません。

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

多くの人はWix、Squarespace、Webflowのようなウェブサイトビルダーを使ってコードの煩雑さを避けます。これらのプラットフォームでは編集の公開がスムーズです。問題は、Geminiが生成したサイトを動かせないため、すべてを手動で作り直さなければならない点です。さらに、その後は手作業で編集していくことになります。

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

Repaintとは？

Repaintはウェブサイトを作成するためのAIプラットフォームです。Geminiを便利にしているチャットベースのワークフローを土台に作られています。普通の言葉で変更を依頼し、結果を確認して、サイトが思い通りになるまで繰り返し改善できます。

ただしRepaintは、単にコードを生成する場所ではなく、本格的なウェブサイトプラットフォームです。つまり、Geminiでは扱えないウェブサイト運営の部分をカバーしてくれます。

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

コードファイルを生成することと、サイトを長期的に管理できる本物の場所を持つことの違いがここにあります。

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

Geminiでウェブサイトを作ると、Canvasパネルにコードとライブプレビューが表示されます。デフォルトではHTMLが出力されますが、Reactを指定することもできます。覚えておくと良い癖が1つあります。Geminiにウェブサイトを依頼してもCanvasは自動では開きません。メッセージボックスの横のドロップダウンからCanvasツールを有効にしてから、もう一度依頼する必要があります。

コードを取得するには、Canvasの上部にあるShareボタンをクリックし、Copy contentsをクリックします。Repaintのコードインポーターに移動して貼り付けてください。これでウェブサイトの構築プロセスが始まります。Repaintはあなたのコードをもとに、公開して編集を続けられる完全なウェブサイトを作成します。

まだGeminiでウェブサイトを作っていない場合は、Reactを指定することをおすすめします。Repaintが使う形式に近いため、細かいデザインの詳細が変換時に失われる可能性が低くなります。HTMLでも問題ありませんが、不具合があれば後からRepaintとの会話で修正できます。

ステップ2：Repaintで作るサイトを計画する

コードを貼り付けると、サイトを構築する前にRepaintがいくつか質問してきます。これは、Geminiのバージョンをそのまま使うか、参考程度に使うか、もっとページの多い大きなサイトに発展させるかを決めるための機会です。

コンテンツを計画する

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

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

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

スタイルを計画する

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

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

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

あまり悩む必要はありません。気に入らなければ、後から新しいバージョンを作ってもらうこともできます。

プランを確認する

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

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

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

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

Repaintは貼り付けたコードをそのままホストするわけではありません。Geminiのバージョンをソース素材として使い、プランに記載されたサイトを構築します。完全な再現を依頼した場合は元に近づけようとしますし、ページの追加やスタイルの変更を依頼した場合は、Geminiのバージョンを出発点として使います。

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

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

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

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

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

公開できそうだと感じるまで、変更を続けることができます。

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

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

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

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

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

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

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

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

変更が反映されるまで数時間かかる場合があります。Repaintにドメインが確認済みと表示されれば、独自ドメインでウェブサイトが公開されます。

まとめ

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

よくある質問

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

サイトがすでに出来上がっていれば、数分で完了します。コードの共有、サイトの計画、ウェブサイトの生成は通常2〜5分です。その後の公開までの時間は、どの程度調整を加えるかによります。

Repaintでの公開にはどれくらい費用がかかりますか？

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

GitHub Pages、Netlify、Vercelを使えば良いのでは？

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

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

問題を解決するためにコードを知っている必要がありますか？

いいえ。Repaintはコードを書かない人のために作られています。Geminiからコードをインポートした後は、コードを管理する必要は一切ありません。問題があれば、AIとの会話で修正できます。コードを知っていればより具体的に指示できますが、必須ではありません。

サイトはGeminiのバージョンとまったく同じに見えますか？

Repaintに元の再現を依頼すれば、ほぼ同じに見えるはずです。ただし、Repaintはコードを独自のウェブサイト形式に変換するため、ときどき一部の詳細が失われることがあります。元のGeminiコードがHTMLの場合、変換の問題が起こりやすくなります。その場合でも、数回のやり取りですべて修正できるはずです。

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

Repaintは更新のたびにサイトのすべてのバージョンを保存しています。Repaintに「戻して」と伝えると、以前のバージョンに戻ります。特定の時点まで戻したい場合は、以前のバージョンを手動で復元することもできます。そのため、サイトを台無しにする心配なく自由に変更できます。

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

はい。元のGeminiサイトでは、お問い合わせフォームはおそらく機能していませんでした。しかしRepaintにサイトを移すと、フォームを実際のお問い合わせフォームに変えてくれて、送信があるとメールで通知が届くようになります。ボタンは、実際のページやセクションにリンクしていれば動作します。リンク先がない場合は、Repaintに接続を依頼できます。

Geminiサイトの画像、アイコン、その他の素材は扱えますか？

Geminiは多くの場合、Unsplashなどから画像を取得し、コード内に保存するのではなくURLでリンクします。コードをインポートすると、Repaintはそれらの画像を取得して保存し、新しいサイト用に永続的に使えるようにします。まだ追加が必要な画像があれば、Repaintで生成することもできます。

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

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

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

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