Google AI Studioでウェブサイトを作り、SiteDropで公開する方法

Google AI Studio は、AIでウェブサイトを作れる無料ツールの中でも、とくにワクワクするもののひとつです。Geminiを搭載していて、作りたいものを普段の言葉で説明するだけで、HTML、CSS、JavaScriptまで含めた、動く完全なウェブサイトを作ってくれます。けれど、すごいものが出来上がったあと、世界中の人に見てもらうにはどうしたらよいのでしょうか。

そこで登場するのが SiteDrop です。このガイドでは、Google AI Studioでウェブサイトを作り、ダウンロードして、SiteDropで60秒以内にインターネットへ公開するまでの全工程をご案内します。

Google AI Studioとは？

Google AI Studio（aistudio.google.com）は、Googleが提供する無料のブラウザベースのツールで、同社の最も高性能なAIモデルであるGeminiを直接使えます。チャットや文章の生成で知られていますが、簡単なプロンプトから完全なウェブサイトを作るのも驚くほど得意です。

ウェブサイトのアイデアを普段の言葉で伝えれば、Geminiがすべてのコードを書いてくれます。プログラミングの知識は必要ありません。変更やセクションの追加、一部のデザインのやり直しも、会話を通じて頼めます。

ステップ1：Google AI Studioでウェブサイトを作る

1. aistudio.google.com にアクセスし、Googleアカウントでログインします。
2. Geminiと新しいチャットを始め、詳しいプロンプトを送ります。たとえば次のようにします。
   「Bean & Brew というコーヒーショップの、モダンで完全なランディングページを作ってください。温かみのある背景のヒーローセクション、価格つきのメニューのセクション、お店の紹介、営業時間、Googleマップ埋め込み用のプレースホルダー、問い合わせフォームを入れてください。レスポンシブにして、モダンなCSSを使ってください。コードはすべて1つのHTMLファイルにまとめてください。」
3. Geminiが、ウェブサイトの完全なHTML、CSS、JavaScriptのコードを作ります。
4. 変更したいときは、頼むだけです。たとえば、「配色をもっと暗くして」や「お客様の声のセクションを追加して」のように伝えます。

ステップ2：ウェブサイトのファイルをダウンロードする

生成されたコードに満足したら、パソコンにファイルとして保存します。

1. Google AI Studioから、生成されたコードをコピーします。
2. シンプルなテキストエディタ（Windowsならメモ帳、MacならTextEdit）を開きます。
3. コードを貼り付けて、index.html として保存します。ファイルの拡張子が .txt ではなく .html になっていることを確認してください。
4. GeminiがCSSやJavaScriptを別のファイルで出してきた場合は、それらも同じフォルダに保存します。
5. すべてを1つのフォルダにまとめます。名前は my-website など、何でもかまいません。

ワンポイント：Geminiに、インラインのCSSとJavaScriptを含めてすべてを1つのHTMLファイルにまとめるよう頼んでみましょう。保存するファイルが1つだけになり、さらに簡単です。

ステップ3：SiteDropにアップロードして公開する

いよいよ簡単な部分です。SiteDropは、まさにこうした出力、つまりウェブサイトのファイルが入ったフォルダを、すぐに公開するために作られています。Gitもターミナルも、ビルドの手順も不要です。

1. sitedrop.live にアクセスしてログインします（無料アカウントも作れます）。
2. ダッシュボードにアップロードエリアが表示されます。ウェブサイトのフォルダをドラッグ＆ドロップするだけです（先にZIPにして、ZIPファイルをドロップしてもかまいません）。
3. SiteDropがファイルを自動で認識し、構造を判断して、サイトを公開URLに配信します。
4. 数秒で、世界中の誰にでも共有できる公開リンクが手に入ります。

ステップ4：独自ドメインを追加する（任意）

サイトには、yoursite.sitedrop.live のような無料のSiteDropサブドメインが付きますが、独自ドメインを接続することもできます。

• SiteDropのダッシュボードで直接、ドメインを検索して購入できます。GoDaddyやNamecheapにわざわざ行く必要はありません。
• DNSの設定はすべてSiteDropが自動で行います。Aレコードも、CNAMEも、反映待ちもありません。
• サイトは数分で、あなたの独自ドメインで公開されます。

この組み合わせが強力な理由

Google AI StudioとSiteDropの組み合わせがうまくいくのは、それぞれのツールがひとつのことを飛び抜けて得意としているからです。

• Google AI Studio は、ウェブサイトを作るのが得意です。Geminiを無料で使えて、簡単な説明から本番品質のコードを生成してくれます。
• SiteDrop は、そのウェブサイトを公開するのにいちばん速い方法です。Gitもターミナルもビルドのパイプラインも不要。ドラッグ、ドロップで公開されます。

GitHubを覚える必要はありません。VercelやNetlifyを設定する必要もありません。CI/CDのパイプラインやDNSレコードを理解する必要もありません。Google AI Studioで作り、ファイルを保存して、SiteDropにドロップするだけです。

あとからサイトを更新するには

変更したいときも、手順は同じくらい簡単です。

1. Google AI Studioに戻り、Geminiにコードの更新を頼みます。
2. 更新されたHTMLファイルを保存します。
3. 新しいファイルを、SiteDropにある既存のサイトにドラッグ＆ドロップします。古いバージョンは自動的に置き換わります。

独自ドメインや設定はそのまま引き継がれます。更新はすぐに公開されます。

まとめ

アイデアから公開URLまでの道のりは、これまでになく簡単になりました。Google AI StudioがGeminiで制作を担い、SiteDropがスムーズにホスティングを担います。全体にかかるのは数時間ではなく数分で、専門的なスキルはまったく必要ありません。