リッチメニューのデザインをおしゃれに作る方法【LINE公式アカウント】

今回はこういった疑問に答えます。

お客様が押してみたくなる、魅力的なリッチメニューを作ってみたいと思いませんか？

もちろん外注で依頼するのも良いですが、無料で自作できないか気になるところ。

私は実際のところ、無料のソフトのみで以下のようなリッチメニューを作成しています。

今回はこんな感じの、おしゃれなリッチメニューを作る簡単な方法を紹介していきます。

＞＞LINE公式アカウントのリッチメニューとは？機能と設定方法を紹介

リッチメニュー作成で押さえるべきデザイン4原則

まずリッチメニューの作成の前に、デザインの基本を確認しておきましょう。

リッチメニューで大事なのは、デザインの原則に基づいて作成することです。

デザインの原則といっても、非デザイナーでも簡単に習得できる内容。

その原則とは以下の4つ。

順番に解説していきます。

近接

近接とは関連がある要素に対して、距離を近づけてグループ化することです。

以下の例を見てください。

NG例を見ると、パッと見で「サービス紹介」「おすすめ記事」「Instagram」の文字が、それぞれ上側と下側のどちらのアイコンの説明をしているのか分かりづらいです。

それに対してOK例では、近接を用いて要素をまとめました。

関連する文字とアイコンの距離が近いため、まとまりがあるように感じますね。

つまり、「関連する要素同士を使づけて配置し、異なる要素は適切な余白を空ける」ことがポイントです。

整列

整列とはページ上の要素の行や列を、意図的に揃えて並べることをいいます。

要素を揃えることによって、統一感のあるリッチメニューが作成できるようになります。

以下の例を見てください。

NG例ではInstagramのアイコンと文字だけが、少し下にズレています。

逆にOK例では、一本の線上に全ての要素が並んでいるため統一感があります。

つまり、「見えない一本の線上に、要素を揃えて並べる」ということを意識しましょう。

反復

反復とは、同じデザインを繰り返し反復することです。

以下の例を見てください。

NG例を見ると、各メニュー項目を囲っている枠がバラバラのデザインになっています。

さらに、各メニューがボタンかどうかも分かりづらいです。

反対にOK例では、すべてのメニュー項目が同じ枠で囲われていますね。

同じデザインは同じ事柄であると認識するため、ボタンであると直感的に分かります。

対比

対比とは、あえて一部分を揃えず他の部分と違うようにして、情報を目立たせることをいいます。

別名でコントラストともいいますね。

まずは以下の例を見てください。

NG例では、文字が背景の色と似ているため、若干読みにくいですよね。

それに対してOK例では、背景の色と文字がクッキリと強弱つけられていて読みやすいです。

文字だけでなく、アイコンの色も背景と被らないよう、慎重に色を決めましょう。

リッチメニューをおしゃれに作成する手順【無料】

前提知識として、デザインの4原則を解説してきました。

いよいよ、リッチメニューの作成に取り掛かりましょう。

リッチメニューを作成して登録するまでの4ステップは以下の通りです。

まとめ

リッチメニューを作成する際に必要なデザイン知識と、具体的な作成手順について解説してきました。

デザインの4原則を押さえるだけでも、かなり整ったリッチメニューが作成できるようになるので、必ず覚えておきましょう。

今回はGoogleスライドでの手順説明をしましたが、Canvaで作成するのもオススメです。

もしリッチメニューの作成に自信が無い方は、作成代行を承りますので、お問合せフォームよりお気軽にご相談ください。