リッチメニューを押すと別の画面へ行く？画像とタップ領域の確認方法

リッチメニューの「予約」を押したのに別のページが開くときは、画像の見た目と、押せる範囲の設定を重ねて確認します。画像に描いたボタンだけで、タップ時の動作が決まるわけではありません。

この記事はMessaging APIで作成するリッチメニューを対象にします。Official Account Managerで作る場合は、その作成画面のレイアウトと設定を確認してください。メニューそのものが変わらない問題はアカウント共通・個人別の表示優先度と分けて調べます。

一つの領域には、範囲と動作がある

公式のリッチメニュー設定手順は、画像を用意し、タップ領域を指定してメニューを作り、画像を添付して表示を設定する流れです。画像とタップ領域は、同じ配置に合わせて用意します。

領域オブジェクトの仕様では、boundsがピクセル単位の範囲、actionが押したときの動作です。xは画像左端、yは画像上端を基準にした位置で、幅・高さはその位置からの領域の大きさです。

スマートフォンのスクリーンショット上の位置を、そのまま元画像の座標にしないでください。画面に縮小されて表示された画像と、設定の基準になる画像は寸法が違います。

リッチメニューの左上を原点にした座標の図。xは左端から、yは上端からの位置、widthとheightはタップ領域の大きさ。設定は元画像のピクセルを基準にし、押せる枠とボタンの絵を重ね、中央だけでなく境界の動作も確認する。

図：位置と大きさの考え方を示す説明図です。実サービスの画面や、そのまま使える本番の座標ではありません。

説明用に、幅2500pxの画像を左右二つに分ける場合を考えます。右半分の領域は左端から1250pxの位置が起点になります。画像を別の寸法で作り直したのに座標だけを前のまま残すと、見た目の区切りと一致しません。

この例は座標の関係を示すもので、どの寸法や形式でも受け付けられるという説明ではありません。最終的な画像とメニューのsizeは、画像の要件を含む公式リファレンスで確認します。

開発担当には、最終画像の上へ設定上の領域の枠を重ねた確認用画像を作ってもらいます。枠の外や境界に意図しない空白・重なりがないか、文字やアイコンの見た目と一致するかを見ます。図中に実顧客の情報や機密のURLを出す必要はありません。

押す範囲が正しくても、リンク先や処理の値が違えば、期待した画面には進みません。メニューを作ったときの名前ではなく、現在使うアクションを照合します。

APIの形式検証を通ったことは、ボタンの意味と設定が合う証拠とは別です。公式にはメニューオブジェクトの検証手段がありますが、見た目と動作の確認まで終わるわけではありません。

公開前は、許可した検証用アカウントで、それぞれの領域の中央・境界に近い場所・アイコンと文字付近を確かめます。予約を押したら予約へ、相談を押したら相談へ進むか、担当者が答えられる条件で確認してください。

領域を直す前に、どのメニューが、誰に表示されているかも記録します。一部の人だけ古いメニューを見ているなら、座標を調整するより表示設定を調べることが先です。本番の全員へ別のメニューを一括適用して、原因を探す方法は避けます。

お客様にとって、見えている「予約」は予約へ進む約束です。押し直しや、いくつもの画面の往復をさせないために、画像と設定を一緒に検査します。修正後も、実際の表示で確認できた範囲と、まだ確認していない端末や対象を分けて残しましょう。

※仕様の確認日：2026年10月8日。領域の定義は公式資料に基づき、数値例・重ね合わせ・検査順は設計上の提案です。