developersIO
生成AIを活用して要件定義時にLINE公式アカウントの挙動の解像度を上げる2つの方法

生成AIを活用して要件定義時にLINE公式アカウントの挙動の解像度を上げる2つの方法

LINELINE BotLINE公式アカウントModel Context Protocol (MCP)AI
FacebookHatena blogX
2026.03.07

リテールアプリ共創部 マッハチームのるおんです。

最近、LINE公式アカウントのメッセージ機能と連携するアプリを開発することが多いのですが、要件定義フェーズで「LINE公式アカウントからどんなメッセージが届くか」をお客様に共有するとき、皆さんはどのようにしていますか？

自分たちのチームでは以前、CacooやFigmaでメッセージ画面のイメージを作成して共有していました。しかし、この方法には課題がありました。

  • CacooやFigmaでの デザイン作成に時間がかかる
  • 作成したイメージが 顧客に伝わりにくい
  • 実際のLINEメッセージ機能で できることとの乖離 が生まれやすい

この課題を解決するために、今回は 2つのアプローチ を紹介します。

  1. Flex Message Simulator ：LINEが提供する公式シミュレーターでメッセージをプレビューする方法
  2. LINE Bot MCP Server ：AIエージェントに自然言語で指示して、実機にメッセージやリッチメニューを配信する方法

それぞれの特徴と使い分けを解説します。

先に結論

どちらもLLM（ChatGPTやClaudeなど）にFlexメッセージのJSONを生成させるのは共通です。違いは 生成した後のワークフロー にあります。

観点 Flex Message Simulator LINE Bot MCP Server
確認方法 ブラウザ上でプレビュー 実機のLINEアプリ で確認
対応範囲 Flexメッセージのみ Flexメッセージ ＋ リッチメニュー
JSON生成後の流れ シミュレーターに 手動でコピペ 自然言語で配信指示
セットアップ 不要（ブラウザのみ） MCPサーバーの設定が必要
修正サイクル 再生成 → コピペ → プレビュー確認 プロンプトで指示 → 実機に即反映

手軽にFlexメッセージのプレビューを確認したいなら Flex Message Simulator 、リッチメニューの切り替えも含めた体験全体を実機でプロトタイピングしたいなら LINE Bot MCP Server がおすすめです。

プロジェクトの背景

今回は例として、宿泊予約サービスのLINE公式アカウントを想定します。ユーザーのアクションに応じてリッチメニューを切り替えたり、Flexメッセージを配信するという要件があったとします。

要件定義のMTGでこの体験フローをお客様に伝えるために、 LINEアプリ上でプロトタイプを確認できる 状態を作りたいと考えました。

方法1：Flex Message Simulator

Flex Message Simulatorとは

Flex Message Simulatorは、LINEが公式に提供しているFlexメッセージのプレビューツールです。ブラウザ上でFlexメッセージのJSONを編集し、リアルタイムにプレビューを確認できます。

https://developers.line.biz/flex-simulator/

使い方

  1. LLM（ChatGPTやClaudeなど）にFlexメッセージのJSONを生成してもらう
  2. 上記URLにアクセスし、左側のJSONエディタに生成されたJSONをコピペ
  3. 右側にリアルタイムでプレビューが表示される
  4. 微調整が必要な場合は、JSONを修正するか、LLMに再生成してもらってコピペし直す

Showcaseにはサンプルテンプレートも豊富に用意されており、テンプレートをベースにカスタマイズすることもできます。

スクリーンショット 2026-03-07 0.10.14

メリット

  • セットアップ不要 ：ブラウザさえあればすぐに使える
  • リアルタイムプレビュー ：JSONの編集結果が即座に確認できる
  • 公式ツール ：LINEの仕様に準拠した正確なプレビュー
  • 豊富なテンプレート ：Showcaseのサンプルをベースにカスタマイズできる

デメリット

  • Flexメッセージのみ ：リッチメニューのプレビューには対応していない
  • コピペの手間がある ：LLMが生成したJSONをシミュレーターに手動で貼り付ける必要がある
  • 実機での確認ができない ：あくまでブラウザ上のプレビューであり、実際のLINEアプリでの体験とは異なる

Flex Message Simulatorは手軽で便利ですが、要件定義フェーズで「実際のLINE体験」をお客様に伝えるには限界があります。特に、リッチメニューの切り替えを含むフロー全体のプロトタイピングや、実機での体験確認には対応できません。

