ChatGPTで作ったWebサイトをStudioに取り込む手順——出力の受け取り方から崩れやすい箇所まで

ChatGPTに「カフェのWebサイトを作って」と頼むと、HTMLとCSSのコードが返ってきます。ブラウザで開けばそれらしいページが表示されますが、そのままではどこにも公開されていませんし、文字を直すたびにコードを触ることになります。

この記事では、ChatGPTが書いたサイトをStudioに取り込んで、Studioの中で編集・公開できる状態にするまでの流れを、ChatGPTの出力の癖に沿って説明します。他のAIとの違いを知りたい方は、生成AIで作ったWebサイトをStudioで公開するには？3つの方法を比較もあわせてどうぞ。

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

ChatGPTは、短いサイトなら1つのHTMLファイルに、スタイル（見た目の指定）もまとめて書いてくることが多いです。ページが長くなると「index.html」「style.css」「script.js」のように、HTML・CSS・JavaScriptを別々のコードブロックに分けて返すこともあります。

受け取り方は2つあります。ひとつはコードブロックのコピー機能で中身をコピーし、パソコン上でテキストエディタに貼り付けて、指定されたファイル名で保存する方法。もうひとつは、ChatGPTのコードを画面右側で編集・プレビューできる機能を使っているなら、そこにあるダウンロードの操作でファイルとして保存する方法です。

どちらの場合も、保存するときのファイル名の末尾（拡張子）は、HTMLなら「.html」、CSSなら「.css」にしてください。ChatGPTが提示したファイル名をそのまま使えば、HTMLの中のCSSへの参照（link要素）ともつながります。

• 1つのHTMLファイルだけで返ってきた → そのファイル1つを保存すれば準備完了
• HTMLとCSSが分かれて返ってきた → 両方を同じフォルダに、提示されたファイル名で保存
• script.jsも返ってきた → 保存しても構わないが、Studioには動きは持ち込めない（後述）

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

SHITAJIを使う場合の流れは、どのAIで作ったサイトでも同じ3ステップです。

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

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

ChatGPTの出力には、いくつか繰り返し見かける書き方があります。取り込んだあとに「ここが違う」となりやすい箇所を先に知っておくと、ChatGPTへの頼み方の段階で避けられます。

• 画像が仮のURL（プレースホルダー）になっている：ChatGPTは画像を持っていないので、灰色の仮画像を指すURLを書きがちです。取り込み自体はできますが、公開前にStudioで本物の画像に差し替えてください。頼むときに「画像は実在する写真素材サイトのURLを使って」と添えると、最初から見た目が整います。
• アイコンが表示されない：アイコンフォント（文字の代わりに記号を出す仕組み）を外部から読み込む書き方は、記号そのものがファイルの中に無いため写りません。「アイコンはSVGでHTMLの中に直接書いて」と頼むと、そのまま持ち込めます。
• ボタンを押したときの動き（メニューの開閉・スライダー・タブ）が動かない：JavaScriptで作られた動きは、静的な変換では持ち込めません。見た目は入るので、動きの部分はStudio側の部品で作り直します。詳しくは生成AIが書いたスライダー・アコーディオンのJavaScriptが、Studioで動かない理由へ。
• CSSのアニメーションが再現されない：ふわっと表示される演出などは、Studio側の「条件付きスタイル」で表現し直す前提で考えてください。生成AIが書いたCSSアニメーションが、Studioにそのまま持ち込めない理由に整理しています。
• スマートフォンで崩れる：ChatGPTはPC幅を前提に書き、狭い幅の指定を省くことがあります。頼むときに「スマートフォン幅でも崩れないように、狭い幅では横並びを縦並びにして」と伝えておくと、取り込んだあとの手直しが減ります。

ChatGPTへの頼み方で、取り込みやすさは変わる

同じ内容でも、書き方によってStudioへの入りやすさは変わります。最初の指示に次の一文を足しておくと、あとの手間が減ります。

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

この頼み方の考え方はChatGPT・Claude・GeminiにWebサイトの下書きを作らせるプロンプトのコツ5つでも詳しく扱っています。ChatGPTの出力は下書きとして扱い、仕上げはStudioの中で行う——この分担にしておくと、AIとの試行錯誤を何度繰り返しても、公開と運用の場所はぶれません。