Boltで作ったWebサイトをStudioに取り込む手順——静的HTMLで作ってもらうのが近道

Boltは、ブラウザの中でプロジェクト一式を作り、その場で動かして見せてくれるツールです。フレームワーク（Reactなど）を使った本格的なアプリも作れますが、「案内用のWebサイトを作ってStudioで運用したい」だけなら、最初からもっと素直な形で作ってもらえます。

この記事では、Boltで作ったサイトをStudioに取り込むまでの流れを、いちばん手戻りの少ない順に説明します。全体像は生成AIで作ったWebサイトをStudioで公開するには？3つの方法を比較へ。

最初から「静的HTML/CSS」で作ってもらう

Boltは頼み方しだいで、Reactのプロジェクトにも、フレームワーク無しのHTML/CSS/JavaScriptだけのプロジェクトにもなります。Studioに持ち込むなら後者です。最初の指示に次のように添えてください。

「フレームワークは使わず、静的なHTMLとCSSだけで作ってください。ページごとに index.html・about.html のようなHTMLファイルを作り、CSSは style.css にまとめ、画像は images フォルダに置いてください。JavaScriptは使わないでください。」

この形で作られたプロジェクトは、ファイル一覧がそのまま「HTML・CSS・画像のフォルダ」になっています。プロジェクトをダウンロードする操作でZIPとして保存し、展開したフォルダをSHITAJIの「フォルダを読み込む」で選べば、複数ページでもページ同士のリンクがつながった状態で読み込めます。

• 静的HTMLで作った → ZIPをダウンロードして展開し、フォルダごと読み込む。これがいちばん素直
• Reactで作ってしまった → 「同じ内容を静的なHTML/CSSに書き直して」と頼み直す。難しければ、プレビューをブラウザで開いて「ウェブページ、完全」で保存し、HTMLと「_files」フォルダを一緒に読み込む
• JavaScriptのファイルが含まれている → 読み込んでも構わないが、動きはStudioには持ち込めない（後述）

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

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

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

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

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

• メニューの開閉・スライダー・タブ：Boltは静的HTMLでもJavaScriptで動きを付けたがります。見た目は入りますが動きは持ち込めないので、Studio側の部品で作り直します。生成AIが書いたスライダー・アコーディオンのJavaScriptが、Studioで動かない理由へ。
• アイコン：外部から読み込むアイコンフォントは記号がファイルの中に無いため写りません。「アイコンはSVGで直接書いて」と頼むと持ち込めます。
• 画像：仮画像のURLで組まれていることがあります。Studioに入れたあとで本物に差し替えるか、頼むときに「画像は実在する写真素材サイトのURLで」と添えてください。
• ページごとの余白やヘッダーのずれ：ページを別々の指示で作ると起きやすい現象です。生成AIに複数ページのサイトを作らせると、ヘッダー・フッターが微妙にずれる理由と揃え方を参考に、最初にヘッダー・フッターを1つに決めてから各ページを作らせると揃います。
• スマートフォンでの崩れ：「スマートフォン幅では横並びを縦並びにして」と最初に伝えておくと、取り込んだあとの手直しが減ります。

BoltとStudioの分担

Boltの強みは、複数ページのサイトをフォルダ構成ごと一気に作れることです。その構成をStudioに写し、写真・文章・SEO・フォームの仕上げと公開をStudioで行う——この分担なら、Boltでの試行錯誤を何度繰り返しても、運用の場所は1つのままです。

頼み方の基本はChatGPT・Claude・GeminiにWebサイトの下書きを作らせるプロンプトのコツ5つ、取り込んだあとに編集しやすい形を保つ考え方は生成AIで作ったサイトの文章・画像を、あとから自分で直せるようにしておくコツにまとめています。