フレックスエディタの新プレビュー

このドキュメントでは、フレックスエディタの新しい画面UIである「新プレビュー」について説明します。複数のデバイスを一画面に並べて確認しながら、デバイス（ブレイクポイント：画面の表示を切り替える境界線の幅）ごとにコードを書くことなく、見た目や文言を部分的に出し分けたい場合にご利用ください。

新プレビューでできること

複数デバイスを一画面でまとめて確認・編集

画面上には、標準で1つの「デフォルト」プレビュー枠が表示されます。デフォルト枠にはスマホだけでなく、タブレットやPCなどお好みの端末サイズを自由に割り当てることができます。

このデフォルト枠に加え、以下の追加サイズを設定できます。

  • テンプレート

    • タブレット（641px〜）

    • PC（1024px〜）

  • カスタムサイズ（任意の横幅と名称）

各プレビュー枠では、スマホ・タブレット・PCなど、表示を確認したい端末の見た目を切り替えられます。

※画面幅の範囲が重なるサイズは追加できません（例：「641px〜1023px」と「920px〜1279px」のような重複設定は不可）。確認したい代表的なサイズ（スマホ・タブレット・PCなど）に絞って設定すると、作業がスムーズになります。

表示順

プレビュー枠は、画面幅の狭い順に左から並びます。任意の順番への並び替えはできません。レスポンシブ設定の画面幅を変更すると、幅に合わせて並び順も更新されます。

プレビュー枠の追加・編集・削除

  1. プレビュー枠とプレビュー枠のあいだに表示される「＋」（レスポンシブ設定を追加）をクリックします。

  2. 「テンプレートから追加」でタブレット / PCを選ぶか、「カスタムサイズで追加」で横幅と名称を入力して「追加」します。

  3. 各プレビュー枠の上部ラベルをクリックすると、名称や画面幅を編集できます。デフォルト以外のサイズは削除できます。

  4. ラベル右のデバイス名から、プレビューに使う端末（iPhone、iPad、Note PC など）を切り替えられます。


画面の操作

画面下部のツールバーから、次の操作ができます。

  • 編集モード（鉛筆アイコン）：エレメントを選択して編集します

  • 操作モード（指差しアイコン）：クリックやホバーなどの挙動を確認します

  • URL入力欄とスイッチ：サイトプレビューのON / OFF、表示するページのURL指定

  • 表示倍率：50% / 75% / 90% / 100% / 110% / 125%

  • 領域を広げる：プレビューエリアを広げて確認します

トラックパッドやマウスホイールで画面を移動できます。ピンチ操作、または Ctrl キーを押しながらのホイール操作で拡大・縮小できます。

デバイスごとのレスポンシブ対応

これまでは、PCとスマホなどデバイスごとに、特定のエレメントの表示 / 非表示やテキストを個別に変更するのが容易ではありませんでした。新プレビューでは、画面上の操作でデバイス（ブレイクポイント：画面の表示を切り替える境界線の幅）ごとに要素を上書きでき、レスポンシブな出し分けが可能になります。

デバイスごとに変更できる項目

エレメントを選択すると、画面右側のプロパティエディタ上部にタブ（デフォルト / 追加したサイズ）が表示されます。タブを切り替えて設定を変えると、そのサイズだけに保存されます。上書きした項目はハイライトされ、そこから取り消すとデフォルトに戻ります。

カスタムCSS、カスタム属性、絶対配置は、デバイスごとの上書き対象外です。特定サイズだけ出さない場合は、レイアウトの「非表示」を使います。

おすすめの使い方（スマホファースト）

デフォルトをスマホ向けのベースにし、画面幅が広いサイズだけ差分を足していく使い方を推奨します。

  1. デフォルトで、スマホ向けのレイアウト・文言・サイズを完成させる

  2. タブレットやラップトップを追加する

  3. 広い画面だけで変えたい項目（余白、文字サイズ、表示 / 非表示など）を上書きする

パソコンをデフォルトにして、狭い画面で要素を削っていく使い方もできます。

利用時の注意点

  • 画面幅の範囲が重なるブレイクポイントは設定できません。

  • カスタムCSS、カスタム属性など、変更すべきでない項目は、デバイスごとの上書き対象外です。

  • デバイスごとの効果計測を行いたい場合は、接客を分けて配信を行ってください。

  • サイトプレビューは、対象サイトの読み込み制限の影響を受ける場合があります。サイト上での最終確認は、右上の「プレビュー」から「サイトで確認」も併用してください。

  • アプリへ配信する場合は、実機での確認を推奨します。詳細は「フレックスエディタのアプリ配信時の注意点」をご確認ください。

従来のプレビュー画面との差分

  • 複数デバイスを一画面に並べて、同時に確認・編集できる

  • ブレイクポイントを追加・変更・削除できる

  • デバイスごとに、スタイルだけでなくテキスト内容なども上書きできる

  • 画面上で、プレビュー全体を移動・拡大縮小できる

フレックスエディタに関するその他の機能について

上記の差分以外については、従来のプレビュー画面から変更はありません。各種機能については、フレックスエディタのサポートサイトをご確認ください。

従来のプレビュー画面に切り替える

フレックスエディタを開くと、新プレビューが表示されます。必要な場合は、従来のプレビュー画面に切り替えられます。

  1. 編集画面上部の切り替えから、従来のプレビュー画面に切り替えます。

  2. 画面がリロードされ、切り替えが完了します。

  3. 新プレビューに戻す場合も、同じ操作から切り替えられます。切り替えたあとも画面がリロードされます。

※切り替えても、アクションの内容や保存状態は維持されます。新プレビューと従来のプレビュー画面を、用途ごとに使い分ける必要はありません。