How to achieve best pricing design?

サービスの価格表って、最近はどんなデザイン何だろうかと思って検索したら、意外と一杯出てきて驚きました。北村聡士 @satooshi_jp です。

自分用のメモです。

Examples

• 25 Beautiful Examples of Pricing Tables
• 40 Pricing Design Examples
• 40 Creative Examples of Pricing Page Design for Your Inspiration
• 40 Fantastic Pricing Tables for Your Inspiration
• Pricing Tables: Examples And Best Practices
• 30 Great Pricing Table Designs
• Showcase of 40 Pricing Tables and Signup Pages
• Pricing Tables (63 examples)
• 25 Inspirational Pricing Table Design Examples
• 50 Pricing Table Designs for Your Inspiration
• THE BEST PRICING TABLES DESIGN FOR YOUR NEXT PROJECTS
• 20 Best Designed Pricing Comparison Tables

ざっくり分類すると、、、まぁ2種類ぐらいしかないw　そりゃそうか。

1. tableレイアウトそのまま
2. divレイアウト

飛び出してるプランを作るには2.の方がいいのかな。プラン名はh2が多そう。画像モリモリのページは少なくて、CSSでほとんどデザインされてる印象。チェックマークだけ画像とか、ピンポイントで画像を使えと。

Pricing content

で、掲載内容としてはこんな感じ。ま、これも当たり前か。

• プラン毎の機能比較（有無、数・量・質）
• 料金
• 申込ボタン

サイトによってはプラン間の機能差異を文字色を変えていたり、プラン共通の機能を載せていたりする。

ざっくり作ってみた。ボタンと横線はbootstrapからcssを流用。