FREENANCE Ad

CVを向上させる料金表のデザインとは?4つのポイントと事例まとめ

料金表 アイキャッチ
FREENANCE Ad
DESIGNER

ツールやソリューションを提供するサービスページやLPにおいて、料金表のデザインはは購入の意思決定に大きな影響を与える要因です。デザインの力で、サービスの内容や各プランの違いなどを簡潔に正しく伝えれば、ユーザーはサービスに信頼感を抱きます。

今回、料金表をデザインするときの注意点と、それぞれの特徴を踏まえた料金表事例をご紹介します。

わかりやすい料金表のためのデザインハック

(1) 料金表の構成をシンプルにする

金銭が絡む情報は、正しく伝えることが重要です。誤った認識を与えてしまうと、クレームが発生することも。以下のチェックリストを参考にしてください。

  1. 各プランに名前をつける
  2. 含まれる機能を明記する
  3. 金額を明記する
  4. 違いが一目でわかるような視覚的情報を付加する
  5. 購入ボタンを設置する

料金表にプランを分けるとき、各プラン名を先頭に記載し、下記にプランの詳細を掲載し、ひと目で内容を確認できるようにすると、ユーザーが混乱せずに、「購入の確認」まで進む確率が上がります。

参考になる事例集:シンプル編

1

アレックサンダー・カファ氏によるデザイン

2
エニオ・ダイベリ氏によるデザイン
3

グレッグ・ドゥルバックズ氏によるデザイン

(2)「スタンダード」プランを目立たせる

プランの数が多くなると、ユーザーはどれにしようか迷います。パブリッシャーとして何をオススメするのか、「スタンダード」プランを選定しましょう。また、それがオススメの商品であることを伝えるためにデザインを駆使して目立たさせましょう。

  1. スタンダードプランの料金カードだけ立体的にする。または項目の下に影をつける。
  2. スタンダードプランにの料金カードにラベルをつける。「絶好販売中」「おすすめ!」「期間限定」などのラベルを使うと、ユーザーの注目を集められます。
  3. 基準プランの文字か項目を色付ける。
  4. 各プランの情報量を調整し、基準プランに条件を多く記載すること。

上記4点は、料金表にもっとも使われている、基準プランを目立たさせるためのデザインハックです。

参考になる事例集:スタンダード強調編

8
プラカー・シャーマー氏 によるデザイン
9
バージル・パナ氏 によるデザイン
10
ジュネィド・アーメッド氏によるデザイン
11
ポール・ネチタ氏によるデザイン
12
ハシン・ヘイダー氏によるデザイン
13
アンドレア・モンティニ氏 によるデザイン
14
ソーラーブ・マイティー氏によるデザイン

15

ドラガン・ショージック氏によるデザイン

16

キャサリン・ワング氏によるデザイン

(3) サービスの料金を強調させる

サービスの内容よりも、ユーザーがすぐにサービスの料金を理解しないと、サービスから離脱する可能性はあります。料金の数字を大きくすることや、色づくことなどにより、ユーザーの誤解を招かずに済ませられます。

そのうえ、料金の金額を上方に掲載する戦略も効果的です。

参考になる事例集:料金強調編

17

アレクスアンドロブ・アレクスアンダー氏によるデザイン

18

エフタカー・アラム氏によるデザイン

19

アレクス・チェン氏によるデザイン

20

ウラジミール・クディノブ氏によるデザイン

(4) インタラクティブ性を挿入すること

アニメーションや、インタラクティブ性のある項目などをサービスの料金表に挿入すると、ユーザーの印象に残りやすくなり、ユーザーがサービスから離脱しても、いい経験ができたら、再度購入を検討することもあります。

参考になる事例集:インタラクティブ編

下記に、アニメーションなどの素材を用いている料金表があります。

21

アレクス・マノブ氏によるデザイン

22

マジョ・プテルカ氏によるデザイン

23
アンドリュー・カーレン氏によるデザイン
25
オリア・ゴズジャ氏 によるデザイン

まとめ

料金表のデザインは、最低限まで引き算をした後に、アクセントを足すことが重要です。ユーザーが金額に対して抱く印象を深くリサーチし、料金表をデザインしましょう。

今後の料金表をデザインに、上記の注意事項や事例を、ぜひ参考にしてみてください。

(翻訳:Jordan Colston)

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
週1〜3 リモートワーク 土日のみでも案件が見つかる!
Workship