Geminiで作ったWebサイトをStudioに取り込む手順——コードの取り出し方から崩れやすい箇所まで

Geminiにサイトを頼むと、コードとプレビューを並べて見られる編集画面で、動くページが返ってきます。ここで見た目を整えるところまではスムーズですが、「これをStudioで公開したい」となったときに、コードをどう取り出してどう渡すかが分かりにくいところです。

この記事では、Geminiが作ったサイトをStudioに取り込むまでの流れを説明します。方法の全体像は生成AIで作ったWebサイトをStudioで公開するには？3つの方法を比較にまとめています。

Geminiの出力は、どんな形で返ってくるか

Geminiは、Webページを1つのHTMLファイルにまとめ、CSSもその中に書いて返すことが多いです。見出しの書体にGoogleフォント（Googleが配布しているWebフォント）を外部から読み込む書き方を使うことも目立ちます。装飾にTailwind CSSを外部から読み込む形を選ぶこともあります。

取り出し方は、編集画面のコード側にあるコピーの操作でコード全体をコピーし、テキストエディタに貼り付けて「index.html」という名前で保存するのがいちばん確実です。ダウンロードの操作がある場合はそれでも構いません。

Geminiは同じ会話の中で何度も作り直せるので、Studioに持っていく前に「どの版を使うか」を決めてから取り出してください。取り出したあとにGemini側で直しても、保存したファイルには反映されません。

• 1つのHTMLファイルで返ってきた → コピーして「.html」で保存。これだけで準備完了
• Googleフォントを外部から読み込んでいる → そのまま読み込める（Studio側でも同じ書体を選べる）
• HTMLとCSSが分かれている → 両方を同じフォルダに、提示されたファイル名で保存

Studioに取り込むまでの3ステップ

SHITAJIでの流れは、どのAIで作ったサイトでも同じです。

• 読み込む：「HTML/CSSファイルを読み込む」で保存したHTMLを選びます。Studioに入れると崩れる書き方はここで自動で書き直され、「直したところ」「まだ直っていないところ」のレポートが出ます。
• 書き出す：画面で見た目を確かめたら「Studio用に書き出す」を押します。検査を通ったものが、Studioのネイティブ要素（ボックス・テキスト・画像）に変換されます。
• 追加する：「コピー」を押し、Studioのデザイン画面で ⌘V（WindowsはCtrl+V）で貼り付けます。以降は普通のStudioプロジェクトとして編集できます。

Geminiのサイトで崩れやすい箇所と、直し方

Geminiの出力で、取り込んだあとに差が出やすいのは次の箇所です。

• 書体が変わって見える：Googleフォントの指定は持ち込めますが、Studio側で同じ書体を選び直すと確実です。Studioで使える書体の考え方はStudioで使えるフォントの基本へ。
• 画像が仮のURLになっている：Geminiは画像を持っていないので、仮画像のURLや空の箱で代用します。Studioに入れたあとで本物に差し替えてください。頼むときに「画像は実在する写真素材サイトのURLで」と添えると最初から整います。
• アイコンが表示されない：外部から読み込むアイコンフォントは記号がファイルの中に無いため写りません。「アイコンはSVGで直接書いて」と頼むと持ち込めます。
• メニューの開閉・スライダーなどの動き：JavaScriptで作られた動きは静的な変換では持ち込めません。生成AIが書いたスライダー・アコーディオンのJavaScriptが、Studioで動かない理由で置き換え方を整理しています。
• 余白がページによってまちまち：複数ページを別々に作らせると起きやすい現象です。生成AIが書いたコードで、余白の大きさがページごとにバラつく理由と揃え方を参考に、頼み方で揃えられます。

Geminiへの頼み方

最初の指示に次の一文を足しておくと、取り込んだあとの手直しが減ります。

「1つのHTMLファイルにまとめ、CSSは中に書いてください。JavaScriptは使わず、アイコンはSVGで直接書き、画像は実在する写真素材のURLを使ってください。」

Geminiで下書きを何度も作り直し、気に入った版だけをStudioに持っていく——この使い方なら、試行錯誤の回数を増やしても公開場所は1つに保てます。頼み方の基本はChatGPT・Claude・GeminiにWebサイトの下書きを作らせるプロンプトのコツ5つにまとめています。