料金表が読めない——価格テーブルの設計

結論

プロは価格テーブルを「読みやすさ（行高48px・1px薄罫線・等幅数字の右揃え・3〜10%ゼブラ）」と「選びやすさ（3〜4プラン構成で中段を1つだけ複合的に強調）」の2軸で設計する。鍵は、全列を色で塗る「クリスマスツリー化」を避け、周囲を中立色（白＋薄グレー罫線＋ダークテキスト）のアンカーに保ったまま、推奨列だけを badge＋色付きボーダー＋ブランド色CTA＋わずかな影と拡大で前面に浮かせること。CTAは全列同一文言にし、誘導は「色相」ではなく「CTAと背景のコントラスト」で効かせる。

01 — 推奨は1列だけ。全列を塗る「クリスマスツリー化」を避ける

列ごとに違う背景色・装飾を付けると、視覚ノイズだけが増えてどれが推奨なのか分からなくなる。Nick Babich の言葉を借りれば、それは「意思決定を助けるツールというよりクリスマスツリー」だ。強調は必ず1列だけにし、他の列は白＋薄グレー罫線＋ダークテキストの中立アンカーに保つ。推奨列の強調は単一手段に頼らず、淡い背景tint・色付きボーダー・drop shadow（奥行きで前面化）・わずかな拡大（scale 1.04〜1.06）・badge・目立つCTAを 複合 させるのがプロの手口。色相そのものより、CTAと地のコントラストが効く。

blogBest Practices for Pricing Table Design — Nick Babich, UX Planet

blogHow Does Anchoring Psychology Shape Customer Decisions — Monetizely

02 — 数値は等幅＋右揃え。桁が揃わなければ「読めない表」

価格や数量を左揃え・プロポーショナルフォントで縦に並べると、桁位置がバラついて金額の大小が一瞬で比較できない。価格列は小数点で右揃えし、font-variant-numeric: tabular-nums（"tnum" 1）で桁幅を固定する。これだけで縦の桁比較が成立する。価格は太字ダーク、単位やラベルは小さく薄いグレーにしてメリハリを付ける。テキスト列は西欧読み順で左揃えが原則。

primaryPencil and Paper — Enterprise Data Tables

03 — 罫線は1px薄グレーまで。区切りはゼブラと余白で

太く濃い罫線で全セルを囲う「グリッド地獄」は、罫線が本文と視覚的に競合して安っぽく古臭く見える。区切り線は 1px・ライトグレー（#e5e7eb）が上限、縦罫線は付けない。行を区切りたいなら罫線を増やすのではなく、3〜10%グレーのゼブラストライプ（推奨初期値4%）か余白で。行数が多い表ではゼブラが横方向の視線誘導に効き、hover時に行全体を light yellow（#fffbeb）でハイライトすると「グリッド迷子」を防げる。疎な表なら縞より余白（Tufte流）が上品だ。

blogMindK — Data Table Design Tips（ゼブラ3〜10%）

primaryPencil and Paper — Enterprise Data Tables（行高40/48/56px・1px薄罫線）

04 — 機能差はテキストでなく数値・チェック・取り消し線で

機能差をびっしりテキストで書くと、読む量が多くて差分が伝わらない。差分は数値（5 users）と boolean（✓=Yes / —=No）に置き換え、利用不可の機能は取り消し線で示す。上位プランでは「unlimited」を強調する。価格・主要数値は太字ダーク、ラベルは小さく薄く。これで各行が一目でスキャンできるようになる。

blogBest Practices for Pricing Table Design — Nick Babich, UX Planet

05 — 端数を落として知覚コストを下げる

比較表に $10.99 や ¥1,980 の端数をそのまま並べると、桁が増えて知覚コストが上がり「高い」と感じさせる。比較の文脈ではセント（端数）を落として $10 のように見せると、視覚的負荷と価格知覚を同時に下げられる。ただし日本では税込表示義務など地域の価格表示法規があるため、端数除去の可否は要確認。あくまで「比較を軽くする」目的のチューニングだと割り切る。

blog7 Design Strategies for a Successful Pricing Table — UX Movement

06 — モバイルは横スクロール禁止。カード縦積みに切り替える

狭い画面で表を横スクロールさせるのは「遅く・面倒で・疲れる」操作で、比較中に列を見失う。モバイルでは display:block で各 td をブロック化し、thead を隠してカードの縦積みに切り替える。td に data-label を持たせ、::before で「ラベル：値」の2カラム表示にすれば、見出し行なしでも何の値か分かる。BPはプロジェクト方針の1080px1点で統一。長い表ではデスクトップ側で sticky header を併用する。

blogDesigning A Perfect Pricing Plan Page — Smashing Magazine

07 — 3〜4プラン・高→低の並びで「選びやすさ」を作る

プランを5つ以上並べると選択肢過多で決定麻痺を招く。定石は3〜4プラン。中段に「Most Popular」を置くと、ユーザーは高すぎず安すぎない中間を選ぶ傾向（compromise effect、中段選択は集計で約65%）に乗れる。さらに最も高いプランを最初（左）に置いて高値アンカーを提示すると、下位が割安に見える。decoy/center-stage効果は3〜4プランで最大化し、Ariely の the Economist 実験では decoy 追加で premium 選択が16%→84%へ跳ねた。ただし、おとりの乱用は誤認を招くダークパターンと紙一重。透明性とブランド信頼を最優先に。

blog7 Design Strategies for a Successful Pricing Table — UX Movement

blogThe decoy effect — The Conversation

実装スニペット

