top of page

【Lステップ】リッチメニューのサイズや作り方のコツ



LINEのリッチメニューは、ユーザーとのコミュニケーションを深め、便利なナビゲーションツールとして利用できます。この記事では、リッチメニューのサイズ作り方のコツについて解説します。これを参考に、ユーザーにとって使いやすいリッチメニューを作成しましょう!




リッチメニューの基本サイズ

LINEリッチメニューのサイズは、以下のように固定されています。

フルサイズでデザインする場合、必ず規定のサイズを守りましょう。


基本サイズ一覧

レイアウトタイプ

推奨サイズ(px)

比率

1行タイプ(全画面)

1200 × 810

40:27

2行タイプ(分割)

1200 × 405

40:13.5

特に横幅は1200px固定のため、ピクセル比を守ってデザインすることが大切です。



リッチメニューの作り方の基本手順

1. 目的を明確にする

  • 商品の購入を促すためなのか、問い合わせフォームへの誘導が目的なのか、最初にリッチメニューの役割を明確に設定しましょう。

  • ターゲットユーザー(年齢層、性別など)も考慮すると、より適切なデザインが作成できます。


2. デザインツールの選定

デザインは、以下のツールを活用して作成できます。

  • Canva(初心者向け・無料プランあり)

  • Adobe Illustrator(プロ仕様)

  • Photoshop(画像編集が必要な場合に便利)


3. リッチメニューのテンプレートを使う

  • LINE公式アカウントの管理画面では、ボタンのレイアウトテンプレートが用意されています。これを活用すると、クリック領域の設定が楽になります。



デザインのコツ

1. 視覚的なわかりやすさを優先する

  • シンプルなデザインにする。

  • 目立つボタンとわかりやすいアイコンを使用する。

  • 各ボタンの背景色やフォント色はコントラストをつける。


2. 必要以上に情報を詰め込まない

  • 各ボタンの役割は明確に。

  • ボタンの数を多くしすぎると混乱を招くので、3~6個以内が理想的。


3. スマホ画面での見やすさを考慮

  • 実際のスマホ画面でのプレビューを確認。

  • 小さなフォントサイズや複雑すぎるアイコンは避ける。



便利なプラグインやツール

  • LINE公式アカウント用リッチメニューツール(公式管理画面)

  • 画像圧縮ツール(TinyPNGなど)

    リッチメニューの画像は軽量化することで、読み込み速度を向上させることができます。



作成後のテストが重要!

リッチメニューを作成したら、必ず以下を確認しましょう:

  • リンク先が正しいか(誤リンクを防ぐ)

  • スマホでの表示が美しいか(文字や画像が崩れていないか)

  • クリックの反応が正確か(ボタンの領域を間違えていないか)



まとめ

リッチメニューは、デザイン性と実用性が重要です。サイズや仕様に沿って作成し、目的に応じた内容を工夫しましょう。シンプルで直感的なリッチメニューがユーザー体験を向上させます。

ぜひこの記事を参考に、素敵なリッチメニューを作成してみてください!

Comments


logo.png

株式会社エブリッジ

大阪オフィス

〒569-0071 大阪府高槻市城北町1-7-16 リーベン城北3F

©evridge.co.Ltd. all rights reserved.

bottom of page