LINE公式アカウントでリッチメニューを作成する際、どんなコンテンツをどのように配置すべきか、またデザインはイラストと画像のどちらが適しているかなど、迷ってしまうことはありませんか？
リッチメニュー作成時には、企業の視点で訴求したい内容と、ユーザーの利便性を両立させることが非常に大切です。
この記事では、人の視線の動きやスマートフォンの扱い方をふまえて、実際にタップされやすい場所や、ユーザーに利用してもらえるリッチメニューの配置やデザインについてご紹介します。
リッチメニューがタップされやすい場所
コンテンツの配置で注目するポイントは、指の可動域や視線の動きです。
スマートフォンを片手で持つ人が多いため、右利きユーザーの割合や指の届く範囲を考慮すると、リッチメニューは右側にコンテンツを配置した方がタップされやすくなります。また、大きめのコンテンツもタップされやすい傾向があります。
※タップのされやすさは目安です。コンテンツによって変わることがあります。
さらに、人の視線は、次のような視線の法則によって左上から右下にかけて移動します。
- グーテンベルク・ダイヤグラム型: 同じ種類の情報が均等に配置されている場合、斜めに移動する
- Z型: 画像や情報が多く並ぶ場合、Z型に移動する
そのため、上段の視覚的に目立つ位置には訴求力の高いコンテンツを配置して、下段の触りやすい位置にはユーザーがよくアクセスするコンテンツを配置することがおすすめです。
リッチメニューのデザインのポイント
今回はこちらの定期購入用のリッチメニューを例に、工夫しているポイントを紹介していきます。
※サンプルのリッチメニューなので、このデザインが効果的かは検証していません。
リッチメニューのコンテンツ
コンテンツを選定する際は、サービスの方針や状況に応じて、お客様の利便性と売上のバランスを考えることが大切です。
「新商品」や「キャンペーン」などの売上重視のコンテンツだけでなく、「購入履歴」や「定期便の設定」のような顧客体験重視のコンテンツをバランスよく組み合わせましょう。
例えば、定期購入では「気軽にメニューを変更したい」「荷物を受け取れない時に簡単にお届け日時を変更したい」といったニーズがあります。これらのニーズに応えるために、サービスを便利に利用できる以下のようなコンテンツがおすすめです。
- 新メニュー
- 定番メニュー
- お届け日時変更
- 注文内容変更
- 問い合わせ
定期購入以外では、以下のようなコンテンツがおすすめです。
- キャンペーンや最新情報
- クーポンや限定割引などのお得情報
- 会員証などの便利機能
- 商品一覧やマイページなどよく使われるページ
- チャットやFAQなどのユーザーが困ったときの導線
コンテンツの配置
リッチメニューでは、このように「リンク領域」を分割できます。分割した領域に対してコンテンツを配置していきましょう。
「タップされやすい場所」と「コンテンツの優先順位」を組み合わせて、コンテンツを配置しましょう。画像を使う場合は、リンク領域を大きくすることでより効果的に訴求できます。
- ① 新メニュー
- ② 定番メニュー
- ③ お届け日時変更
- ④ 注文内容変更
- ⑤ 問い合わせ
「注文内容変更」や「お届け日時変更」を「マイページ」でまとめることも可能ですが、独立して配置しておくことでユーザーが目的のコンテンツに辿り着きやすくなります。
写真とイラスト
伝えたい内容に合わせて、写真とイラストをうまく使い分けましょう。
写真を使うと、細かい部分まで正確に情報を伝えられます。店舗の外観や商品パッケージの雰囲気を視覚的に伝えたい場合や、信頼感を与えたい場面では写真がおすすめです。
イラストを使うと、シンプルで分かりやすく柔らかい印象を伝えられます。クーポンやポイントプレゼントといったワクワク感を演出したい場合や、利用者の心理的なハードルを下げたい場面ではイラストがおすすめです。
また、同じ「料理」についてのコンテンツでも見せ方によっては伝える雰囲気が大きく変わることがあります。伝えたい内容に合わせて写真やイラストを選びましょう。
さらに、レイアウトにはよく使われている構図があります。構図に沿ってテキストを配置してみると綺麗にレイアウトが出来上がるのでぜひお試しください。
配色
多くの色を使用すると、視覚的な混乱を引き起こし、肝心な訴求が伝わらない可能性があるため、できるだけ3色以内に抑えましょう。
配色を決める際は、 Coolors（ https://coolors.co/ ）などの配色ジェネレーターツールを活用すると、視覚的に配色の組み合わせができるのでおすすめです。
ベースカラー・メインカラー・アクセントカラーを組み合わせて配色を決めます。同系色や補色を使うと色がまとまりやすいです。
今回の例では、このように配色しています。
- ベースカラー：グレー
- メインカラー: 赤
- アクセントカラー: 緑
食べ物の場合、赤などの「暖色系」の色は食欲を刺激する効果があります。 この色を利用して、食欲をそそるコンテンツを制作することも有効です。ただし、食欲をそそる色といっても、人によって感じ方が異なるため、ターゲット層に合わせて色選びを慎重に行うことが大切です。
視認性の確保
テキストが読みにくくなってしまう場合は、コントラスト比やサイズを調整します。
重要な要素ほどしっかり伝わるようにしましょう。
例えば次のような対応が効果的です。
- 影をつける
- ふちどりをする
- 背景色を濃くする
- サイズを大きくする
- 太字にする
今回の例では、テキストの背景色を濃くして視認性を高めつつ、全体に透過した背景色を追加して明るさを抑えました。
タブ型リッチメニューのデザインのポイント
タブでコンテンツを切り替えることができるタブ型リッチメニューもおすすめです。限られたスペースでより多くのコンテンツを提供することができるので、ユーザーの利便性がアップし、サイト訪問や売上への貢献が期待できます。
タブ型リッチメニューは1タブ目がタップされやすい傾向があるので、キャンペーンや今売り出したい商品をデフォルトで表示される前面に出すと効果的です。また、2タブ目には便利なショートカットを配置することで、売上重視のコンテンツと顧客体験重視のコンテンツをバランスよく配置することができます。
しかし、タブを見逃すユーザーもいるため、タブのデザインにも工夫が必要です。タブの反応率が低い場合は、タブであることが視覚的にわかりやすいデザインや、タブで切り替えられることを明示するデザインを試してみましょう。
タブ型リッチメニューについては、次の記事で紹介されています。
ソーシャルPLUSが提供する「メッセージマネージャー」は、リッチメニューのタブ切り替えだけでなく、リッチメニューの出しわけにも対応しています。
「多くのコンテンツを提供したい」
「IDの連携の有無に応じてリッチメニューを切り替えたい」
という場合には、タブ切り替えリッチメニューやリッチメニューの出しわけがおすすめです。
実際にリッチメニューの画像を作成してみよう
ソーシャルPLUS社では無料のグラフィックデザインツール「Canva」「Adobe Express」で使えるリッチメニューのテンプレートをご用意しています。
テンプレート（無料）をコピーするだけで簡単にリッチメニューが作成できます。また、「Canva」「Adobe Express」初心者でも簡単にリッチメッセージを作成できる方法を解説したブログも公開していますので、ぜひご活用ください。
Canvaを利用して作成する
Adobe Expressを利用して作成する
まとめ
今回はリッチメニューのデザインのポイントをご紹介しましたが、「これが正解」というデザインはありません。反応率が低い場合は、コンテンツや配置を変更したり、切り替えのタイミングを調整したりしながら、効果検証を行ってリッチメニューを改善していきましょう。
GAを利用した効果測定の方法についてはこちらの記事に記載していますので、ぜひご活用ください。
