LINEのリッチメニュー、写真を入れる?文字だけにする? スマホで探しやすいボタンの作り方

LINEのリッチメニュー、写真を入れる?文字だけにする? スマホで探しやすいボタンの作り方

記事
デザイン・イラスト
こんにちは、ミチアカリの中根です。地域のお店や教室のチラシ・ホームページ・LINEまわりを作っています。

LINE公式アカウントのリッチメニューを作るとき、迷いやすいのが「写真を入れるか、文字だけにするか」です。お店の雰囲気を伝えたいので写真を使いたくなりますが、全部のボタンに写真を入れると、かえって押す場所が探しにくくなることがあります。

今回は、写真と文字の使い分けを、スマホの画面の大きさから考えてみます。

■ リッチメニューはスマホでは思ったより小さい

リッチメニューの画像は、パソコンで作っているときは大きく見えます。でも実際に表示されるのは、スマホのトーク画面の下の部分です。6つに区切ったメニューなら、1つのボタンは指先より少し大きいくらいの広さしかありません。

その小さな枠に写真を入れて、さらに文字をのせると、文字はどうしても小さくなります。写真の色や明るさによっては、文字が背景にまぎれて読みにくくなります。

もう一つの問題は、写真が並ぶと、どのボタンも同じように見えることです。ケーキの写真、店内の写真、外観の写真が並んでいると、きれいではあっても「予約はどこ?」と探す時間がかかります。

■ 写真は1〜2つにしぼる

おすすめしたいのは、写真を使うボタンを1つか2つにしぼるやり方です。

写真に向いているのは、見た目で伝わるものです。
・今週のケーキや季節のメニュー
・施術のあとの仕上がり(美容室など)
・教室の様子

反対に、予約・地図・電話・営業日のように「押したら何が起きるか」が大事なボタンは、写真より文字のほうが伝わります。

■ 文字だけのボタンは「大きい言葉+小さな一言」

文字だけのボタンは、大きく短い言葉を1つ置き、その下に小さな補足を1行入れると読みやすくなります。

・席の予約 / 空きを見る
・メニュー / ランチ・飲み物
・地図 / 駐車場3台
・営業日 / 今月の休み
・電話 / 10時〜18時

大きい言葉は4文字前後にすると、スマホでもつぶれずに読めます。小さな一言には、押す前に知りたいことを入れます。地図のボタンに駐車場の台数を書いておけば、車で来る人は押す前に安心できます。

■ いちばん押してほしいボタンだけ色を変える

文字だけのボタンが並ぶと、今度はどれも同じ強さに見えます。そこで、いちばん押してほしいボタン1つだけ、背景の色を変えます。予約を受けたいお店なら予約、問い合わせがほしい教室なら体験の申し込み、という具合です。

色を変えるのは1つだけにします。2つ3つと増やすと、結局どれが大事なのかわからなくなるからです。

カバー画像は、架空の喫茶店で2つの作り方を並べた見本です。左は全部に写真を入れたもの、右は写真を1つにしぼり、予約だけ色を変えたものです。同じ6つのボタンでも、右のほうが予約の場所をすぐ見つけられると思います。

■ まとめ

・リッチメニューはスマホでは小さく表示されるので、写真の上の文字は読みにくくなりやすい
・写真は、見た目で伝わるメニューや仕上がりなど1〜2つにしぼる
・予約・地図・電話などは「大きい言葉+小さな一言」の文字だけで作る
・いちばん押してほしいボタン1つだけ色を変える

今のリッチメニューをスマホで開いて、指で押すつもりで眺めてみてください。予約や電話のボタンを探すのに少しでも時間がかかるなら、作り直す価値があります。

お店・サロン・教室のLINEリッチメニュー作りは、ココナラで受け付けています(11月30日までのお試し価格です)。プロフィールの出品一覧からご覧ください。
サービス数100万件のスキルマーケット、あなたにぴったりのサービスを探す