そこで、次に紹介する LINE Bot MCP Server の出番です。

方法2：LINE Bot MCP Server

LINE Bot MCP Serverとは

LINE Bot MCP Serverは、LINEが公式に提供しているMCPサーバーです。MCPクライアント（Claude DesktopやClaude Code）から、 自然言語の指示だけ でMessaging APIを実行できます。

https://github.com/line/line-bot-mcp-server

以前、導入方法と基本的な使い方についてブログを書きました。

https://dev.classmethod.jp/articles/line-bot-mcp-server/

前回の記事ではテキストメッセージの送信やプロフィール取得を試しましたが、今回は 実際のプロジェクトの要件定義 で活用した事例を紹介します。

Flex Message Simulatorとの決定的な違い

Flex Message SimulatorもLINE Bot MCP Serverも、LLMにFlexメッセージのJSONを生成させるという点は共通です。しかし、LINE Bot MCP Serverには 3つの大きなアドバンテージ があります。

  1. 実機のLINEアプリで確認できる ：生成したメッセージが実際のLINE公式アカウントから届くため、お客様は自分のスマートフォンで体験できる。ブラウザのプレビューとは説得力が段違い。
  2. リッチメニューも生成・切り替えできる ：Flexメッセージだけでなく、リッチメニューの作成・設定・切り替えまで対応しているため、フロー全体のプロトタイピングが可能。
  3. 生成から配信までがシームレス ：Flex Message Simulatorでは「LLMにJSON生成 → コピペ → プレビュー確認」という手順が必要だが、LINE Bot MCP Serverでは AIがJSON生成と配信を一気通貫で実行 してくれる。修正もプロンプトで指示するだけで、再度実機に届く。

LINE Bot MCP Serverにはいくつかのツールが用意されていますが、今回活用したのは、push_flex_messageとcreate_rich_menuです。

セットアップ

https://github.com/line/line-bot-mcp-server?tab=readme-ov-file#line-bot-mcp-server

MCPサーバーの設定

インストール

git clone git@github.com:line/line-bot-mcp-server.git
cd line-bot-mcp-server
docker build -t line/line-bot-mcp-server .

Docker環境でのMCPサーバー起動

前回の記事ではnpxで起動していましたが、今回はDockerでの起動してmcpサーバーを登録しました。.mcp.jsonに以下のように設定します。

.mcp.json
{
  "mcpServers": {
    "line-bot": {
      "command": "docker",
      "args": [
        "run",
        "-i",
        "--rm",
        "-e",
        "CHANNEL_ACCESS_TOKEN",
        "-e",
        "DESTINATION_USER_ID",
        "line/line-bot-mcp-server"
      ],
      "env": {
        "CHANNEL_ACCESS_TOKEN": "your-channel-access-token",
        "DESTINATION_USER_ID": "your-user-id"
      }
    }
  }
}

CHANNEL_ACCESS_TOKENはLINE Developersコンソールから取得したチャネルアクセストークン、DESTINATION_USER_IDはメッセージを送信する先のユーザーIDです。

Flexメッセージの生成

Claude Codeに対して以下のような指示を出すだけで、フェーズごとのFlexメッセージを生成・配信してくれました。

LINE Bot MCP Serverを利用して予約確認のメッセージを配信して

予約確認メッセージの例

たとえば、予約確認メッセージは以下のようなJSONで定義され、実際のLINE公式アカウントから送信されます。

