「作った画像がアップロードできませんでした」「管理画面では読めたのに、実機では文字が潰れています」――サイズに関するご相談は、この2つに集まります。
結論からお伝えすると、規格そのものは単純です。つまずくのは規格ではなく、実機での見え方と、押す範囲のずれです。数値どおりに作っても、この2つを確認していないと作り直しになります。
solezoreでは、これを名刺の版下にたとえて説明しています。寸法どおりに作っても、断裁の余白を見ていないと文字が切れます。印刷して初めて分かる部分があるのと同じです。
この記事では、サイズの規格、2つの大きさの使い分け、分割ごとの押す範囲、切れない範囲、画像の作り方、端末による見え方の差までを、実際に制作している立場から解説します。
リッチメニューのサイズ規格
結論： 大きい形は2500×1686、小さい形は2500×843が基準です。縦横比が合っていれば、これより小さい寸法でも作れます。
まず、数値を押さえます。
基準の寸法と、大きめに作る理由
| 形 | 推奨の寸法 | 縦横比 |
|---|---|---|
| 大きい形 | 2500×1686 | およそ3対2 |
| 大きい形（小さめ） | 1200×810 / 800×540 | 同じ |
| 小さい形 | 2500×843 | およそ3対1 |
| 小さい形（小さめ） | 1200×405 / 800×270 | 同じ |
縦横比が合っていることが条件です。比が違うと、そのまま引き伸ばされて歪みます。
ファイルの形式はJPEGかPNG、容量は1メガバイト以下が目安です。仕様は時期によって変わることがあるため、運用の開始時に公式の案内で確認します。
2500×1686で作っておくと、どの端末でも文字が潰れません。800×540でも規格には合いますが、画面の大きい端末では粗く見えます。
容量が1メガバイトに収まる範囲で、最も大きい寸法を選びます。写真を多く使う場合は、圧縮の設定で調整します。
文字が中心のデザインなら、2500×1686でもほとんど容量を使いません。写真を全面に使う場合だけ、容量の確認が必要になります。
1メガバイトを超えた場合、対処は3つです。
- 写真の圧縮率を上げる（見た目の劣化は小さい）
- 使う写真の枚数を減らす
- 写真をやめて単色の背景にする
3番目が最も確実で、しかも押される回数が下がりません。押された回数が多いリッチメニューには、写真を使っていないものが多くあります。
2つの大きさの使い分け
結論： 大きい形は押される回数が上がり、小さい形は会話の履歴が見える範囲が広くなります。運用の中心がどちらかで決めます。
選び方を決めます。
どちらの形が向くか、後から変えられるか
配信と導線が中心の運用では、大きい形にします。画面の占有が大きく、押しやすくなります。
トーク画面の半分近くを占めるため、見落とされません。友だちになった直後の人にも、何ができるアカウントか伝わります。
飲食、小売、宿泊など、予約や注文が中心の業種はこちらが向きます。
チャットで相談を受ける業種では、小さい形が向きます。会話の履歴が見える範囲が広くなるためです。
リッチメニューが大きいと、やり取りの内容が隠れます。相談が続く関係では、この差が使いにくさになります。
士業、クリニック、教育など、個別のやり取りが中心の業種はこちらが向きます。
後から切り替えられます。運用しながら、どちらが合うかを試せます。
変えるときは、画像も作り直しになります。縦横比が違うため、そのまま流用できません。
判断に迷う場合は、大きい形から始めます。押される回数を確保したうえで、会話が増えてきたら小さい形に切り替える順番が扱いやすいところです。
分割のパターンと押す範囲
結論： 分割は用意された型から選びます。押す範囲は分割ごとに決まっているため、見た目の区切りをそこに合わせます。
ずれを防ぎます。
選べる分割
- 大きい形：1分割・2分割・3分割・4分割・6分割
- 小さい形：1分割・2分割・3分割
押す範囲は、選んだ分割の型で決まります。自由な位置に押す範囲を作れるわけではありません。
デザインを先に作ってから分割を選ぶと、区切りが合わないことがあります。分割を先に決めて、その線に合わせてデザインします。
分割の型は後から変えられますが、画像は作り直しになります。
押す範囲と見た目を一致させる
見た目の枠線と、実際に押せる範囲がずれていると、押しても違う画面が開きます。
これが最も多い失敗です。画像の中で区切りを1段ずらして作ってしまい、公開してから気づく形になります。
防ぐには、画像を作る段階で分割の線を下敷きとして置きます。管理画面の分割の型と同じ位置に線を引いてから、デザインを載せます。
| 分割 | 1項目の寸法（大きい形の場合） | 入る文字数の目安 |
|---|---|---|
| 3分割 | 833×1686 | 4〜6文字 |
| 4分割 | 1250×843 | 6〜8文字 |
| 6分割 | 833×843 | 4〜5文字 |
6分割は横も縦も小さくなります。文字を入れる余地が最も少ない形です。
小さい形の3分割は、1項目あたり833×843となり、大きい形の6分割と同じ大きさになります。ここで文字を詰めると読めません。
セーフエリア｜切れない範囲
結論： 端の余白に文字を置くと、端末によって切れます。上下左右にそれぞれ5%程度の余白を確保します。
余白を先に取ります。
端に寄せない・分割の境界に文字を寄せない
画面の端は、端末の形状によって表示が変わります。文字を端まで寄せると、一部が隠れることがあります。
上下左右に、それぞれ全体の5%程度を空けます。2500×1686なら、上下左右に80〜125ピクセル程度です。
区切りの線の近くも避けます。線から30ピクセル以上離すと、押す範囲の境界に重なりません。
分割の線をまたいで文字を置くと、どちらの項目のものか分かりません。1項目の中央に置きます。
中央に置くと、押す範囲との対応も分かりやすくなります。左寄せや右寄せは、隣の項目に見えることがあります。
アイコンを併記する場合は、アイコンと文字を1つの塊として中央に置きます。
上部の帯に隠れる範囲
大きい形では、リッチメニューの上部に開閉のつまみが表示されます。ここに文字を置くと重なります。
上部から全体の8%程度は、文字を置かない範囲として扱います。2500×1686なら、上から135ピクセル程度です。背景の色や写真はそのままで構いませんが、読ませたい文字は避けます。
小さい形でも同じ位置につまみが出ます。全体の高さが低いぶん、割合としては大きく影響するため、こちらのほうが注意が要ります。文字を1行だけ置く設計なら、上下の中央よりやや下に寄せると重なりません。
画像の作り方
結論： 分割の線を下敷きにしてから作ります。デザインを先に作ると、区切りが合わずに作り直しになります。
手順を固定します。
作る順番
- 使う分割の型を決める
- その型の線を引いた下敷きを作る
- 線に合わせて背景と区切りを配置する
- 各項目の中央に文字とアイコンを置く
- 書き出して容量を確認する
- 実機で確認してから公開する
2番目を飛ばすと、5番目までいってから作り直しになります。下敷きは一度作れば使い回せます。
編集できる元のファイルは保存しておきます。書き出した画像だけでは、次の入れ替えができません。
使う道具
画像を作れるものであれば、専用のソフトは要りません。無料で使えるオンラインの作図ツールでも作れます。
寸法を指定して新規作成できること、書き出しの形式と容量を調整できることの2つが条件です。この2つがあれば足ります。
外注する場合は、元のファイルも受け取る形にします。文字を1行変えるだけの修正に、毎回2万円かかる状態を避けられます。
制作にかかる時間と費用
自社で作る場合、下敷きを用意してから初回で2〜3時間かかります。2回目以降は、テンプレートから差し替えるだけなので15〜30分です。
外注する場合はデザイン1枚2万〜5万円、設定まで含めると6万〜12万円が目安です。担当者の時給を2,500円として換算すると、初回の自社制作は実質5,000〜7,500円になります。
金額だけを見れば自社で作るほうが安く収まりますが、業種の実績がある会社に頼むと、押される導線の並べ方まで提案が返ります。初回だけ外注してテンプレートを受け取り、以降は自社で差し替える形が、費用と品質のつり合いが取りやすいところです。
端末による見え方の差
結論： 画面の大きさによって、文字の見え方が変わります。最も小さい端末で読めるかを基準にします。
確認の基準を決めます。
小さい端末を基準にする
画面が小さい端末では、同じ画像でも文字が小さく表示されます。ここで読めれば、大きい端末でも読めます。
社内で1台、確認用の端末を決めておきます。毎回同じ端末で見ることで、過去のものとも比較できます。
文字の大きさは、画像の中で全体の高さの5%以上を目安にします。2500×1686なら、文字の高さが84ピクセル以上です。
明るさによる差
屋外の明るい場所では、淡い色の判別がつきません。室内で確認しただけでは気づけない部分です。
公開の前に、一度外に出て見ます。ここで読めない配色は、屋外で使われる場面では機能しません。
濃い背景に白い文字、または白い背景に濃い文字が、最も条件に左右されない組み合わせです。
店頭で見せるメニューほど、この確認が要ります。
押しやすさの設計
結論： 1つの項目は、指の腹より大きい必要があります。小さすぎると押し間違いが起きます。
物理的な条件です。
押せる大きさを確保する
小さい形の3分割は、1項目が正方形に近い形になり、押しやすい水準です。一方、大きい形の6分割も同じ寸法ですが、縦に2段あるため隣接します。
隣り合う項目が多いほど、押し間違いが増えます。項目を減らすと、この問題は自然に解決します。
押し間違いが起きているかどうかは、押された回数の分布で分かります。押されるはずのない項目に一定数の反応があれば、隣の項目からの誤操作です。
片手での操作を想定する・誤操作を数字で見つける
多くの人が片手で操作します。親指が届きやすいのは、画面の下側と中央です。
上段の端は、最も届きにくい位置になります。ここには、押される頻度が低くてよい項目を置きます。
一方で、視線が最初に向くのは左上です。見られる位置と押しやすい位置が違うため、両方を使い分けます。
押された回数の分布を3か月分見ると、押し間違いが起きているかどうかが分かります。
押されるはずのない項目に一定数の反応があれば、隣の項目からの誤操作です。会社概要や店舗情報に月100回以上の反応があるなら、その隣にある予約や注文を押そうとした人が含まれています。
対処は2つあります。項目を減らして1つあたりを大きくするか、押し間違えやすい組み合わせを離すかです。予約と会社概要が隣接している場合、間にクーポンなどを挟むだけでも誤操作は減ります。
つまずきやすい点
結論： 失敗は、比率を変えることと、区切りをずらすことの2つです。どちらも公開前に気づけます。
確認の形を決めます。
縦横比を変えない・区切りをずらさない
規定の比率と違う画像を作ると、引き伸ばされて歪みます。文字も潰れます。
片方の寸法だけ変えて作らないでください。3対2の比率を保ったまま、全体を縮小する形にします。
既にある画像を流用する場合は、切り抜きで比率を合わせます。引き伸ばすと、そこで品質が落ちます。
見た目の区切りと押す範囲が一致していないと、押しても違う画面が開きます。
分割の線を下敷きにして作れば、この失敗は起きません。作り始める前に、この下敷きを用意します。
公開前の確認では、実際にすべての項目を押してみます。意図した画面が開くかを1つずつ確かめます。
solezoreの支援事例｜業種別の進め方
結論： サイズに関する失敗は、公開前の確認を1工程入れるだけで防げます。作り直しの手間のほうが大きくなります。
2つの事例を挙げます。
通信｜区切りのずれで3か月分を失っていた
押された回数の内訳が、想定とまったく違っていた案件です。通信のサービスを扱う企業でした。
確認したところ、見た目の区切りと押す範囲が1段ずれていました。予約を押したつもりの人が、店舗情報の画面を開いていた状態です。3か月間この状態で運用されていました。
分割の線を下敷きにして作り直し、公開前に全項目を押して確認する工程を入れています。予約サイトへの遷移は月340回から月1,120回に増えました。内容も導線も変えていません。
アプリ｜比率を変えて作り歪んでいた
最初はデザインの問題だと考え、配色から直そうとしていた案件です。アプリを提供する企業で、リッチメニューの文字が読みにくいという一点でのご相談でした。
画像を確認すると、既存のバナー素材を流用しており、縦横比が合っていませんでした。アップロードは通りますが、表示の段階で引き伸ばされて文字が潰れる状態です。
規定の比率で作り直し、寸法も2500×1686に上げています。押された回数は月760回から月1,480回に増えました。歪んでいることに社内で誰も気づいていなかったのは、管理画面では正しく見えていたためです。
よくある質問
Q. リッチメニューのサイズはいくつですか？
A. 大きい形は2500×1686、小さい形は2500×843が基準です。縦横比が合っていれば、1200×810や800×540でも作れます。ファイルの形式はJPEGかPNG、容量は1メガバイト以下が目安です。仕様は変わることがあるため、運用の開始時に公式の案内で確認してください。
Q. 大きい形と小さい形はどちらを選べばいいですか？
A. 予約や注文が中心なら大きい形、チャットで相談を受けるなら小さい形です。大きい形は押される回数が上がり、小さい形は会話の履歴が見える範囲が広くなります。迷ったら大きい形から始めて、会話が増えてきたら切り替えてください。
Q. 画像がアップロードできないのはなぜですか？
A. 縦横比か容量のどちらかが合っていません。比率は3対2（大きい形）か3対1（小さい形）、容量は1メガバイト以下です。容量を超える場合は、写真の圧縮率を上げるか、写真を減らしてください。単色の背景にすると確実に収まります。
Q. 文字が実機で読めないのですが、どうすればいいですか？
A. 文字の高さを、画像全体の5%以上にしてください。2500×1686なら84ピクセル以上です。それでも収まらない場合は、文字数を減らすか項目を減らします。加えて、上下左右に5%程度の余白を取り、端に文字を寄せないでください。
Q. 押しても違う画面が開くのはなぜですか？
A. 見た目の区切りと、実際の押す範囲がずれています。押す範囲は選んだ分割の型で決まるため、デザインを先に作ると合わないことがあります。分割の線を下敷きにして作り直してください。公開前に全項目を押して確認する工程も入れてください。
Q. 既存のバナー素材を流用できますか？
A. 縦横比が合っていれば使えます。合っていない場合は、切り抜きで比率を合わせてください。引き伸ばすと歪んで文字が潰れます。管理画面では正しく見えることがあるため、必ず実機で確認してください。
まとめ
LINEリッチメニューのサイズについて、要点を整理します。
- 大きい形は2500×1686、小さい形は2500×843。比率は3対2と3対1
- 容量は1メガバイト以下。超えたら写真の圧縮か、単色の背景にする
- 容量に収まる範囲で、最も大きい寸法を選ぶ
- 大きい形は押される回数が上がり、小さい形は会話が見える範囲が広い
- 押す範囲は分割の型で決まる。デザインを先に作ると合わない
- 分割の線を下敷きにしてから、デザインを載せる
- 上下左右に5%程度の余白を取る。端に文字を寄せない
- 文字の高さは全体の5%以上。2500×1686なら84ピクセル以上
- 最も画面が小さい端末を確認用に決めておく
- 縦横比を変えて作らない。引き伸ばすと文字が潰れる
補足すると、いま運用している場合は、リッチメニューの全項目を実際に押してみてください。
意図した画面が開かない項目があれば、区切りがずれています。この状態は管理画面では分からず、押した人からも指摘されません。何か月も気づかないまま運用されている例が実際にあります。
もう1つ、画像の元のファイルが手元にあるか確認してください。書き出した画像しかない場合、次の入れ替えでゼロから作り直すことになります。外注している場合は、契約が続いているうちに元のファイルを受け取っておくほうが確実です。
solezoreでは、リッチメニューの設計と制作を承っています。まずは既存のものを実機で確認して、ずれや読みにくさがないかをお伝えするところからでも構いません。
この記事を書いた solezore に相談する
記事に書ききれない具体策・料金・事例は、無料相談で。SNS／EC／SEO の領域別に専門家が対応します。
