有名Webサービスのデザインから考える、上手な料金プランの見せ方
複数の料金プランを持つWebサービスを利用する際、皆さんはどういう基準でプランを選びますか？私は自分に必要な機能は何なのか、料金に見合った内容かどうか、他のプランと比較してお得なのはどれなのか等を考えながら検討していきます。そのために一目でそれぞれのプラン内容がわかったり、各プランを簡単に比較できるデザインだと決めやすいのですが、自分にぴったりのプランがすぐにわからないと結局どれも申し込まない、なんてことも。そこで今回は複数のプランを持つWebサービスの料金表を見ながら、どんなデザインをしてユーザーに魅力を伝えているのかチェックしてみたいと思います！
SQUARESPACE
http://www.squarespace.com/pricing/
プランを3つ用意しているSQUARESPACEは、おすすめの$16のプランを人気のプランとして画面の真ん中にくるように配置しています。緑背景の”MOST POPULAR”という言葉が目立つため、ユーザーはまず一番最初にこのプランに目が行くのではないでしょうか。値段の下には各プランごとの内容が積み重なっているので、高いプランほどメリットがあることが一目でわかります。価格設定が3つあると比較しやすく、またより高いものがあることによっておすすめのプランが相対的に安く見えますよね。一番高い$24のプランほど受けられるサービスは多くありませんが、それでも一番安い$8のプランよりは多くのメリットがあるので、$16のプランがお得感のあるプランに見えるよう工夫されていますね。
Shopify
http://www.shopify.com/pricing
Shopifyもメインのプランは3つあり、最も人気があるものとして$59のプランが大きく表示されています。プランに含まれないものには取り消し線が引かれているので、こちらも一目で比較できるようになっていますね。さらにどのプランにも”Start your free trial!”と無料お試しプランが用意されているので、ユーザーが気軽に試せるようになっています。
Xero
Xeroも3つのプランで、やはり真ん中に目立つよう人気のあるプランを置いています。それぞれのプランがどのようなユーザーにとって最適なのかを料金のすぐ下で説明しているため、ユーザーは自分にぴったりのプランが簡単にわかるのではないでしょうか。
Chartbeat
https://chartbeat.com/publishing/plans/
Chartbeatも真ん中のプランだけ色が明るく、ぱっと目に入るようになっていますね。他が寒色系でまとめられているので、問い合わせページへの赤いボタンがかなり目立っています。
dropify
dropifyは最も安い$9のプランを目立たせるために、左端にグレーの無料プランを置いています。ヘッダーの色に合わせてプランの色を赤やオレンジなどの暖色系でまとめていますが、こちらも申し込みボタンは緑で目を引きますね。さらにこちらも全てのプランに30日の無料トライアルがついているので、ユーザーは無料プランではなくもっとお得な有料プランをまず試してみようという気になるのではないでしょうか。
Square
Squareはスワイプごと、または月額課金のプランが用意されており、それぞれの料金を対比させることによってわかりやすく伝えています。
mixpanel
こちらは上記で紹介したものとは少し違いタブ切り替え型。各メニューには全て購入ボタンや問い合わせボタンがあり、すぐに申し込める工夫がしてあります。
以上7つのWebサービスの料金リストを紹介しました。実際にそれぞれのページへ飛ぶとわかりますが、ファーストビューに申し込みボタンを表示しているページがほとんどです。スクロールしないで見える範囲に申し込みボタンが表示されていることにより、ユーザーの離脱を防ぐことができるのではないでしょうか。他にもまとめて一つだけ表示するのではなく、料金ごとにボタンを用意しているサービスも多いですね。
こうやって見ていくと、各プランのメリットが一目でわかるようになっていたり、比較することによってお得感を出すなど、様々な工夫をしていることがわかります。ただ色やレイアウトを見るだけでなく、どのような意図があってどんな要素があるのか（またはないのか）などを考えながらチェックしていくと、今後のデザインをする上でのヒントになるのではないでしょうか？
他にも何か料金プランの見せ方が上手なWebサイトがありましたら、ぜひMEMOPATCHまでお知らせください！