LINEリッチメニューのサイズ規格｜推奨比率とタップ率を上げるデザイン

「リッチメニューの画像を作ったら表示が崩れた」「サイズの規格がよく分からない」――LINE公式アカウントを初めて設定する方から、こうした問い合わせをよくいただきます。

リッチメニューの画像サイズを間違えると、ボタンの表示が崩れる・文字がつぶれる・画質が劣化するといった問題が発生します。これは見た目の問題だけでなく、タップ率の低下を招く実害です。

私たちsolezoreの支援現場でも、サイズ設定の誤りで成果を損なっているケースをしばしば見てきました。本記事では、リッチメニューの正確なサイズ規格と、タップ率を高めるレイアウト設計の正解をお伝えします。

LINEリッチメニューのサイズ規格まとめ

結論：LINEリッチメニューの推奨画像サイズは幅2500px固定で、高さは大サイズ1686px・小サイズ843pxの2種類です。 どちらも縦横比（アスペクト比）が決まっているため、この比率から外れると表示が崩れます。

大サイズと小サイズの仕様比較

最小サイズの規格は、幅800px・高さ540pxですが、この最小サイズでは画質が粗くなるため実際の運用では推奨サイズを使うことをおすすめします。

アスペクト比を守ることの重要性

リッチメニューの画像は、LINE Official Account Managerが内部でリサイズ処理を行います。このときアスペクト比が規格から外れていると、画像が不自然に引き伸ばされたり圧縮されたりして表示が崩れます。

デザインツールでキャンバスを作成する際は、最初から「2500×1686px」または「2500×843px」を設定して作り始めることが最も安全です。

大サイズと小サイズ、どちらを選ぶべきか

結論：多くのビジネスには大サイズ（1686px）を推奨しますが、ユーザー体験と表示面積のバランスで判断することが重要です。

大サイズが向いているケース

• 来店・購買の導線が多い飲食店・美容室・EC事業者
• 複数のボタン（4〜6個）で多様な訴求をしたいビジネス
• 視覚的インパクトでブランド訴求したい場合

大サイズはトーク画面の半分近くを占めるため存在感があり、ユーザーの目に入りやすい点が最大のメリットです。

小サイズが向いているケース

• BtoB・専門サービスなど、ターゲットが限られているビジネス
• シンプルに2〜3の導線に絞りたいケース
• ユーザーに「画面が圧迫される」と感じさせたくない場合

小サイズはトーク画面の占有が少なく、ユーザーにとってメッセージが読みやすい環境を保てます。特にBtoB・高単価のサービス業では「うるさくない」デザインが信頼感につながることがあります。

ユーザーが折りたためることも考慮する

リッチメニューはユーザー側で表示・非表示を切り替えることができます。大サイズを嫌うユーザーが折りたたんだ場合、リッチメニューの効果は失われます。

支援現場では大サイズでも適切に設計されたリッチメニューは折りたたまれにくい傾向がありますが、配信メッセージとの兼ね合いを見ながら両サイズをA/Bテストすることも有効です。

ボタンレイアウトとサイズの関係

結論：ボタンのタップ領域はリッチメニュー画像のサイズによって決まるため、ボタン数と配置は画像サイズに合わせて設計する必要があります。

ボタン数別の推奨レイアウト

LINE Official Account Managerでは以下のレイアウトテンプレートが用意されています。

大サイズ向け（1686px）：

• 3列×2行（6ボタン）：最もよく使われるスタンダードなレイアウト
• 2列×2行（4ボタン）：情報をやや絞り込んだレイアウト
• 1大+2小（3ボタン）：最重要ボタンを大きく見せたい場合

小サイズ向け（843px）：

• 3列×1行（3ボタン）：横並び3ボタンのシンプルなレイアウト
• 2列×1行（2ボタン）：2択に絞ったシンプルなレイアウト

タップ領域の最小サイズを意識する

スマートフォンでのタップ操作には、最低40×40px程度のタップ領域が必要とされています。リッチメニューのボタン1つが小さすぎると誤タップが増え、ユーザー体験を損ないます。

6ボタンレイアウトの場合、各ボタンの実際の表示サイズ（スマートフォン画面上）はおよそ幅120px × 高さ90px程度になります。このサイズでも十分タップできますが、8ボタン以上を詰め込もうとすると操作が難しくなります。

画像ファイルの最適化

結論：リッチメニューの画像は1MB以下のJPEGまたはPNGで保存し、画質劣化と表示速度のバランスを取ることが重要です。

JPEGとPNGの使い分け

