チェックアウトボタンの111個のサンプルとデザインの傾向

Internet Marketing Companyのエントリーから、チェックアウトボタンの111個のサンプルとそのデザイン傾向を探り、ベストなチェックアウトボタンを作成するポイントを紹介します。

チェックボタンのサンプルのキャプチャ

111 Designs for Checkout Buttons

エントリーは英語圏内のため、文言など英語仕様となっています。

チェックアウトボタンのデザインの傾向

ボタンの色(背景)
ブルー:19%
ブラウン:4.5%
グレー:10%
グリーン:15%
オレンジ:11%
ピンク:2%
パープル:4%
レッド:22%
ホワイト:5%
イエロー:7%
ボタンの色(テキスト)
ブラック:10%
ブルー:8%
ホワイト:77%
ブラウン、グリーン、オレンジ、ピンク、パープル、レッド、イエロー:1%以下
「checkout」の綴り
check out:7%
checkout:93%
「checkout/check out」という文言は必ず入る
yes:99%
no:1%
「checkout」の表記
CHECKOUT:40%
checkout:10%
Checkout:40%
その他:10%
チェックアウトボタンと共に使用される文言
Continue:11%
Proceed(進め):27%
Now:9%
Go To:1%
Use:1%
Begin:6%
無し:45%
安全性・信頼性を掲載
secure:12%
no:88%
矢印を配置
矢印をボタンの左側に:40%
矢印をボタンの右側に:15%
no:43%

ベストなチェックアウトボタンの考察

上記のチェックアウトボタンのデザインの傾向を踏襲した、ベストなチェックアウトボタンは下記のようになるそうです。

ベストなチェックアウトボタンのキャプチャ

The best CHECKOUT button

  1. Volumetric lights
    立体的なグラデーション
  2. Call to action
    アクションを呼びかける文言
  3. Enforcing trust
    安全性を明記
  4. Go Ahead!
    矢印を配置
  5. Button color
    ボタンの色は背景をレッド、テキストをホワイトで
  6. CHECKOUT not checkout
    表記は「CHECKOUT」で
  7. Shadows for a 3D effect
    影をつけて立体的に
  8. Rounded corners
    角丸も忘れずに

sponsors

top of page

©2018 coliss