ゲームやWEB関係がメイン。まとまりのない雑記ブログ

WEB関係

クリック率をアップさせるボタンは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分あれば作れますよ(・∀・)







関連記事

Atomのactivate power modeを使ってドヤる

Webデザイナーがコーディングするためには欠かせないエディタ。 同じ社内でも人によって使っているエディタが全然違う場合もあるでしょう。 社員A コーディングするならやはりDreamweaverです。 …

WordPressでユーザーを一括登録する「Import Users from CSV」の使い方

WordPressを複数のユーザーで管理したい時、1人ずつ登録するのは大変だと思います。 そんな時はWordPressのプラグイン「Import Users from CSV」を使って効率化しましょう …

1つのメールアドレスでWordPressに複数ユーザーを作成する方法

仕事でクライアントから50人以上のユーザーを登録しなくてはならないサイト制作を依頼されました。 複数の店舗がそのサイトにそれぞれの情報を登録していくタイプのWEBサイトですね。 しかし、WordPre …

【2019年】ロリポップと比較してさくらのレンタルサーバが1歩リードか

安くてお手軽なサーバーとして比較されがちなさくらのレンタルサーバとロリポップ。 どちらも2016年あたりから2018年までに、かなり性能がアップしている印象がある。 特に昔のロリポップは「安かろう悪か …

簡単にサイトマップを作れる「PS Auto Sitemap」の使い方

サイトマップを自動生成してくれるWordPressプラグイン「PS Auto Sitemap」。 一度設定すればあとは自動で記事を追加してくれるので、初心者だけでなく、WEB制作者もよく使っているプラ …

この記事をシェアする