3プラン比較料金表
おすすめプランを強調した3プラン比較の料金表です。各カードはプラン名・短い説明・金額に加え、含まれる機能をMaterial Symbolsのチェックアイコン付きリストで一覧化します。レイアウトはCSS gridの repeat(3,1fr) で等幅3列に組み、おすすめプランには p3__card--reco で枠色…
このパーツの使いどころと実装ポイント
おすすめプランを強調した3プラン比較の料金表です。各カードはプラン名・短い説明・金額に加え、含まれる機能をMaterial Symbolsのチェックアイコン付きリストで一覧化します。レイアウトはCSS gridのrepeat(3,1fr)で等幅3列に組み、おすすめプランにはp3__card--recoで枠色とバッジ、強い影を当てて視線を集めます。カードはホバーでわずかに浮き上がります。
向いている場面
- 機能差で価格帯を分けるSaaSやWeb制作の料金ページ
- 含有機能を一目で比較させたいサブスクリプション
- 段階的なアップグレードを促したいツール・受託サービス
カスタマイズと注意
差し替えるのはプラン名・説明・金額と、各機能リストの項目です。チェックは塗りのインラインSVGなので、非対応の機能を示すときは別アイコンに変えるか文言で補い、チェックだけで誤解されないようにします。説明文にはmin-heightが当たっており、文量が違っても価格の高さが揃うよう配慮されています。金額は税抜・月額などの前提をヘッダーで明記し、実額の確約は避けます。モバイルでは3列が縦積みになるため、おすすめプランを上部に置くと比較がスムーズです。アイコンはaria-hiddenとし、機能の有無はテキストで判別できるようにします。
よくある質問
プランに含まれない機能はどう表現すればいいですか？
チェックアイコンは「含まれる」を表すので、含まれない項目はバツや薄いマイナスのアイコンに変えるか、グレーの文字に落として区別します。チェックの有無だけで判断させず、テキストでも分かるようにするとアクセシビリティ上も安全です。
おすすめプランの強調を別のプランに移したいです。
強調はp3__card--recoのクラスとバッジで付けています。そのクラスとバッジ要素を別のカードへ移すだけで、おすすめの位置を変えられます。中央に置くと両隣と見比べやすく、視線も集まりやすくなります。