決まった型に収まらないメッセージを、
管理画面で組み立てる。
LINEのFlex Messageを、画像・見出し・本文・ボタンなどの部品を並べて作るFlexエディタ。
JSONを書かずに、見出しの色や行の組み立てまで調整できます。
Flexエディタとは
Flex Messageは、LINEのメッセージ形式の1つです。CSSのFlexboxの仕様に基づいて、ボックス・テキスト・画像・ボタンを組み合わせ、レイアウトを自由に組み立てられます。 その一方で、Flex MessageはJSON形式で記述するため、文言や色を変えるたびにJSONを直すことになります。
Engage ChのFlexエディタは、このFlex Messageを管理画面の中で、部品を並べながら作るための機能です。 カードタイプメッセージの決まった欄では足りない、見出しの色を変える・行を足すといった調整もその場ででき、作ったメッセージはセグメント配信やシナリオ配信からそのまま送れます。
Flexエディタでできること
部品を並べて組み立てる
画像・見出し・本文・ボタン・区切り・ボックスの6つの部品を、パレットからドラッグして積み上げます。中央のキャンバスは実際の表示に近い大きさで描かれ、並べ替えや「元に戻す」「やり直す」もできます。
ボックスで細かなレイアウト
ボックスの中に部品を入れて、横並びや入れ子の構成を作れます。階層は「構造」タブでたどれ、大きさ・角丸・枠線・余白・重ね位置・背景のグラデーションまで設定できます。
カルーセルにも対応
カードを追加すると、横にスワイプして見るカルーセルになります。カードは最大12枚まで作れ、タブで切り替えて編集します。
タップしたときの動作
ボタンや画像には、URLを開く・メッセージを送るのほか、アンケートの開始やクーポンの発行、「電話をかける」などの動作を設定できます。URLを開くときは、LINE内ブラウザの大きさも選べます。
保存前にLINEの上限を検査
データ量やボタンの文字数など、LINEの上限を超える値は保存の前に止め、直す箇所を示します。配信の段階で初めてエラーに気づく、ということが起きにくくなります。
テスト配信で実機の見え方を確認
エディタからテスト配信できます。LINE側の検証を通ったときだけ宛先を選んで送れるので、実際のトーク画面で見え方を確かめてから配信できます。
リンクごとのクリック計測
Flexの中のボタンや画像などに設定したURLは、リンクごとにクリックを計測します。カードを並べ替えても、JSONを直接書き換えても、計測の対応はずれません。
JSONの直接編集
JSON編集を有効にすると、ビジュアル編集とJSONを並べて、どちらからでも編集できます。LINEのFlex Message Simulatorなどで作ったJSONを貼り付けて使うこともできます。
すべてのメッセージ作成画面で使える
メッセージ配信・シナリオのステップ・あいさつ・自動応答・定期配信などで、テキストや画像と同じ吹き出しの1つとしてFlexを使えます（1通に最大5つ）。メッセージテンプレートに保存すれば、ほかの画面で読み込んで使い回せます。
Flexエディタは、アカウントごとに有効化してご利用いただく機能です。JSON編集や一部のタップ時の動作は、別に有効化します。
活用シーン
新商品・キャンペーンのご案内
写真・見出し・価格・ボタンを1枚のカードにまとめ、ボタンを「商品を見る」と「店舗で予約する」の2つに分けます。見出しの色や余白は、ブランドの色味に合わせて調整できます。
料金表・メニュー表
「カット 4,400円」「カラー 6,600円」のように、項目名と金額を横に並べた行を積み重ね、区切り線で分けた料金表を作れます。
コース・プランの比較
コースやプランごとにカードを分けてカルーセルにし、各カードに申し込みや予約のボタンを置きます。カードごとに見出しの色を変えて、違いを見分けやすくできます。
来店・購入後のフォロー
シナリオのステップにFlexを入れ、使い方の案内とボタンを添えます。ボタンからアンケートを始めたり、次回使えるクーポンを発行したりもできます。
JSONを直接書いて作る場合との違い
| JSONを 直接書く場合 | Engage Ch Flexエディタ | |
|---|---|---|
| 作り方 | JSONで構造を記述する | 部品をドラッグして積み上げ、設定欄で文言・色・余白を変える |
| 見た目の確認 | Flex Message Simulatorなどで描画を確かめる | 編集中のキャンバスで確かめ、テスト配信で実機でも確認する |
| 上限や形式の誤り | シミュレーターや送信時のエラーで確かめる | 保存の前に検査し、直す箇所を示す |
| 配信 | Messaging APIでメッセージを送る仕組みを用意する | セグメント配信・シナリオ・自動応答などからそのまま送れる |
よくあるご質問
Flex Messageとは何ですか？
LINEのメッセージ形式の1つで、CSSのFlexboxの仕様に基づいて、ボックス・テキスト・画像・ボタンなどを組み合わせ、レイアウトを自由に組み立てられるメッセージです。通常はJSON形式で記述します。
JSONの知識がなくても使えますか？
はい。部品をドラッグして並べ、文言・色・余白などを設定欄で変えて作ります。JSONを直接編集したい場合は、JSON編集を有効にすると、ビジュアル編集と並べて使えます。
カードタイプメッセージとは何が違いますか？
カードタイプメッセージは、写真・タイトル・説明文・アクションの決まった欄を埋めて作ります。Flexエディタでは、見出しの色を変える・行を足す・項目を横に並べるといった、決まった欄では足りない調整ができます。なお、作成済みのカードタイプメッセージをFlexエディタで開いて編集することには、現在対応していません。
作ったFlexメッセージはどの配信で使えますか？
メッセージ配信、シナリオのステップ、あいさつメッセージ、自動応答、定期配信、コンテキストメッセージ、メッセージテンプレートで使えます。テンプレートに保存すれば、ほかの配信画面で読み込んで使い回せます。
配信する前に見え方を確認できますか？
エディタからテスト配信できます。LINE側の検証を通ったメッセージだけを、選んだ宛先に送って実機で確認できます。エディタ内の表示は実機と完全には一致しないため、参考表示としてお使いください。
Flexエディタを使うにはどうすればよいですか？
Flexエディタは、アカウントごとに有効化してご利用いただく機能です。JSON編集や一部のタップ時の動作は、別に有効化します。ご利用の可否や設定については、お問い合わせください。
Flexエディタと組み合わせる機能
Flexエディタで作ったメッセージは、セグメント配信やシナリオ配信でそのまま送れます。 画像・カルーセル・リッチメニューの出し分けなど、ほかの見せ方はリッチコンテンツ配信・属性別リッチメニューにまとめています。
決まった型で手早く作るなら、カードタイプメッセージが向いています。作り方はLINEカードタイプメッセージの作り方、 テンプレートメッセージとの使い分けはLINEテンプレートメッセージとカードタイプの違いで解説しています。