フレックスエディタでは、誰が作成してもUIの品質を担保できる仕組みを複数用意しています。
利用する際に直感的に理解しづらい場合がありますが、この仕組みを活用するとUIの規則性を維持できます。
レイヤー構造について詳しく知りたい方や、テキスト間の余白やボタン配置などエレメント間の調整方法を探している方はご確認ください。
レイヤー構造とは
フレックスエディタでは、デザインの知識がなくても高品質なUIを作れるような仕組みを用意しています。
その仕組みには「レイヤー構造」というものがあり、画面左側に表示される赤枠部分です。
レイヤー構造とは、アクションを構成するエレメント（テキスト、ボタン等）を階層的に管理するための仕組みです。
高品質なUIには「規則性」が不可欠ですが、レイヤー構造の「レイアウト」機能を使うことで、その規則性を確保します。
モーダルとは
モーダルとは、フレックスエディタにおける一番外側のレイヤーで、ステート全体の表示位置や背景（オーバーレイ）、横幅、z-indexなど、ステート全体の見た目や振る舞いの土台となる設定を管理する単位です。
フレックスエディタには「モーダル」「レイアウト」「エレメント」という3つのレイヤーがあり、モーダルはその中で一番上位（外側）の階層にあたります。
モーダルで設定できる項目
表示設定
スマホ・ PCで表示位置を変える：デバイスごとに表示位置を切り替えるかどうかを設定できます
表示位置：9点の位置から表示する位置を選択できます
背景クリック動作：背景（オーバーレイ）をクリックしたときの挙動を「なし」「閉じる」「ステート遷移」から選択できます
背景色：背景オーバーレイの色と不透明度（%）を設定できます
表示エフェクト：表示時のアニメーション効果を設定できます
スタイル
横幅：「自動」「最大」「指定」から選択できます
z-index：モーダルおよび背景オーバーレイの重なり順（z-index）を指定できます
「レイアウト化」による一括管理
レイアウト化とは、複数のエレメントを一つのグループとして束ねる機能です。個々の要素の位置をバラバラに調整するのではなく、束ねたレイアウトに対して一括で配置やスタイルを適用することで、高品質なUIに重要となる「規則性」を確保します。
レイアウトで設定できる項目
基本情報
並び方向（例：縦に並べるか横に並べるか）
整列（例：左揃えや中央揃え）
子要素の間隔（それぞれのエレメントをどれくらいの間隔で並べるか）
横幅
高さ
余白（パディング）
スタイル
背景色
背景画像
角丸
枠線
シャドウ
領域外の表示
クリック時の動作
動作
リンク遷移（自動イベント：
message_click）ネイティブ機能呼び出し
ステート遷移（自動イベント：
_message_state_changed）閉じる（自動イベント：
message_close,_message_state_changed）イベントハンドラー
カスタムイベント（自動イベントに加えて任意のイベント発生）
絶対配置
ポジション
上部からの距離
右側からの距離
属性カスタマイズ
CSSカスタマイズ
レイアウト化の操作手順
個別のエレメントに背景色を付けたい場合や、複数のエレメントをグループとして扱いたい場合に、そのエレメントを「レイアウト化」します。
レイアウト化したいエレメントの右側にある3点リーダーをクリックし、表示されたメニューから「レイアウト化」 を選択します。
選択したエレメントが新しい「レイアウト」グループの配下に格納され、そのレイアウトに対して上記で説明した項目が設定可能になります。
レイヤー内でドラッグ＆ドロップすることで、レイアウトの中に複数のエレメントを追加したり、重なりの順序や並び順を自由に変更できます。
レイアウト化の活用例
各エレメントで下記のような設定をしたい場合はエレメントをレイアウト化することで実現できます。
一つのテキストに背景画像や内側余白（パディング）を設定したい
画像とテキストをセットで動かしたり、共通の枠線を付けたりしたい
注意点
左側のレイヤーに表示されている順番と、プレビュー上の重なりが直感どおりに一致しない場合があります。フレックスエディタでは、HTMLとCSSの仕様に準拠して描画されます。
レイヤーは編集用のツールとして表示順を管理しています。
実際の描画では、絶対配置（absolute）された要素は、後から描画されたものが構造上前面に表示されます。
そのため、レイヤー欄で一番下に表示されていても、プレビュー上では上に重なる場合があります。