メニュー切り替え機能でタブ切替え風のリッチメニューを作る

リッチメニューの「メニュー切り替え」機能を使ったタブ切り替えの方法をご案内します。

リッチメニューのタブ切り替えが動かない場合はこちらをご確認下さい。

リッチメニューのタブ切り替えが動作しません

今回の例で作成するメニュー切替動作


【3枚のリッチメニューを切替える】

作成時の ポイント

  • デフォルトにするメニューと、切替え用のリッチメニューを作成する(今回は合計3枚)
  • タップしてリッチメニューを切替えるエリアに「メニュー切替」アクションを指定する
  • それぞれの切替先を指定する

旧仕様のメニュー切替アクションを使用した場合には、必ず一つ以上の「個別指定を解除」を設定して下さい。

旧仕様のリッチメニュー切り替えを使用している場合、個別指定を解除する導線が設定されていないと、デフォルトメニューの変更が反映されなくなります。
詳細はこちら をご確認下さい。

【1】デフォルトにするリッチメニューを作成


  • 最初に表示されるリッチメニュー(デフォルトに設定するメニュー)を作成します。

  • 1.リッチメニュー作成画面へ移動

    「リッチメニュー管理 > リッチメニュー一覧」を選択して移動します。

    移動したら、一覧の右上にある 新規作成ボタンを選択します。

  • 2.必要情報を入力

    メニュー名、表示ラベル名を入力します。

    メニューの初期設定もチェックしておきます。メニューサイズは、今回は「大」のサイズを用意したので「大」を選択します。

  • 3.画像をアップロード

    規定のサイズに合わせた画像をアップロードします。

    画像の規定サイズは管理画面上に記載されています。
    各サイズのテンプレートは以下よりダウンロードいただけます。

    各レイアウトのテンプレートファイル

    画像をアップロードしたら、 アクション領域を追加するボタンを選択して、領域を追加します。

  • 4.タップ領域を指定

    タップ領域をマウスでドラッグして囲い、指定します。

    今回は右のタブをタップした時に、別のメニューに切り替えたいので、右タブを囲いました。

  • 5.アクションを指定

    指定した座標に対して、アクションを設定します。

    メニューを切り替えるためのアクション「メニュー切替え」を選択します。

  • 6.さらにタップ領域を追加

    中央のバナーをタップした時にも別のメニューに切り替えたいので、さらに「+アクション領域の追加」を行い、「メニュー切替え」アクションを設定し、保存します。

  • 7.デフォルトに設定

    作成が完了したら、メニューを「デフォルトメニューに設定」します。

    デフォルトメニューに設定する(即時)ボタンを選択します。

  • 8.設定を実行

    確認ウィンドウが表示されるので、「設定を実行する」を選択します。

【2】2枚目のリッチメニューを作成


  • 切り替え用のリッチメニューを作成します。

  • 1.2枚目のリッチメニューを作成

    続いて、切り替え用のリッチメニューを作成します。

    新規作成ボタンを選択して作成していきます。

  • 2.必要情報を入力

    メニュー名、表示ラベル名を入力します。

    メニューの初期設定もチェックしておきます。メニューサイズは、今回は「大」のサイズを用意したので「大」を選択します。

  • 3.画像をアップロード

    規定のサイズに合わせた画像をアップロードします。

    画像の規定サイズは管理画面上に記載されています。
    各サイズのテンプレートは以下よりダウンロードいただけます。

    各レイアウトのテンプレートファイル

    画像をアップロードしたら、 アクション領域を追加するボタンを選択して、領域を追加します。

  • 4.タップ領域を指定

    タップ領域をマウスでドラッグして囲い、指定します。

    今回は左のタブをタップした時に、デフォルトメニューに切り替えたいので、左タブを囲いました。

  • 5.アクションを指定

    指定した座標に対して、アクションを設定します。

    デフォルトメニューに戻したい場合は、アクションは「デフォルトメニューに戻る」を選択します。

    残りのアクションの設定もできたら、保存します。

  • 6.設定を確認

    作成完了後の詳細画面で、設定したアクションを確認できます。

    「デフォルトメニューに戻る」を設定した箇所を確認します。指定した箇所をタップしたら、デフォルトメニューに戻る設定がされています。

    ※「メニュー切り替え(旧仕様)」を選択していた場合には、「個別指定を解除」を設定する必要があります。

