LINEリッチメニューのタブ切り替え｜複数メニューの実装方法

「リッチメニューに情報を入れたいけど、4分割では足りない」「ランチ／ディナーをタブで切り替えたい」「カテゴリ別にメニューを分けたい」—リッチメニューを使い込むほど、1画面に収まらない情報量に悩む場面が出てきます。

本記事ではLINEリッチメニューのタブ切り替えを、標準機能でできる疑似タブとMessaging APIを使う本格タブの2方式で解説します。

タブ切り替えとは何か｜2つの実装方式

LINEリッチメニューには「タブ」というUIコンポーネントは標準で存在しません。実装方式は次の2つに分かれます。

方式	仕組み	難易度	向いている用途
疑似タブ（標準機能）	テキストアクションで別メニューに切り替え	★★	中規模情報量・自社運用
本格タブ（Messaging API）	API経由でユーザー別にメニューを動的切り替え	★★★★	大規模情報量・代行/外部ツール

「タブ切り替えを実装したい」という要件の8割は、疑似タブで十分カバーできます。

---

【方式①】疑似タブの仕組みと実装手順

疑似タブは「メニューAのボタンを押すとメニューBに切り替わる」というシンプルな仕組みで実装します。

仕組みの全体像

切り替えの引き金はテキストアクションを使います。

1. メニューAの「サブタブ」ボタンに、テキストアクション #サブタブ を設定
2. ユーザーが押すと #サブタブ というメッセージが送信される
3. 応答メッセージ（Webhook or 自動応答）で #サブタブ を受け取り、メニューBに切り替え

ただしManager標準機能ではWebhook応答でリッチメニューを切り替えるのは難しいため、運用上は次の簡易版が現実的です。

簡易版：URLアクション＋ディープリンクで切り替え

1. メニューA・B・C をそれぞれ作成し、すべて「公開済」にしておく
2. メニューAの「タブB」ボタンにLINEのリッチメニューディープリンクを設定
3. ユーザーが押すと該当タブのメニューに移動

実務的にはMessaging APIまたは外部ツール（Lステップ／Liny等）が必要なため、Manager単体での疑似タブには限界があることを理解しておきましょう。

Manager単体でできる「疑似タブ風」UX

完全なタブ切り替えはAPIなしでは難しいですが、次のテクニックでタブ風のUXは実現できます。

• 時間帯切り替え：朝・ランチ・ディナーで自動的に別メニューに（タブを押す感覚で時間が変える）
• キャンペーン切り替え：通常タブと特集タブを期間で出し分け
• メニューバーテキストを「タップでカテゴリ切替」のように工夫し、開閉でメニューを切り替えてもらう

---

【方式②】Messaging APIで本格タブを実装する

完全なタブ切り替えを実装するには、Messaging API のリッチメニュー紐付けAPIを使います。

仕組み

1. リッチメニューA・B・Cを作成し、それぞれrichmenuIdを取得
2. ユーザーIDに対してrichmenuIdを紐付け（POST /v2/bot/user/{userId}/richmenu/{richmenuId}）
3. ユーザーがタブボタンを押すとWebhookでイベントを受け取り、別richmenuIdに紐付け直す

必要な要素

要素	説明
Messaging APIチャネル	LINE Developersで作成
Webhookサーバー	リッチメニュー切り替えロジックを実装
ユーザーIDの取得	フォロー時のWebhookで取得
richmenuId	各メニューを作成して取得

実装の流れ

開発コストとしては3〜10万円程度が相場です。自社で開発する場合はNode.js／Pythonでの実装が一般的です。

外部ツールで楽に実装する

個別開発が難しい場合、Lステップ／Liny／Stable等の外部ツールを使う方法があります。

ツール	月額目安	タブ切り替え対応
Lステップ	3,000〜32,000円	〇（標準機能）
Liny	5,000〜45,000円	〇（標準機能）
Stable	5,000円〜	〇（プランによる）

外部ツール経由ならノーコード／ローコードでタブ切り替えが実装可能です。

---

業態別｜タブ設計パターン

タブ切り替えが効果的な業態と、その設計例を紹介します。

飲食店｜ランチ／ディナー／コースの3タブ

美容サロン｜カテゴリ別の3タブ

EC店舗｜商品カテゴリの3タブ

業態別の活用詳細は飲食店向けLINEリッチメニュー活用術【事例付き】でも解説しています。

---

タブ切り替えのデザイン上の工夫

タブUIをわかりやすくするためのデザインTipsです。

①現在のタブをハイライトする

• 選択中タブの背景色を変える
• 選択中タブにアンダーラインを入れる
• 選択中タブだけ別アイコンに

②戻り導線を必ず用意する

サブタブの右上に「メイン」「戻る」ボタンを必ず配置。離脱を防げます。

③タブ数は3つまでが上限

4タブ以上は情報が多すぎてユーザーが迷うため、最大3タブを推奨。情報が多い場合は階層構造（タブ＋サブメニュー）に変えるか、自社サイトに送るのが有効です。

デザイン参考はLINEリッチメニューのおしゃれなデザイン事例＆作成ツールを確認してください。

---

タブ実装でよくあるトラブル

トラブル1. タブが切り替わらない

原因候補：

• 紐付けAPI実行後にエラーが返っている
• ユーザーIDが正しく取得できていない
• 該当richmenuIdが「公開済」になっていない

トラブル2. 一部のユーザーだけタブが効かない

原因候補：

• 友だち追加前のユーザーIDで紐付けようとしている
• LINEアプリのバージョンが古い
• ブロック中のユーザー

トラブル3. タブ切り替え時の応答が遅い

原因候補：

• Webhookサーバーのレスポンス遅延
• LINE APIへのリトライ未実装
• 同時アクセス過多

詳細トラブルシューティングはLINEリッチメニューが表示されない原因と対処法を参照してください。

---

まとめ｜「タブが必要か」をまず見直そう

タブ切り替えは便利ですが、実装コストと運用負荷もかかります。検討時のチェックリストは次の通り。

• ✅ 1画面（4分割／6分割）に情報がどうしても収まらないか？
• ✅ ユーザーがタブの存在に気付ける導線設計か？
• ✅ Messaging APIまたは外部ツールの予算が確保できるか？
• ✅ 月次の効果測定でタブ別CTRを追える運用体制か？

これらをクリアできるなら、タブ切り替えは情報量と回遊率を一気に高める強力な打ち手になります。

リッチメニュー単体での作成手順はLINEリッチメニューの作り方｜初心者向けステップ解説、設定全般はLINEリッチメニューの設定方法｜表示設定・期間・切り替えを参照してください。

---

よくある質問（FAQ）

Q1. タブ切り替えはManager画面だけで実装できる？

A. 完全なタブUIはManager標準機能だけでは難しいです。Messaging APIまたは外部ツール（Lステップ／Liny等）の利用が現実的です。

Q2. タブを実装するのにいくらかかる？

A. 個別開発：3〜10万円／月の運用コスト数千〜数万円、外部ツール：月額3,000〜45,000円が目安です。