# リッチメニューを使う

このページでは、LINE公式アカウントのトーク画面で表示される、リッチメニューについて説明します。

# リッチメニューとは

リッチメニューはLINE公式アカウントのトーク画面下部に表示されるメニュー機能です。リッチメニューの各領域にリンクを設定することで、LINE公式アカウントの各機能のほか、外部サイトや予約ページなどにユーザーを誘導することができます。

リッチメニューはデスクトップ版では表示されません

リッチメニューは、デスクトップ版(macOS、Windows)のLINEでは表示されません。

# リッチメニューの構造

リッチメニュー

リッチメニューは、リッチメニュー画像、タップ領域、およびトークルームメニューで構成されます。

  1. リッチメニュー画像:JPEGまたはPNG。詳しくは、「リッチメニューの画像を準備する」を参照してください。
  2. タップ領域:ポストバックイベントを返したり、URLを開いたりする様々なアクションを、メニュー項目に設定できます。
  3. トークルームメニュー:リッチメニューの開閉に使うメニューです。トークルームメニューのテキストは、カスタマイズできます。

# リッチメニューを作成するツールを選択する

リッチメニューは、2つのツール(LINE Official Account ManagerまたはMessaging API)で作成できます。ツールごとの利点は以下のとおりです。

ツール 利点
LINE Official Account Manager (opens new window)
  • 開発期間が短く済みます
  • 操作が簡単なGUIで開発できます
Messaging API
各ツールで作成したリッチメニューには互換性がありません

LINE Official Account Managerで作成したリッチメニューは、Messaging APIで取得および編集できません。逆も同様です。

それぞれのツールでのリッチメニューの作成方法については、以下を参照してください。

# LINE Official Account Managerでリッチメニューを作成する

LINE Official Account Managerではデフォルトのリッチメニューを設定できます。優先順位が高いリッチメニューが設定されていない場合は、ユーザーにはデフォルトのリッチメニューが表示されます。

LINE Official Account Managerを使うと、あらかじめタップ領域が定義されたテンプレートをもとに、グラフィカルユーザーインターフェイスを使ってタップ領域を設定できます。

LINE Official Account Managerを使ってリッチメニューを作成する手順については、LINE Official Account Managerのマニュアル (opens new window)を参照してください。

# Messaging APIでリッチメニューを作成する

Messaging APIを使ってリッチメニューを作成するには、以下の手順に従います。

  1. リッチメニューの画像を準備する
  2. タップ領域を指定してリッチメニューを作成する
  3. リッチメニューに画像をアップロードして添付する
  4. デフォルトのリッチメニューを設定する
リッチメニューを実装する

PHPを使ったサンプルボットにリッチメニューを実装した例については、GitHubのdemo-rich-menu-bot (opens new window)リポジトリを参照してください。

# リッチメニューの画像を準備する

リッチメニューで使用する画像を準備します。

リッチメニューの画像は以下の要件を満たす必要があります。

  • 画像フォーマット:JPEGまたはPNG
  • 画像の幅サイズ(ピクセル):800以上、2500以下
  • 画像の高さサイズ(ピクセル):250以上
  • 画像のアスペクト比(幅/高さ):1.45以上
  • 最大ファイルサイズ:1MB
リッチメニュー用のテンプレート画像について

LINE Official Account Manager (opens new window)でリッチメニュー新規作成画面を開いて、[デザインガイド]をクリックすると、リッチメニュー用のテンプレート画像がダウンロードできます。LINE Official Account Managerには、LINE Developersコンソールと同じアカウントでログインできます。

リッチメニュー用のテンプレート画像

# リッチメニューを作成する

最大20件のタップ領域を持つリッチメニューを作成します。

リッチメニューオブジェクトをボディに指定します。以下は、リッチメニューを作成する場合のリクエストとレスポンスの例です。