【3】3枚目のリッチメニューを作成


  • 3枚目の切り替え用リッチメニューを作成します。

  • 1.3枚目のリッチメニューを作成

    3枚目の切り替え用のリッチメニューを作成します。

    新規作成ボタンを選択して作成していきます。

  • 2.必要情報を入力

    メニュー名、表示ラベル名を入力します。

    メニューの初期設定もチェックしておきます。メニューサイズは、今回は「大」のサイズを用意したので「大」を選択します。

  • 3.画像をアップロード

    規定のサイズに合わせた画像をアップロードします。

    画像の規定サイズは管理画面上に記載されています。
    各サイズのテンプレートは以下よりダウンロードいただけます。

    各レイアウトのテンプレートファイル

    画像をアップロードしたら、 アクション領域を追加するボタンを選択して、領域を追加します。

  • 4.タップ領域を指定

    タップ領域をマウスでドラッグして囲い、指定します。

    左のタブをタップした時に、デフォルトメニューに切り替えたいので、左タブを囲いました。

  • 5.アクションを指定

    指定した座標に対して、アクションを設定します。

    このタブをクリックしたときはデフォルトメニューに戻したいので、アクションは「デフォルトメニューに戻る」を選択します。

  • 6.さらにタップ領域を追加

    右のタブをタップした時にもメニューを切り替えたいので、さらに「+アクション領域の追加」を行い、領域を指定します。

  • 7.アクションを指定

    このタブをクリックしたときは「2枚目のリッチメニュー」に移動させたいので、メニューを切り替えるためのアクション「メニュー切替え」を選択し、設定します。

    残りのアクションの設定もできたら、保存します。

  • 8.1つ目の切替先を確認

    作成完了後の詳細画面で、設定したアクションを確認できます。

    「デフォルトメニューに戻る」を設定した箇所を確認します。指定した箇所をタップしたら、デフォルトメニューに戻る設定がされています。

    ※「メニュー切り替え(旧仕様)」を選択していた場合には、「個別指定を解除」を設定する必要があります。

  • 9.2つ目の切替先を確認

    右のタブをタップしたら、「2枚目のリッチメニュー」に切り替わって欲しいので、「リッチメニュー未登録」と表示されている箇所をクリックして変更します。

  • 10.切替先を変更

    リッチメニューの一覧が表示されるので、切り替えたいリッチメニューを選択して、決定ボタンを選択します。

  • 11.切替先の変更を確認

    切り替え先が変更されました。切り替え先のリッチメニューは上段のプレビューで確認できます。

【4】デフォルトに設定したリッチメニューの切り替え設定をする


  • 最初に作成したデフォルト用のリッチメニューから、他のリッチメニューへの切り替え設定を行います。

  • 1.デフォルトのリッチメニューを選択

    リッチメニュー一覧から、デフォルト用に作成したリッチメニューを選択します。

  • 2.タブ部分を選択

    「メニュー切替え」アクションを設定したアクションのうち、タブに対して設定した方の「リッチメニュー未登録」を選択します。

  • 3.切替先を変更

    リッチメニューの一覧が表示されるので、切り替えたいリッチメニューを選択して、決定ボタンを選択します。

  • 4.切替先の変更を確認

    切り替え先が変更されました。切り替え先のリッチメニューは上段のプレビューで確認できます。

  • 5.バナーエリアを選択

    「メニュー切替え」アクションを設定したアクションのうち、バナーに対して設定した方の「リッチメニュー未登録」を選択します。

  • 6.切替先を変更

    リッチメニューの一覧が表示されるので、切り替えたいリッチメニューを選択して、決定ボタンを選択します。

  • 7.切替先の変更を確認

    切り替え先が変更されました。切り替え先のリッチメニューは上段のプレビューで確認できます。

  • 8.実際に端末で確認

    完成したら、実際の動作を端末で確認してみましょう。

    リッチメニューのタブ切り替えが動かない場合はこちらをご確認下さい。

    リッチメニューのタブ切り替えが動作しません

※ LINE 及び LINE公式アカウント はLINE株式会社の商標または登録商標です。 Poster®はLINE株式会社が提供する LINE Messaging API を利用しています。

※ 「Poster」は株式会社モスコソリューションズの登録商標です。