〜ほぼ Daily UI vol.30〜 Pricing
Hint: Design something related to pricing. Is it a pricing table? A restaurant menu with pricing? (As always, it's up to you!)
参考にしたサイト・アプリ
Frontend Masters
https://frontendmasters.com/join/
Pricingの部分が新規登録の部分と一緒になっているが故にシンプル。こっちの方がCV率高そう。
Intercom
https://www.intercom.com/pricing?on_pageview_event=pricing_nav
推しプランをヘッダーやCTAの色変えたり特別なアイコン用意したりして目立たせている。正直比較はしづらいかな？あえてそうしてるのかな
Sendgrid
https://sendgrid.kke.co.jp/
分かりやすい。従量課金で比較がシンプルなものはこういうので良さそう。
Production Ready GraphQL
https://book.productionreadygraphql.com/
Notion
この記事よかった。
デザインを考える上でのポイント
推しプランを強調する
従量課金の場合だったり、特に推したいものがないなら別だが、ガメつく推したいプランを強調した方がいいだろう。以下のあたりの手法がある。
- 色を変える(背景色、CTA)
- ヘッダーを変える(Recommended, とか Most Popular みたいな文字を添える)
- サイズを変える
プランごとの違いを分かりやすくする
機能次第ではあるが、なるべく同じジャンルの機能は平行にあると良さそう。あとは表を作ってあるなし分かりやすくするのも一手。
でもあんまこれ採用しているの見なかったから、分かりやすくすると逆にLow Priceの方がCV率上がっちゃうみたいな闇の事情があったりするのかね。
数字やUnlimitedみたいな文字を強調する
やっぱり機能を羅列するとどうしても読みづらいので、要点だけ流し読みで掴めるように数字などはBoldしてあげると良さそう。
自分のデザイン
架空のエラー監視ツールをデザインしてみる。内容はSentry(https://sentry.io/pricing/)見ながらそれとなく決めた
- Developer Plan: $0/month
- Basic error handing monitoring
- Max 1000 record per month
- Pro Plan: $20/month
- 3rd-party integration such as Slack notification
- Virtually unlimited number of records(max 1 million per month)
- Advanced Analytics
- Enterprise: Contact Us
- Literally unlimited
思ったこと
意外とみんな控えめ