クリック率をアップさせるボタンはHTML＋CSSだけで超簡単に作れます

Webサイトを作る時、ボタンのデザインは意外と重要です。

ボタンのデザイン次第でクリック率が変わってしまうのは、実際に身をもって体験しています。

ちょっと前まではPhotoshopでボタンを作ることが多かったんですが、最近のボタンはほぼCSSで作られてますね。

僕も仕事でボタンを画像で表現する必要があるサイトが一部あるくらいで、他は全部CSSで作っています。

画像で作るより管理も楽だし、正直CSS3の登場でボタンを画像で表現する時代は終わった気がします。

クリック率の高いボタンは超簡単に作れる

CSS3を使えば画像を使わずに凝ったデザインのボタンを作ることが出来ますが、ぶっちゃけクリック率の高いボタンを作るだけならCSS3で凝ったデザインは不要です。

サイトの種類にもよりますが、基本的にスマートフォンでの閲覧が7〜8割以上を占める中で、CSS3のアニメーションを作ってもクリック率に影響ありません。

PCでの閲覧がメインのサイトならホバーしたときにCSS3のアニメーションを使うのはかなり効果的ですが、今回メインはスマホとして考えます。

僕が一番クリック率が良いと思うオススメのボタンはこれだ！

CSS3は不要と言いつつtext-shadowなんて使ってますね（笑）

今回のボタンのように明度が高いと白テキストは見えにくくなるので、影をつけました。色によってはテキストの影は不要です。

…どうですかこのボタン、何度も凹ませたくなりませんか？

もしかしたら期待してた人は

「は？普通のボタンじゃん(´Д｀)」

「こんなのどこのサイトでも見たことあるヽ(`Д´)ﾉ」

と思っているかもしれないけど、よく見るボタンで良いのです。誰もが一瞬でボタンだと分かるデザインが重要。

他にもボタンに枠をつけたり、グラデーションをつけたりと目立たせる方法は色々ありますが、僕が試したボタンの中ではやはりこの「どう見てもボタン」のデザインが最強でした。

シンプルなので汎用性も抜群です。このボタンがサイトデザインにマッチしないサイトは少ないはず。

ちなみに、ボタンは大きいほうが当然目立ちますが、ただ大きければ良いというわけでもありません。

ボタンの周りに充分な余白があることもかなり重要です。

めっちゃ極端ですが例えば↓のようなボタン。

周りと同化してボタンだと分かりづらく、コンテンツの枠に対して大きすぎる故に若干の「怪しさ」まで醸し出してしまいます。

同じデザインのボタンでも余白が重要なことがよく分かります。

周りがシンプルであればあるほど、このボタンの出っ張りを凹ませたくなってしまうのです。

ボタンのテキストでクリック率は変わる

ちょっとテキストを変えるだけでクリック率は大きく変わってきます。

実はクリック率を考えるならデザインよりも文字のほうが重要。

デザインでのクリック率の変化の幅は少ないですが、テキスト変更による変化の幅は大きいです。

ブログでよく見るAmazonのリンク、例えばうちのブログなら

こんな感じで「Amazonで見る」にしています。

人によっては「Amazonで買う」だったり「Amazon」とだけ書いてるボタンもあります。

これは実際に試してみましたが、「Amazon」みたいにサービス名だけ書いてるボタンはクリック率が少し下がるので、「〇〇で見る」「〇〇で探す」「○○で確認する」みたいに少しテキストを付け加えてあげたほうが確実にクリック率は上がります。

ただ、「Amazonで買う」だとクリックに抵抗が生まれてしまうユーザーもいるので控えたほうがいいです。

ブログを見ているユーザーの気持ち的には「いや、まだ買うとは決まってない…」という段階で、買うかどうか決めるのはAmazonで詳細を見てからです。

Amazonや楽天のようなショッピングサイトへの誘導は「○○で確認する」や「○○で見る」がベストかなと思ってます。

まとめ

僕がクリックされやすいボタンを作るためにやっていることは…

• CSSで立体的にする
• テキストを工夫する
• 余白を意識する

くらいですね。

CSS3を使って他にも色々なボタンを作ってみましたが、結局シンプルにCSSで作った立体ボタンが一番簡単で効果が高かったです。

仕事ではこのデザインのボタンを使いまわして、サイトによってはグラデーションなどアレンジを加えています。

クリック率を上げたいならボタンデザインに悩むよりも、デザインはCSSでさっさと作って、ボタンのテキストを考えることに時間をかけたほうが良いです。

今回紹介したボタンなら1分あれば作れますよ（・∀・）