Styledex

デザインの様式を、動くデモ・効く理由・実装で踏んだ罠つきで解剖する図鑑。

価格表（3プラン・推奨強調）

様式名: フラットデザイン / 価格表

価格表プラン比較強調アクセシビリティ
⧉ 別タブで開く

「壊れた例」を押すと、この様式が成立しなくなる条件を実物で見られます。

特徴 — なぜ効くか

  • 3プランを横並びにし、真ん中の推奨プランを強調する定番構成。意思決定を助ける部位
  • 推奨は『色・バッジ・枠・少し大きく』の複数手段で示す。色だけに頼らない
  • 機能の有無は ✓／− のアイコン形状＋文字で示す。色ドットだけにしない
  • 価格は大きく、単位（/月）は小さく。桁区切りを入れて即座に比較できるようにする
  • 見た目より『どれを選べばいいか』が迷わず伝わることが価値になる部位

実装メモ — 踏んだ罠

  • 推奨プランは複数の手がかりを重ねる：背景色の反転＋『おすすめ』バッジ＋枠＋transform:scale(1.03)。1つでも欠くと、色が見えない人や急いで見る人に伝わらない
  • 機能リストは ✓（有効）と −（無効）のアイコンを形で分け、文字ラベルも添える。緑○赤×の色分けだけにしない
  • 価格は font-size を大きく、単位は small で落とす。桁区切り（¥1,280）を入れる
  • CTA は全プランに置く。推奨だけボタン、他はゴースト（枠）にして階層を付けるが、他プランのボタンも押せると分かる形にする
  • 【自分で実測した数値】白カードで見出し #111827 17.74:1／本文 #374151 10.31:1／サブ #6b7280 4.83:1。推奨の紺カード #1e3a8a で白文字 10.36:1／サブ #c7d2fe 6.94:1。全て AA を通す
  • タップ領域は CTA に min-height:44px（WCAG 2.5.8）。SPでは1カラムに落とし、推奨の scale は外す（拡大したまま縦積みすると崩れる）

使いどころ / 使ってはいけない場面

壊れる条件

コントラスト実測

対象文字色背景実効背景比判定
見出し・プラン名（白カード）#111827#ffffff#ffffff17.74:1AA 合格
機能テキスト（白カード）#374151#ffffff#ffffff10.31:1AA 合格
推奨カード 白文字（紺地）#ffffff#1e3a8a#1e3a8a10.36:1AA 合格
推奨カード サブ文字（紺地）#c7d2fe#1e3a8a#1e3a8a6.94:1AA 合格
サブテキスト（白カード）#6b7280#ffffff#ffffff4.83:1AA 合格（余裕なし）

アクセシビリティ

スマホへの落とし方

ブラウザ対応

関連するパーツ

コードを見る 
<!doctype html>
<html lang="ja"><head><meta charset="utf-8"><title>価格表（3プラン）デモ</title><style>
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --ink:#111827; --body:#374151; --sub:#6b7280;
  --accent:#1e3a8a; --accent-sub:#c7d2fe; --line:#e5e7eb; --ok:#15803d;
}
body{background:#f7f8fa;color:var(--ink);min-height:340px;padding:26px 24px;
  font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif}
.head{text-align:center;margin-bottom:18px}
.head h3{font-size:18px;font-weight:700}
.head p{font-size:12px;color:var(--sub);margin-top:2px}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start}
.plan{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 18px;position:relative}
/* 推奨は「色・バッジ・枠・少し大きく」の複数手段で強調する。色だけに頼らない */
.plan.rec{background:var(--accent);color:#fff;border-color:var(--accent);
  transform:scale(1.03);box-shadow:0 10px 30px rgba(30,58,138,.25)}
.badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:#fff;
  color:var(--accent);border:2px solid var(--accent);font-size:10px;font-weight:800;
  letter-spacing:.08em;padding:3px 12px;border-radius:999px}
