Q.Studioのレスポンシブ（ブレイクポイント）設定を移行先で再現するにはどうしますか？

初期値はPCが1280px、タブレットが840px、モバイルが540pxです。さらに、スモール（1140px）とミニ（320px）を追加できるため、全部で5種類になります。

それぞれの値は、決められた範囲の中で変えられます。範囲はブレイクポイントの設定方法の表で確認できますね。

この表の数字は、その表示が使われる画面幅の範囲とは別物です。あくまで、基準値として入力できる幅を示しています。

もうひとつ、Storeのテンプレートを元にして立ち上げたサイトでは、制作者があらかじめ数値を変更していたり、最初からスモールやミニが追加されていたりすることもあります。だから、表の数字をそのまま信じないほうが無難でしょう。

この基準値はサイト全体で共通の仕組みになっており、ページごとに別々の数値を割り振ることはできません。実際の値は、エディタのツールバーに表示される数字か、スクリーンの外にある縦ラインの位置で確かめられます。表示を確かめるときは、エディタの画面幅をドラッグして見るのが手軽です。ライブプレビューの表示は見ている端末の画面幅で決まるので、エディタで選んでいるブレイクポイントは反映されません。

Studioで組んだ画面切り替えの数値を、新しいサイトのCSSへどのように移植すればよいのでしょうか。Studioの値は初期設定のままとは限らないため、840pxや540pxを決め打ちせず、元のサイトで実際の数字を控えてから作業に入ります。

1. Studioのエディタ下部にあるツールバーで、使っているブレイクポイントと値を書き出す
2. 移行先のHTMLに viewport の指定（width=device-width, initial-scale=1）があるか確認する
3. 控えた値をメディアクエリの条件にして、幅ごとのスタイルを書く
4. 移行前と移行後を同じ幅で表示し、スクリーンショットで見比べる

手順2は見落としがちです。viewport の指定がないと、スマホでページ全体が縮小されて表示され、幅の条件を書いても思ったとおりに切り替わりません。

仕組みはメディアクエリの使い方にまとまっています。条件に指定した数値を含む上限条件となるmax-widthを使い、たとえばタブレット用としてmax-width: 840px、モバイル用としてmax-width: 540pxといった形で指定しましょう。

作成したコードの検証には、Chromeの開発者ツールが役立ちます。表示領域の幅と高さを数値で直接指定できるほか、画面全体のスクリーンショットを撮影して元の表示と並べて見比べることも可能です。

もっとも、開発者ツールのエミュレーションはあくまで画面幅を模した近似に過ぎません。端末特有のスクロール挙動や文字の描画までは完全に再現できない面があるため、気になる箇所が見つかったときは本物のスマートフォン実機で動かして確かめる必要がありますね。

Studioでは親ボックスのパネルから「横並び」「縦並び」を選ぶ感覚で組んでいきますが、コードへ移し替えるときは要素を一列に流すFlexboxと、格子状に整列させるCSS Gridを用途に合わせて使い分けましょう。

親要素に対してdisplay: flexを指定し、並べる向きをflex-directionのrow（横）やcolumn（縦）で制御します。Studioの自動折り返しと同じ挙動を作りたいときはflex-wrap: wrapを指定すれば、幅に収まらなくなった子要素を自動で次の段へ送れますね。なお、子要素の幅をどう決めていたかでも並びが変わるので、幅の指定も一緒に見直します。

その一方で、Flexboxの折り返しは行ごとに独立して余白を計算する仕組みです。そのため、複数行にわたるカード一覧で前後の列位置をきれいにそろえたい場面では、上下左右の二次元を同時に制御できるCSS Gridを選んだほうがズレが出にくくなりますね。

ちなみに、移行先がWordPressなら、VK Blocks Proのグリッドカラムブロックで画面サイズごとに列の数を変えられます。でも、列の幅は均等にしかできず、上下のそろえ方も指定できません。Studioで列ごとに幅を変えていたデザインは、この部分だけCSSで書くことになるでしょう。

下書きを作る方法としては使えます。ただ、出力されたHTMLをそのまま公開環境へ投入できるわけではなく、手作業での細かな手直しが欠かせません。

実際、v0の画像参照機能ドキュメントでも画像からのコード生成が案内されており、Anthropicの公式手順でも見本画像を基にコードを組み立て、出力結果の画面を再度撮影して見本へ寄せていく反復作業が紹介されています。見た目の近い土台を短い時間で用意するには便利な方法です。

しかし、1枚の静止画から読み取れるのは特定の画面幅で切り取られた見た目だけに留まります。Studioで設定したブレイクポイントの厳密な数値や、プロジェクト全体で共有されているレスポンシブの切り替え基準までは画像から自動判別できません。このため、PC版とスマートフォン版でそれぞれ画像を用意し、メディアクエリの境界値は元のエディタを参照して手動で指定し直す必要があります。

生成されたHTMLは、見た目だけでなく中身も点検します。画像に代替テキストが付いているか、見出しの順番が正しいか、キーボードで操作したときにフォーカスの位置が見えるかは、すぐに確認できる項目です。W3Cの簡易チェックにもこの3つが含まれていますが、あくまで手早く見るためのもので、これだけで十分とはいえません。

「新しい基盤になったなら、公開ページのHTMLを保存して移行に使えるのでは」と考える人もいるでしょう。たしかに出力は変わりました。Studioは2026年6月11日に新しい公開サイト基盤を正式リリースし、SPAからMPAへ刷新しました（新しい公開サイト基盤のお知らせ）。つまり、サーバー側でページを組み立てて返すSSRが土台で、テキストやメタ情報が最初からHTMLに入った状態で届きます。ページを移るたびに新しいHTMLを読み込む動きです。テンプレートを用いた同社の検証値でも、旧基盤で63だったLighthouseスコアが調整後に100を記録し、CMS利用時も98前後をマークするなど速度改善が図られました。

一方、旧基盤で公開していたサイトは自動では切り替わりません。ダッシュボードの設定メニューから一般を開き、公開サイト基盤の項目で新基盤を選んで保存し、サイトの更新操作を行うことで反映されます。公開ページへ反映されるまでには5分ほどかかり、確認時はブラウザの検証ツールでgeneratorメタタグの値がStudio.Design.HRCになっているかを確かめます。ライブプレビューでは判定できないので、必ず公開サイトで見てください。

独自コードの挿入や外部スクリプトを埋め込んでいるページは動作が変わる可能性があるため、HTMLの組み立ての変化と合わせて表示崩れがないか慎重に見ておきたいところですね。