(cache) クリック・反響率を上げるボタンデザインの秘訣:【無料素材倶楽部】WEBデザインブログ

無料素材倶楽部 > WEBデザインブログ> Webマーケティング.SEO.SEM.Adsense > クリック・反響率を上げるボタンデザインの秘訣

クリック・反響率を上げるボタンデザインの秘訣

Webマーケティング.SEO.SEM.Adsense

ビジネスサイトのWEB担当者なら、申込み・購入・資料請求・問合せなどなど、
アクセスしてくれたユーザーの１人でも多くに何らかのアクションを起こして欲しいです。
「一生懸命キレイに作っているのに、反響率がイマイチ！　ちっくしょー」
以下は、そんな時にデザイン面で見直してみるポイントの１つ。
クリックボタンデザインに関するTipsです。

まずは、Gigazineの、2009年1月6日の記事、
秀逸なユーザビリティのボタンをデザインするための5つの秘伝
から引用させていただきます。 Web Design Trends: Call To Action Buttons（英語）の
紹介記事ですが、判りやすい日本語に訳出してくださってます。

■秘伝その1：色

ボタンの色はページの他のものよりも目立たせ、より明るく、そしてコントラストを効かせてページのカラーとは対照の色を使いましょう。

■秘伝その2：場所

ユーザーがすぐに見つけることができる場所にボタンを配置しましょう。商品の真横、ヘッダー、ナビゲーションメニュー右上など。

■秘伝その3：説明

ユーザーと適切なコミュニケーションを実現するためにも、そのボタンの機能を説明する言葉を付けることが重要です。長すぎず、短すぎず、機能を端的に表す単語があれば理解してもらいやすくなります。また、ユーザーにそのボタンをクリックする理由を示すのも効果的です。例えば「無料！」と表示する、などなど。

■秘伝その4：大きさ

ユーザーにとってそのボタンが重要であることを示すため、ほかのどのボタンよりも大きくし、できるだけ広い面積を取るようにしましょう。

■秘伝その5：余白

ボタンの周囲には十分な余白を取り、マージンを持たせましょう。また、ボタンらしく見えるように、平面ではなく立体的に見せることも必要です。

アクセスユーザーで、ページの隅から隅まで読んでくれる人はごくわずか。
だから、一番大事なキモは、ボタンを「いかに目立たせるか＝いかに注意を喚起するか」ということになります。

そんなことわかっとるわい?
けれど、世のWEBページのボタンについて上記の点から、注意深く眺めてみると、この辺が「まだまだ甘い」ページは意外に多いのです。ボタンというのは、反響につながる大事なパーツ。いわば「詰め」なんだということを認識してみると、ここが甘いのはよくない、ですよね。

これまでの自身の経験・検証結果から上記に、補足しますと、
ボタンに乗せる言葉というのは色、大きさ、配置などの見た目部分と合わせ、おろそかにしてはいけません。
■秘伝その3：説明（原文記事では"Language"ずばり言葉)の部分の補足として、
個人的に「Buy Now」効果と呼んでいますが、

○補足その１：すべてのボタンに可能な限り、まずは、「Now」つまり「今すぐ」「いますぐ」をつけてみる。

「Add Cart（カートに入れる」ではなくて、
「いますぐ購入」
「いますぐ注文」
「いますぐ購読」
「いますぐクリック」
ユーザーの深層心理に影響をもたらすのだそうです。
「まあ、いつでもいいや」→「すぐ！すぐ！すぐ！」とユーザーの深層心理にゆさぶりをかけて行動を促すわけです。

○補足その２：「無料！」「限定！」「お得！」などの言葉が使えるようなら一緒に入れてみる。

ほとんどの人間は「無料」「ただ」「フリー」「限定XX名さま」など、自分のメリットになると確実に教えてくれる言葉に反応しやすいものです。
資料とか、メルマガとか、無料のものは多いでしょう。それをはっきり文字にする。
「無料で詳しい資料を」とか。
資料請求ボタンの側にもう一つ、「完全無料！」「送料無料」「手数料無料でお得！」
などテキストや画像を追加しておく合わせ技も有効です。

○補足その３　資料や商品なら「即日発送可！」とか「3日以内でお手元に！」など時間短縮を強調する言葉を使ってみる。

ネット通販、資料請求などは「けっこう時間がかかる」という概念があります。
時間がかからないで届くいうのは、費用がかからない（無料、激安、格安）というのと合わせて訴求ポイントとなります。

WEBサイトでは、検索キーワードに限らず、どんな単語、どんな言葉を使うかはとても大事なことだと思います。
そんなの自分たちにとっては当たり前でも、初めて訪れるユーザーには当たり前ではないのですから、「ささいなこと」をきちんと伝えるようにしてみてはいかがでしょう？

次に秘伝その4：ボタン配置の補足

○補足：スクロールしないと収まらないページで、商品が１つならボタンは複数配置する。

まずスクロールしないで済む位置に１つ。（記事の概要を書いた後くらい）
スクロールして記事の最後に１つ（セールストークでいうクロージングが終わったところ）

「記事が終わってもないところで、ボタンをつけてもクリックしないのでは？」

なんて疑問に思った方、自分のネットでの行動を思い返してみませんか？
訪問者は１回見て「決めてくれる」とは限りません。というより、むしろその方が少ないです。
他と比較して→考えて、決める、方が多数ではないでしょうか？
何度かの再訪で決めようか、となった場合、あるいはリピート購入の場合、
わざわざスクロールしないと申込みができない、というのは、使い勝手よくないでしょ？

上記の秘伝では触れられていませんが、個人的に秘伝のその６を追加。

秘伝その６：アニメーションなど使用して視覚的に動いているボタンにする。

ページにボタンが大量にある場合は、単なるうざいページになってしまいますので、禁物ですけど、アニメーションを使用していないページで１つだけ動いているものは、目立つんです。
ユーザーの目は高確率で吸い寄せられるようにそこに行きます。
で、そのボタンに魅力的な言葉があれば、ついついクリック・・・・。

これまでサイトの担当者として数字を抱えて七転八倒しながら、
サイト上で、テストを繰り返してきましたが、上記6つをきちんと考慮してボタンを作ると、確実に効果があります。

あなたが、ごく普通のヒトであれば、一番身近な自分を考えてみてください。
上記のようなボタン”ついつい(→ココ重要)”クリックしたくなりませんか？

たかがボタン１個のデザイン、配置で、本当に数値に変化が起こるのですよ。
もちろん、急激に反響率が上昇するか否か、というのはサイト全体の出来、アクセス、商品自体の需要、によっても違いますが、
たとえ微々たる数値の変化だったとしても、年間スパンで計測してみると、
着実に上をいく、と経験から断言できます。（ボタン画像だけでなくリンクのテキストも同様ですね）

ということで、
自分のサイトの反響・売上につながるページのボタンのすべてを今すぐチェックしてみたらいかがでしょうか？
あるいは、Overture/Adwords等のPPC広告を出稿している場合などはテストページを作成して、スプリットテストを行ってみるのもいいと思います。
（スプリットテスト：最適化されたWEBページ（コンテンツ）にするために、アプローチやデザインの違う複数ページで、アクセス・反響等のテストを行うこと）

« 2008年12月Yahoo変動でTDPに | Webマーケティング.SEO.SEM.Adsense | Googleサイトリンク表示 »