Q.Studioで作ったデザインはFigmaやHTML／CSSに書き出せますか？

移管を考え始めると、まずはFigmaに持っていって、そこで直せないかと考える人が多いでしょう。ただ、Studioにはデザインやページ情報、ソースコード、CMSのデータを外へ持ち出す機能がありません（書き出せないデータの案内）。Figma向けの書き出しも用意されていないので、Studioのレイヤーをそのまま開くことはできません。そのため、Studio上の要素をFigmaのベクターデータや編集可能なコンポーネントとして直接変換することは不可能です。Figma側に同じ見た目を移したい場合は、公開画面を見本にしながらFigma上でパーツを一つずつ配置し直すことになります。

代わりにできるのは、画面を撮ってFigmaに置く方法です。Chromeの検証ツールを開いてデバイスモードに切り替えると、表示幅を変えられます。同じメニューの「Capture a full size screenshot」を選べば、スクロールしないと見えない部分も含めてページ全体が1枚の画像になります。スマホ幅とPC幅で1枚ずつ撮っておくと、Figmaで見比べながら作業できますね。

撮影した画像をFigmaのキャンバスへ直接ドラッグすると、画像を塗りに設定した長方形レイヤーとして取り込めます。Figmaでは画像専用のレイヤー枠があるわけではなく、あくまで「長方形の塗り」として扱われる仕組みです。さらにフォントサイズや余白の数値がわからないときは、要素検証のComputedペインを開くとブラウザが描画に使っている解決済みのCSS値を確認できます。自動変換はできませんが、数値を拾いながらトレースしていくのが現実的な移行手順。

デバイスモードの表示は実機に近い見え方であって、実機そのものではありません。細かな崩れは、最後に手元のスマホで確かめておきましょう。

月額料金を支払って上位プランを契約すれば、デザインデータの書き出しやコード出力のロックが解除されるのでしょうか。Studioでは上位の有料プランへ変更しても、デザインデータ・ページ情報・ソースコード・CMSデータを外部へ書き出す機能は解放されません。書き出せないデータについての公式の案内は、プランによる例外を設けていません。

年払いにしたときの月額は、Personalが1,190円、Businessが3,980円、Business Plusが9,980円です（Studioの料金プラン）。

紛らわしいのが、有料プランで使えるカスタムコードです。サイト全体や個別のページのheadタグ、bodyタグに、自分で用意したコードを追加できます。これは外部ツールの計測タグやスクリプトを埋め込むための仕組みであり、Studioが内部で生成しているHTMLやCSSを外部ファイルとして出力する機能とは全く異なります。外へ持ち出す機能とは向きが逆なので、これを使っても移行の手間は減りません。

ちなみに、大規模なサイト向けにはEnterpriseプランもあり、見積もりをもとに内容を調整できます。詳しい条件は専用フォームから相談する形です。書き出しの可否もEnterpriseを選ぶ理由になるなら、契約前の相談で直接聞いておきましょう。

「制作会社や社内のエンジニアに依頼して、Webサーバーに直接アップロードできるHTMLやCSSのファイル一式として取り出したい」と考えるケースもよく耳にします。しかし、Studioにはデザインや公開サイトのHTMLとCSS、JavaScriptを書き出す公式の機能がありません。管理画面から一括ダウンロードするようなボタンは存在せず、別サーバーへ移管したい場合は移行先で改めてページを作成しなければなりません。

ここで「ブラウザのページ保存機能を使えば一括保存できるのではないか」と考える方もいるでしょう。FirefoxやChromeには、ウェブページを保存して、あとでオフラインで読む機能があります（Firefoxでページを保存する方法）。ただし、元のHTMLのリンクのつながりまでは保存されないことがあります。保存したファイルを別のサーバーに置いて、そのままサイトとして運用できる保証はありません。ページの切り替えやアニメーションのように、Studio側の仕組みで動いている部分が同じように動くとも限らないので、見本の控えくらいに考えておくのが無難でしょう。

なお、フォームに届いた回答は、フォームダッシュボードからCSVファイルとしてダウンロードできます。書き出せるのは回答の記録だけで、フォームの見た目や機能は移行先で作り直します。

現実的な進め方は、現在公開されているStudioのWebページを見本にして、移行先の環境で新しくコーディングやレイアウト作成を手動で行うことです。Studioから持ち出せるデザインのデータが無い以上、どの方法を選んでも作業の出発点はブラウザで見える画面になります。

また、静的サイトジェネレーターのAstroを選ぶ場合は、ヘッダーやカード型UIなどの再利用する部品やページ全体のレイアウトを「コンポーネント」として個別に作成していきます。共通パーツを部品化してコードを整理できるため、保守性の高いサイトを自前で構築したいエンジニアに適していますね。

コードを書かずに管理したい場合は、WordPressのサイトエディターでブロックを並べてサイト全体のレイアウトを作る方法もあります。利用するには対応するブロックテーマのインストールと有効化が必要ですが、Studioで配置していた要素をブロックに置き換えていくことで近いレイアウトを再現できます。

ほかのノーコードツールへ移るときも、やることは同じです。たとえばWebflowの移行手順はSquarespaceからの引っ越し向けですが、既存サイトを見ながらレイアウトを手作業で組み直し、公開前に画面幅や言語ごとの表示をチェックする流れになっています。Studioから移る場合も、この進め方がほぼそのまま当てはまります。レスポンシブ表示でレイアウトが崩れていないか、ボタンの余白やフォントの強弱が正しく再現できているかを実機やプレビューで丁寧に確かめていく作業が大切ですね。

自分で作り直す時間がなければ、移行を請け負う会社に頼むこともできます。Studioからの移行にかかる費用は、Studio移行センターの料金ページ（/ryokin/）の計算例と、無料サイト診断（/shindan/）で確かめられます。