06

クリック率を増大させるボタンデザイン10のポイント


なかなか購入につながらない…
資料請求につながらない…
予約につながらない…

業界は違っても、Web担当の方はみなさんは日々コンバージョン率が上がらないことに頭を悩ませている方も少なくないのではないのでしょうか?
ちょっとした工夫で、コンバージョン率が劇的にアップすることもあります。
ここでは具体的なポイントをご紹介していきます。

 

一目でボタンとわかるデザインになっているか?

ボタンが小さすぎたり、わかりづらいデザインで、ユーザーがボタンと気づきにくいデザインになっていませんか?
「見落とされない」デザインになっていますか?
あまりにサイトのデザインとかけ離れすぎていても、品がなくなってしまいますが、トンマナに縛られすぎず、ユーザーがさっと見たただけでもボタンとわかるデザインになっていることが大切です。

 

ユーザーが見落とさない位置にボタンが配置されているか?

ボタンのサイズが小さかったり、ユーザーの目線が行きづらいところに配置されていたりしませんか?

コンバージョンボタン

アクションボタンはユーザーが見落とすことがないような場所に配置し、且つクリックしやすい場所に配置しましょう。

 

ボタンにのせるテキストはユーザー目線になっているか?

有名企業のサイトのアクションボタンの例をいくつか見てたいと思います。

 

アクションボタンの事例<Twitter>


コンバージョンボタン

https://twitter.com/?lang=ja

アクションボタンの事例<HOT PEPPER Beauty>

コンバージョンボタン

http://beauty.hotpepper.jp/

アクションボタンの事例<Ameba みんなの編集局>

コンバージョンボタン

https://curation.ameba.jp/content/lp#/

 

Twitterの場合、ボタンののせてあるテキストは、『Twitterに登録する』
HOT PEPPER BEAUTY は、『空席確認・予約する』
Ameba みんなの編集局は、『ライターに応募する』

この3つの例の場合、すべてボタン上のテキストの主語が「ユーザー」になっています。
「(ユーザーが)○○する」という表現により、ユーザーが自分がアクションを起こすためのボタンであることを認識しやすくしています。

 

ユーザーの「面倒くさい」を払しょくできているか?

「資料請求をする」「予約をする」等、アクションボタンをクリックする時に、たくさんの項目を入力しなくちゃいけないのかな…?とユーザーは不安に思うものです。
ほとんどの人にとって、入力は面倒に感じてしまうものですから、「簡単○分で完了!」等、時間も手間もかからないということを伝えることも有効です。

 

ユーザーにクリックした後のメリットを伝えられているか?

たとえばサンプル請求のページであれば、「無料」、ECサイトであれば、「○○%OFF」「送料無料」等のメリットが伝わるデザインも効果的です。
次の事例を見てみてください。

 

アクションボタンの事例<サントリー天然水ウォーターサーバー>

コンバージョンボタン
http://www.suntoryws.com/

サントリー天然水ウォーターサーバーの場合は、「今だけ全員プレゼントキャンペーン」というテキストをアクションボタンの上にのせ、ユーザーにお得感を伝えることで、クリックを促しています。

 

”今だけ”等、ユーザーに「今アクションしなきゃ!」感を与えられているか?

先ほどのサントリー天然水ウォーターサーバーの場合もそうですが、キャンペーン等を実施しているのであれば、アクションボタンに”今だけ”等の文言を盛り込むのも有効です。
ユーザーに「今、買わなきゃ!」「今、申し込まなきゃ!」と緊急性をあおることで、コンバージョンにつながる可能性が高くなります。

 

フォントは読みやすいフォントになっているか?

お洒落なフォントはたくさんありますが、細すぎたり、読みにくかったり、可読性の低いフォントは避けた方が無難でしょう。

 

ボタンの周りの余白は十分か?

ページにたくさんの要素を盛り込み過ぎて、アクションボタンが要素に埋もれてしまっていませんか?

コンバージョンボタン

図のように、ボタンの周りに適度な余白をとることで、ボタンと認識しやすくなります。
ボタンの周りの余白にも気を配りましょう。

 

ボタンの大きさは適切か?

小さすぎて、テキストが読みづらい、クリックしづらいボタンになっていませんか?
特にスマホサイトの場合は、男性の親指でもストレスなくタップできるサイズにしておく必要があります。

 

目的を1つに絞っているか?

1つのランディングページの中でユーザーに「あれもして」「これもして」と複数の要求しているサイトをたまに見かけます。
資料を請求してほしいのか、予約をしてほしいのか、ユーザー登録をしてほしいのか、メルマガ登録をしてほしいのか。
あれこれ要求すれば、当然、ユーザーはどうアクションしていいものか迷ってしまい、離脱につながる可能性が高くなるでしょう。
やむを得ず、2つ以上のアクションボタンをのせざる得ない場合は、ボタンのサイズや色、配置場所を工夫し、一番優先度の高いアクションボタンを目立たせ、それ以外のアクションボタンは控えめにする必要があります。

 

まとめ

アクションボタンに限ったことではありませんが、Webサイトでの集客について、「絶対にこれが正解!」という黄金のルールはありません。
大切なのは、まずは現状をしっかりと分析した上で、「こうしたら改善するのでは?」と合理的な仮説を立てたうえで、トライしてみることだと思います。
トライ&エラーを繰り返しながら、数字の良い結果が出れば、そこから成功要素は何だったのかを検証し、次につなげる。
失敗を恐れずに、トライすることが結果的にコンバージョンアップにつながることだけは確かと言えるかもしれません。

 

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Article時間短縮に必須なPhotoshopショートカットキー30選(チートシート付き)