「デザイン会社に頼んで綺麗になったのですが、押される回数は変わりませんでした」「文字を小さくしないと収まらず、読めるか不安です」――デザインのご相談は、この2つが典型です。
結論からお伝えすると、押される回数を決めているのは見た目の綺麗さではありません。何が置いてあるか読み取れるかどうかです。装飾を足すより、文字を大きくするほうが数字が動きます。
solezoreでは、リッチメニューのデザインを道路標識にたとえて説明しています。標識は美しさで評価されません。走りながら0.5秒で読み取れるかどうかだけが問われます。
この記事では、デザインが決めること、レイアウト、文字、色、アイコンと写真、テンプレートの作り方、実機での確認までを、実際に制作している立場から解説します。
リッチメニューのデザインが決めること
結論： デザインが担うのは、何ができるかを一目で読み取らせることです。印象を良くする役割は、二番目に置きます。
まず、何のための作業かを揃えます。
読み取れるかどうかが先
トーク画面を開いた人が、リッチメニューを見る時間は1秒に満たない場合があります。この間に、何が置いてあるか分かる必要があります。
綺麗だが何が書いてあるか分からない状態が、最も押されません。デザイン会社に依頼して押される回数が変わらなかった例の多くは、この形になっています。
判断の方法は簡単です。作ったものを1秒だけ見て、項目を言えるかどうか。言えなければ、文字が小さいか、要素が多すぎます。
何を置くかのほうが影響が大きい
同じデザインでも、置く項目を変えると押される回数が変わります。デザインの調整より、項目の見直しのほうが先です。
押されるのは、今日動ける導線です。予約・注文と、空き状況・在庫で7割前後を占めます。会社概要や理念を綺麗に見せても、押されません。
デザインに手を入れるのは、置く項目が決まってからです。順番を逆にすると、作り直しになります。
ブランドの見た目とのつり合い
自社の世界観を保ちたい場合、色と書体を揃える形で対応します。ただし、読みやすさを下げてまで揃えることはしません。
薄い色の細い書体は、この面では機能しません。他の媒体で使っている書体でも、太いものに置き換えます。
写真を大きく使いたい場合は、文字を載せる部分だけ暗くするなどして、読める状態を確保します。
レイアウト｜どこに何を置くか
結論： 最も押してほしい導線を左上に置きます。視線は左上から動くため、ここが最も見られます。
配置の原則です。
左上が最も見られる
日本語の読み方に合わせて、視線は左上から右下へ動きます。最初に目に入るのが左上です。
予約や注文を左上に置くと、押される回数が上がります。ここにクーポンや店舗情報を置いている例が多く、位置を入れ替えるだけで数字が動くことがあります。
一方で、親指が届きやすいのは下段です。片手で操作する人が多いため、下段も押されやすい位置になります。
大きさで優先順位を示す
すべての項目を同じ大きさにすると、どれを押せばいいか分かりません。押してほしいものを大きくします。
分割のパターンで、大きさに差をつけられる形があります。上段に1つ大きく、下段に3つ小さく、という形が扱いやすいところです。
大きさの差は、面積で2倍以上つけます。わずかな差では、優先順位として伝わりません。
下段に「相談」を置く・区切りをはっきりさせる
親指が届きやすいのは下段です。片手で操作している人が多いため、ここは押されやすい位置になります。
一方で、視線が最初に向くのは左上です。最も押してほしい導線を左上に、次に押してほしい導線を下段に置くと、2つの性質を両方使えます。
下段に置いて機能しやすいのは、相談・問い合わせの導線です。他の項目を見た後に、迷った人が押す位置になります。上段に置くと、まだ判断していない段階の人が押してしまい、対応の負荷だけが増えます。
見た目の区切りと、実際に押せる範囲は一致させます。ここがずれていると、押しても違う画面が開きます。
枠線を入れるか、色を変えるかで区切ります。背景が1枚の写真でつながっていると、どこまでが1つの項目か分かりません。
区切りの線は、細すぎると小さい画面で消えます。太さは2〜3ピクセル程度を確保します。
文字｜読める大きさと言葉
結論： 文字は、実機で読める大きさまで大きくします。収まらない場合は、項目を減らします。
最も差が出る部分です。
大きさの目安
管理画面の画面上では大きく見えても、実機では小さく表示されます。作った画像を実際のスマートフォンで見て確認します。
3分割なら、1項目あたり4〜6文字が限界です。それ以上入れると、読める大きさに収まりません。
小さくしてでも文字を入れたくなりますが、読めない文字は無いのと同じです。文字数を減らすか、項目を減らします。
短く言い切る・書体を太くする
「ご予約はこちらから」ではなく「予約」。「商品ラインナップを見る」ではなく「商品を見る」。
動詞で終わる形にすると短くなります。名詞を並べるより、何ができるかが伝わります。
丁寧な言い回しは、この面では不要です。トーク画面の中なので、案内の文章ではなくボタンとして扱います。
細い書体は、小さい画面で背景に溶けます。太いゴシック体を使います。
書体は1種類に統一します。項目ごとに違う書体を使うと、まとまりがなくなります。
英数字を使う場合も、日本語と同じ太さに見える書体を選びます。細く見えると、そこだけ読みにくくなります。
色とコントラスト
結論： 背景と文字のコントラストを十分に取ります。屋外の明るい場所でも読めるかどうかが基準です。
色の使い方です。
コントラストを優先する・色数を絞る
淡い色の背景に白い文字を載せると、明るい場所では読めなくなります。屋外で使われることを前提にします。
濃い背景に白い文字、または白い背景に濃い文字が最も外しにくい組み合わせです。中間の色同士は避けます。
判断の方法は、画像を白黒にしてみることです。白黒にして読めるなら、色を戻しても読めます。
使う色は3色までにします。それ以上使うと、どこを見ればいいか分からなくなります。
押してほしい項目だけ、目立つ色にします。すべてを目立たせると、どれも目立ちません。
背景を1色にして、押してほしい項目だけ別の色にする形が、最も単純で機能します。
ブランドの色をそのまま使わない
自社の色が淡い場合、そのまま背景に使うと文字が読めなくなります。ここは調整します。
対処は2つです。ブランドの色を区切りの線やアイコンだけに使い、背景は白か濃い色にする。もう1つは、ブランドの色を濃くした版を作って背景に使う形です。
どちらの場合も、読めることを先に確保します。他の媒体と完全に同じ色にする必要はありません。トーク画面という小さい面では、他の媒体と同じ設計が通用しない場面があります。1年運用してから見返すと、この判断で数字が変わっていることが分かります。
アイコンと写真の使い方
結論： アイコンは文字の補助として使います。アイコンだけにすると、意味が伝わりません。
素材の扱いです。
アイコンだけにしない・写真は背景として使う
カレンダーのアイコンが予約を意味するか、営業時間を意味するかは、人によって受け取りが違います。
必ず文字と併記します。アイコンは、文字を見つけやすくする補助として置きます。
アイコンを入れると文字が小さくなる場合は、アイコンを外します。優先されるのは文字のほうです。
商品や店舗の写真を使う場合、文字を載せる部分に暗い帯を敷きます。写真の上に直接文字を置くと読めません。
写真を主役にすると、押す場所が分からなくなります。この面は、見せる場所ではなく押させる場所です。
写真を使う利点は、ブランドの雰囲気が伝わることです。読みやすさを保てる範囲で使います。
素材を用意する順番
写真は、既にあるものから選びます。撮り下ろすと、そこで作業が止まります。
使いやすいのは、商品や料理を寄って撮ったもの、店内の一部を切り取ったもの、実際に使っている場面です。人の顔が大きく入った写真は、文字を載せる場所がなくなるため向きません。
素材が見つからない場合は、写真を使わず色だけで作ります。無理に探すより、単色の背景に大きな文字を置くほうが押されます。実際、押された回数が多いリッチメニューには、写真を使っていないものが多くあります。
テンプレートの作り方
結論： 一度作った形を保存して、文字と写真だけ差し替えます。入れ替えのたびに作り直すと続きません。
作業を減らします。
固定する要素・費用と時間の比較
保存しておくのは4つです。
- 分割のパターンと、それぞれの位置
- 文字の書体・大きさ・色
- 背景の色と、区切りの線
- アイコンの位置と大きさ
この4つを固定すると、入れ替えが15分で終わります。毎回ゼロから作ると2〜3時間かかります。
編集できる元のファイルを保存しておきます。書き出した画像だけでは、差し替えができません。
| 作り方 | 1枚あたりの時間 | 費用 |
|---|---|---|
| 毎回ゼロから作る | 2〜3時間 | 実質5,000〜7,500円（時給2,500円換算） |
| テンプレートから差し替え | 15〜30分 | 実質600〜1,250円 |
| 外注（デザインのみ） | 10分（依頼の作業） | 1枚2万〜5万円 |
| 外注（テンプレート込みの初回） | — | 1枚5万〜10万円 |
外注する場合も、テンプレートとして使える元のファイルを受け取ってください。次からの入れ替えを自社で行えます。文字を1行変えるだけの修正に毎回2万円かかる状態を避けられます。
実機で確認する
結論： 管理画面の見た目と、実際の表示は違います。公開する前に、自分のスマートフォンで確認します。
確認の工程を入れます。
確認する3点・複数の端末で見る
- 文字が読めるか（1秒見て項目を言えるか）
- 押す範囲と見た目の区切りが一致しているか
- 明るい場所でも色が判別できるか
2番目のずれが最も多い失敗です。見た目の枠線と押せる範囲が1段ずれていると、押しても違う画面が開きます。
確認は、公開前に自分だけに表示する形で行います。公開してから直すと、その間に見た人には修正前の状態が届いています。
画面の大きさによって、見え方が変わります。小さい端末で読めれば、大きい端末でも読めます。
社内で1台、最も画面が小さい端末を確認用に決めておきます。毎回同じ端末で見ることで、比較もできます。
暗い場所と明るい場所の両方で見ます。屋外で読めない配色は、そこで気づけます。
つまずきやすい点
結論： 失敗は、詰め込むことと、装飾を優先することの2つです。どちらも実機で見れば分かります。
避け方を決めます。
詰め込まない・装飾を優先しない
伝えたいことを全部載せると、1項目あたりの面積が減り、文字も小さくなります。
項目を1つ足すたびに、他の項目が小さくなります。載せるのは6つまで、押してほしい導線が決まっているなら3つで足ります。
外した項目は、配信やあいさつメッセージで案内できます。この面に載せることだけが手段ではありません。
影、グラデーション、飾りの線。これらを足しても押される回数は変わりません。作業時間だけが増えます。
押される回数が上がるのは、文字を大きくしたときと、項目を減らしたときです。この2つを先に試します。
装飾に手を入れるのは、この2つを終えた後です。順番を守ると、無駄な作り直しが減ります。
他社の見た目をそのまま真似ない
参考にするのは構成であって、色や装飾ではありません。業種が違うと、押される導線も変わります。
見るときは、他社のリッチメニューを3つ並べて、左上に何を置いているかだけを書き出します。ここに共通点があれば、その業種で押される導線が分かります。
真似してはいけないのは、項目数と情報量です。よく見えるものほど項目を詰め込んでいることがあり、実際の数字は分かりません。見た目の完成度と押された回数は、別のものとして扱います。
solezoreの支援事例｜業種別の進め方
結論： デザインの改善は、綺麗にする方向ではなく読みやすくする方向で行います。同じ項目でも数字が動きます。
2つの事例を挙げます。
美容｜文字を1.8倍にして押された回数が増えた
サロンを運営する企業から、デザインを外注して作り直したが押される回数が変わらない、というのが相談の中身でした。
実機で見ると、6分割で1項目あたり8文字が入っており、屋外では読めない大きさでした。配色も、淡い色の背景に白い文字という組み合わせです。
項目を4つに減らし、文字を1.8倍にして、背景を濃い色に変えています。デザインの雰囲気は保ったままです。押された回数は月980回から月2,140回に増えました。内容も導線も変えていません。
宿泊｜写真の上の文字に帯を敷いた
宿泊施設から、リッチメニューが押されないという点でのご相談です。客室の写真を全面に使い、その上に文字を白抜きで載せた作りです。
写真の明るい部分では、文字が完全に読めない状態でした。文字を載せる部分に半透明の暗い帯を敷き、書体も太いものに変えています。
押された回数は月620回から月1,380回に増え、予約サイトへの遷移も2.1倍になりました。写真そのものは同じものを使っています。読めるようにしただけの変更でした。
よくある質問
Q. デザイン会社に頼めば押されるようになりますか？
A. 綺麗にはなりますが、押される回数は変わらないことがあります。押される回数を決めているのは、何が置いてあるか読み取れるかどうかです。依頼する前に、置く項目を社内で決めてください。デザインに手を入れるのは、その後です。
Q. 文字は何文字まで入れられますか？
A. 3分割なら1項目あたり4〜6文字が限界です。それ以上入れると、実機で読める大きさに収まりません。「ご予約はこちらから」ではなく「予約」、というように短く言い切ってください。収まらない場合は、文字を小さくするのではなく項目を減らします。
Q. どの位置に何を置けばいいですか？
A. 最も押してほしい導線を左上に置いてください。視線は左上から動くため、ここが最も見られます。あわせて、押してほしい項目の面積を2倍以上大きくしてください。すべて同じ大きさだと、どれを押せばいいか伝わりません。
Q. 写真を使ってもいいですか？
A. 使えます。ただし文字を載せる部分に暗い帯を敷いてください。写真の上に直接文字を置くと、明るい部分で読めなくなります。写真を主役にすると押す場所が分からなくなるため、この面は見せる場所ではなく押させる場所として扱ってください。
Q. 色は何色まで使えますか？
A. 3色までです。それ以上使うと、どこを見ればいいか分からなくなります。押してほしい項目だけ目立つ色にして、他は背景と同じ系統に揃えてください。判断に迷ったら、画像を白黒にしてみて読めるかを確認します。
Q. 作ったデザインをどう確認すればいいですか？
A. 公開前に自分だけに表示する形で、実機で確認してください。見るのは3点です。1秒見て項目を言えるか、押す範囲と見た目の区切りが一致しているか、明るい場所でも色が判別できるか。2番目のずれが最も多い失敗です。
まとめ
LINEリッチメニューのデザインについて、要点を整理します。
- 押される回数を決めるのは、綺麗さではなく読み取れるかどうか
- 1秒見て項目を言えるかが判断の基準
- デザインより、置く項目のほうが影響が大きい
- 最も押してほしい導線は左上。視線は左上から動く
- 押してほしい項目は、面積を2倍以上大きくする
- 見た目の区切りと押せる範囲を一致させる
- 3分割で1項目あたり4〜6文字。収まらないなら項目を減らす
- コントラストを優先する。白黒にして読めるかで判断できる
- アイコンだけにしない。必ず文字と併記する
- テンプレートを保存すると、入れ替えが2〜3時間から15分に下がる
補足すると、いまのリッチメニューを、自分のスマートフォンで屋外に出て見てみてください。
室内では読めても、明るい場所では読めない配色が意外に多くあります。とくに淡い色の背景に白い文字の組み合わせは、外では判別できません。ここに気づくと、デザインを作り直す前に直せる部分が見つかります。
もう1つ、家族や同僚に1秒だけ見せて、何が押せるか言ってもらってください。言えなければ、文字が小さいか要素が多すぎます。作った本人は内容を知っているため、この判定は自分ではできません。
solezoreでは、リッチメニューの設計と制作を承っています。まずは既存のものを実機で見て、直せる箇所をお伝えするところからでも構いません。
この記事を書いた solezore に相談する
記事に書ききれない具体策・料金・事例は、無料相談で。SNS／EC／SEO の領域別に専門家が対応します。
