ご注意ください

エレメントビルダーv2をフレックスエディタという名称に変更しました。 メイン機能に大きな変更はありません。

ご注意ください

フレックスエディタのご利用には、KARTE β機能トライアル利用規約への同意と、プラグインの解放が必要です。プラグインが開放されていないと一覧に表示されませんのでご注意ください。 利用を希望される場合は、担当のカスタマーサクセスもしくはチャットサポートにご連絡ください。 また、β機能のため予告なく仕様変更になる場合がございますことご了承ください。

フレックスエディタ編集画面の全体像と、各エリアの機能について説明します。
画面上のどこで何ができるのかを網羅的に解説しており、操作に迷った際のリファレンスとして利用できます。

編集画面の構成

フレックスエディタの編集画面は以下の要素で構成されています。
null

1. ヘッダー

null

左側

以下ができます。

中央

アクション名を変更できます。

右側

以下ができます。

2. ステート/表示設定

以下ができます。

  • ステートの作成・編集
  • アクションの表示設定

詳しい操作手順は「フレックスエディタのステートの設定方法」をご確認ください。

アクションの表示設定

アクションの表示・非表示設定ができます。
例：50%スクロールされたら表示する、10秒後に非表示にする
※詳細は「アクションを設定する > 表示設定をする」をご確認ください。

3. レイヤー

エレメント（要素）の追加・編集・削除ができます。
このレイヤー構造に基づいてアクションが作られます。
レイヤー構造で、要素感の余白や要素の並びを管理することで規則性が保たれ、綺麗な見た目のUIを実現します。
※詳細については「フレックスエディタのレイヤー構造とレイアウト化」をご確認ください。

4. 共通コード設定とユーザー情報変数

共通コード設定

フレックスエディタの「共通コード設定」を使用して、接客アクション全体にカスタムCSSを適用したり、JavaScriptで動作を制御できます。
※設定方法は「フレックスエディタの共通コード設定によるCSS・JavaScriptでのカスタマイズ 」をご確認ください。

ユーザー情報変数

接客が表示される人ごとに、その人が持つ情報を表示できます。
※設定方法は「フレックスエディタでユーザー情報変数を利用する」をご確認ください。

5. ツールバー

画面モードを切り替えられます。

  • 各種モード
    • 編集モード（鉛筆アイコン）：アクションを編集できます
    • 操作モード（指指しアイコン）：クリック時などの挙動を確認できます
    • ブラウザで確認する（地球儀アイコン）：サイト上でどう見えるか確認できます
  • デバイス変更

6. プレビューエリア

画面上で直感的にデザインをカスタマイズできます。
変更を加えると変更内容が即時に反映されます。
※詳細は「フレックスエディタのエレメント基本操作」をご確認ください。

7. プロパティエディタ

各要素の設定を変更できます。
フレックスエディタでは3つのレイヤーがあります。

  • モーダル：レイアウトやエレメント全体を管理しています
  • レイアウト：複数のエレメントをグループ化して管理しています
  • エレメント：ボタンやテキストなどの要素一つ一つを指します

それぞれのレイヤーで設定できるもの

◯モーダル

  • 表示設定
    • 画面の表示位置や背景クリックの有効化、表示エフェクトを設定できます
  • スタイル
    • 横幅を設定できます

null

◯レイアウト

  • 基本情報
    • 並び方向や並べ方、子要素の間隔、横幅、高さ、余白を設定できます
  • スタイル
    • 背景色や背景画像、角丸、枠線、シャドウ、領域外の表示を設定できます
  • クリック時の動作
    • 動作やカスタムイベントを設定できます
  • 絶対配置
    • ポジションや上側からの距離、右側からの距離を設定できます
  • 属性カスタマイズ
    • CSSで特定の要素にスタイルを適用するため、対象のエレメントやレイアウトにIDまたはclass属性を付与できます。
  • CSSカスタマイズ
    • 直接CSSを記述してカスタマイズできます

null

◯エレメント
フォントや画像のサイズ、カラーなどの基本設定、属性カスタマイズ、CSSカスタマイズができます。
以下はテキストの例です。

null

※各エレメントの編集可能な項目については「フレックスエディタの各エレメントのプロパティ項目」をご確認ください。