チェックアウトボタンの111個のサンプルとデザインの傾向
Post on:2008年11月11日
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