LINE Flex Messageの作り方｜SimulatorとJSONでリッチなメッセージを設計する

結論: Flex Messageは、情報を見やすく並べるためのメッセージ形式です。デザインから始めるのではなく、利用者に見せる情報とタップ後の行動を整理してから構造を作ると、実装後の修正を減らせます。

この記事の要点

• Flex MessageはJSONでレイアウトを定義する
• Simulatorで表示を確認してから実装する
• 一つのカードに入れる行動は絞る
• 画像、文字、ボタンはスマートフォンでの見え方を確認する

KYLON公式LINE

仕事で使える生成AI情報を、LINEで毎週チェック

重要な生成AIニュースと、企業での活用事例をコンパクトにお届けします。営業、顧客対応、採用、バックオフィスで使える実務のヒントも、週ごとにまとめます。

Kylon公式LINEを友だち追加

登録は無料です。配信停止はいつでもLINE上で設定できます。

Flex Messageとは

Flex Messageは、テキストだけでは伝えにくい情報をカード形式で組み立てられるMessaging APIのメッセージです。商品案内、予約確認、イベント告知、注文状況など、構造化した案内に向いています。

使う場面を決める

Flex Messageは装飾のためだけに使うものではありません。複数の情報と行動を一画面に整理したい場合に使います。内容が短い案内なら、通常のテキストメッセージの方が読みやすいこともあります。

基本構造を理解する

Flex MessageはJSONで定義します。代表的な構成は、1枚のカードを表すバブル、複数カードを横に並べるカルーセル、内部を分けるヘッダー、ヒーロー、ボディ、フッターです。

Flex Message Simulatorを使う

実装前はFlex Message SimulatorでJSONを確認します。画面上のプレビューを見ながら、行数、改行、画像の比率、ボタンの位置を調整できます。テキストだけを修正する場合も、スマートフォン幅で確認します。

バブルの情報設計

一つのバブルには、見出し、補足、価格や日時、主要なボタンなど、判断に必要な情報を入れます。情報が多い場合は、カードを増やすより、詳細ページへ遷移する導線を作る方が読みやすくなります。

• 見出しは何の案内かを短く示す
• 補足は日時、場所、条件などを整理する
• 主要な行動は一つに絞る
• 詳細はリンク先で説明する

カルーセルを使う場面

複数の商品、複数の日時、複数のプランを比較してもらう場合はカルーセルを使えます。ただしカードが多すぎると見落としやすくなるため、並び順と最初のカードに置く内容を検討します。

アクションを設定する

Flex Messageのボタンや画像には、URLを開く、テキストを送る、ポストバックを返すなどのアクションを設定できます。利用者がタップした後に何が起きるかをラベルで明確にし、リンク先の表示も確認します。

実装時の確認

Messaging APIで送信する前に、JSONの構文、画像URL、テキストの長さ、アクションのリンク先を検証します。テスト用のアカウントに送信し、iOSとAndroidでの見え方を確認できると安心です。

改善の見方

送信後は、クリックされた場所、遷移先での行動、問い合わせ内容を確認します。反応が弱い場合は、色や装飾より先に、カードの目的とボタンの文言を見直します。

まとめ

• Flex Messageは構造化した情報をカード形式で伝える手段
• SimulatorでJSONとスマートフォン表示を確認する
• 一つのカードに入れる行動を絞る
• 送信後のクリックと問い合わせを次の設計に使う

LINE構築パートナー募集

顧客ごとのLINE活用を、もっと軽やかに提案できる体制へ。

LINE公式アカウントの構築・運用支援を行うパートナー企業を募集しています。KylonのLINE Connectionを使えば、顧客ごとに異なる問い合わせ導線、回答方針、引継ぎの流れを整理しながら、提案と導入支援を進められます。

顧客要件に合わせた設計運用ルールをチームで共有導入後の改善提案につなげる

パートナー募集を見る