エレメントビルダーv2をフレックスエディタという名称に変更しました。 メイン機能に大きな変更はないため、引き続きご活用いただけますと幸いです。
フレックスエディタのご利用には、KARTE β機能トライアル利用規約への同意と、プラグインの解放が必要です。プラグインが開放されていないと一覧に表示されませんのでご注意ください。 利用を希望される場合は、担当のカスタマーサクセスもしくはチャットサポートにご連絡ください。 また、β機能のため予告なく仕様変更になる場合がございますことご了承ください。
フレックスエディタでは、誰が作成してもUIの品質を担保できる仕組みを複数用意しています。
利用する際に直感的に理解しづらい場合がありますが、この仕組みを活用するとUIの規則性を維持できます。
レイヤー構造について詳しく知りたい方や、テキスト間の余白やボタン配置などエレメント間の調整方法を探している方はご確認ください。
レイヤー構造とは
フレックスエディタでは、デザインの知識がなくても高品質なUIを作れるような仕組みを用意しています。
その仕組みには「レイヤー構造」というものがあり、画面左側に表示される赤枠部分です。
レイヤー構造とは、アクションを構成するエレメント（テキスト、ボタン等）を階層的に管理するための仕組みです。
高品質なUIには「規則性」が不可欠ですが、レイヤー構造の「レイアウト」機能を使うことで、その規則性を確保します。
「レイアウト化」による一括管理
レイアウト化とは、複数のエレメントを一つのグループとして束ねる機能です。個々の要素の位置をバラバラに調整するのではなく、束ねたレイアウトに対して一括で配置やスタイルを適用することで、高品質なUIに重要となる「規則性」を確保します。
レイアウトで設定できる項目
- 基本情報
- 並び方向（例：縦に並べるか横に並べるか）
- 整列（例：左揃えや中央揃え）
- 子要素の間隔（それぞれのエレメントをどれくらいの間隔で並べるか）
- 横幅
- 高さ
- 余白（パディング）
- スタイル
- 背景色
- 背景画像
- 角丸
- 枠線
- シャドウ
- 領域外の表示
- クリック時の動作
- 動作
- リンク遷移
- ネイティブ機能呼び出し
- ステート遷移
- 閉じる
- イベントハンドラー
- カスタムイベント
- 動作
- 絶対配置
- ポジション
- 上部からの距離
- 右側からの距離
- 属性カスタマイズ
- CSSカスタマイズ
レイアウト化の操作手順
個別のエレメントに背景色を付けたい場合や、複数のエレメントをグループとして扱いたい場合に、そのエレメントを「レイアウト化」します。
- レイアウト化したいエレメントの右側にある3点リーダーをクリックし、表示されたメニューから「レイアウト化」 を選択します。
選択したエレメントが新しい「レイアウト」グループの配下に格納され、そのレイアウトに対して上記で説明した項目が設定可能になります。
レイヤー内でドラッグ＆ドロップすることで、レイアウトの中に複数のエレメントを追加したり、重なりの順序や並び順を自由に変更できます。
レイアウト化の活用例
各エレメントで下記のような設定をしたい場合はエレメントをレイアウト化することで実現できます。
- 一つのテキストに背景画像や内側余白（パディング）を設定したい
- 画像とテキストをセットで動かしたり、共通の枠線を付けたりしたい