2020.12.01LINEのリッチメニューを作ってみたけど、もうちょっとおしゃれなデザインにしたい。デザインが素敵なリッチメニューには憧れますよね。見た目をおしゃれにするだけで満足してはいけません。リッチメニューは押してもらってこそ価値があります。おしゃれで押してもらえるリッチメニューを目指しましょう。この記事では、思わずポチッと押してしまうリッチメニュー作りのコツをお伝えしています。各ポイントを抑えて、ぜひご自身のリッチメニュー作りの参考にしてください。目次LINEリッチメニューを押すまでの感情3ステップLINEリッチメニューをおしゃれにするコツ3つLINEリッチメニューを読みやすくするコツ3つLINEリッチメニューを押してもらうコツ2つおしゃれなLINEリッチメニュー参考事例10選まとめLINEリッチメニューを押すまでの感情3ステップユーザーがリッチメニューのボタンを押すとき、そこには「押してみよう」と思う感情が働きます。「押してみよう」と思うのか。感情を細かくさかのぼると、次のような3つのステップがあると考えられます。1素敵なリッチメニューだなと思って、すぐ閉じずに見ようと思う↓2何が書いてあるのかな?と読んでみる↓3ボタンだな、押してみようかな?と押してみるこの3つのステップは、ほんの一瞬のうちに起きているのですが、この感情が出てこないと、リッチメニューを押してもらえません。すれば1~3の感情を起こせるか。(押してもらえる)という点がポイントになります。ユーザーはこの3ステップを経て、押すかどうかを決めるので、それぞれのコツを押さえていきましょう。LINEリッチメニューをおしゃれにするコツ3つまずおしゃれであること。これを満たすリッチメニューにするには、次の3点が大事になります。一つずつ見ていきましょう。1.きれいな写真を使うここでお伝えする「きれいな写真」とは、全体的に統一感があるものを指します。事例で確認してみます。こちらのリッチメニューは、画像の持つアースカラーをベースに統一感を持たせています。続いてこちらは、北欧暮らしの道具店のリッチメニューです。商品の写真がたくさん並んでいますが、ごちゃついた感じがしないのは、色のトーンや雰囲気を合わせているからですよね。MACのリッチメニューは、マゼンタを中心とした色使いでメニュー全体に統一感が出ています。して見てみると、写真の持つ雰囲気や色味などを合わせていくことが、「きれいだな」と思われる要素になることが分かりますね。2.アイコンでシンプルにまとめるリッチメニューをおしゃれにする二つ目のコツは、アイコンでシンプルにまとめること。テキストが並んだメニューよりも、アイコンがポンッと置かれているメニューの方が素敵ですよね。アイコンはパッと見ただけでも、何を意味するかが瞬時に分かります。情報が伝わりやすいため、アイコンがあれば、テキストを入れる場合でも最小限まで削ることもできます。複数のアイコンを使うときは、このようにテイストを揃えるとスッキリまとまります。3.色に統一感を出すリッチメニューをおしゃれにするコツ、三つ目は色に統一感を出すこと。統一感を出す方法としては、例えばピンク系、ブラウン系など同系色でまとめる方法トーンを統一する方法といったものがあります。同系色は比較的分かりやすいと思います。トーンを統一するとは、色の明るさと鮮やかさ(=色の混じりけのなさ)が似たもの同士の色を使う、ということです。色数を少な目にすると、まとまりやすくてスタイリッシュな印象になります。HPやブログで使っている色やフォントと同じものを使うなど、雰囲気やデザインを一緒にすることで、いつも見ているお店だなという安心感も生まれますね。以上3つのポイント意識すれば、ユーザーに「素敵だな」と感じてもらえるリッチメニューに近づくはずです。LINEリッチメニューを読みやすくするコツ3つ「おしゃれだな」と感じてもらえたら、次のステップでは「なんて書いてあるのかな?」と読まれる工夫を施します。文字サイズボタンの数を意識して作ると上手くいきます。1.配色(コントラスト)文字が見えるか見えないかは、背景と文字の配色によって大きく違ってきます。背景と文字が同じようなトーンになると読みづらいため、文字がはっきりと分かるような色設定をしてください。濃い地なら文字は薄く、薄い地なら文字は濃く。これを守れば失敗はありません。基本は、黒地に白、白地に濃い色です。背景と文字が同じようなトーンになると、このように読みづらくなります。上記の背景でボタンを作りたいなら、文字の色を濃い目にします。背景を濃い色にして、文字を薄くします。背景が写真の場合でも、同様の考え方を基本に工夫をする必要があります。こちらは文字の後ろに透過させた背景色を挟むことで、写真の雰囲気を伝えながら文字を読みやすくしています。工夫で読みやすさに差が出ますので、文字がくっきり浮かび上がるような配色設定を心がけてください。2.文字サイズ文字サイズも読みやすさには大きく影響します。メニューをタップしてもらうには、メニューの文字数は最小限まで削って、フォントを大きくするなどの工夫が大事です。自分のターゲットに45歳以上、いわゆる老眼が始まる世代がいる場合、小さな文字は読みにくいと思われてしまうので注意です。文字を大きくしたいからといって、余白ギリギリまで文字を広げると、今度は読みにくさが生じることもあります。下の画像例からも分かるように、メニュー枠に一定の余白をもたせると、読みやすくて美しい見た目になります。フォントの種類は、明朝体はエレガントできれいなんですが、小さい枠の中での読みやすさを考えるとゴシック体がおすすめです。パソコンの画面上と、実際のスマホで見たのとのでは違うので、作ったものは必ずスマホで確認するようにしてください。3.ボタンの数ボタンの数(=メニューの数)が多くても、ユーザーは読み切れません。ストレスを感じないでメニュー内容を理解するには、3つくらいが丁度よいと感じます。サイズ」「ボタンの数」の3点を押さえて、読んでもらえる見た目に整えたら、最後に押してもらうボタンに仕上げていきます。LINEリッチメニューを押してもらうコツ2つリッチメニューを押してもらうコツは次の2つです。ボタンの区切り(明確な境界線)ボタンの区切りは、はっきりと分かるようにします。メニューを複数置く場合、それぞれのボタンの境目がはっきりしていないと、どこをタップすれば良いのか迷います。「ここが〇〇のメニューなのね」とはっきり分かるように、明確な境界線を作っておきましょう。ここがボタンであるというマーク実は、明確な境界線をつけてボタン枠を区切ったとしても、ただの画像だと思われて、メニューを開くボタンだと認識してもらえない場合もあります。ようなマークを入れて、「これはボタンです」「ここを押すと次の画面に進みます」というメッセージを伝えます。リッチメニューを開いている全ての人がボタンに気付いてくれるように、細かなところまで工夫をしていきましょう。以上が「おしゃれで」「読みやすくて」「押してもらえる」リッチメニューのコツになります。チェックポイントは多いですが、お伝えした点に気を付けていけば、良いものが出来上がっていきます。続いて、思わず押したくなるおしゃれなリッチメニューの参考事例をいくつかご紹介します。今回は、お手本にできそうなリッチメニューを10個挙げてみました。良いポイント・真似したいポイントを解説しているので、ぜひ自分のメニュー作りに生かしてください。青山フラワーマーケット右2つのボタンが立体的に見えるデザインが目を引きます。この「飛び出た感」は、ぜひ真似したいところです。カートのイラストも「ショップだな」と分かりやすく、「青山フラワーマーケットってオンラインショップあるんだぁ」と、なんとなく押したくなってしまいます。左側が情報の詰まった宣伝になっていても、右の2つがシンプルなので、両方にちゃんと目がいきますね。写真は季節ごとに変わって美しく、女性は見ているだけで幸せな気持ちになります。★★★★★ジョンマスターオーガニックオーガニック化粧品ブランド、ジョンマスターオーガニックのリッチメニューです。こちらも3分割のパターン。これくらのメニュー数は目が疲れません。左画像に最新情報、右2つがメニューというスタイルを固定しているので、画像が変化しても安心感があります。熱心なファンにとっては、右側の会員メニューも便利ですね。定期的に更新される左側の画像は、タイムラインに流れてくる画像と常に統一感を持たせていて素敵です。画像は毎回凝っていて、買う予定はなくてもついつい押してしまう魅力があります。左側でキャンペーンを強調するというパターンは、真似したいところです。★★★★☆ETVOS(エトヴォス)ミネラルファンデーションで有名な日本の化粧品ブランド、ETVOSのリッチメニューです。「初めての方」「会員の方」の二つのタブで分かれていますが、このパターンは、化粧品や学び系でよく使われています。ETVOSの製品が持つイメージ同様に、メニューの見せ方もシンプルで美しい。盛らないのが、情報を受け取りやすいです。ホームページや商品パッケージの世界観と、LINEのメニューのブレもありません。通常のお知らせ画像もいつも目に優しいので、LINEの通知がきても目の保養目的で開きたくなります。こちらの商品をあえて選ぶ方は、普段も食事などに気を使うナチュラル系の方でしょう。アースカラーで「自分にも地球にも優しい」感じを徹底しているのが素敵です。そんな色使いは優しくしつつ、重要なメッセージは黒字で大きく書いているので読みやすい、という点はぜひ真似したいところです。★★★★☆FANCL続いて化粧品・健康食品メーカー、ファンケルのリッチメニュー。既存顧客と新規顧客のタブ切り替えバージョンですが、注目したいのは「初めての方」のタブに添えられている初心者マーク。これだけでも、違いがわかりやすいですよね。ものすごく美しさ溢れる・・といったデザインではないですが、上1つ下3つの4分割ボタンの存在が明瞭で分かりやすいですね。「ボタンだな」という認識がパッとできた上で、「初めての自分に関係あるのは、一番上のトライアルなんだろうな」というのが即座に判断できます。人の視線は上から下に動いていくという法則があります。それを踏まえると、他のボタンは地味にして、とにかくイチオシを上に置く!という方法もアリですし、真似できるポイントだと思わせる事例でした。いて自民党のリッチメニュー。いった大きな文字、文字下の白くて太いアンダーラインなど、読みやすさという点でとても良い参考例です。読みやすくて分かりやすいメニューのおかげで、「政策をもっと知りたい」「自分も関わりたい」と思って追加したならば、それぞれの目的が達成されるボタンになっていると思います。実際にカフェなどの店舗だったら、このデザインで「メニュー」とか「アクセス」とか「今週のイチオシ」とか・・・こんな風に書いてあったら、わかりやすくていいなと思いました。薄くてポップな色使いが、政党という固いイメージとの間にギャップを生み「読んでみようかな」という気持ちにさせますね。★★★★☆R-STOREこちらは店舗をもたない不動産屋さん、R-STOREのリッチメニュー。この会社はアプリがあるため、LINEにはチカラを入れていない感じですが、このシンプルなリッチメニューには潔さを感じます。リッチメニューと同様に、Webサイトもシンプルでモノトーンがベースのデザインのため、違和感もありません。不動産屋さんの場合、借りるか買うかの2択しかないというのもありますが、ユーザーの行動を促すという点では参考になる事例です。これがポンと出てきたら、何も考えずにどっちか押してしまいますね。個人のWebサイトで同じようなテイストにした場合、「やる気ない?」とも思われそうな気もします。その辺りはデザインやカラーで一工夫が必要です。食べチョク食べチョクは、野菜や魚などの食材を生産者さんから直接購入できるECサイトです。ボタンは6つありますが、かわいらしくて優しいデザインと上下を分けたまとめ方が、メニューの多さを感じさせません。小さい字は読みにくいものの、ライン登録直後にこの画面を目にしたら、一番左上の「旬の人気商品」と「新規出品」はポチっと押しちゃいそうです。下段は真っ白でなく微妙にベージュがかっていて目に優しく、ユーザーがすぐに閉じるという行動を避けられそうです。「目を引く」という点で、アイコンのかわいさや色使いは、ぜひとも真似したいリッチメニューです。「>」のマークがボタンの存在をアピールできていますね。一度こちらのサービスを利用して、その良さを知っているリピーターさん向けだと思うので、「読み物」のようにホームページからすぐに探せないものが、メニューにあるのはありがたいですね。スターバックスコーヒーキャンペーンごとに変わるスターバックスのリッチメニュー。11月はクリスマスを意識した赤が目立ちますが、緑ベースのスタバカラーという安心感と、わかりやすいアイコンのサイズ感がおしゃれですね。女性の写真が、絶妙な顔の角度と口元だけなので、手に持っている“自分”を重ねやすく、「自分が飲んでいる」というイメージがしやすいです。「今週のおすすめ」を思わず押したくなりますね。シンプルだけどパッと目を引くオシャレ感と、写真の使い方は真似したいところです。ライザップパーソナルジム、ライザップのリッチメニュー。このリッチメニューは、ゴールが無料カウンセリング一択です。友だち追加するぐらいなので、「いつか行ってみたいけど、今すぐじゃないしなー」という、そこそこ興味はあるけど、行くきっかけがつかめないでいる人が登録しているのでは?と思います。「いいから無料カウンセリングに来なさい!!」とせっせと誘われているのですね。「無料カウンセリング」という単語が4回も使われ、結局どれを押しても無料カウンセリングに導かれます。みた感じでは「無料カウンセリング」という単語が4箇所にあるなんて、分かりませんよね。写真やアイコンで工夫している影響もありますが、文字情報がいかに入ってこないのか、ということがよく分かる事例でもあります。文言は多少同じ内容にしても大丈夫、という点は、女性向けの方は参考になると思います。左はおなじみのLINEカラーなので「LINEで予約できるんだ」というのが視覚的にわかりやすいですね。最後にご紹介する事例は、インテリア雑貨などを取り扱う、北欧暮らしの道具店のリッチメニューです。こちらは毎日のようにメニュー内容が変わります。商品を扱う通販サイトなので、余計な言葉はすべて削ぎ落とし、写真のみ!老眼が始まってる世代には、なんの商品か判別できない時もあるのですが、先に紹介したETVOSに近い「目の保養」感があり、画像を楽しんでいるうちに気になる商品に出会うというタイプのメニューです。ユーザーはこのテイストが好きで、いつもこういった雰囲気のものを探しているはず。文字なんてなくても、「これだ!」いうものが出てきたら、目を奪われて、引き寄せられるように押してしまうんだろうなーと思います。雑貨やインテリア、ファッションの物販で、「写真を見ればだいたいわかる」というタイプの商品では真似できる事例です。まとめリッチメニューはおしゃれな見た目だけでなく、読みやすさや押してもらえるデザインに作り上げることが必要です。おしゃれで読みやすくて押してもらえるユーザーの感情を動せるように、以上3つのコツを意識して、メニュー作りをしてみてください。普段何気なく見ているリッチメニューで「素敵だな」と感じるメニューがあれば、何がそうさせているのか?という視点でじっくり見てみるのも勉強になっておすすめですよ。ビジネス&デザインサービスF-Labo代表。・女性向けマーケティングアドバイザーわかりやすく説明するのが得意。シンプルなものが好き。f-labo.ホーム学ぶHP制作タイトルとURLをコピーしました。