テンプレートはどこで手に入り、どう選ぶか
入手先を性格で分ける：ツール内蔵・配布メディア・画像集・LINE公式
テンプレート集は点数の多さで選ぶものではありません。自分の項目数に合う分割があるかどうかで決まるので、まず4種類に分けます。
| 入手先の種類 | 例 | 向いている場面 | 無料の範囲の確かめ方 |
|---|---|---|---|
| ツール内蔵型 | Canvaのリッチメニュー用テンプレート、Adobe Expressの紹介ページ | そのまま編集して書き出したい | 有料会員向けの表示がどこに出るかを、一覧と、開いた各テンプレートの両方で見る（上流観測（2026-08-02）が有料会員向け表示を記録しているのは Canva の1件のみで、Adobe Express については確認していません） |
| 配布メディア型 | design AC のリッチメニュー用テンプレート | カテゴリから選んでダウンロードしたい | 会員登録の要否と、商用利用の可否をダウンロード前に確認する |
| 画像キュレーション型 | Pinterestのリッチメニューのアイデア | 雰囲気の当たりを付けたい | 素材として使うものではありません。 画像を眺めて方向性を決める用途に限ります |
| LINE公式の配布物 | LINE公式アカウントマネージャーのリッチメニュー新規作成画面 | 押せる範囲とデザインをずらしたくない | 管理画面から取得するものなので、入手できるかどうかは管理画面にログインできるかに帰着する（本記事はダウンロード物の中身を確認していない） |
ツール内蔵型（Canva・Adobe Express）を選ぶ方へ、この記事から1つだけ。 テンプレートを開いて自分の色に差し替えたら、差し替えた結果をもう一度測ってください。 配布時点で成立していた読みやすさは、色を差し替えた時点で保証されなくなります。何をどう測るかは、後半の「十分なコントラスト」を、測れる数にするで渡します。各ツールの操作手順そのもの（どのボタンを押すか、どう書き出すか）は、この記事では扱いません——各ツールの公式ヘルプを見てください。
4つ目について、先に書いておきます。 上流観測（2026-08-02、上位10件）の範囲では、この4つ目に言及した記事を確認できませんでした。LINEの公式ドキュメントは、リッチメニュー用のテンプレート画像を管理画面からダウンロードできると明記しています。リッチメニューの新規作成画面を開いて、デザインガイドをクリックする経路です。選んだ分割パターンの枠がそのまま入った下地が手に入るので、「画像の見た目の区切り」と「実際に押せる範囲」がずれる事故を、作業の側から防げます。 私たちは管理画面にログインして確認していないため、ダウンロードされるファイルの中身までは書けません。経路が公式に案内されている、というところまでが確認できた範囲です。
料金体系はどの入手先でも変わりえます。上の表の右列は「入手する時点で自分で確かめる項目」であって、この記事が保証する内容ではありません。
選ぶ前に押さえる：テンプレートが分けるのは「押せる範囲」で、見た目ではない
公式マニュアルは、テンプレートが分割するのは「リンク領域」であって「デザイン領域を分割するものではありません」と明記しています。画像の上に線を引いても、押せる範囲は変わりません。 テンプレート集で見つけた「6分割に見えるデザイン」を3分割のテンプレートに載せると、押した場所と違うページが開きます。
この記事が以降で「セル」と呼ぶのは、見た目の区画ではなくこの押せる範囲のほうです。テンプレートを選ぶという行為は、見た目を選ぶ前に、押せる範囲の数と形を選ぶ行為です。
テンプレート集を開く前に決まる2つ：掲載項目の数と、アクションラベル（最大20文字・音声読み上げ用）
この2つは、テンプレート集を1つも開かないうちに紙の上で決まります。先に決めておくと、一覧を眺める時間が数分で済みます。
1つ目：テンプレートのセル数と、掲載項目数を一致させる。 公式マニュアルが明記しているのは、テンプレートの全エリアを「アクションなし」にすることはできないというところまでです。つまり、少なくとも1つのエリアには行き先が必要です。個々のエリアを「アクションなし」にすること自体を禁じる記述は、この記事の確認範囲にはありませんでした。
そのうえで、セル数と項目数を一致させるのは、この記事の前提です。 公式が「一致させなさい」と書いているからではありません。理由は、6分割のテンプレートを選んだのに載せたい項目が4つしかないとき、余った2セルの扱いが二択になるからです。「あると便利そうなもの」で埋めれば、押させたいセルの取り分が減ります。「アクションなし」のまま残せば、押しても何も起きない領域ができます。この記事はどちらも避けたいので、項目数を先に数えて、その数のセルに分かれたテンプレートを選んでください。 項目数に合うセル数のテンプレートが無かったときにどうするかは、余らせて埋める以外の分岐を含めてリッチメニューの画像サイズと分割の決め方が扱います。何分割が読みやすいか、各セルが実際に何ピクセルになるかも同じ記事の担当です。
2つ目：20文字以内のアクションラベルが成立し、それに対応する画像内の文言が、テンプレートの文字枠に1行で収まるか。 ここで言うラベルは、画像の中に描く文字のことではありません。 各セルには、画像とは別に「アクションラベル」を入力する欄があります。公式マニュアルによると、リンク（URL）またはクーポンを設定する場合は入力が必須で、最大20文字です。そしてこのラベルは画面に表示される文字ではなく、OSの音声読み上げ機能に利用されます。 画像の中の文字数に20文字という上限があるわけではありません。
ここでテンプレート選びに効いてくるのは、画像の中に置く文言のほうです。 ラベルとして20文字以内で意味の通る言い方（「今月のクーポンを見る」「予約ページを開く」）が決まっているなら、画像の中の文言もそれと食い違わないほうがいい。テンプレートの文字枠が、その長さの日本語を1行で飲めるかを見てください。 枠が短くて「クーポン」まで縮めることになるなら、そのテンプレートは自分の項目に合っていません。
この2つを、テンプレート集を開く前にここで埋めてください。
| 記入欄 | 内容 |
|---|---|
| 掲載項目の数（＝必要なセル数） | |
| 各セルの、20文字以内のラベル案 | |
| いちばん押させたい項目（主セル） |
開いたあとに見る1つ目：色を差し替えたあとも測れる作りか
テンプレートを使う以上、色は自社のものに差し替えることになります。そして配布時点で成立していた読みやすさは、色を差し替えた時点で保証されなくなります。 選定時点で目で確認できるのは、次の2点です。
(i) 文字が写真や柄の上に直接載っていないか。 色を平坦な面で持っているテンプレート（背景が単色、ボタンが単色の塗り）のほうが扱いやすくなります。写真やグラデーションの上に文字を載せるテンプレートは、背景色が1つに決まらないため、あとで出す測り方がそのままでは使えません。
(ii) ボタン状の塗り（アクションチップ）が、その下地と塗り分けられて見えるか。 塗りが下地とほとんど同じ明るさのテンプレートは、色を自社のものに差し替えても「ボタンがボタンに見えない」状態をそのまま引き継ぎます。 リードで書いた1.72:1は、まさにこの状態を測った値です。淡い塗りを淡い背景の上に置いた作りなら、選ぶ時点で外すか、差し替えのときに塗りの明るさを背景から離すと決めておいてください。
この2点は、基準1・2と同じくテンプレートを開く前後に確定できます。 そのうえで、差し替えたあとに実際に測る手順は次の章で渡します。
開いたあとに見る2つ目：無料の範囲をどこで確かめるか
有料と無料の線が、入手先ごとに違う場所に引かれています。ツール内蔵型なら一覧の中に有料会員限定のものが混ざる形、配布メディア型なら会員登録やライセンス条件で分かれる形が考えられます。この記事が実際に確認できたのは、上流観測（2026-08-02）が記録するツール内蔵型1件の有料会員向け表示だけです。 他の入手先の料金や無料の範囲は確認できていないので、この記事は実値を書きません。渡せるのは線の見つけ方までです——一覧を開いた時点でその線が見えるかどうかを、選ぶ前に確認してください。 編集を終えてから書き出せないと分かるのがいちばん時間を失います。
最後にひとつ、はっきりさせておきます。この記事はテンプレート素材を配布しません。 配布点数で競う場所ではないと考えているためです。この記事が渡すのは、上の4つの基準と、選んだあとに自分の画像を判定する方法です。素材そのものは上の表の入手先から取ってきてください。テンプレートを探しに来た方は、ここまでで用が足ります。
<a id="measure"></a>
「十分なコントラスト」を、測れる数にする
ここからは、下書きをすでに持っている方向けです。
文字と背景のコントラスト比：Webの読みやすさの基準を借りる
「コントラストを十分に取る」を判定できる形にするには、しきい値が要ります。リッチメニューについてLINEがコントラストの数値基準を定めた記述は、この記事では見つけられませんでした。そこでWebの読みやすさについての国際的な基準を借ります。 W3Cが公開しているWCAG 2.2という基準で、通常の文字には4.5:1以上、大きな文字には3:1以上、そしてボタンやアイコンのように操作できることを示す部品——基準の原文では「UIコンポーネント」「グラフィカルオブジェクト」、原語表記では User Interface Components / Graphical Objects と呼びます——には3:1以上のコントラスト比を求めています。この原語表記は、あとで使う無料のチェッカーの判定欄にそのまま出てきます。ここでいう「大きな文字」は18ポイント以上、または太字で14ポイント以上、および日本語・中国語・韓国語のフォントでそれと同等のサイズになるフォントサイズ、と定義されています。これはWebコンテンツ向けの基準であって、LINEがリッチメニューに課している要件ではありません。 この記事が借りているのは、「十分」という言葉を、誰が測っても同じ答えになる数に置き換えるためであって、それ以上の権威を持たせてはいません。
コントラスト比は、2つの色の相対輝度から計算されます。手で計算する必要はなく、無料のコントラストチェッカーに2つの色を入れれば出ます。この記事が確認できた無償の手段は WebAIM Contrast Checker（https://webaim.org/resources/contrastchecker/。2026年8月3日に開いて確認）です。無料・ブラウザだけで完結・ログイン不要で、前景色と背景色を16進数で入れると、コントラスト比と、Normal Text／Large Text／Graphical Objects and User Interface Components それぞれの合否が出ます。これでなければならない、という話ではありません——無償で使える手段の一例として挙げています（第三者のツールであって、W3Cの規範文書でもLINEの推奨でもありません。仕様や使えるかどうかは提供者の都合で変わりえます）。押さえておくとよいのは、コントラスト比は2つの色の相対輝度から一意に決まる定義なので、同じ2色を入れれば同じ数字が返るということです。
画像のピクセルを、スマホの画面のポイントに換算する
しきい値の「18ポイント」は、画像編集ソフトの中のピクセルとは単位が違います。橋を架けます。
リッチメニューの基準になるキャンバスは 2,500×1,686px です。この画像が、幅Wポイントの画面に横幅いっぱいで表示されるとき、キャンバス上の縦hピクセルの文字は、画面上ではおよそ h × W ÷ 2500 ポイントで表示されます。逆に言うと、18ポイントに届かせるには 45000 ÷ W ピクセルが必要です。太字14ポイントなら 35000 ÷ W ピクセルです。
この式は、W——あなたの端末の画面の横幅——を入れて初めて数になります。 下の表は、Wを入れるための枠だと思ってください。
| 画面の横幅 W（ポイント） | 18ポイントに必要なcanvas上の高さ ＝ 45000 ÷ W | 太字14ポイントに必要な高さ ＝ 35000 ÷ W |
|---|---|---|
| あなたの端末の W（記入してください） | 45000 ÷ W px | 35000 ÷ W px |
| 仮に 320 を置くと | 約141px | 約110px |
| 仮に 360 を置くと | 約125px | 約98px |
| 仮に 390 を置くと | 約116px | 約90px |
| 仮に 430 を置くと | 約105px | 約82px |
表の下に、この表の限界を3つ書いておきます。
- 下4行の数字は「Wにその値を入れたらこうなる」という計算例であって、特定の端末の画面幅として保証された値ではありません。 この記事は端末別の画面幅（ポイント）の一次情報を確保できていません（公式ドキュメントに当たりましたが、端末別の値の表は取得できませんでした）。代表例として読まず、自分の端末の値で計算し直してください。
- この記事は、Wの入手手順——自分の端末の画面幅が何ポイントかを確かめる方法——を渡しません。 黙って省くのではなく、渡せないので書いておきます。私たちが「ここを見れば分かる」と言える先を確認できなかったためです。Wをすでに持っている方、自分で調べられる方は、上の式に入れれば下限が出ます。 調べる一般的な出発点としては、お使いの端末の設定アプリの表示関連の項目や、メーカー・OSが公開している仕様ページが挙げられます。ただし、この記事はそうした先を自ら確認したうえで案内しているわけではないため、具体的な参照先や数値は示しません。
- Wが分からない場合、この表で判定できることとできないこと。 判定できるのは、(i) 同じ画像の中でどのラベルがどれだけ小さいかという大小・比の関係と、(ii) Wを1つ仮に置いたときに必要になるcanvas px の値（およびWが小さいほど必要なpxは大きくなるという向き）までです。判定できないのは、「自分の文字が18ポイント／太字14ポイントの下限を満たしているか」という合否そのものです。 これはWを入れて初めて数になります。この表を見れば自分の文字サイズが足りているか分かる、とは考えないでください。
この表は算術上の導出であって、LINEが公表した仕様ではありません。 成り立つための前提が3つあります。
- リッチメニューが画面の横幅いっぱいに表示されること。 縮小されて表示される場合、文字はこの表より小さくなります。
- 端末が画面幅を表すのに使っている「ポイント」と、しきい値側の18ポイントを、同じ単位とみなして計算していること。 この2つが同じ単位だと言える資料を、私たちは確認できていません（同じだとも違うとも断定しません）。この表は当たりを付けるためのものであって、実機で見た結果の代わりにはなりません。
- 自社試作について測っているのが「可視インクの高さ」であること。 次の章で出す自社試作の数値は、文字の黒い部分が縦に何ピクセル分あるかを測ったもので、フォントサイズそのものではありません。実際のフォントサイズはこれより大きくなります。したがって、そこから換算して出したポイント数は保守的な下限です。 読者側はこの測り方をしません——次の節で書くとおり、読者が使うのは制作ツール上で指定したフォントサイズ（px）です。指定値はフォントサイズそのものなので、そこから換算した値は下限ではなく、おおよその実寸にあたります。自社の値と読者の値は、同じ表に入れても由来が違うということです。
3つ目は、自社試作についての判定の向きに効きます。「下限が18ポイントに届いていない」ことは言えても、「18ポイントに届いていない」とは言えません。 実務上は、下限が届いていないなら「大きな文字」向けの3:1という緩和は使えない前提で、4.5:1のほうで見ておく、という扱いになります。
自分の画像で測る手順
先に、この記事が載せている自社試作の数値の出どころを書いておきます。あれは画像をピクセル単位に展開し、領域ごとの代表色をプログラムで自動的に求めて計算したものです。 これから渡す手順は、それと同じ方法ではありません。同じ判定に、手元の道具でたどり着くための近似です。 領域の取り方が変わると小数点以下は動きます。ただし、しきい値から十分に離れている場合、合否はどちらの方法でも変わりません。境界の近く（4.5:1や3:1の前後）では、領域の取り方の差で合否が動きうるので、その場合は測る場所を変えて数回取り直してください。 なお、この2つの方法を実際に突き合わせた記録は持っていません。
必要なのは画像編集ソフトのスポイトと、無料のコントラストチェッカー（前述の WebAIM Contrast Checker など）だけです。特定の有料ツールは要りません。
先に、この手順が成立する条件を1つ書いておきます。 以下は、文字が平らな面（単色の背景、単色の塗り）の上に載っていることを前提にしています。写真やグラデーションの上に文字が直接載っている場合、背景側の色が1つに決まらないため、この手順はそのままでは成立しません。 その場合でも、塗りの上に載る文字と、その塗りの組は、塗りが平らであれば下の手順3・4で同じように測れます。一方、文字と背景の組（手順1・2・4）については、下地を平らな面に変えるか、テンプレートの選び直しに戻る判断になります——その判断の材料はテンプレートはどこで手に入り、どう選ぶかの選定基準にあります。平らな下地を持たない画像から出した合否を、そのまま自分の画像の判定として扱わないでください。
- 背景色を取る。 文字が載っているセルの、文字も装飾も無い平らな場所をスポイトで取ります。
- 文字色を取る。 文字の太い部分の中心を取ります。輪郭のぼやけた部分を取ると、実際より背景寄りの色になります。
- ボタン状の塗りの色を取る。 ボタンに見せた塗りがあるなら、その中の平らな場所を取ります。
- 3組のコントラスト比を出す。 文字と背景／塗りと、その周りの背景／塗りの上に載る文字と、塗り。2色の16進値をチェッカーに入れるだけです。この記事が次章で扱うのは、主にこの3組目です。 塗りの組を見るときは、Graphical Objects and User Interface Components の合否欄（3:1のほう）が該当します。
- 隣り合うセルの背景同士も、同じやり方で、隣接する組の分だけ並べて入れる。 1組だけでは、どこにいちばん大きな段差が付いているかが出ません。あとで「背景の明るさの差」を見るときに、各セルの相対輝度を自分で計算する必要はありません——隣り合う2つのセルの背景色をそのままチェッカーに入れれば、その2色のコントラスト比が、そのまま明るさの段差の値になります。 この記事があとで出す1.104:1・1.026:1という段差も、背景色2つの組み合わせをこの手順にかけたものです。
- ラベルの文字サイズを控える。 ここは測りません。制作ツール上で指定したフォントサイズ（canvas上のpx）をそのまま控えてください。 同じ画像の中の別のラベルの指定値も控え、大きさの順番を出します。順番が目的なので、絶対値の精度は要りません。必要なら、換算表に自分のWを入れて出した必要px（45000÷W／35000÷W）と、この指定値を比べます。この記事があとで出す55px・43pxといった自社試作の値は、指定値ではなく可視インクの高さを測ったものです。読者に同じ測定は求めません。
- 同じ役割のセルで、ラベル帯の上端・下端の位置を控える。 ここも色ではなく座標です。ラベルの文字帯を選択範囲で囲むか、ガイドを引いて、上端と下端のcanvas上のy座標（またはガイドからの距離）を読み、同じ役割のセルどうしで差を出します。 選択範囲の高さをピクセルで読めるソフトであれば実行できます。必要なのは差の値だけで、絶対座標の基準点はどこに取っても構いません（同じ基準で全セルを読むかぎり差は変わらないため）。この値は、あとのレビュー表の項目8で使います。
なお「配色は3色以内に」という言い方があります。本クラスタが2026年8月2日に観測した上位10件のうち、rank 6 が「配色は3色以内」、rank 2 が「色数を増やしすぎない」と同旨を記している、と同日の上流観測は記録しています（本記事は各記事の本文をこのパスで再訪していません）。それがこの範囲の外でどれくらい流通しているかは、この記事は数えていません。 この記事はこの言い方を否定も肯定もしません。色数は数えられますが、読めるかどうかは色数では決まらないためです。3色でも隣り合う2色の輝度が近ければ読めませんし、5色でも文字と背景の組が4.5:1を超えていれば読めます。色数を数える代わりに、上の3組のコントラスト比を測ってください。 判定できるのはそちらです。
原則を守っていても残る3つの失敗（自社試作3案の実測）
前章の手順で自分の画像を測ると、「原則は守れているのに、まだ何かがおかしい」という感覚の正体が、3つの型のどれかに落ちることがあります。以下はその3つで、いずれも「色数を抑える」「文字を大きく」「コントラストを十分に」を守っていても起こります。自分の下書きに当てながら読んでください。
3つの型は、私たちが自社で制作したリッチメニューの試作画像を実際に測って見つけたものです。この章で使うのは、choju というブランドのために作った3案（初回購入向け・再購入向け・商品理解と相談向け）です。いずれも記事用の試作であり、未公開で、成果は検証されていません。 これに加えて、そのうち1案の改稿前の版も残っており、そちらは後半の「余白と整列」の節で使います。 クリック数も売上も持っていないので、以下はすべて「画素を測ったらこうなっていた」という観察です。どの案が優れているかの話ではありません。
3案の構成だけ先に書いておきます。初回購入向けは左側の大きな1枠が主セルで、右側に補助セルが縦2つ。主セルの中にボタン状の塗り（アクションチップ）を1つ置いています。再購入向けは上段が横幅いっぱいの主セルで、下段に補助セルが3つ。主セルの中にやはりアクションチップを1つ。商品理解・相談向けは2×2の均等4セルで、アクションチップは持ちません。
文字は読めているのに、ボタンだけが見えていない
初回購入向けの案を測った結果です。
| 測った組 | 色 | コントラスト比 | 借用したしきい値 | 判定 |
|---|---|---|---|---|
| 主セルの見出しと、その背景 | rgb(36,36,35) と rgb(249,249,244) | 14.71:1 | 4.5:1 | 大きく上回る |
| 補助セルのラベルと、その背景 | rgb(44,44,43) と rgb(252,253,249) | 13.68:1 | 4.5:1 | 大きく上回る |
| アクションチップの塗りと、その周りの背景 | rgb(211,187,185) と rgb(249,249,244) | 1.72:1 | 3:1 | 下回る |
| チップの上に載る白い文字と、チップの塗り | rgb(253,253,252) と rgb(211,187,185) | 1.78:1 | 4.5:1 | 下回る |
（色の表記は、画像編集ソフトが返すのと同じRGB値です。これらの値は前章の冒頭に書いたとおり領域を自動処理して求めたもので、読者向けの手順とは同じ方法ではありません。 ただしコントラスト比は、同じ2色を無料のチェッカーに入れれば同じ数字が出ます。なお、この表の1.72:1と1.78:1は1回の測定ランで得た値です——別のランでの再現確認は経ていません。読み取ってほしいのは小数第2位までの値ではなく、しきい値に対する上下と、上2行との差のほうです。）
上2行と下2行が、同じ1枚の画像の中の値です。 文字については、しきい値の3倍前後の余裕があります。読めるかどうかを測るかぎり、この画像に文字の問題はありません。 ところが、押させたいボタンは、周囲の背景との差が1.72:1しかありません。 淡いピンクの面が、ほとんど白の背景の上に置かれている状態です。そしてその塗りに白い文字を載せているので、文字と塗りの差も1.78:1しかありません。
つまりこの案は、「文字が読めるか」だけを見ているかぎり合格で、「ボタンがボタンとして見えているか」を見ると不合格です。この2つは別の判定です。 本クラスタが2026年8月2日に観測した上位10件の範囲では（本文の評価は同日の上流観測に依拠しています。本記事はこのパスで各記事を再訪していません）、「コントラストを十分に取る」という助言は前者の話として書かれていました。前者を満たしても後者は残ります。
再購入向けの案でも、アクションチップの塗りは3:1を下回っていました。ただしこちらは塗りの上の文字が濃く、文字と塗りのコントラストは13.70:1あります（この値も1回の測定ランで得た値で、再現確認は経ていません。load-bearing なのは「チップの上の文字が読めている」という向きのほうです）。 同じ「チップが立っていない」でも、失敗の内訳が違います。なお、この案の塗りの具体値は、この記事では出しません。 同じ手法で測っても、塗りとして数える領域の取り方しだいで値が動いたためです。3:1を下回るという判定のほうは動きませんでした。動く桁を断定形で書かないのが誠実だと考えています。
商品理解・相談向けの案は、そもそもアクションチップを持ちません。チップが無いこと自体は失敗ではありません。 ただしその場合、「どのセルを押してほしいか」は塗り以外の手段で表すことになります。次の章の話につながります。
いちばん押させたい行動の文字が、他のラベルより小さい
同じ3案で、ラベルの可視インクの高さ（文字の黒い部分が縦に何ピクセルあるか）を測りました。
| 案 | 主セルの行動ラベル | 補助セルのラベル | 比 |
|---|---|---|---|
| 初回購入向け | 55px | 70px / 70px | 0.79 |
| 再購入向け | 43px | 72px / 73px | 0.59 |
再購入向けの補助セルは3つありますが、上の表に載せたのは左と右の2つです。比較は同一字種のペアに限ると決めているため、測定の対象を左右の2つに絞りました（理由はこの節の最後に書きます）。中央のセルについては、ラベルの文言も字種も測定記録を持っていません。
読み取れるのは比です。初回購入向けは0.79倍、再購入向けは0.59倍で、押させたいラベルのほうが小さい。前章の換算表にWを仮に390と置いて当てると、初回購入向けの行動ラベルはおよそ8.6ポイント、補助セルのラベルはおよそ10.9ポイント、再購入向けは6.7ポイント対11.2ポイントになります。この390という値は、この記事が出典を持たない仮置きです（端末別の画面幅の一次情報を確保できていません）。したがってこれらのポイント値も仮置きの計算例であって、特定の端末での見え方ではありません。 そのうえで、いずれも可視インクの高さから換算した下限としての値であり、実際のフォントサイズはこれより大きくなります。
2案とも、いちばん押させたいラベルが、押させたい優先度の低いラベルより小さい状態でした。 どちらの案も主セルの「見出し」は大きく（初回購入向け109px、再購入向け95px）、パッと見の主役ははっきりしています。小さかったのは見出しではなく、その下で行き先を名指ししているラベルのほうです。
これは「主セルを大きく」という助言では検出できません。主セルは実際に大きいからです。 検出するには、主セルの中の「行動を名指ししている文字列」を取り出して、補助セルの同じ役割の文字列と並べて測る必要があります。並べて初めて、順番が逆になっていることが分かります。
測るときの制約を2つ書いておきます。1つは、比較できるのは同じ字種のペアだけだということ。 上の表で使ったのは「7包を試す」対「商品のことを知る」「よくある質問」、および「30包をもう一度」対「飲み方ガイド」「よくある質問」で、いずれも漢字・かな・数字だけの組み合わせです。ラテン文字を含むラベルは、pやjのように基準線の下へ伸びる字があるため可視インクの高さが大きく出ます。実際、商品理解・相談向けの案の「chojuについて」は89pxと測れましたが、これは同じ画像の他のラベル（68〜78px）と直接比べられません。2つ目は、前章のとおり測っているのがフォントサイズではないこと。 順番と比だけが根拠として使えます。
背景の明るさの差がいちばん大きい場所が、主セル（いちばん押させたい1つ）の隣にない
3つ目は背景の明るさです。ここで測るのは、WCAGのコントラスト比を出すのと同じ「相対輝度」です。読者側では、この相対輝度を自分で計算する必要はありません——隣り合う2つのセルの背景色をコントラストチェッカーに入れれば、返ってくる比がそのまま明るさの段差になります（コントラスト比は2色の相対輝度から一意に決まるためです）。以下は自社試作を測った結果で、再購入向けの案の4つの領域の背景色です。
| 領域 | 背景色 | 相対輝度 |
|---|---|---|
| 上段（主セル） | rgb(247,246,241) | 0.9204 |
| 下段・左 | rgb(249,249,246) | 0.9454 |
| 下段・中央 | rgb(244,236,234) | 0.8516 |
| 下段・右 | rgb(249,249,246) | 0.9454 |
隣り合う領域の輝度比を出すと、いちばん大きな段差は下段左と下段中央のあいだ（1.104:1）にあり、主セルと、それに隣接する下段左のあいだの段差は1.026:1にとどまります。 つまり、この画像で背景の明るさの差がいちばん強く効いているのは補助セル同士の境目です。ひとつだけ色を変えた補助セルが、主セルより先に目に入る作りになっていました。
これも観察であって、設計意図を推し量ったものではありません。「補助セルに色を付けてはいけない」という話でもありません。 言えるのは、背景の明るさの差という手段は実際に強く効くので、どこに使ったかを測って確認する価値がある、ということです。
商品理解・相談向けの案は逆でした。4セルとも背景が rgb(251,248,245)（相対輝度0.9424）で完全に同一です。均等な2×2レイアウトで、背景は差別化にまったく寄与していません。4つを同格に見せたいならこれは正しい状態ですが、この案でどれか1つを押させたいなら、背景以外の手段を使う必要があります。
押させたいセル（ボタンに見せたい部分）を目立たせる手段
手段は5つ、この記事で測り方を渡せるのは4つ
見え方を動かせる手段は5つです。ただしこの記事が測り方まで渡せるのは、そのうち4つです。 残る1つ（面積）はどの分割を選ぶかで決まるため、別の記事の担当になります。また、数字で裏づけられるのは「比として測れるもの」だけです。「主セルは補助セルの何倍にすべきか」という規範値は出しません。3案・4画像の測定から規範値を導くことはできないためです。
| 手段 | 測り方 | この記事が裏づけられること | 裏づけられないこと |
|---|---|---|---|
| 面積 | セルの縦横のピクセル数 | — （どの分割を選ぶかで決まるためサイズの記事の担当） | 何倍にすべきか |
| 背景の明るさの差 | 隣り合う2セルの背景色をコントラストチェッカーに入れ、返る比を並べる（相対輝度を自分で出す必要はない） | 最大の段差がどこに付いているかは測れば分かる。3案のうち1案では主セル以外に付いていた | どれだけ差を付けると押されるか |
| 文字サイズ | 読者は制作ツール上で指定したフォントサイズ（px）を並べる（自社試作は可視インクの高さで測っており、同一字種のペアに限って比較した） | 主セルの行動ラベルと補助セルのラベルの大小関係は測れる。2案で逆転していた | 何ポイントにすべきか |
| 塗りのコントラスト | 塗りと周囲の背景／塗りと、その上の文字 | 借用したしきい値（3:1 / 4.5:1）に対する合否は測れる。2案で塗りが下回っていた | 合格すればボタンとして機能するか |
| 余白と整列 | 同じ役割のセルで、文字帯の上端・下端の位置を比べる（測る手順7＝選択範囲またはガイドで座標を読む） | ずれのピクセル数は測れる | 何px空けるべきか |
このうち「余白と整列」と、その前提になる「同じ役割のセルをそろえる」は、測り方が他と違うので、続く2つの見出しで分けて扱います。
順番の付け方はこうです。 上の表で「合否が出る」のは塗りのコントラストだけです。次に「大小関係の逆転」という形で明確な不整合が出るのが文字サイズ。背景の明るさの差と余白は、測れば状態は分かるものの、そこから直ちに不合格とは言えません。したがって、下書きを直すときは合否が出るものから順に潰すのが効率的です。 具体的な順番は最後のレビュー表でもう一度示します。
配置について1つ補足します。「リッチメニューの右側や下側はタップされやすい」という言い方があります。この言い方は、本記事の前身にあたる前回ランの記録に、出典・数値の辿れない実務的推奨として残っていたものです。 それがどれくらい流通しているかを、この記事は数えていません。 この記事はこれを断定として扱いません。 出典と数値を確認できていないためです。セル別のクリック数を取れるようになったときに検証する仮説として置いておくのが妥当だと考えています。この記事が渡している判定は、どれも「表示された画像を見て読み取れるか」の範囲にあり、押されやすさそのものは扱えません。
同じ役割のセルは、同じ形に揃える
同じ役割のセルで、ラベルの位置・大きさ・余白の取り方を揃えると、揃っていないセルが目立つようになります。 差を作るのが目的なので、まず「差ではないところ」を消すという考え方です。
商品理解・相談向けの案の最終版を測ると、こうなっていました。
- 下段2セルのラベル帯の下端の差：0px
- 下段2セルのサブ説明文の帯の上端の差：0px
- 上段2セルのサブ説明文の帯の上端の差：1px
2,500px幅の画像で0〜1pxですから、実質的に完全に揃っています。上段のラベル帯の下端だけは13px差がありますが、これは左のラベル「chojuについて」がラテン小文字のディセンダを含むための差で、整列の乱れではありません。字種の違いを整列の乱れと読み違えないことが、この測り方の唯一のコツです。
余白と整列：直す前と後を測る
同じ案には、改稿前の版が残っています。同じ設計者が同じ目的で作り直した2つの版があるので、何がどれだけ動いたかを測れます。
| 測定項目 | 改稿前 | 最終版 |
|---|---|---|
| 上段2セルのラベル帯の下端の差 | 49px | 13px（ディセンダによる差） |
| 上段2セルのサブ説明文の帯の上端の差 | 64px | 1px |
| 下段2セルのラベル帯の下端の差 | 0px | 0px |
| サブ説明文の文字コントラスト | 5.48:1 | 11.90:1 |
読み取れることを3つ書きます。
1つ目。直っているのは上段だけです。 下段は改稿前の時点ですでに揃っていました。「全体を整列し直した」という説明は、測ると成り立ちません。
2つ目。整列以外も動いています。 サブ説明文の文字が rgb(100,100,98) から rgb(52,51,51) へ濃くなり、コントラストが5.48:1から11.90:1へ上がっています。どちらも4.5:1は超えているので、これは不合格の修正ではなく、濃さの選び直しです。
3つ目。だからこの2つの版は、対照実験になっていません。 「整列を直したら良くなった」とは言えません。言えるのは、直したつもりの箇所以外も動いていたことが、測ったから分かった、ということです。 自分の下書きを改稿するときも同じで、改稿前後を測っておくと「何を変えたつもりか」と「実際に何が変わったか」の差が見えます。
公開前デザインレビュー表（9項目）
自分の下書きに1項目ずつ当てるための表です。空欄の表を渡すと使い方が伝わらないので、右端に自社試作3案を実際に当てた結果を入れてあります。 3案とも記事用の試作・未公開・成果未検証です。
| 確認すること | 確認方法 | 判定基準 | 自社試作3案での実測判定 |
|---|---|---|---|
| 1. セル数と項目数 | セル数を数え、掲載項目リストと突き合わせる | 一致していること（本記事の前提。公式の禁止ではない） | 3案とも一致（初回購入向け3セル／再購入向け4セル／商品理解・相談向け4セル） |
| 2. アクションラベル | 各セルのラベル案を数える | 20文字以内で、押した先で何が起きるか分かること | 未判定。 アクションラベルは管理画面に入力する別項目であり、画像を測っても分かりません。3案は未公開の試作で、入力値そのものを持っていません |
| 3. 本文の文字と背景 | スポイトで文字色と背景色を取り、WebAIM Contrast Checker（2026-08-03確認）に入れて Normal Text の欄を見る。文字が写真やグラデーションの上に直接載っている場合は、背景色が1つに決まらないためこの項目は判定できません（測る手順の冒頭に書いた条件） | 4.5:1以上 | 11.77:1〜19.07:1。3案とも上回る |
| 4. ボタン状の塗りと、周囲の背景 | 塗りの平らな部分と、周囲の背景を取り、同じチェッカーに入れて Graphical Objects and User Interface Components の欄を見る | 3:1以上 | 初回購入向け1.72:1で下回る。再購入向けも下回る（具体値は測定パスごとに揺れるため出しません）。商品理解・相談向けは塗りを持たないため該当なし |
| 5. 塗りの上の文字と、塗り | 文字の太い部分と、塗りを取り、同じチェッカーの Normal Text の欄を見る | 4.5:1以上 | 初回購入向け1.78:1で下回る。再購入向けは13.70:1で上回る（どちらも1ランの測定） |
| （項目3〜5に共通） | 右端の列と、あなたの判定結果は同じ手順の再現ではありません。 自社試作の値は領域の代表色をプログラムで求めたもの、読者の値は画面上の1点をスポイトで拾ったものです。境界の近くでは取り方の差で合否が動きえます | — | — |
| 6. 行動ラベルの大小関係 | 制作ツール上で指定したフォントサイズ（px）を、同じ役割のラベル同士で比べる | 主セルの行動ラベルが、補助セルのラベルより小さくないこと | 初回購入向け55px対70px、再購入向け43px対72px（自社側は可視インクの高さを同一字種のペアで比較）。2案とも逆転している |
| 7. 背景の明るさの差の付き場所 | 隣り合う2つのセルの背景色を、そのままコントラストチェッカーに入れる。返る比がそのまま段差の値です（相対輝度を自分で計算する必要はありません）。これを隣接する組の分だけ並べる | 最大の段差がどこに付いているかを把握し、それが意図した場所かを確認できること（「主セルの隣でなければ不合格」という基準は本記事では出しません） | 再購入向けは最大段差1.104:1が補助セル同士、主セル隣接は1.026:1。主セル以外に付いている。商品理解・相談向けは4セル同一で段差なし |
| 8. 同じ役割のセルの文法 | 同じ役割のセルで、文字帯の上端・下端の位置を比べる（測る手順7——選択範囲またはガイドで上端・下端のy座標を読み、セル間の差を出す。同じ基準で全セルを読むかぎり基準点はどこでも構いません） | ずれが出たら、それが意図した差かを確認できること（何px以内という基準は本記事では出しません） | 商品理解・相談向けの最終版は下段0px・上段サブ1px。改稿前は上段が49px／64pxずれていた |
| 9. 実機ポイントへの当たり | 換算表に自分の端末のWを入れて必要なcanvas px（45000÷W／35000÷W）を出し、制作ツールで指定した文字サイズと比べる。Wが分からない場合、この項目の合否は出せません（出せるのは項目6の大小関係まで） | Wを入れて出した必要pxに届かないなら、3:1の緩和は使わず4.5:1で見る | Wを仮に390と置いた計算例として、本文で比較に使った同一字種のラベルは6.7〜12.2ポイント相当（可視インクからの下限）。この390は出典を持たない仮置きです。 緩和は使えない前提で3〜5行を判定した |
表の使い方と、直す順番
9項目を上から順に埋める必要はありません。合否がはっきり出るものから潰します。
- 項目3・4・5（コントラスト）を先に測る。 しきい値との比較で合否が決まるため、直すべきかどうかで迷いません。とくに項目4と5は、目で見ているかぎり気づけない層です。
- 項目6（行動ラベルの大小関係）を測る。 逆転していれば不整合として明確です。逆転していなければ、そこは触りません。
- 項目7（背景の明るさの差の付き場所）を見る。 ここから先は合否ではなく、意図と実際のずれを確認する作業になります。
- 項目8（セルの文法）と余白を揃える。 差を付けたい場所以外の差を消す工程です。
- 項目1・2（セル数とラベル）は、そもそもテンプレート選びの段階で確定しているはずのものです。ここで引っかかった場合、直すのは画像ではなくテンプレートの選び直しになります。
下回っていた項目について、何を動かすと数字が動くかも書いておきます。どれも「動かす先」であって、「こう直せば良くなる」という規範ではありません。
| 下回っていた項目 | 数字を動かせるもの |
|---|---|
| 項目4（塗りと背景） | 塗りの明るさを背景から離す／塗りをやめて枠線や下線に置き換える／背景側の明るさを動かす |
| 項目5（塗りの上の文字） | 文字の明るさを塗りから離す。白抜きにするなら、塗りを十分に濃くしないと成立しません |
| 項目6（行動ラベルの大小関係） | 主セルの行動ラベルを大きくする／補助セルのラベルを小さくする。どちらでも順番は入れ替わります |
| 項目7（背景の明るさの差） | 補助セルに付いている差を弱めるか、同じ差を主セル側へ移す |
| 項目8（セルの文法） | 同じ役割のセルで、文字帯の上端・下端をそろえる |
改稿したら、改稿前後の両方を測って残してください。 前章のとおり、「直したつもりの箇所」と「実際に動いた箇所」は一致しないことがあります。
この表が判定しないこと
はっきり書いておきます。この表は成果を判定しません。
判定できるのは、リードで挙げた3つ——「読めるか」「見分けられるか」「揃っているか」——までです。そしてリードで判定対象外だと書いた部分——配色の趣味、写真やイラストの質、ブランドの世界観——は、この表を全部埋めても判定できないままです。 「安っぽい」と言われた原因がそちら側にあった場合、この記事は答えを返せていません。返せたのは、測れる3つについてだけです。押されるかどうか、押した先で何が起きたかも、この表の外側にあります。 それを見るには、公開後にセル別のクリック数と、遷移先での行動を取る必要があります。この記事はそのデータを持っていないので、「この配置が効く」「この色にすると反応が良くなる」とは書いていませんし、書けません。
順番としては、この表で「読めない・見分けられない」を先に潰しておくと、公開後の数値を見るときに変数が減ります。 読めていない画像のクリック数を見ても、デザインの良し悪しを判断できないためです。公開後に何の数値が見られるか、どんな条件でその数値が出ないかはリッチメニューの作り方と、作る前に決める3つのことで扱っています。
ツールが違っても、確認する項目は変わらない
判定するのは画像であって、ツールではない
いま通した9項目は、どのツールで画像を作っても同じように当てられます。見え方の判断基準——文字と背景のコントラスト、主セルと補助セルの差、余白の取り方——は、1枚の画像として端末に表示される以上、画像そのものに対して判定されるためです。この記事はツール固有の操作手順を扱いません。 ツールが独自のテンプレートや編集機能を提供している場合、その使い方は各ツールの公式ヘルプを参照してください。
この記事に出てくる測り方も同じです。スポイトで色を取れて、選択範囲の高さをピクセルで読めるソフトであれば、どれでも実行できます。測る対象は画像であって、ツールではありません。
ツールを乗り換えたら、何を測り直すか
作成ツールを乗り換えたときに、この記事の内容がどこまでそのまま使えるかを整理しておきます。
| 項目 | ツールを変えても持ち越せるか |
|---|---|
| 本文で使った測り方（コントラスト比・可視インクの高さ・背景の輝度差） | 持ち越せる。測る対象は書き出された画像なので、作った道具に依存しない |
| 前章の公開前レビュー表の9項目 | 持ち越せる。同じ手順で同じ数字が出る |
| セル数と、20文字のアクションラベル | 持ち越せる。LINE側の制約であってツールの制約ではない |
| 有料と無料の線 | 持ち越せない。 入手先ごとに違う場所に引かれているので、乗り換えるたびに確認し直すことになる |
| テンプレートの編集手順・書き出し設定 | 持ち越せない。 各ツールの公式ヘルプで確認してください |
差し替えるたびに、この9項目をどう通し続けるか
判定基準が手に入ると、次に来るのは「毎回これを満たす画像をどう用意するか」という運用の問題です。リッチメニューはトーク画面に常に出ているぶん、季節やキャンペーンに合わせて差し替える運用になりやすく、そのたびに今回の9項目を通すことになります。
制作の工数そのものを下げる話は、設計書と画像をAIでどこまで作れるかで扱っています。 この記事との境界をはっきりさせておくと、あちらは作る工程の手間を減らすための記事、この記事は出来上がったものを人の手で判定するための記事です。生成の段階でAIを使うかどうかにかかわらず、公開前の判定は今回のレビュー表で行うことになります。逆に、この記事はAIに画像を見せて良し悪しを述べさせる方法を勧めません。コントラスト比は目視では出せないので、それをすると本記事が置き換えようとした「感覚での判断」に戻ります。
決まらなかったことは、次の記事で決められます。
| 決めたいこと | 読む記事 |
|---|---|
| 画像の実寸・容量・ファイル形式・分割パターンを決める | リッチメニューの画像サイズと分割の決め方 |
| 何を載せるか、各セルの行き先をどこにするかを決める | リッチメニューの作り方と、作る前に決める3つのこと |
| 何タブに分け、どのタブに何を置き、どう切り替えさせるかを決める | リッチメニューの出し分けとタブ切り替え |
| 設計書と画像の制作にかかる手間を下げる | 設計書と画像をAIでどこまで作れるか |
測れた範囲の外側を、最後にもう一度はっきりさせておきます。ここに書いた数値は、LINEの公式マニュアル・公式ドキュメントとW3Cの基準を2026年8月2日時点で読み解いた範囲と、自社の試作画像4点を画素の単位で測った結果です。判定の根拠として使っているのはこの2つだけで、文中で触れた競合記事の傾向や前回ランの記録は、位置づけの説明として参照したものであり、判定の根拠には含めていません。 試作は記事用の試作で、未公開、成果は検証されていません。表示回数・クリック数・売上のデータは1件も持っていません。実機（複数機種）で実際に見て確かめる検証も行っていないため、ポイントへの換算は算術上の目安です。測った結果として書けることと、測っていないので書けないことは、本文でも分けて書いたつもりです。 借用したしきい値はWebコンテンツ向けの国際基準であり、LINEがリッチメニューに課している要件ではありません。