ヒント
  • リクエストのselectedプロパティをtrueに変更すると、ユーザーにリンクしたときにリッチメニューが自動的に表示されます。表示されているリッチメニューを、Messaging APIを使用して閉じることはできません。
  • リクエストのchatBarTextプロパティを指定すると、トークルームメニューのテキストを変更できます。

リクエストの例

curl -v -X POST https://api.line.me/v2/bot/richmenu \
-H 'Authorization: Bearer {channel access token}' \
-H 'Content-Type: application/json' \
-d \
'{
  "size":{
      "width":2500,
      "height":1686
  },
  "selected": false,
  "name": "LINE Developers Info",
  "chatBarText": "Tap to open",
  "areas": [
      {
          "bounds": {
              "x": 34,
              "y": 24,
              "width": 169,
              "height": 193
          },
          "action": {
              "type": "uri",
              "uri": "https://developers.line.biz/en/news/"
          }
      },
      {
          "bounds": {
              "x": 229,
              "y": 24,
              "width": 207,
              "height": 193
          },
          "action": {
              "type": "uri",
              "uri": "https://www.line-community.me/ja/"
          }
      },
      {
          "bounds": {
              "x": 461,
              "y": 24,
              "width": 173,
              "height": 193
          },
          "action": {
              "type": "uri",
              "uri": "https://engineering.linecorp.com/en/blog/"
          }
      }
  ]
}'

リッチメニューIDが含まれるレスポンスの例。

{
    "richMenuId": "richmenu-88c05ef6921ae53f8b58a25f3a65faf7"
}

詳しくは、『Messaging APIリファレンス』の「リッチメニューを作成する」を参照してください。

# リッチメニューに画像をアップロードして添付する

前の手順で作成したリッチメニューに、画像をアップロードして添付します。

curl -v -X POST https://api-data.line.me/v2/bot/richmenu/richmenu-88c05ef6921ae53f8b58a25f3a65faf7/content \
-H "Authorization: Bearer {channel access token}" \
-H "Content-Type: image/jpeg" \
-T image.jpg

詳しくは、『Messaging APIリファレンス』の「リッチメニューの画像をアップロードする」を参照してください。

# デフォルトのリッチメニューを設定する

デフォルトのリッチメニューを設定します。デフォルトのリッチメニューは、LINE公式アカウントを友だち追加し、ユーザー単位のリッチメニューがリンクされていないすべてのユーザーに表示されます。

curl -v -X POST https://api.line.me/v2/bot/user/all/richmenu/richmenu-88c05ef6921ae53f8b58a25f3a65faf7 \
-H "Authorization: Bearer {channel access token}"

詳しくは、『Messaging APIリファレンス』の「デフォルトのリッチメニューを設定する」を参照してください。

ユーザー単位のリッチメニュー

ユーザー単位でリッチメニューをリンクできます。1人のユーザーには、1つのリッチメニューだけをリンクできます。詳しくは、Messaging APIリファレンスの以下の項目を参照してください。

# 複数のリッチメニューを切り替える

リッチメニューエイリアスを使うことで、タブ切り替えのように、複数のリッチメニューを簡単に切り替えられます。

タブ切り替えのように、複数のリッチメニューを簡単に切り替えられます

たとえばリッチメニューAとリッチメニューBを切り替えたい場合、以下の手順に従って設定をします。

  1. リッチメニューAとリッチメニューBの画像を準備する
  2. リッチメニューA(richmenu-a)を作成する
  3. リッチメニューAに画像をアップロードする
  4. リッチメニューB(richmenu-b)を作成する
  5. リッチメニューBに画像をアップロードする
  6. リッチメニューAをデフォルトのリッチメニューにする
  7. リッチメニューエイリアスAを作成する
  8. リッチメニューエイリアスBを作成する

# 1. リッチメニューAとリッチメニューBの画像を準備する

事前にリッチメニューAの画像(richmenu-a.png)と、リッチメニューBの画像(richmenu-b.png)を準備しておきます。使用できる画像について詳しくは、「リッチメニューの画像を準備する」を参照してください。

