タブ付きリッチメニューを作りたい
このガイドでは、以下の方法をご紹介します
- タブ付きリッチメニューの仕組み
- タブごとの画像の作り方
- タブ同士を切り替えられるように設定する手順
タブ付きリッチメニューの仕組み
リッチメニューの上端に「ホーム」「学科紹介」「アクセス」のようなタブを並べ、タップするとメニューの中身が切り替わる形です。
LINE のリッチメニュー自体にはタブの機能がありません。そこで、タブの数だけリッチメニューを作り、タブの部分に「リッチメニューの変更」を設定して互いに切り替えます。Lステップなどのツールで作るタブ付きリッチメニューも同じ方式です。
| リッチメニュー | タブ「ホーム」 | タブ「学科紹介」 | タブ「アクセス」 |
|---|---|---|---|
| ホーム | なし（表示中） | 学科紹介へ切り替え | アクセスへ切り替え |
| 学科紹介 | ホームへ切り替え | なし（表示中） | アクセスへ切り替え |
| アクセス | ホームへ切り替え | 学科紹介へ切り替え | なし（表示中） |
画像を用意する
タブ 1 つにつき 1 枚、合計でタブの数だけ画像を作ります。
- 上端の 220px をタブの見出しにします（大・小どちらのサイズも同じ高さです）
- タブの幅は横幅を均等に割った幅にします（タブ 3 つなら約 833px ずつ）
- それぞれの画像で、表示中のタブを「選択中」の見た目（白地・下線など）にし、ほかのタブと区別できるようにします
- タブより下（本体）は、選ぶレイアウトの分割に合わせてボタンを配置します
選べるタブ付きレイアウトは次のとおりです。
| サイズ | 本体の分け方 | タブ 2 つ | タブ 3 つ |
|---|---|---|---|
| 大（2500×1686px） | 全面（1 つ） | ✅ | ✅ |
| 大（2500×1686px） | 3 分割（横 3 列） | ✅ | ✅ |
| 大（2500×1686px） | 6 分割（3 列 × 2 段） | ✅ | ✅ |
| 大（2500×1686px） | 9 分割（3 列 × 3 段） | ― | ✅ |
| 小（2500×843px） | 3 分割（横 3 列） | ✅ | ✅ |
上の表にない分け方にしたいときは、［✎自由に描く］でタブと本体の領域を自分で配置できます（リッチメニューのタップ領域をカスタマイズしたい）。
画像の見本
架空の専門学校の、タブ 3 つ＋6 分割（大）の見本です。画像をクリックすると原寸（2500×1686px）で開くので、作成時の参考にダウンロードしてお使いください。
アクセス（ダウンロード）
どの画像も、上端 220px にタブ 3 つを均等に並べ、表示中のタブだけ白地にしています。本体は 3 列 × 2 段で、レイアウト「[大]タブ3＋6分割」の領域とぴったり重なります。
タブ付きリッチメニューを作る
ここでは、タブ 3 つ（ホーム・学科紹介・アクセス）の例で説明します。
1. リッチメニューをタブの数だけ作る
リッチメニューを作成したい の手順で、リッチメニューのレコードを 3 つ作ります。公式アカウントはすべて同じにしてください。
例：「みらいデザイン ホーム」「みらいデザイン 学科紹介」「みらいデザイン アクセス」
2. 同じタブ付きレイアウトを選んで画像を入れる
それぞれのレコードの［設定］タブで、サイズを選んでから［タブ付き］をクリックし、3 つとも同じレイアウト（例：タブ3＋6）を選びます。
続いて［⇪ 画像を選択］から、そのメニュー用の画像（ホームのレコードにはホームを表示中の画像）を選びます。
3. タブの領域を設定する
タブ付きレイアウトでは、上端の領域（A・B・C）に「タブ」の印が付き、最初から「リッチメニューの変更」が選ばれています。
- 表示中のタブの領域：「なし」に変更します（押しても今のメニューのまま）
- ほかのタブの領域：「リッチメニューの変更」のまま、切替先にそのタブのリッチメニューを選びます
右は「ホーム」の設定例です。領域A（ホーム）は「なし」、領域B は「学科紹介」、領域C は「アクセス」に切り替えます。
「学科紹介」では、領域A を「ホーム」、領域B（学科紹介）を「なし」、領域C を「アクセス」にします。「アクセス」も同じ考え方で設定します。
4. 本体のアクションを設定して保存する
タブより下の領域（D 以降）に、リンクを開く・テンプレート呼出などのアクションを設定し、［保存］をクリックします。3 つのリッチメニューすべてで行います。
5. 3 つとも有効化する
3 つのレコードそれぞれで［更新と有効化］をクリックし、有効化します。
6. 最初に見せるタブを割り当てる
友だちが最初に目にするタブ（例：ホーム）を、デフォルトのリッチメニューに設定します。手順は リッチメニューを割り当てたい をご覧ください。ほかのタブは割り当てる必要はありません。
注意事項
- 切替先に選べるのは、同じ公式アカウントのリッチメニューだけです。自分自身は選べません。
- 切替先のリッチメニューを有効化するまでは、タブをタップしても切り替わりません。 3 つとも有効化してから確認してください。
- タブのリッチメニューを 1 つでも無効化すると、そのタブへは切り替わらなくなります。無効化したときは、ほかのメニューのタブの設定も見直してください。
- タブをタップして切り替えたあとの表示は、LINE が友だちごとに覚えています。次にトーク画面を開いたときも、最後に切り替えたタブが表示されます。
リッチメニューを変更したときは、そのレコードで［更新と有効化］から［更新］を行えば、ほかのタブからの切り替えもそのまま使えます。