広告（アフィリエイトリンク）を含みます。
リッチメニューの画像は、デザインに入る前に「何ピクセルで、どの形式で、何分割にして、どの大きさの文字を載せるか」を決めておくと、作り直しがほとんど起きません。逆に、きれいな画像を作り込んでから「サイズが違って登録できない」「スマホで文字が読めない」と気づくと、最初からやり直しになります。この記事は、画像を作る前の仕様確認とレイアウトの決め方だけに絞った下準備の記事です。
登録の操作手順は エルメのリッチメニューの作り方と、つまずきやすい3つのポイント｜フリープランは2つまで、ボタンの並べ方や情報設計は リッチメニューのボタンを迷わせない並べ方｜情報設計の考え方と、無料プラン2つの使い分け に書いてあります。ここでは、それらと重ならないよう、「仕様の確認」「分割と画像の関係」「文字の読みやすさ」「制作前のシート」を扱います。
根拠は、LINE for Business（LINEヤフー）のリッチメニュー公式マニュアル、developers.line.biz のMessaging API解説、エルメ公式マニュアルです。確認日は2026年10月9日です。公式のページで読み取れなかった点は、そのつど「確認できませんでした」と書きます。
作る前に確かめる仕様：公式で確認できたことと、できなかったこと
最初に、画像のサイズ・形式・容量について、公式ページごとに何が書かれていたかを表にします。ここで大事なのは、「読み取れた」と「読み取れなかった」を分けておくことです。ネット上の解説記事にはさまざまな数字が出回っていますが、この記事では公式ページに書かれていた範囲だけを使います。
| 項目 | 公式で確認できた内容 | 確認できなかった点 |
|---|---|---|
| 画像サイズ（LINE for Business マニュアル） | アプリ版の説明に、2500×1686px と 2500×843px の2種類が書かれている | Web版の説明は「6種類のサイズがある」とされるが、その数値は画像の中にあり、本文では読み取れなかった |
| ファイル形式（同マニュアル） | JPG、JPEG、PNG | BMPやGIFなど他の形式が使えるかは書かれていなかった |
| 容量（同マニュアル） | アプリ版の背景画像の説明に「1MB以下」とある | Web版の画像の容量上限は記載を確認できなかった |
| Messaging APIの解説（developers.line.biz） | 作成リクエストの例で、幅2500・高さ1686を指定し、PNG画像をアップロードしている | 画像の要件そのもの（許容サイズ・容量・形式）は、取得したページの本文では確認できなかった |
| エルメの画像作成機能（エルメ公式マニュアル） | レイアウトのテンプレートは12種類、タブ付きは最大5個まで、タブごとに1枚ずつ画像を作る | ピクセルサイズ、保存形式、使えるフォント、文字数の上限は書かれていなかった |
| メニューバーに出る文言 | Messaging API解説の例で chatBarText というプロパティで指定する | LINE for Business のマニュアルでも、文字数の上限は書かれていなかった |
この表から言えるのは、「2500×1686pxか2500×843pxで、JPG/JPEG/PNG、1MB以下に収めておけば、少なくとも公式の説明から外れることはない」という、安全側の目安です。Web版にはほかのサイズもあるようですが、数値を本文で確認できていないため、この記事では採用しません。もしWeb版で別のサイズを使いたい場合は、管理画面でテンプレートを選んだときに表示されるサイズを見て、そのとおりに作ってください。
エルメとLINE公式アカウントで、仕様の見方が違う点
エルメのリッチメニューは、LINE公式アカウントの管理画面で作るリッチメニューとは別の画面で作ります。エルメ公式マニュアルでは、画像は「大」が2,500×1,686px、「小」が2,500×843pxの2種類で、ほかのサイズは登録できないとされています（作り方の記事でも触れています）。一方で、LINE for Business のマニュアルには、Web版で6種類とあります。この違いは、公式ページ間で食い違っている可能性があります。エルメで使う画像は、エルメの画面で求められるサイズに合わせてください。契約前や作る前に、必ず公式で最新の記載を確認することをおすすめします。
もう一つ、見落としやすい点があります。パソコン版LINEとChrome版LINEでは、リッチメニューが表示されないと公式に書かれています。パソコンから確認するとメニューが出ないため、「設定できていない」と勘違いしやすい場面です。確認はスマートフォンのLINEアプリで行う、と決めておくと迷いません。
分割は「ボタンの当たり判定」であって、絵の分割ではない
LINE for Business のマニュアルには、テンプレートが分けるのはリンク領域であり、デザイン領域は分割されない、と書かれています。つまり、画像は1枚の背景として作り、その上に「ここを押したらこの動き」という見えない枠が重なる、という構造です。これを理解していると、画像づくりの自由度が上がります。
- 6分割のテンプレートでも、絵柄は1枚の大きな写真や、全体を通した背景色にしてよい
- 逆に、絵では5つのボタンに見えるのに、当たり判定が6つだと、押してほしくない場所に反応する
- 画像のボタンの絵と、当たり判定の枠の位置がずれると、見た目の場所を押しても反応しない
Web版では、分割パターンに合わせた画像作成用テンプレートをダウンロードできると書かれています。枠の位置を見ながら画像を作れるため、最初の1枚はこのテンプレートを土台にする方法が確実です。エルメの画像作成機能を使う場合も、レイアウトを12種類から選び、タブがあるときは1タブずつ画像を作る、という流れになります。
分割数を決める3つの手がかり
分割数は、デザインの好みではなく、「押す理由の数」から逆算します。次の表は、私が考える判断の目安です。公式の数値ではなく、私の見立てとして読んでください。
| 押す理由の数 | おすすめの考え方 | 注意すること |
|---|---|---|
| 1〜2個 | 小さい高さ（2500×843）で2分割 | ボタンが少ない分、1つあたりの面積が大きい。ラベルを入れすぎず、短い言葉にする |
| 3〜4個 | 大きい高さ（2500×1686）で4分割前後 | 4つを超えると、スマホでは文字が小さく感じやすい。優先順位の低いものは別の場所へ |
| 5〜6個 | 大きい高さで6分割 | 画像全体の文字量が増える。1ボタンの文字は10文字前後を目安にする（私の見立て） |
| 7個以上 | 1つのメニューに詰め込まず、切り替えを検討する | 手動編集で作れるが、押す場所が小さくなる。フリープランは2つまでなので、事前にプランを確認 |
押す理由の整理や、ボタンの並べ順については、先ほどの リッチメニューのボタンを迷わせない並べ方｜情報設計の考え方と、無料プラン2つの使い分け にまとめています。この記事では、そこで決めた「数」を、画像の分割に落とすところから始めます。
文字の読みやすさ：スマホの実寸で決める
LINE for Business のマニュアルには、文字の大きさや色の組み合わせについての具体的な数値基準は書かれていませんでした。書かれていたのは、プレビューは端末やOSによって実際の表示と異なる場合があること、文字色と配置を調整できること、アクションラベルは最大20文字で、OSの読み上げ機能で読み上げられること、といった範囲です。したがって、この節の数字は、公式ではなく私の経験則と考え方です。
実寸で確認する方法
リッチメニューは、スマートフォンのトーク画面の下半分近くを占めることがあり、2500pxの画像は、実際には数百ピクセル分の幅に縮んで表示されます。パソコンの画面で大きく見えていても、スマホでは縮んでいます。そこで、次の手順で確認します。
- 作った画像を、スマートフォンに送って、普通のスマホの画面で開く
- 腕を伸ばした距離（目から40〜50cm程度）まで離して見て、文字が読めるかを確かめる
- 照明の明るい場所と、画面の明るさを下げた状態の両方で見る
- ボタンの文字を、知らない人に3秒だけ見せて、何のボタンか言ってもらう
3秒で何のボタンか言ってもらえなければ、文字が小さいか、言葉が抽象的です。この確認は、紙とスマホがあればできます。専門のツールは要りません。
読みやすさを下げやすい4つの原因
| 原因 | 起きること | 直し方の例 |
|---|---|---|
| 背景と文字の色が近い | 写真の上に白文字を置くと、明るい部分で消える | 文字の下に濃い帯を敷く、または文字の色と背景の明るさを大きく離す |
| 細い書体を使う | 縮小されたときに線がつぶれて読みにくい | 太めの書体にする。エルメの画像作成機能では、使えるフォントの種類は確認できませんでした |
| 1ボタンに言葉を詰める | 全部が小さくなり、どれも目立たない | 1ボタン1目的にして、短い名詞や動詞で終える |
| アイコンと文字が離れている | 何のアイコンか分からず、押した後に違うと感じる | アイコンの真下か横に、短いラベルを必ず付ける |
アイコンについては、LINE for Business のWeb版マニュアルに、1エリアにつき1つまで、サイズは変更できない、とあります。大きなアイコンに頼らず、文字で用途を示す設計のほうが、変更に強くなります。
画像を作る前の確認シートと、登録前の最終チェック
最後に、制作に入る前に埋めておくシートと、登録する直前に見る項目を分けます。制作前に決めるのは「方針」、登録前に確かめるのは「仕様との一致」です。
制作前に埋めるシート
- どのサービスで作るか（LINE公式アカウントの管理画面か、エルメか）
- サイズ（2500×1686か、2500×843か）と、その根拠にした公式ページ
- 押す理由の数と、そのままの分割数
- 1ボタンの文言（10文字前後を目安）と、押した先で何が起きるか
- 背景の方針（写真か、単色か、帯か）
- 色の数（ブランドの色を何色まで使うか）
- 見る担当と、最終確認をする担当
登録前の最終チェック
- 画像のサイズがメニューのサイズと一致しているか
- ファイル形式がJPG、JPEG、PNGのいずれかか
- 容量が1MB以下か（アプリ版の記載。Web版は上限を確認できなかったため、安全側で）
- 当たり判定と絵の位置がずれていないか
- メニューバーの文言が、メニューを開く気になる言葉になっているか
- スマホで実寸確認をして、3秒テストを通したか
- 表示期間を設定する場合、反映に時間がかかることを見込んでいるか
表示期間については、LINE for Business のマニュアルに、端末に反映されるまで時間がかかり、混雑状況や友だち数で変わる、と書かれています。休業案内やキャンペーンの切り替えなど、期限のある使い方では、ぎりぎりの日時にせず、余裕を持たせます。
活用例（架空の設計例）
以下は実例ではなく、考え方を示すための架空の設計例です。成果の数字は載せていません。
想定は、個人で教室を運営する小さな事務局です。友だちが開く理由は、体験申込、日程の確認、持ち物の確認、連絡の4つに整理できました。そこで、大きい高さの4分割にします。画像は、薄い単色の背景に、4つの大きな文字を置くだけにします。写真は載せません。理由は、写真を入れると文字が読みにくくなる場合があるためです。
| 区画 | 文言（架空） | 押した後 | 確認したこと |
|---|---|---|---|
| 左上 | 体験を申し込む | 申込フォームを開く | フォームの入口が、リッチメニューと同じ名前になっているか |
| 右上 | 日程を見る | 日程の案内ページを開く | ページがスマホで読めるか |
| 左下 | 持ち物を見る | 案内のテキストを送る | 文章が長すぎないか |
| 右下 | 連絡する | 連絡の方法を送る | 営業時間外の返信を、あらかじめ決めてあるか |
作る手順は、サイズを決める、4分割のテンプレートを用意する、背景を単色にする、文言を置く、スマホで実寸確認をする、の順です。実寸確認で「日程を見る」の文字が小さく感じたら、文言を「日程」の2文字にする、という直し方もあります。
私の見立て
- 画像づくりで時間を取られるのは、デザインよりも「サイズが違う」「文字が小さい」というやり直しのほうだと考えています。仕様の確認と実寸確認を先に済ませるだけで、作業は大きく減ります（私の見立てで、公式の記載ではありません）。
- Web版のサイズなど、公式の本文で読み取れなかった数値は、推測で作らず、管理画面で出る表示に合わせるのが安全です。数値が画像の中にしか書かれていない場合は、画面で確認するしかありません。
- 文字は「減らす」ほど読みやすくなります。1ボタン1目的にして、説明は押した先のページやトークに任せるほうが、運用の手間も減ります（私の見立てです）。
まとめ
リッチメニューの画像は、作る前の確認で結果が決まります。2500×1686pxと2500×843px、JPG/JPEG/PNG、1MB以下という公式の記載を目安に、Web版の数値は画面で確かめること。分割は当たり判定であって、絵の分割ではないこと。文字はスマホの実寸で、3秒で伝わるかを確かめること。この3つを押さえてから作れば、やり直しはかなり減ります。
なお、メニューバーの文字数の上限、Web版の6種類のサイズ、画像の容量上限（Web版）は、今回の確認では読み取れませんでした。実際の画面で確認してください。料金やプランの内容は更新されることがあるため、契約前に公式の最新の案内を確認してください。
構築代行のご案内（30万円〜・税別）
リッチメニューの設計から、画像の仕様確認、エルメへの登録、表示の確認までを、まとめて任せたい方向けに、構築代行を承っています。費用は30万円〜（税別）です。内容は個別にご相談のうえ決めます。詳しくは 構築代行のご案内ページ をご覧ください。
