チェックアウトボタンの111個のサンプルとデザインの傾向
Post on:2008年11月11日
sponsorsr
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%
 
ベストなチェックアウトボタンの考察
上記のチェックアウトボタンのデザインの傾向を踏襲した、ベストなチェックアウトボタンは下記のようになるそうです。

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