• JPEG：写真・グラデーションを含むデザインに適している。ファイルサイズが小さくなりやすい
• PNG：テキスト・アイコン・フラットデザインに適している。文字や線がくっきり表示される

リッチメニューにはテキストとアイコンを組み合わせたデザインが多いため、PNG形式を使うと文字がにじまずきれいに表示されます。ただしPNGはファイルサイズが大きくなりやすいため、1MB以下に収まるか確認してください。

ファイルサイズを1MB以下に抑える方法

Canvaでエクスポートする場合、「ファイルを圧縮」オプションを使うとサイズを削減できます。また、TinyPNG（無料のオンラインツール）を使うと画質を保ちながらPNGのファイルサイズを大幅に削減できます。

よくあるサイズ設定のミスと対処法

結論：よくあるミスは「最小サイズ指定・アスペクト比のズレ・ファイルサイズオーバー」の3つです。 それぞれに対処法があります。

ミス1｜画像が粗くて汚い

原因：最小サイズ（800px）で作成した・元画像の解像度が低い
対処：キャンバスを2500×1686pxで最初から作り直す

ミス2｜ボタンの区切り線がズレている

原因：画像のアスペクト比が規格とわずかにズレている
対処：デザインツールで正確なピクセル数（2500×1686）を入力して再作成する

ミス3｜アップロードでエラーになる

原因：ファイルサイズが1MBを超えている・対応外の形式（GIF等）を使っている
対処：TinyPNGなどで圧縮してから再アップロードする

ミス4｜スマートフォンで見たら文字がつぶれていた

原因：デザインツール上では問題なく見えても、実際のスマートフォン画面（約390px幅程度）に縮小されると文字が小さすぎる
対処：デザイン上のフォントサイズを30px以上（2500px幅基準）に設定し、実機確認を必ず行う

solezoreの支援実績

「画像を作ったら表示が崩れた」というご相談は多くいただきます。サイズ規格やアスペクト比のズレは見落とされやすい一方、文字のにじみやボタン境界のズレを招き、タップ率低下という実害につながります。solezoreでは規格に沿った画像へ差し替え、コンテンツを変えずに表示と成果を改善します。

EC事業者でタップ率2.1%→3.6%に

課題： 推奨より小さい画像（800×540px）で設定し実機確認も不足。文字のにじみとボタン境界のズレが続いていました。 solezoreのアプローチ： 2500×1686pxの規格で画像を作り直し・PNG形式で文字を鮮明化・スマートフォン実機での表示確認を実施。 成果： 見た目の改善だけでタップ率が2.1%から3.6%へ向上。サイズ修正のみで成果が改善しました。

BtoB企業で小サイズ運用に最適化

課題： 大サイズがトーク画面を圧迫し、ユーザーに折りたたまれていました。 solezoreのアプローチ： 小サイズ（843px）の3ボタン構成へ変更・相談/事例/料金の3導線に整理・実機でのタップ領域確認を実施。 成果： 折りたたみが減り、無料相談ボタンのタップが安定して発生するようになりました。

よくある質問

Q. リッチメニューの画像を作る際、何pxで作ればいいですか？

A. 幅2500px・高さ1686px（大サイズ）または843px（小サイズ）で作成してください。

最初からこのサイズでキャンバスを作成することが最も確実です。Canvaでは「カスタムサイズ」からピクセルで指定できます。

Q. リッチメニューの画像はスマートフォンの実機でどのくらいのサイズで表示されますか？

A. スマートフォン画面の幅（約390px）いっぱいに表示されます。

2500pxの画像が約390px幅に縮小表示されるため、デザイン上の文字サイズが2500px基準で30px以上あれば、実機でも読みやすい大きさになります。

Q. 大サイズと小サイズを状況によって切り替えることはできますか？

A. はい、リッチメニューを複数作成して表示期間を設定することで自動切り替えができます。

ただし大サイズと小サイズを同時に表示することはできません。どちらか一方のサイズで設計し、期間を指定して切り替える運用が現実的です。

まとめ：サイズ規格を正確に守って表示崩れをゼロにする

LINEリッチメニューのサイズについての要点を整理します。

• 推奨サイズは幅2500px・高さ1686px（大）または843px（小）を必ず使う
• アスペクト比のズレ・ファイルサイズオーバー・解像度不足がよくある3大ミス
• PNG形式はテキスト・アイコン中心のデザインに最適
• 設定後はスマートフォン実機での表示確認を必ず行う
• ボタン数とレイアウトはサイズと合わせて設計する

サイズ設定の見直しや、リッチメニュー全体のデザイン改善についてお困りの場合は、ぜひsolezoreにご相談ください。