はじめに
今回は、タブ付きリッチメニューの設定方法をご紹介します。
タブ付きリッチメニューとは、リッチメニュー上に「タブ」を設定し、タブをタップした際に別のリッチメニューに切り替える方法の事です。
複数枚のリッチメニューを切り替えて表示させることで、リッチメニューをカテゴリーごとに表示させることが可能になります。
例えば、
- 「セール中の商品」や「おすすめ商品」など、カテゴリー別に商品を紹介できる
- 「予約情報」「お問い合わせ」「アクセス情報」など、各ジャンルごとのメニューを提供できる
といったことが可能になります。
この方法を取り入れれば、より効果的なリッチメニュー運用ができるので、ぜひ参考にしてみてください。
解説動画はこちら
リッチメニュー画像の準備
タブ付きリッチメニューの設定を行う前に、あらかじめタブ付きのリッチメニューを作成しておきましょう。
リッチメニュー自体には「タブ」という機能はありません。
リッチメニュー内にタップエリアを設定し、エリアをタップすることで別のリッチメニューに切り替え、疑似的にタブ切り替えを再現しています。
そのため、タブ付きリッチメニューを設定する前には、使用するタブの枚数分リッチメニュー画像を事前に準備する必要があります。
エルメの「リッチメニュー画像作成機能」を利用する事で、タブ付きリッチメニューを作成する事も可能です。
作成方法については、以下のマニュアルをご確認ください。
L Message（エルメ）のリッチメニュー画像作成 操作マニュアル
タブ付きリッチメニューの設定方法
タブ付きリッチメニューの設定方法は以下の通りです。
この記事では、1枚目のリッチメニュー画像を「タブA」、2枚目を「タブB」と記載しています。
リッチメニューの登録方法
まずは、エルメ上で使用するリッチメニューの登録を行います。
①管理画面左メニューの「顧客対応」を選択
②「リッチメニュー」をクリック
③新規作成をクリック
④エルメ上で管理しやすい名前で管理名(リッチメニュー名)を入力
⑤保存先のフォルダを選択
※「フォルダ内の一番上に追加する」にチェックを入れてリッチメニューを登録すると、新規作成したリッチメニューがフォルダの一番上に表示されます。
⑥「リッチメニューの登録に進む」をクリック
⑦「タブA」のリッチメニュー画像をアップロード
⑧「次へ」をクリック
⑨タップエリア設定で「手動編集」を選択
⑩「次へ>」をクリック
今回は、タブ部分のタップエリア設定が必要なので「手動編集」を選択します。
⑪「タップエリア追加」をクリック
⑫ボタン部分のタップエリアを指定
⑬エリア指定後、「タップエリア決定」をクリック
※タブ部分のタップエリア設定は「タブA」と「タブB」のリッチメニュー登録後に行います。
⑭エリアタップ時のアクションを設定
ボタン部分のタップ時に設定できるアクションは以下の3種類があります。
- エルメアクション
テンプレートやテキストの送信、ステップ配信などが可能 - 友だちアクション
サロンやイベントの予約ページを開く、電話をかけさせることが可能 - LINE URLスキーム
LINE公式アカウントのシェア、カメラの起動などが可能
⑮エリア2以降の設定をするため、再度「タップエリア追加」をクリック。
その後、同様の手順(⑫～⑭)でアクション設定を行い、エリア2、エリア3という順番で、タブ部分以外のすべてのアクションを設定してください。
⑯すべてのアクション設定が完了したら「次へ>」をクリック
⑰「メニューバーのテキスト」を入力
※初期画面では「◀︎ お問合せ／メニュー ▲」と入力されています。
⑱「トーク画面の初期表示」を選択
⑲すべての設定が完了したら、「保存してTOPに戻る」をクリック
以上で「タブA」のリッチメニューにおける、タブ部分以外のアクション設定は完了です。
この後は同様の手順(③～⑲)で「タブB」のリッチメニュー設定を行ってください。
※使用するタブ付きリッチメニューが「タブB」以外もある場合についても同様の手順(③～⑲)でリッチメニュー設定を済ませてください。
タブ切り替えの設定方法
エルメ上で各リッチメニューの登録が完了したら、次はそれぞれのリッチメニューをタブによって切り替える設定を行います。
①リッチメニュー画面で「タブA」のリッチメニューを選択
②「タップ時アクション」を選択
③「タップエリア追加」をクリック
④タブ部分のエリア設定を行う
⑤「タップエリア決定」をクリック
⑥エリアタップ時のアクションから「リッチメニュー切り替え」を選択
⑦「表示する」を選択
⑧「表示するリッチメニューを選択」をクリック
⑨「タブA」の後に新たに作成した「タブB」のリッチメニューを選択
⑩「決定」をクリック
⑪「保存してTOPに戻る」をクリック
あとは、同様の手順(①～⑪)ですべてのタブ付きリッチメニュー画像に対して、エリア選択から「リッチメニュー表示」のアクションの設定を済ませましょう。
こちらの設定を行う事で、リッチメニューのタブ部分をタップした時に別のリッチメニューが表示され、リッチメニューのタブ切り替えが可能となります。
以上で、タブ付きリッチメニューの設定方法の説明は完了です。
設定が完了したら、必ず動作確認を行い、リッチメニューが正常に動作するか確認しましょう。
関連マニュアル
関連マニュアル①
L Message（エルメ）のリッチメニュー画像作成 操作マニュアル
関連マニュアル②
L Message（エルメ）のリッチメニュー 操作マニュアル