---
title: "LINE Flex Messageの作り方｜Simulator・JSON・カード型メッセージ設計の基本"
description: "LINE Flex Messageの作り方を解説。Flex Message Simulatorの使い方、JSONの基本構造、バブル・カルーセル、ボタンや画像を使う際の設計ポイントを紹介します。"
url: "https://kylon.io/ja/blog/line-flex-message-guide-2026"
language: "ja"
---

MEDIA

AI活用の最前線

[HOME](https://kylon.io/ja)\>[ブログ](https://kylon.io/ja/blog)\>[LINE公式アカウント活用ガイド](https://kylon.io/ja/blog/topics/line-official-account)\>LINE Flex Messageの作り方｜SimulatorとJSONでリッチなメッセージを設計する

Guide2026年7月31日·13分で読める

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

LINE Flex Messageの基本を解説。Flex Message Simulator、JSONの構造、カード型メッセージの設計、実装前の確認項目をまとめます。

[![つきのこ](https://kylon.io/v2/tsuki-avatar.png)](https://x.com/Tsuki_RobotAI)

[つきのこ](https://x.com/Tsuki_RobotAI)

ソリューションエンジニア · 13分で読める

Kylonでできること

### LINEの問い合わせを、チームで確認しやすい流れに。

FAQに沿った一次案内、判断が必要な相談の引継ぎ、対応履歴の整理を、ひとつのチーム運用として設計します。

一次案内と下書き確認担当者への引継ぎ

[LINE活用事例を見る](https://kylon.io/ja/use-cases/line)

[顧客のLINE画面とKylonのエスカレーション・承認フロー](https://kylon.io/assets/mock-sales-line-agent.html)

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

## この記事の要点

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

KYLON公式LINE

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

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

[Kylon公式LINEを友だち追加](https://lin.ee/UM9AHkx)

![Kylon公式LINE QRコード](https://kylon.io/assets/line-qr.png)登録は無料です。配信停止はいつでも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を使えば、顧客ごとに異なる問い合わせ導線、回答方針、引継ぎの流れを整理しながら、提案と導入支援を進められます。

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

[パートナー募集を見る](https://kylon.io/ja/partner)

![Kylonキャラクター](https://kylon.io/assets/partner-mascot-leaf.png)

## 関連記事

[LINE公式アカウント活用ガイドをもっと見る](https://kylon.io/ja/blog/topics/line-official-account)

[

### LINE Messaging API入門｜ボット作成の準備からWebhook設定まで【2026年版】

LINE Messaging APIでボットを作るための基本を、チャネル作成、アクセストークン、Webhook、応答メッセージまで順に解説します。

つきのこ·2026年7月31日

](https://kylon.io/ja/blog/line-messaging-api-beginner-guide-2026)[

### KylonでLINE公式アカウントにAIチャットボットを導入する方法｜顧客対応を標準化する設計

LINE公式アカウントの問い合わせ対応を、KylonのAIエージェントとチームのナレッジで支える考え方を解説。導入前の整理、下書き確認、対応履歴の活用までまとめます。

つきのこ·2026年7月31日

](https://kylon.io/ja/blog/line-ai-chatbot-kylon-guide-2026)