予約確認メッセージのJSON
{
  "type": "flex",
  "altText": "ご予約が確定しました - 東京ホテル",
  "contents": {
    "type": "bubble",
    "size": "mega",
    "header": {
      "type": "box",
      "layout": "vertical",
      "contents": [
        { "type": "text", "text": "東京ホテル", "weight": "bold", "size": "md", "color": "#1A1A1A" },
        { "type": "text", "text": "ご予約確認", "weight": "bold", "size": "xl", "color": "#1A1A1A", "margin": "md" },
        { "type": "text", "text": "ご予約ありがとうございます", "size": "xs", "color": "#887758", "margin": "sm" }
      ],
      "paddingAll": "20px",
      "backgroundColor": "#FAFAFA"
    },
    "body": {
      "type": "box",
      "layout": "vertical",
      "contents": [
        {
          "type": "box",
          "layout": "horizontal",
          "contents": [
            { "type": "text", "text": "予約番号", "size": "xs", "color": "#6B6B6B", "flex": 3 },
            { "type": "text", "text": "RSV-2026030301", "size": "xs", "color": "#1A1A1A", "flex": 5, "weight": "bold" }
          ]
        }
      ]
    },
    "footer": {
      "type": "box",
      "layout": "vertical",
      "contents": [
        { "type": "button", "action": { "type": "uri", "label": "予約詳細を見る", "uri": "https://line.me/R/app/" }, "style": "primary", "color": "#1A1A1A" },
        { "type": "button", "action": { "type": "uri", "label": "事前チェックインへ進む", "uri": "https://line.me/R/app/" }, "style": "secondary", "margin": "sm" }
      ]
    }
  }
}

IMG_5087

これらのFlexメッセージは、push_flex_messageツールを使って実際のLINE公式アカウントから送信されるため、自分のスマートフォンのLINEアプリ で確認できます。Flex Message Simulatorのブラウザプレビューとは、体験の説得力が全く違います。

リッチメニューの生成

リッチメニューの生成は、Flex Message Simulatorでは そもそも対応していない 領域です。LINE Bot MCP Serverならではの大きなメリットです。

create_rich_menuツールを使えば、自然言語でリッチメニューを作成できます。

リッチメニューを作成して。
ボタンは「マイページ」「宿泊予約」「キャンペーン」「施設一覧」「お知らせ」「問い合わせ」の6つ。

このように指示するだけで、リッチメニューの作成と画像の自動生成を行ってくれます。

IMG_5088

例として、リッチメニューを作成しました。ボタン構成は「マイページ / 宿泊予約 / キャンペーン / 施設一覧 / お知らせ / 問い合わせ」の6つです。

実際のワークフロー

今回のワークフローをまとめると以下のようになります。

1. AIへの指示
Claude Codeに対して「メッセージとリッチメニューを作って」と指示します。AIがメッセージとリッチメニューを生成します。

2. 実機確認
生成されたメッセージとリッチメニューが自分のLINEに届くので、実機で確認します。

3. フィードバック反映
「文字が小さい」「ボタンのラベルを変えて」など、修正指示もプロンプトで完結します。

4. MTGでのデモ
お客様のMTGで、LINE公式アカウントからのプロトタイプメッセージをデモします。

また、フロー図などを作成する場合は、このLINEトーク画面をスクショして追加することで以下のように顧客にわかりやすい図を作成することができます

コンセプトマップ (1)

おわりに

今回は、要件定義でLINE公式アカウントの挙動の解像度を上げる2つの方法として、Flex Message SimulatorとLINE Bot MCP Serverを紹介しました。

特にLINE Bot MCP Serverは、自然言語の指示だけでFlexメッセージとリッチメニューの両方を生成・配信でき、実機のLINEアプリで確認できるという点で強力です。

要件定義の初期段階ではFlex Message Simulatorで素早くイメージを固め、お客様への提案・デモフェーズではLINE Bot MCP Serverで実機プロトタイプを作るという使い分けも有効です。

Cacooで静的なワイヤーフレームを作っていた頃と比べると、作成速度だけでなく お客様とのコミュニケーションの質 も向上しました。「実際のLINEに届くメッセージ」を見せることで、要件の解像度が一気に上がります。

以上、どなたかの参考になれば幸いです。

参考

https://github.com/line/line-bot-mcp-server

https://dev.classmethod.jp/articles/line-bot-mcp-server/

https://developers.line.biz/ja/docs/messaging-api/using-flex-messages/

https://developers.line.biz/ja/docs/messaging-api/using-rich-menus/

https://developers.line.biz/flex-simulator/

この記事をシェアする

FacebookHatena blogX

関連記事

ちょっと話題の記事
LINE Bot MCP Server試してみた
Ruon - Ryuhei Takagaki
2025.04.15
Generative AI Use Cases（GenU）でMCPサーバーを利用したチャット機能を使ってみた
酒井貴央
2025.06.16
Generative AI Use Cases (GenU)からOpenAIを超簡単に呼び出す
大村貴俊
2025.07.14
AIにSlackへ投稿された問い合わせへ回答対応させることにした
haoyayoi
2026.01.30