Javascriptの設定を有効にしてください。お使いのブラウザはJavaScriptをサポートしていないか、JavaScriptの設定が無効になっています。このサイトでは、JavaScriptを使用しています。すべての機能をご利用希望の方は、JavaScriptを有効にしてください。

新たな拠点を開設|成長と働きやすさを支える取り組みとして さらに詳しく

LINEリッチメニューでタブ切り替え機能をつくるには?活用事例も紹介

LINEリッチメニューでタブ切り替え機能をつくるためには、どうしたらよいでしょうか。
この記事では、難しそうなコードを書く必要がありそう、と不安に感じている方に簡単につくる方法や活用事例をご紹介します。タブ切り替え機能を追加するメリットやよくある質問についても分かりやすくまとめていますので、ぜひご覧ください。

LINEリッチメニューのタブ切り替え機能とは?

LINEリッチメニューとは、LINE公式アカウントのチャット画面を開いた際に下部に常に表示されるメニュー画面のことです。
固定で表示されていますが、ユーザーは最下部をタップすることで非表示にできます。このリッチメニューを複数作成し、ユーザーが目的に合わせて切り替えられるようにした機能が、LINEリッチメニューのタブ切り替え機能です。

デフォルトのLINEリッチメニューにはタブ切り替え機能がない!

LINEリッチメニューの標準機能には、残念ながらタブ切り替え機能が搭載されていません。デフォルトで利用できる機能は以下の通りです。

  • 最大6分割
  • すべての友だちに共通(期間やユーザー別表示はできない)
  • タップ時のアクションは「リンク」「クーポン」「ショップカード」「テキスト」の4つから選択が可能

そのため、複数のメニューを切り替えて見せたい場合は、外部ツールやAPIを活用する必要があります。ここでは、タブ切り替え機能を実装する2つの方法をわかりやすく解説します。

LINEリッチメニューでタブ切り替え機能を作る2つの方法

LINEのリッチメニューを切り替えるには、以下いずれかを使用して対応します。それぞれどのような特長があるのか見ていきましょう。

Messaging APIを使う

Messaging APIとは、LINE公式が提供しているLINEプラットフォームと外部サービスを連携させるためのツールです。
これを活用すれば、リッチメニューを動的に切り替える仕組みを構築できます。柔軟なカスタマイズやLINE公式アカウントと同様に、Messaging APIからも毎月一定数のメッセージを無料で送信が可能です。
ただし、APIの設定や開発には技術的な知識が必要であり、無料メッセージ数にも上限がある点に注意しましょう。
より多くのメッセージを配信したい場合は、月額固定プランの導入を検討するのがおすすめです。

拡張ツールを使う

もう一つの方法は、LINEリッチメニューの拡張ツールを利用する方法です。これらのツールは、LINE公式アカウントと連携させることでタブ切り替え機能を簡単に追加できます。
多くのツールではテンプレートが用意されており、デザインやレイアウトを直感的にカスタマイズ可能。プログラミング知識がなくても操作できるため、非エンジニアの方にも適しています。
無料・有料のサービスがあるため、目的や予算に合わせて選びましょう。
また、タブ切り替え以外にも、自動メッセージ配信・予約機能・分析機能など、LINEマーケティング全般を支援する機能を備えたツールも多く存在します。

Messaging APIでLINEリッチメニュータブ切り替えを作る手順

Messaging APIの実装手順

Messaging APIを使うと、複数のリッチメニューを切り替えて表示することが可能になります。
例えば「メニューA:サービス案内」「メニューB:お問い合わせ」といったように、ユーザー操作に応じてメニューを動的に切り替えられます。
以下は、Messaging APIを利用してタブ切り替えを作成する基本的な手順です。

  1. リッチメニューの画像を準備する
  2. リッチメニューAを作成する
  3. リッチメニューAに画像をアップロードする
  4. リッチメニューBを作成する
  5. リッチメニューBに画像をアップロードする
  6. リッチメニューAをデフォルトにする
  7. リッチメニューエイリアスAを作成する
  8. リッチメニューエイリアスBを作成する
  9. リッチメニューの表示を終了する

実装の流れ

Messaging APIを利用するには、以下の環境・知識が必要です。

  • LINE公式アカウント(プロアカウント)
  •  開発環境(Webhook受信サーバーなど)
  • アクセストークン(LINE Developersで取得)
  • コードを書ける

INE公式アカウントやアクセストークンの準備は比較的簡単ですが、プログラミングの知識が必須となります。
特に、WebhookやJSON形式のリクエスト送信に慣れていない場合、実装は難易度が高めです。そのため、API連携の経験がない場合は、開発者やエンジニアに依頼するのが確実です。

拡張ツールでLINEリッチメニュータブ切り替えを作る手順

LINEのリッチメニューのタブを切り替える機能を追加できる拡張ツールは、多種多様にあります。ここでは「L Message(エルメ)」を使った例をご紹介します。

  1. タブの枚数分のリッチメニューデザインを用意する
  2. タブの設定を行う
  3. リッチメニューの内容を設定する
  4. タブの枚数分のデザインを作成し保存する
  5. タブ付きリッチメニューを設定する

1.タブの枚数分のリッチメニューデザインを用意する

  • タブの目的が異なる場合は、内容が伝わりやすいようにデザインをする
  • 直感的に操作しやすいデザインを心がける

まず、必要なタブの枚数に応じたリッチメニューデザインを用意します。
上記のようなことを意識しながら、商品紹介やキャンペーン情報など、ユーザーに提供したい情報を整理し、それに基づいたデザインを作成していきます。L Messageでは画像を用意しなくても、ツール内で画像作成が可能です。

