category
サイト構築 -デザイン

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

  • この記事をdel.cio.usに登録する
  • この記事をはてなブックマークに登録する
  • この記事をGoogleブックマークに登録する
  • この記事をYahoo!ブックマークに登録する
  • この記事をdiggに登録する
  • この記事をlivedoor clipに登録する
  • この記事を@nifty クリップに登録する

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
    角丸も忘れずに

Post on:2008年11月11日

  • この記事をdel.cio.usに登録する
  • この記事をはてなブックマークに登録する
  • この記事をGoogleブックマークに登録する
  • この記事をYahoo!ブックマークに登録する
  • この記事をdiggに登録する
  • この記事をlivedoor clipに登録する
  • この記事を@nifty クリップに登録する

トラックバック

トラックバック(URL)

コメント

comment:

※承認制のため、即時には反映されません。

ページの先頭へ




© coliss

RSS