リッチメニューの切り替え
ここでは、リッチメニュー切替えアクションを使用して、２枚のリッチメニューをタブ切り替えのように切り替える方法を紹介します。
メインメニューとサブメニューを切り替える例
例として、下図のような「メインメニュー」と「サブメニュー」用のリッチメニューを切り替える方法を紹介します。
切り替えメニューの作成手順
メインメニューとサブメニューの画像の準備
あらかじめタブ領域が含まれるメインメニューとサブメニューの画像をご用意ください。（必要な分ご用意ください）
切り替え方法について
切り替える方法に関しては2通りございます。
これまでの方法（リッチメニューを別々で作成）だけでなく、同じリッチメニュー画面内で複数タブ切り替え用にリッチメニューを追加することが出来ます。
運用内容にあわせて使い分けを行ってください。
同じリッチメニュー作成画面で設定する方法（新機能）
同じリッチメニュー作成画面内で必要なタブ分の作成が可能になりました。
Step１ 必要なタブ分「＋追加」でメニューを作成する
「＋追加」ボタンを押すと、「メニュー2」「メニュー3」とリッチメニュー作成画面が増えるような形となります。
不要な場合は「削除」ボタンで削除を行ってください。
※「メニュー1」は削除できません。
Step２ 各メニューでリッチメニュー設定を行う
こちらを参考に各リッチメニュー内でテンプレートや背景設定、各アクションの設定を行ってください。
作成途中で下書き保存も可能です。
Step３ アクションで「リッチメニュー切り替え」を選択して切り替え先を指定する
1.タブ切り替えを行いたいエリアで「リッチメニュー切り替え」を選択し「他のリッチメニューを選択」をクリックする
2.「このリッチメニューのメニュー2」といった選択肢があるため、このリッチメニューで必要なメニューを切替先として選んでください。
※「他のリッチメニューを選択」については、このリッチメニュー以外で作成を行ったリッチメニューから選択する方法です。
後述の別々のリッチメニュー作成画面で設定する方法（これまでの方法）を確認してください。
3つ以上ある場合はこのように表示されます。
STEP４ 全てのリッチメニューの設定が完了したら「作成」を押す
★リッチメニューの作成後の編集はできません。
後でリッチメニュー切替えアクションを設定する必要があるため、必ず「下書き保存」してください。
★全メニュー内でアクション設定が1つでも漏れていた場合は「作成」ボタンを押せません。
必ず設定漏れがないことを確認して「作成」ボタンを押してください。
タブ切り替え用のリッチメニューが作成しやすくなった機能です。
但し、1つのリッチメニューとして保存されるため、デフォルトとしては「メニュー１」（一番最初に作成するメニュー）が必ず表示されるといった点がございます。
例）メニュー1，メニュー2で作成したリッチメニューを作成した場合、ポストバックアクションのリッチメニュー変更でリッチメニューを選んだ場合、必ず「メニュー1」が表示されます。
※メニュー2を表示するように設定することはできません。
メニュー2を表示させたい場合は、以下の方法（別々のリッチメニュー作成画面で設定する）でご設定ください。
別々のリッチメニュー作成画面で設定する方法（これまでの方法）
これまで通り、切り替えるタブ毎にリッチメニューを作成する方法です。
Step１ メインメニューを下書き保存
LINE アカウント操作画面の「リッチメニュー新規作成」画面で、以下のように設定してメインメニューを「下書き保存」します（リッチメニューの作成方法の詳細についてはこちら）。
- リッチメニューのプルダウンの中から「新規作成」をクリック
- タイトル欄にタイトルを入力（タイトル名はお好きなもので構いませんが、区別しやすいものがおすすめです）
- 「背景画像を選択」ボタンを押して、背景をアップロードします。
- 「下書き保存」をクリック
★リッチメニューの作成後の編集はできません。
後でリッチメニュー切替えアクションを設定する必要があるため、必ず「下書き保存」してください。
Step２ サブメニューを下書き保存
同様に、LINE アカウント操作画面の「リッチメニュー新規作成」画面で、以下のように設定してサブメニューを「下書き保存」します（リッチメニューの作成方法の詳細についてはこちら）。
- リッチメニューのプルダウンから「新規作成」をクリック
- タイトル欄にタイトルを入力（タイトル名はお好きなもので構いませんが、区別しやすいものがおすすめです）
- 「背景画像を選択」ボタンを押して、背景をアップロードします。
- 「下書き保存」をクリック
リッチメニューの作成後の編集はできません。
後でリッチメニュー切替えアクションを設定する必要があるため、必ず「下書き保存」してください。
Step３ メインメニューのタップ領域設定
続いては、お客さまがリッチメニューをタップした時のアクションを設定するためにタップ領域設定を行います。
ただし、下のサンプル画像において、メインメニューの「メインメニュー」領域、サブメニューの「サブメニュー」領域の設定は不要です。
「リッチメニュー一覧」から、下書き保存したメインリッチメニューの「編集」をクリックしします。
- 「テンプレートを選択」ボタンを押し、作成した画像のデザインに近いメニューテンプレートを選択します
- 選択したテンプレートのタップ領域数が、作成した画像の領域数よりも多い場合には「 X 」クリックでタップ領域を削除できます
- 選択したテンプレートのタップ領域数が、作成した画像の領域数よりも少ない場合には「+ アクション追加」クリックでタップ領域を追加してください
上の画像では、タップ領域が足りないので③「+ アクションを追加」でタップ領域Eを追加します。
タップ領域の数を調整した後は、それぞれのタップ領域の「X座標、Y座標、幅、高さ」を入力して、タップ領域が作成した画像のデザインと同じになるように調整してください。
サンプル画像の場合、左上の「メインメニュー」のタップ領域は設定しません。
| アクション | X座標 | Y座標 | 幅 | 高さ |
|---|---|---|---|---|
| E | 1250 | 0 | 1250 | 180 |
| A | 0 | 180 | 2500 | 753 |
| B | 0 | 933 | 833 | 753 |
| C | 833 | 933 | 833 | 753 |
| D | 1666 | 933 | 833 | 753 |
Step４ メインメニューのリッチメニュー切り替え設定
次に、メインメニューからサブメニューへ切り替えるためのリッチメニュー切り替えアクションを設定します。サンプル画像の場合は、画像右上のタップ領域 E に設定します。
- 「リッチメニュー切り替え」アクションをクリック
- 切り替え先の「他のリッチメニューを選択」にした状態のまま、下の「切り替え先リッチメニュー」の欄をクリック
下書き保存済みまたは作成済みのリッチメニューの一覧が表示されますので、下書き保存中の「サブメニュー」を選択します。
サブメニューを選択すると、「切り替え先リッチメニュー」欄に選択したリッチメニューのタイトルが表示されます。その後、残りのリッチメニューの設定を完了させます。
- 「切り替え先リッチメニュー」フォームに切り替え先のリッチメニュー名が設定されたことを確認
- 他のタップ領域のアクションを設定
- すべての設定が終わったら「作成」をクリック
「作成」をクリックすると以下のダイアログが表示されるので、「OK」をクリックしメインメニューの作成を完了します。
切り替え先リッチメニューが下書き保存状態のままリッチメニューを反映し、お客さまのLINEトーク画面上でリッチメニューを切り替えるとエラーとなります。
必ず切り替え先リッチメニューの作成も完了させた状態で、リッチメニューを反映してください。
Step５ サブメニューのタップ領域を設定
Step２ で下書き保存したサブメニューを「リッチメニューアイテム一覧」から選び、「編集」をクリックして再編集します。
メインメニューと同様に、画像のデザインに合わせてタップ領域を設定します。サンプル画像の場合、右上の「サブメニュー」のタップ領域は設定しません。
| アクション | X座標 | Y座標 | 幅 | 高さ |
|---|---|---|---|---|
| E | 0 | 0 | 1250 | 180 |
| A | 0 | 180 | 2500 | 753 |
| B | 0 | 933 | 833 | 753 |
| C | 833 | 933 | 833 | 753 |
| D | 1666 | 933 | 833 | 753 |
Step６ サブメニューのリッチメニュー切り替え設定
メインメニューと同様、下記の手順でメインメニューに切り替えるためのリッチメニューの切り替えアクションを設定します。サンプル画像の場合は、画像左上のタップ領域 E に設定します。
- 「リッチメニュー切り替え」アクションをクリック
- 「切り替え先リッチメニュー」をクリック
先程作成したポスト下書き保存済みまたは作成済みのリッチメニューの一覧が表示されますので、作成済の「メインメニュー」を選択します。
メインメニューを選択すると、「切り替え先リッチメニュー」フォームに「メインメニュー」と設定されます。その後、残りのリッチメニューの設定を完了させてください。
- 「切り替え先リッチメニュー」フォームに切り替え先のリッチメニュー名が設定されたことを確認
- 他のタップ領域のアクションを設定
- すべての設定が終わったら「作成」をクリック
Step７ デフォルトリッチメニューにメインメニューを反映
最後に 「リッチメニュー アイテム一覧」画面から「メインメニュー」の「反映」画面に進み、 下記の内容で反映を行います。
- 反映
- 「デフォルトリッチメニューとして反映する」
- 配信日時
- 「今すぐ反映（予約反映）」（任意）
反映方法の詳細は「リッチメニューの反映」を参照してください。
タブ部分をタップしてメインメニューとサブメニューが切り替わることを確認してください。
デフォルトリッチメニュー変更または解除時の注意
リッチメニューについては LINE の仕様に準拠します。
リッチメニューの各顧客への個別反映は、デフォルト反映よりも優先されます。
【今回の例の場合】
デフォルトリッチメニューとして反映されたメインメニューからサブメニューに一度でも切り替えたお客様は、リッチメニューが個別反映されている状態になります。この状態は、サブメニューからメインメニューへリッチメニューを切り替えた場合も継続されます。
そのため、その状態でデフォルトリッチメニューの変更や解除を行っても、一度でもリッチメニューの切り替えを実行したお客さまのLINEトーク画面には、個別に反映しているメインメニューまたはサブメニューが表示され続けます。
【リッチメニューを変更する場合のおすすめの運用方法】
① 「リッチメニュー解除」画面で解除先に「全てのリッチメニューを解除する」を指定して、LINEアカウントで反映しているデフォルトリッチメニューおよび個別反映中のリッチメニューをすべて解除する
② LINEアカウントのリッチメニューがすべて解除された状態で、必要なリッチメニューを反映していく
こうすることでお客様の LINE トーク画面に個別反映したリッチメニューが想定外に表示され続けることを防ぎます。
次のステップ：リッチメニューのテスト反映方法