2.タブの設定を行う

  • L Messageの管理画面でタブを「利用する」にチェックする
  • 設定をクリックし、タブの枚数やカラーなどを決定する

次に、タブの設定を行います。タグの表示枚数やデザインを大まかに決めることが可能です。ユーザーの操作性を考慮しながら行うとよいでしょう。

3.リッチメニューの内容を設定する

  • 内容編集画面で編集したい場所をクリックする
  • メニューのレイアウトやテキストを入力して保存する

タブの大まかな設定が完了したら、各タブに表示するリッチメニューの具体的な内容を上記のような手順で行っていきます。
入力するときに「商品情報」「予約」「問い合わせ」など、メニューのカテゴリー名をタブ名にするとユーザーにとって分かりやすくなります。

4.タブの枚数分のデザインを作成し保存する

  • 2枚目のリッチメニュー画像を作成する際は、先に作成した画像をコピーして進めると手間が省けてラクに作成できます。

5.タブ付きリッチメニューを設定する

  • 1枚目のリッチメニュー画像をアップロードする
  • 「エリア追加」をクリックし、表示したいタグをドラックする
  • 右下の「確定」を選択する
  • 2枚目以降は「友だちアクション」の「リッチメニューを表示」から設定する

最後に、作成したタブ付きリッチメニューを、LINE公式アカウントに設定します。
上記のような手順を繰り返し、必要なタグを設定しましょう。設定したら、必ず管理画面で表示を確認するのがおすすめです。どの拡張ツールも手順に大きな違いはありません。リッチメニュータブ切り替え以外のマーケティング機能や操作性などでツールを選ぶことをおすすめします。

よく知られている拡張ツールの例

  • L Message(エルメ)
  • Liny
  • ソーシャルPLUS
  • Poster

LINEリッチメニューのタブ切り替え設定をする3つのメリット

LINEリッチメニューのタブ切り替え設定をすることにより、多くのメリットが得られます。ここでは、主に4つのメリットについて解説していきます。

より多くの情報をユーザーに伝えられる

タブ切り替え機能をつくることで、一画面に表示できる情報量を増やせます。そのため、ユーザーに多角的で豊富な情報提供が可能です。また、LINEのメッセージ画面のスペースは限られています。そのため、タブによってスペースを有効活用することで、使い勝手を悪くすることなく、ユーザーに適切な情報を伝えることができます。

ユーザーが欲しい情報にたどりつきやすい

タブ切り替え機能により、ユーザーは能動的に欲しい情報を効率よく、簡単に得られます。たとえば、新商品情報や特典情報、よくある質問などをタブに分けて表示すると、知りたい情報をすぐに見つけられるでしょう。これによりユーザーのストレスが軽減され、エンゲージメントやコンバージョンの向上につながることが期待できます。

ユーザーに適切なリッチメニューを設定できる

タブ切り替え機能によって、ユーザーのニーズに応じたメニューを柔軟に設定できます。Messaging APIや多くの拡張ツールで出し分けや期間の設定が可能なため、異なるターゲット層に対して最適な情報を提供することが可能です。たとえば、既存顧客向けの特別オファーや新規顧客向けのキャンペーン情報など、ユーザーに合わせたアプローチが可能になります。

リッチメニューの出し分けよりも簡単にできる

リッチメニューではタブの切り替えの他に、ユーザーに合わせた出し分けを設定することもできます。ただし、目的や実装方法によるものの、タグの切り替えよりも実装に手間がかかるため注意が必要です。会員限定や、定期購入者用、性別年代別など、よりユーザーの趣向に合ったリッチメニューを表示したいのであれば、検討していきましょう。

LINEリッチメニューのタブ切り替え機能についてよくある質問

Q.LINEリッチメニューのタブ切り替え機能は無料でつくれる?

A.LINEリッチメニューのタブ切り替え機能は、無料で始められますが、完全無料というわけではありません。LINE公式が提供しているMessaging APIは無料です。ただし、開発者向けのため、自身の状況や目的に合わせ、有料のものも視野に入れながら柔軟に拡張ツールを選択することがおすすめです。

O.LINEリッチメニューのタブ切り替え機能はスマホでもつくれるの?

A.拡張ツールの中には、スマホに対応しているものもあります。ただし連携作業はパソコンのみとする拡張ツールもあるため、パソコンで行うほうが安心でしょう。LINE公式のMessaging APIはスマホでの操作はできませんので、注意してください。

O.LINEリッチメニューのタブ切り替え機能をつけるデメリットはある?

A.デメリットは、とくにありませんが、タブ切り替え機能を作るための費用や労力などと効果が見合うか、費用対効果を考えることをおすすめします。開発の知識があり、設定作業が苦にならない、という方は問題ありませんが、依頼するのに費用がかかります。そのため、効果についてもよく考える必要があるでしょう。

LINEリッチメニューにタブ切り替えを追加しよう!

LINEリッチメニューで、タブ切り替え機能を追加する方法についてご紹介しました。
LINE公式が提供しているMessaging APIは無料で始められますが、コードを書く必要があり、開発者向けツールといえるでしょう。そのため、コードを書く必要がない拡張ツールを利用するのもおすすめです。
どの拡張ツールを利用しても、タブ切り替えについてはそれほど差がないため、それ以外のサービスなどをチェックし合うツールを選びましょう。

株式会社ワンエイティでは、マーケティング施策を支えるデータ基盤サービス「DIGITALEYES(デジタライズ)」を展開しています。
「デジタライズ」は、LINEを含むさまざまなチャネルの情報を統合し、データの可視化や分析、施策の改善までを一貫して支援できるのが特長です。顧客体験の向上とマーケティングの成果向上を両立させたいとお考えの方は、ぜひ一度ご相談ください。

DIGITALEYESのお問い合わせはこちら