Studioに外部のHTML/CSSを持ち込む方法の全体像——生成AIの出力に限らない場合

Studioの外にあるHTML/CSSをStudioに持ち込みたい場面は、生成AIで作ったサイト以外にも色々あります。フリーランスに作ってもらったコーポレートサイト、他社のノーコードツールから書き出したファイル、購入したテンプレート、昔サーバーに置いていた静的なHTMLのサイト——素材の出どころは違っても、「これをStudioの中で編集・公開できる状態にしたい」という目的は共通しています。

この記事では、素材の出どころを問わず使える、外部HTMLをStudioへ持ち込む方法の全体像を整理します。生成AIの出力について詳しく知りたい方は生成AIで作ったWebサイトをStudioで公開するには？3つの方法を比較へ、他のノーコードツールからの乗り換えを検討中の方はノーコードサイトの乗り換えを考えるときに、先に確認しておきたいこともあわせてご覧ください。

方法1：Studioのデザイン画面で手作業で再現する

元のサイトをブラウザで表示しながら、Studioの中で同じレイアウトを一から組み直す方法です。ページ数が少ない場合や、この機会にStudioの操作に慣れておきたい場合に向いています。

難点は時間です。ページ数が多いサイトや、細かい調整が多いサイトほど、再現にかかる時間は長くなります。

方法2：画像として貼り付ける

ページ全体のスクリーンショットを撮って、Studioに画像として貼り付ける方法です。見た目は完全に一致し、数分で終わります。

公開後の運用を考えると勧めにくい方法でもあります。文字がすべて画像の中にあるため、文言の修正のたびに元のサイト側で作り直す必要があり、検索エンジンも画像内の文字はほとんど読めません。「今日中に見た目だけ共有したい」という一時しのぎの用途に向いています。

方法3：Figmaを経由する

HTMLを一度Figmaのデザインファイルに変換し、Studio公式の「Figma to STUDIO」プラグインで取り込む方法です。公式の取り込み経路を使える点が利点ですが、2つのツールを順に通す道筋になり、Figma変換後にStudio上で組み直す作業が発生しやすい前提で臨むのが現実的です。詳しくはHTMLをStudioに持ち込むとき、Figma経由と直接変換で何が違うかで比較しています。

方法4：変換ツールで直接持ち込む

HTML/CSSを、Studioのネイティブ要素（ボックス・テキスト・画像）へ直接変換して持ち込む方法です。SHITAJIはこの方式の非公式ツールで、経由するツールが1つで済み、取り込んだあとは普通のStudioプロジェクトとして編集・公開できます。

どの出どころの素材でも、JavaScriptで動く仕掛け（スライダー・アコーディオンなど）は静的な変換では持ち込めず、Studio側の部品で作り直す前提になる点は共通です。

どの方法を選ぶか

素材の出どころに関わらず、かけられる時間と公開後にどれだけ手を入れるかで選ぶと分かりやすくなります。

• ページ数が少なく、Studioの練習も兼ねたい → 手作業で再現
• 今日中に見た目だけ共有できればよい（運用しない） → 画像として貼り付け
• Figmaでのデザインも今後使っていきたい → Figma経由（公式プラグイン）
• ページ数がある・公開後も自分で編集したい → 変換ツールで直接持ち込み

まとめ：素材の出どころより、公開後どう運用したいかで選ぶ

外部HTMLをStudioに持ち込む方法は、素材が生成AIの出力であっても、フリーランスに作ってもらったコードであっても、基本的な選択肢は変わりません。違いが出るのは、公開後にどれだけ自分で手を入れたいかという点です。

一時的に見た目を見せるだけなら画像、Studioでの操作に慣れながらじっくり作るなら手作業、Figmaも使っていくなら公式プラグイン、公開後も自分で編集し続けたいなら変換ツール——この軸で考えると選びやすくなります。