/* 等幅数字＋右揃えの価格セル（桁を揃える） */
.price-table td.num{
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.price-table .amount{
  font-weight: 700;
  color: #1a1a1a;
  letter-spacing: -0.01em;
}
.price-table .label{ text-align: left; color: #6b7280; font-size: 0.875rem; }

/* 行高3段階・1px薄罫線・ゼブラ3〜10% */
.price-table{ border-collapse: collapse; width: 100%; }
.price-table th,.price-table td{
  height: 48px;            /* Regular。密:40px / ゆったり:56px */
  padding: 0 16px;
  border-bottom: 1px solid #e5e7eb; /* 1px light grey、縦罫線は付けない */
  vertical-align: middle;  /* 〜3行まで中央。4行超は top */
}
.price-table tbody tr:nth-child(even){ background: rgba(0,0,0,0.04); } /* 4%グレー */
.price-table tbody tr:hover{ background: #fffbeb; }  /* light yellow hover */

/* 推奨カードだけを浮かせる（クリスマスツリー回避） */
:root{ --brand:#2563eb; --neutral-bd:#e5e7eb; }
.plan{ background:#fff; border:1px solid var(--neutral-bd); border-radius:12px; padding:24px; }
.plan--featured{
  border:2px solid var(--brand);
  background:#f5f8ff;                 /* ごく淡いtint */
  box-shadow:0 12px 28px rgba(37,99,235,.18); /* 奥行きで前面化 */
  transform:scale(1.04);             /* わずかに拡大 */
  position:relative; z-index:1;
}
.plan--featured .badge{
  position:absolute; top:-12px; left:50%; transform:translateX(-50%);
  background:var(--brand); color:#fff; font-size:12px; font-weight:600;
  padding:4px 12px; border-radius:999px;
}

/* モバイルは横スクロール禁止 → カード縦積み（BP1080px1点） */
@media (max-width: 1080px){
  .price-table, .price-table thead, .price-table tbody,
  .price-table tr, .price-table th, .price-table td{ display:block; width:100%; }
  .price-table thead{ display:none; }      /* 横スクロールさせない */
  .price-table tr{ border:1px solid #e5e7eb; border-radius:12px; margin-bottom:16px; }
  .price-table td{ display:flex; justify-content:space-between; height:auto; min-height:48px; border:0; border-bottom:1px solid #f0f0f0; }
  .price-table td::before{ content:attr(data-label); color:#6b7280; font-size:.875rem; }
}

チェックリスト

• プランは3〜4個に絞った（5つ以上は決定麻痺）
• 強調は中段の1列だけ。他列は白＋薄グレー罫線＋ダークテキストの中立に保った
• 推奨列は badge＋色付きボーダー＋drop shadow＋scale1.04＋ブランド色CTA を複合させた
• 全列のCTAは同一文言（例: Choose Plan）。推奨列だけ視覚的に強い
• 価格・数値列は小数点で右揃え＋`tabular-nums`で桁幅固定した
• 罫線は1px薄グレーのみ。縦罫線なし、太い濃罫線で全セルを囲っていない
• 行区切りはゼブラ3〜10%（初期値4%）か余白で。行高は48px基準
• 機能差は数値・✓/—・取り消し線で表現し、テキスト説明を最小化した
• 比較表の価格は端数を落とした（日本の税込表示など法規は確認済み）
• モバイルは横スクロールさせず、カード縦積み＋`data-label`に切り替えた（BP1080px）
• 誘導は色相ではなくCTAと背景のコントラストで。色だけに依存せずbadge/ボーダー/サイズも併用（色覚多様性対応）
• おとり・アンカリングが誤認を招く構成になっていない（ダークパターン回避）

限界 / 出典

数値系のlift（+56% Optimizely / 強調なしで-22% / 中段選択+30〜40% / the Economist +43% / Stanford参照価格+40%）は二次CRO・マーケブログで繰り返し引用される値で、査読論文ではない。方向性の参考に留め、必ず自社のA/Bテストで検証すること。比較的堅い根拠は Ariely の decoy 分割（premium 84/16）と Williams-Sonoma 事例（$429追加で$275モデルが約2倍）のみ。具体的なpx/hexはほぼ Pencil&Paper（40/48/56px・1px薄グレー）と MindK（ゼブラ3〜10%）由来で、背景tint・影・scale=1.04・badge色などの実装値は本ブリーフでの推奨初期値であり要調整。anchoring/decoy の活用は誤認を誘うとダークパターン化しうるため、透明性とブランド信頼を優先すること。端数除去は地域の価格表示法規（日本の税込表示義務など）で可否が変わる。一次CRO複数（leadsuitenow, getmonetizely, netsuite, visionarygrid）は403/取得制限があり、アクセス可能な二次ソースに依存している点に留意。BP1080px1点はユーザーのプロジェクト方針に合わせた値で、一般原則ではない。

blogBest Practices for Pricing Table Design — Nick Babich, UX Planet

blogDesigning A Perfect Pricing Plan Page — Smashing Magazine

blog7 Design Strategies for a Successful Pricing Table — UX Movement

blogComprehensive Guide To Designing Comparison Tables & Pricing Pages — Onextrapixel

primaryPencil and Paper — Enterprise Data Tables

blogMindK — Data Table Design Tips

blogLogRocket — Data Table Design Best Practices

blogThe decoy effect — The Conversation

blogHow Williams-Sonoma Inadvertently Sold More Bread Machines — Farnam Street

blogHow Does Anchoring Psychology Shape Customer Decisions — Monetizely

blogHow to use psychological anchoring in your pricing strategy — Visionary Grid