リッチメニューAの画像(richmenu-a.png リッチメニューBの画像(richmenu-b.png
リッチメニューAの画像 リッチメニューBの画像

# 2. リッチメニューA(richmenu-a)を作成する

リッチメニューを作成する」エンドポイントを使って、リッチメニューA(richmenu-a)を作成します。

この例では、タップ領域オブジェクトのアクションに、以下を指定しています。

curl -v -X POST https://api.line.me/v2/bot/richmenu \
-H 'Authorization: Bearer {channel access token}' \
-H 'Content-Type: application/json' \
-d \
'{
    "size": {
        "width": 2500,
        "height": 1686
    },
    "selected": false,
    "name": "richmenu-a",
    "chatBarText": "Tap to open",
    "areas": [
        {
            "bounds": {
                "x": 0,
                "y": 0,
                "width": 1250,
                "height": 1686
            },
            "action": {
                "type": "uri",
                "uri": "https://developers.line.biz/"
            }
        },
        {
            "bounds": {
                "x": 1251,
                "y": 0,
                "width": 1250,
                "height": 1686
            },
            "action": {
                "type": "richmenuswitch",
                "richMenuAliasId": "richmenu-alias-b",
                "data": "richmenu-changed-to-b"
            }
        }
    ]
}'

レスポンスで、リッチメニューAのリッチメニューIDが返ります。

{
    "richMenuId": "richmenu-19682466851b21e2d7c0ed482ee0930f"
}

# 3. リッチメニューAに画像をアップロードする

リッチメニューの画像をアップロードする」エンドポイントを使ってリッチメニューAに画像をアップロードします。手順2で取得したリッチメニューAのリッチメニューIDを、パスパラメータで指定します。

curl -v -X POST https://api-data.line.me/v2/bot/richmenu/richmenu-19682466851b21e2d7c0ed482ee0930f/content \
-H 'Authorization: Bearer {channel access token}' \
-H "Content-Type: image/png" \
-T richmenu-a.png

# 4. リッチメニューB(richmenu-b)を作成する

リッチメニューAと同様の手順で、リッチメニューB(richmenu-b)を作成します。

この例では、タップ領域オブジェクトのアクションに、以下を指定しています。

curl -v -X POST https://api.line.me/v2/bot/richmenu \
-H 'Authorization: Bearer {channel access token}' \
-H 'Content-Type: application/json' \
-d \
'{
    "size": {
        "width": 2500,
        "height": 1686
    },
    "selected": false,
    "name": "richmenu-b",
    "chatBarText": "Tap to open",
    "areas": [
        {
            "bounds": {
                "x": 0,
                "y": 0,
                "width": 1250,
                "height": 1686
            },
            "action": {
                "type": "richmenuswitch",
                "richMenuAliasId": "richmenu-alias-a",
                "data": "richmenu-changed-to-a"
            }
        },
        {
            "bounds": {
                "x": 1251,
                "y": 0,
                "width": 1250,
                "height": 1686
            },
            "action": {
                "type": "uri",
                "uri": "https://www.line-community.me/"
            }
        }
    ]
}'

レスポンスで、リッチメニューBのリッチメニューIDが返ります。

{
    "richMenuId": "richmenu-4ecc8d672d9da4ba375fb82fa938fe5e"
}

# 5. リッチメニューBに画像をアップロードする

リッチメニューAと同様の手順で、リッチメニューBに画像をアップロードします。

curl -v -X POST https://api-data.line.me/v2/bot/richmenu/richmenu-4ecc8d672d9da4ba375fb82fa938fe5e/content \
-H 'Authorization: Bearer {channel access token}' \
-H "Content-Type: image/png" \
-T richmenu-b.png

# 6. リッチメニューAをデフォルトのリッチメニューにする

