リッチメニューは、お店やサービスの「入口」です。見た目がきれいでも、どこを押せばいいか分からなければ使われません。この記事では、押されるリッチメニューにするためのデザインのコツを紹介します。
1. いちばん押してほしいボタンを決める
最初に決めるのは、デザインではなく目的です。予約、注文、来店、問い合わせなど、リッチメニューで一番してほしい行動を1つに絞り、そのボタンを主役にします。
- 主役のボタンは大きく（2マス分など）
- 視線が最初に向かいやすい左上に置く
- 色も主役だけ目立たせる
2. ボタンは多くても6つまでを目安に
タップ領域は最大20個まで設定できますが、ボタンが多いと1つ1つが小さくなり、押し間違いが増えます。目安は大きいサイズ（2500×1686px）で6つまで、小さいサイズ（2500×843px）で3つまでです。
載せたいものが多いときは、次のように整理しましょう。
- 似た内容はまとめて1つのページにリンクする
- 優先度の低いものは、リッチメニューから外してWebサイトに任せる
- どうしても多いときは、タブで切り替えるメニューにする（タブ切り替えの仕組み）
3. 文字は「大きく・短く・動詞で」
リッチメニューはスマホの画面幅に縮小して表示されます。2500px幅で作った画像は、実際には数分の1の大きさで見られます。
- 文字は太く大きく：パソコンで見て「大きすぎるかな」くらいがちょうどいい
- 短く：1ボタン1〜2語が目安。説明文は載せない
- 動詞で：「予約」より「予約する」、「クーポン」より「クーポンを見る」のように、押したら何が起きるかを書く
4. アイコンと文字を組み合わせる
アイコンだけだと意味が伝わらないことがあり、文字だけだと見分けにくくなります。アイコン＋短い文字の組み合わせが、ひと目で分かりやすい形です。
5. 色は2〜3色に絞る
ボタンごとにばらばらの色を使うと、どれが大事なのか分からなくなります。
- ベースの色を1つ決め、ブランドカラーに合わせる
- 主役のボタンだけ、目立つアクセントカラーにする
- 背景と文字のコントラストをはっきりさせる（薄い背景に薄い文字は読みにくい）
6. ボタンの「押せる範囲」を見た目と合わせる
画像のボタンの位置と、実際にタップに反応する範囲（タップ領域）は別々に設定します。ボタンとボタンの間に余白があるデザインでも、タップ領域は余白を含めて広めに取ると押しやすくなります。画像を作り直したときは、タップ領域のずれがないか必ず確認しましょう。
7. メニューバーのテキストも工夫する
リッチメニューを閉じているとき、画面下のバーに表示される文字（メニューバーのテキスト）は最大14文字まで設定できます。初期の「メニュー」のままにせず、「予約・クーポンはこちら」のように開くと何があるかを書くと、開いてもらいやすくなります。
まとめ
- 目的を1つに絞り、主役のボタンを大きく左上に
- ボタンは6つまで、文字は大きく短く動詞で
- 色は2〜3色、アイコン＋文字で分かりやすく
- メニューバーのテキストで「開く理由」を伝える
デザインに自信がなくても大丈夫です。richmenu-aiなら、業種や載せたいボタンを伝えるだけでAIがデザインのたたき台を作り、タップ領域も画像に合わせて設定します。作ったあとは、ボタンごとのクリック数を見ながら改善していきましょう（効果測定の方法）。