Flexメッセージは、JSONでレイアウトを自由に組み立てられるメッセージ形式です。テキスト・画像・ボタンなどを細かく配置できる一方、作成にはJSONの記述が必要です。
凝ったデザインのメッセージをノーコードで作りたい場合は、カードタイプメッセージやリッチメッセージの方が手軽です。Lumoのマーケティングエージェントに目標を伝えれば、目的に合ったメッセージ形式の選定から下書きの作成まで任せられます。Flexメッセージのレイアウトを自分で細かく制御したいときに、この記事の手順を使ってください。
Flexメッセージでできること
Flexメッセージは、要素のサイズ・配置・色を細かく指定して、独自デザインのメッセージを1通で表示できます。
商品紹介カード、予約確認、レシート、クーポンなど、定型のテンプレートでは表現しきれないレイアウトに向いています。複数のカードを横に並べてスワイプで見せる構成も作れます。
| 用途の例 | 向いている理由 |
|---|---|
| 商品紹介カード | 画像・価格・ボタンを1枚にまとめて配置できる |
| 予約・注文確認 | 項目を縦に整列させ、明細のように見せられる |
| クーポン・特典案内 | 強調したい情報のサイズや色を自由に調整できる |
マーケティングエージェントに任せる
メッセージの内容や形式に迷ったら、まずマーケティングエージェントに相談するのが近道です。
「新商品の紹介メッセージを作りたい」のように目標を伝えると、エージェントが目的に合った形式を選び、下書きまで用意します。Flexメッセージのような自由度の高い形式が必要かどうかも含めて提案するため、JSONを自分で書く前に方向性を固められます。
エージェントが作成した内容は、配信前に承認の画面で確認できます。問題なければ 「実行する」、見直したいときは 「やめておく」 を選びます。
Flexメッセージを自分で作成する
Flexメッセージはメッセージ配信の作成画面で、配信ごとに直接作成します。保存して使い回すアイテムとしては管理されません。
- メッセージ配信の作成画面または編集画面を開きます
- メッセージタイプから 「Flexメッセージ」 を選びます
- 「Flex JSON」 の入力欄にメッセージのJSONを貼り付けます
- 「代替テキスト」 を入力します（プッシュ通知やチャットリストに表示されます）
- プレビューで表示を確認します
JSONはBubble（1枚のカード）またはCarousel（複数カードを横並び）の構造で記述します。LINEが提供するシミュレーターなどでレイアウトを組み立て、生成されたJSONを入力欄に貼り付けると効率的です。
JSONの基本構造
FlexメッセージのJSONは、Bubble（1枚のカード）またはCarousel（複数カードの集まり）を基本単位として構成します。
1枚のBubbleは、次の領域を組み合わせて作ります。すべての領域を使う必要はなく、必要な領域だけを指定します。
| 領域 | 役割 |
|---|---|
| header | カード上部に表示される見出し領域 |
| hero | メイン画像を表示する領域 |
| body | テキストやボタンなどの主要コンテンツ領域 |
| footer | カード下部に表示されるフッター領域 |
複数のBubbleをCarouselにまとめると、受信者が横にスワイプして複数のカードを閲覧できます。
プレビューで確認する
JSONを入力すると、LINEでの見え方をプレビューで確認しながら編集できます。
配信前にプレビューで、画像の表示位置・文字の折り返し・ボタンの配置が意図通りかを確認してください。実際のLINEトーク画面に近い形で表示されるため、レイアウトの崩れを送信前に見つけられます。
うまくいかないときは
FlexメッセージはJSONの記述に依存するため、つまずく多くはJSONの形式に原因があります。
| 症状 | 確認すること |
|---|---|
| JSONの形式エラーが表示される | 括弧やカンマの対応が正しいか確認します。エディタにエラー箇所が表示されます |
| プレビューが表示されない | 必須項目（type、altTextなど）が正しく設定されているか確認します |
| LINEで表示が崩れる | 画像サイズや文字数がFlexメッセージの仕様の範囲に収まっているか確認します |
JSONを自分で組み立てるのが難しい場合は、カードタイプメッセージやリッチメッセージへの切り替えも検討してください。これらはノーコードでリッチなレイアウトを作成できます。