.name{font-size:13px;font-weight:700;letter-spacing:.04em}
.plan.rec .name{color:#fff}
.price{margin:8px 0 4px;font-size:30px;font-weight:800;letter-spacing:-.02em}
.price small{font-size:12px;font-weight:600;color:var(--sub)}
.plan.rec .price small{color:var(--accent-sub)}
.tagline{font-size:12px;color:var(--body);line-height:1.7;min-height:34px}
.plan.rec .tagline{color:var(--accent-sub)}
ul{list-style:none;margin:14px 0;border-top:1px solid var(--line);padding-top:14px}
.plan.rec ul{border-top-color:rgba(255,255,255,.25)}
li{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.6;margin-bottom:9px;color:var(--body)}
.plan.rec li{color:#fff}
/* 機能の有無は色だけにしない：✓／− のアイコン形状＋文字で示す */
li .ic{width:15px;height:15px;flex:none;margin-top:1px}
li.off{color:var(--sub)}
.plan.rec li.off{color:var(--accent-sub)}
li.off .ic{color:var(--sub)}
.cta{display:block;text-align:center;margin-top:6px;font-size:13px;font-weight:700;
  padding:11px;border-radius:9px;text-decoration:none;min-height:44px}
.cta.solid{background:var(--accent);color:#fff}
.cta.ghost{border:1.5px solid var(--accent);color:var(--accent)}
.plan.rec .cta{background:#fff;color:var(--accent)}
.cta:focus-visible{outline:3px solid #fff;outline-offset:2px}
.plan:not(.rec) .cta:focus-visible{outline-color:var(--accent)}
@media(max-width:640px){.grid{grid-template-columns:1fr}.plan.rec{transform:none}}
</style></head><body>
<div class="head"><h3>料金プラン</h3><p>いつでも変更・解約できます</p></div>
<div class="grid">
  <div class="plan">
    <div class="name">STARTER</div>
    <div class="price">¥0<small> /月</small></div>
    <p class="tagline">個人の練習・お試しに。</p>
    <ul>
      <li><svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="M6.5 11.5 3 8l1-1 2.5 2.5L12 4l1 1z"/></svg>プロジェクト 3件</li>
      <li><svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="M6.5 11.5 3 8l1-1 2.5 2.5L12 4l1 1z"/></svg>基本エクスポート</li>
      <li class="off"><svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><rect x="3" y="7.2" width="10" height="1.6" fill="currentColor"/></svg><span>チーム共有 なし</span></li>
    </ul>
    <a class="cta ghost" href="#">無料で始める</a>
  </div>
  <div class="plan rec">
    <div class="badge">おすすめ</div>
    <div class="name">PRO</div>
    <div class="price">¥1,280<small> /月</small></div>
    <p class="tagline">仕事で使うならこれ。</p>
    <ul>
      <li><svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="M6.5 11.5 3 8l1-1 2.5 2.5L12 4l1 1z"/></svg>プロジェクト 無制限</li>
      <li><svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="M6.5 11.5 3 8l1-1 2.5 2.5L12 4l1 1z"/></svg>高解像度エクスポート</li>
      <li><svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="M6.5 11.5 3 8l1-1 2.5 2.5L12 4l1 1z"/></svg>チーム共有 5人</li>
    </ul>
    <a class="cta" href="#">PRO を選ぶ</a>
  </div>
  <div class="plan">
    <div class="name">TEAM</div>
    <div class="price">¥3,800<small> /月</small></div>
    <p class="tagline">組織で管理したい方へ。</p>
    <ul>
      <li><svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="M6.5 11.5 3 8l1-1 2.5 2.5L12 4l1 1z"/></svg>PRO の全機能</li>
      <li><svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="M6.5 11.5 3 8l1-1 2.5 2.5L12 4l1 1z"/></svg>権限管理・監査ログ</li>
      <li><svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path fill="currentColor" d="M6.5 11.5 3 8l1-1 2.5 2.5L12 4l1 1z"/></svg>優先サポート</li>
    </ul>
    <a class="cta ghost" href="#">TEAM を選ぶ</a>
  </div>
</div>
</body></html>
出典・参考: 自作の再現実装。推奨の多重強調・機能の色以外での明示は WCAG 1.4.1、タップ領域は 2.5.8 に基づく。コントラスト値は当方で実測。