フレックスエディタに関してなにかトラブルがある場合は、こちらの記事の各項目で当てはまるものをまず確認してください。
よくある質問
Q. フレックスエディタって何ですか？
A. ノーコードでアクション（接客施策など）を自由にカスタマイズできる機能です。テンプレートだけでなく、レイアウト調整・要素追加・削除も画面上で行えます。
※参考：フレックスエディタとは
Q. どのような課題を解決できますか？
A. 開発・デザインに頼らない施策作成、チーム内でのデザイン統一、運用負荷削減 などの課題を解決できます。
※参考：フレックスエディタの特徴
Q. 誰が使うべきですか？
A. コードを書けない運用者、デザインの知見が浅い人、施策作成の時間を短縮したい人などに特におすすめです。
※参考：どんな人におすすめか
Q. どうやって使い始めればいいですか？
A. 主に以下の 2 パターンがあります：
- 新規でアクションを作成して使い始める
- 既存の通常アクションをフレックスエディタ形式に変換する
※参考：フレックスエディタの始め方
Q. 新規アクションとして使う手順は？
A. 以下の３ステップとなります。
- 接客サービス一覧画面から「作成」を選ぶ
- フレックスエディタ対応テンプレートを選択
- 編集画面に遷移して自由に設計する
※参考：フレックスエディタの始め方
Q. 既存のアクションはどう変換できますか？
A. 「既存アクションをフレックスエディタに変換する」機能を使って切り替えられます（詳細な手順は該当ドキュメント参照）。
変換時にレイアウトが崩れる場合、元のHTMLやCSS構造、またはカスタマイズ内容の影響が考えられます。
エディタ上での調整や、再配置による修正をお試しください。
元アクションのHTMLやCSSが複雑な構造になっている場合、変換時に表示崩れが発生する可能性があります。
これは、フレックスエディタと既存アクションの構造が大きく異なり、自動変換の過程で正確に再現しきれないケースがあるためです
Q. フレックスエディタには利用制限や注意点がありますか？
A. 以下の３点をご確認ください
- 現在は主にポップアップ型の接客施策に対応しています。（アンケートや埋め込みは現在非対応）
- 特にアプリ配信の場合は、検証環境での動作確認を必ず行ってください。
- 旧称「エレメントビルダーv2」が「フレックスエディタ」に名称変更された点にも注意が必要です。
※参考：
フレックスエディタの概要
フレックスエディタのアプリ配信時の注意点
🔧 基本操作・デザイン編集に関する質問
Q. フレックスエディタでモーダルの背景（黒い部分）をクリックしても閉じないようにできますか？
A. はい、設定できます。
モーダルの 表示設定（中央表示） を選択すると、
「背景クリックで閉じる」 の項目が表示されます。
これを オフ にすると、背景クリックでは閉じなくなります。
Q. フレックスエディタでモーダルの背景（黒い部分）を非表示にできますか？
A. はい、設定できます。
モーダルの 表示設定（中央表示） を選択すると、
「背景クリックで閉じる」 の項目が表示されます。
これを オフ にすると、
「背景オーバーレイ表示」 の項目が表示されます。
これを オフ にすると、可能です。
※「背景オーバーレイ表示」をオフにした状態では、「背景クリックで閉じる」をオンにはできません。
※背景が透過されている状態でクリック判定を残すと、意図しないクローズが発生しやすくなり、挙動や計測に影響が出るためです。
Q. フレックスエディタで z-index は使えますか？
A. はい。可能です。
モーダルの設定からz-indexを指定することで モーダル + 背景オーバーレイのz-indexを任意のものに変更可能です
Q. フレックスエディタで表示されるフォントの指定をしたい
A. はい、可能です。
フレックスエディタで指定できるフォントは、Webフォントと呼ばれる共通フォントがラインナップされています。
Webフォントを利用することで、OSやブラウザの違いによらず、統一された見た目で表示することが可能です。
一方で、OS標準フォント（メイリオ、ヒラギノ、Roboto など）を使いたい場合は、ブランドスタイル設定やCSSでの指定が必要になります。
詳細な指定方法については、以下の記事をご確認ください：
👉 Flexエディタでのフォント指定について
Q. ボタンのカラーを任意にカスタマイズ変更したいが、どこで設定できますか？
A. テーマ設定の下にある「カスタマイズ」から変更できます。
Q. ボタンのホバー時の色を任意にカスタマイズ変更したいが、どこで設定できますか？
A. フレックスエディタでは、ボタンのホバー時（hover）のデフォルト色は「背景色を少し暗くした色」が自動で設定されます。
任意の色へ変更したい場合は、プロパティエディタ内の「CSSカスタマイズ」 にて、対象ボタンのクラスに対して :hover を指定してください。
カスタマイズに当たるためサポート対象外となります
Q. ✗ボタン（閉じるボタン）が背景の後ろに隠れてしまいます。
A. 閉じるボタンの配置位置を見直すと解決します。
デフォルトでは上部に配置されていますが、必要に応じて下部に変更も可能です。
※参考：「閉じる」ボタンの配置位置を下部に移動させ解消するかご確認ください。
レイヤー>「閉じる」ボタンを下部に
Q. アイコン/ボタンのクリック時の動作に「スライド遷移」を指定したのですが、うまく操作できません
A. アイコン/ボタンの配置位置を見直すと解決できる場合があります。
配置位置を下部に移動させ解消するかご確認ください。
Q. PCとスマホで配置を変えられますか？
A. 「モーダル」タイプを選択し、表示設定から可能です。
Q. テキストリンクの“ネイティブ機能呼び出し”とは何ですか？
A. アプリ側のネイティブ機能（例：App Storeのトラッキング許可など）を呼び出す設定です。
※参考：テキストリンクのネイティブ機能呼び出し
Q. レイヤー欄の順番とプレビュー上の重なりはどのように対応していますか？
A. 左側のレイヤー欄に表示されている順番と、プレビュー上の重なりが直感どおりに一致しない場合があります。
フレックスエディタでは、HTMLとCSSの仕様に準拠して描画されます。
- レイヤー欄は編集用のツールとして表示順を管理しています。
- 実際の描画では、絶対配置（absolute）された要素は、後から描画されたものが構造上前面に表示されます。
- そのため、レイヤー欄で一番下に表示されていても、プレビュー上では上に重なる場合があります。
「上へ移動／下へ移動」でレイヤー順を調整できますが、絶対配置を使用している場合は、プレビュー上の重なりとレイヤー欄の順番が逆になることがあります。 通常の要素（絶対配置でない場合）は、レイヤー欄の順番どおりに前後関係が反映されます。
Q. ボタンの色をデフォルトでブランドカラーに設定したいが、反映されません
A. フレックスエディタでは、ボタンのテーマを「ブランド」に設定すると、ブランドカラーが自動で適用されます。
ただし、既にボタンにカスタムカラーを設定している場合や、CSSカスタマイズで背景色を上書きしている場合は、ブランドカラーが反映されないことがあります。
対応手順
- ボタンのテーマを「ブランド」に設定する
- 編集画面のテーマ設定から選択できます。
- 既存のカスタムカラーやCSSでの上書きを削除する
- 背景色やボーダー、文字色などがCSSで固定されていないか確認してください。
- 「ブランドスタイル設定」で必要に応じて微調整する
- テーマ＝ブランドに設定しても、既存のカスタマイズが優先される場合があります。
- CSSで直接上書きされている場合は、削除することでブランドカラーが適用されます。
- 今後は可能な限り、CSSカスタマイズではなく、propsやテーマ設定でスタイルを調整する運用が推奨です。
Q. フレックスエディタでテンプレートのフォント指定や影を変更したいが、思った通りに反映されません
A. フレックスエディタでは、ブランドスタイルや共通コード設定でフォントを指定できますが、既存のカスタマイズCSSが影響している場合、プレビュー上で意図した表示にならないことがあります。
フォント指定の方法
- 単体のテキストにWebフォントを指定したい場合
サイトに読み込まれているWebフォントを選択し、右側の「カスタムCSS」から設定可能です。 - 全体のデフォルトWebフォントを指定したい場合
- ブランドスタイル設定でWebフォント名を追加し保存する（すべての接客で反映）
- 共通コード設定（CSS）から任意の要素に対してfont-familyを上書きする
影（box-shadow）が残る場合
- 原因
カスタマイズCSSにbox-shadow指定が入っている場合、プレビュー上で古いスタイルが残ることがあります。
実際の配信には反映されません。 - 対応方法
CSSタブで該当のbox-shadowを削除し、サイトプレビューに切り替えると古い影が消えることを確認できます。
- プレビュー上の見え方と実際配信結果が異なる場合があります
- CSSによるカスタマイズが優先されるため、意図しない影やフォント指定が残る場合は削除や修正を行ってください
Q.テキストの間にリンクを追加（例：詳細はこちら）することはできますか？
A.はい、可能です。
テキストとテキストリンクをレイアウト（横）で横並びにして設定ください。
例：詳細はこちら>> ※「こちら>>」に対してURLを指定したい。
※詳細は：テキストで指定＆こちら>>：テキストリンクで指定
補足：
- テキストの間の一部を文字太くや色変えなどに適用することも可能です。
- 文字間に隙間が出る場合は、レイアウトの子要素の間隔を調整してください。
🧩 レイアウト・要素構造に関する質問
Q. 他のアクションの要素をコピーすることはできますか？
A. はい、できます。
他のアクション（フレックスエディタ対応）から要素をコピーし、別のアクションへペーストすることが可能です。
操作手順は通常のコピー&ペーストと同様です。
コピーしたい要素を右クリックし、「エレメントをコピー」→ ペースト先のアクションで「エレメントをペースト」を選択します。
ショートカットキー（Command / Ctrl + C、Command / Ctrl + V）にも対応しています。
Q. 要素のテキスト内容が長文になった際に、ポップアップ内でスクロールは可能でしょうか？
A. はい、可能です。
レイアウトに対して高さを設定したうえで、スタイルの「領域外の表示」を「スクロール」に設定することで対応できます。
手順
- 対象の要素をレイアウト化する
- レイアウト化した要素に対して高さを指定する
- スタイル設定の「領域外の表示」で「スクロール」を選択する
テキスト量が多い場合でも、スクロール設定を行うことでレイアウト全体を崩さずに表示できます。
Q. レイアウトはどういう概念ですか？ どう使い分ければいいですか？
A. レイアウトは「要素のグループ構造」を定義する考え方です。
位置調整・並び順・縦横方向の切り替えを整理するための単位と考えるとわかりやすいです。
※参考：フレックスエディタのレイヤー構造とレイアウト化
Q. いじっているうちにレイアウトが二重になってしまいました。空白が直せません。
A. 不要なレイアウトが入れ子になっている可能性があります。
一度外側のレイアウトから要素を出すと解決します。
対応手順
- 左側のレイヤー上で、外側のレイアウトの三点リーダーをクリック
- レイアウトから出すをクリック
Q. 表示／非表示の制御や条件分岐はできますか？
A. はい、プロパティ設定から要素の表示・非表示や条件分岐を制御することができます。
Q. CSS／JavaScript を使ったカスタマイズはできますか？
A. 共通コード設定（CSS・JavaScript の挿入）機能を使って、より細かいカスタマイズを行うことも可能です。※カスタマイズはサポート対象外になります。
※参考：フレックスエディタの共通コード設定によるCSS・JavaScriptでのカスタマイズ
🎨 デザイン調整・スタイルに関する質問
Q. フォントを変更したいが、どこから設定できますか？
A. 右側のプロパティエディタから変更できます。
Q. ボタンを下に配置したいです。
A. ボタンが「絶対位置指定」になっていると動かせません。
配置モードを見直すと位置を移動できます。
Q. 画像URLとリンク先URLを混同していました。
A. 画像自体のURLと、クリック時に遷移するURLは別設定です。
「クリック時の動作」から設定しましょう。
🎞️ スライダー・カルーセル関連
Q. スライダーの2つ目以降のアイテムを見えなくしたい。
A. スライダーアイテムの幅を100%に設定することで、1枚ずつ切り替え表示が可能です。
Q. スライダーのアイテム切り替えを確認したい。
A. 編集画面右上の「操作モード」をオンにして確認できます。
自動スライドを設定しておくとより分かりやすいです。
Q. ステートとカルーセルはどう使い分ければいいですか？
A. ステート＝内容切り替え、カルーセル＝複数スライドの並び、という違いがあります。
動きで見せたいときはカルーセル、条件で切り替えたいときはステートが向いています。
※参考：
フレックスエディタでスライダー形式（カルーセル）のポップアップを作成する
フレックスエディタでボタンクリックでステート遷移するポップアップを作成する
💡 その他の質問・発見
Q. widget actionで書いていたスクリプトは、フレックスエディタでも使えますか？
A. 基本的には利用可能ですが、一部動作には制約があります。
動作確認しながら適用してください。
Q. AIっぽい「キラキラしたボタン」がありましたが、これは何ですか？
A. β版のAI支援機能です。
Q. 追加したテキストをマウスで掴んで微調整したかったのですが、できません。
A. 現状はドラッグによる微調整は非対応です。プロパティ数値で調整してください。