v0で作ったWebサイトをStudioに取り込む手順——React形式をHTMLとして受け取るには

v0は、文章で頼むと画面のデザインをその場で組み立ててくれるツールです。できあがりの見た目は洗練されていますが、出力の中身はReact（プログラムで画面を組み立てる形式）が基本なので、「このままStudioに持っていけるHTML」とは少し違います。

この記事では、v0で作ったサイトをStudioに取り込むために、まず出力を「静的なHTML/CSS」の形にする方法から説明します。生成AIとStudioの組み合わせ方の全体像は生成AIで作ったWebサイトをStudioで公開するには？3つの方法を比較にあります。

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

v0は既定では、React（Next.js）とTailwind CSS、部品ライブラリを組み合わせたプロジェクトとして画面を作ります。ファイルは複数に分かれ、そのままブラウザで開いても中身は表示されません。プログラムが動いて初めて画面が組み立てられる作りだからです。

Studioに持ち込むには、「静的なHTML/CSS」の形が必要です。v0には2つの経路があります。

• 頼み方で静的HTMLにしてもらう：「Reactを使わず、単一のHTMLファイルとして、CSSは中に書いて出力して」と指示します。v0はこの指定に応じてHTMLを返せます。返ってきたコードをコピーして「index.html」で保存すれば、あとは普通のHTMLと同じです。
• プレビューをブラウザで保存する：React形式のまま進めた場合は、v0のプレビューを新しいタブで開き、ブラウザの「名前を付けて保存」で保存形式を「ウェブページ、完全」にして保存します。HTMLファイルと、画像やCSSが入った「_files」フォルダの2つができるので、この2つを一緒にSHITAJIの「フォルダを読み込む」で選びます。

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

静的なHTMLの形になれば、SHITAJIでの流れは他のAIと同じです。

• 読み込む：HTML1つなら「HTML/CSSファイルを読み込む」、ブラウザで保存した場合は「フォルダを読み込む」でHTMLと「_files」フォルダを一緒に選びます。Reactの中身が空のままのファイルを渡すと、SHITAJIは読み込む前に見つけてお知らせします。
• 書き出す：画面で見た目を確かめたら「Studio用に書き出す」を押します。検査を通ったものが、Studioのネイティブ要素（ボックス・テキスト・画像）に変換されます。
• 追加する：「コピー」を押し、Studioのデザイン画面で ⌘V（WindowsはCtrl+V）で貼り付けます。以降は普通のStudioプロジェクトとして編集できます。

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

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

• 部品ライブラリ由来の細かい装飾：ボタンやカードの影・角丸・境界線は部品ライブラリの既定値で決まっています。Tailwindのクラスとして書かれていれば持ち込めますが、Studioの表現範囲を超える指定は近い見た目へ寄せられます。取り込み後のレポートで確認してください。
• ダークモード切り替え：OSの設定で色が変わる書き方は、Studioでは1つの配色に固定されます。どちらの配色で公開するかを決めてから頼むと迷いません。
• メニューの開閉・タブ・カルーセル：部品ライブラリの動きはJavaScriptなので持ち込めません。生成AIが書いたスライダー・アコーディオンのJavaScriptが、Studioで動かない理由で、Studio側の部品への置き換えを整理しています。
• アイコン：v0はアイコンをSVGとして直接書くことが多く、その場合はそのまま持ち込めます。外部から読み込む形になっていたら「SVGで直接書いて」と頼み直してください。
• 画像：仮画像で組まれていることが多いので、Studioに入れたあとで本物に差し替える前提で進めてください。

v0をStudioと組み合わせるときの考え方

v0の強みは、画面の構成案を素早く何案も出せることです。そこで決めた構成をStudioに持ち込み、色・写真・文章の仕上げと公開はStudioで行う——この分担にすると、v0のReact形式にこだわらずに済みます。

最初から「Reactは使わず、単一のHTMLファイルで、CSSは中に、JavaScriptは無しで」と頼んでおくのが、いちばん手戻りの少ない進め方です。取り込んだあとに編集しやすい形を保つ考え方は生成AIで作ったサイトの文章・画像を、あとから自分で直せるようにしておくコツで扱っています。