デフォルトのリッチメニューを設定する」エンドポイントを使って、リッチメニューAをデフォルトのリッチメニューにします。

curl -v -X POST https://api.line.me/v2/bot/user/all/richmenu/richmenu-19682466851b21e2d7c0ed482ee0930f \
-H 'Authorization: Bearer {channel access token}'

これによりリッチメニューAが表示されるようになりますが、右半分をタップしてもまだリッチメニューBには切り替わりません。

デフォルトのリッチメニューが表示された

他のリッチメニューが表示された場合

デフォルトのリッチメニューよりも表示優先順位の高い、ユーザー単位のリッチメニューが既に設定されていた場合、リッチメニューAは表示されません。詳しくは、「リッチメニューの表示について」を参照してください。

# 7. リッチメニューエイリアスAを作成する

リッチメニューエイリアスを作成する」エンドポイントを使って、リッチメニューエイリアスA(richmenu-alias-a)を作成します。リッチメニューエイリアスAには、手順2で作成しておいたリッチメニューA(richmenu-a)を紐づけます。

curl -v -X POST https://api.line.me/v2/bot/richmenu/alias \
-H 'Authorization: Bearer {channel access token}' \
-H 'Content-Type: application/json' \
-d \
'{
    "richMenuAliasId": "richmenu-alias-a",
    "richMenuId": "richmenu-19682466851b21e2d7c0ed482ee0930f"
}'

# 8. リッチメニューエイリアスBを作成する

同様にリッチメニューエイリアスB(richmenu-alias-b)を作成します。リッチメニューエイリアスBには、手順4で作成しておいたリッチメニューB(richmenu-b)を紐づけます。

curl -v -X POST https://api.line.me/v2/bot/richmenu/alias \
-H 'Authorization: Bearer {channel access token}' \
-H 'Content-Type: application/json' \
-d \
'{
    "richMenuAliasId": "richmenu-alias-b",
    "richMenuId": "richmenu-4ecc8d672d9da4ba375fb82fa938fe5e"
}'

これでリッチメニューAで右側の領域をタップするとリッチメニューBに切り替わり、リッチメニューBで左側の領域をタップするとリッチメニューAに切り替わるようになりました。

リッチメニューA リッチメニューB
リッチメニューA リッチメニューB

リッチメニューエイリアスと紐づくリッチメニューは、「リッチメニューエイリアスを更新する」エンドポイントを使って、後から変更することも可能です。

# リッチメニューの表示について

リッチメニューは、設定方法と適用範囲によって以下の3つのタイプに分けられます。リッチメニューの表示優先順位(1が最優先で表示)は以下のとおりです。

  1. Messaging APIで設定するユーザー単位のリッチメニュー
  2. Messaging APIで設定するデフォルトのリッチメニュー
  3. LINE Official Account Manager (opens new window)で設定するデフォルトのリッチメニュー
リッチメニュー切替アクションでリッチメニューが切り替わった場合

ユーザーがリッチメニューをタップして、リッチメニュー切替アクションでリッチメニューが切り替わった場合は、「1. Messaging APIで設定するユーザー単位のリッチメニュー」に含まれます。

# 設定変更のタイミング

リッチメニューの設定を変更したとき、リッチメニューのタイプによって、ユーザーのトーク画面に反映されるタイミングが異なります。

タイプ 反映されるタイミング
Messaging APIで設定するユーザー単位のリッチメニュー 即時。ただし、ユーザーとのリンクを解除せずにリッチメニューを削除した場合は、トーク画面に再入室したときに削除が反映されます。
Messaging APIで設定するデフォルトのリッチメニュー トーク画面に再入室したとき。変更が反映されるまで、1分程度掛かる場合があります。
LINE Official Account Managerで設定するデフォルトのリッチメニュー トーク画面に再入室したとき。

# その他のリッチメニュー機能

リッチメニューを作成してユーザーに割り当てた後は、Messaging APIを使って以下の操作を実行できます。