ゲーム大好き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分あれば作れますよ(・∀・)







この記事をシェアする

関連記事

ワイヤーフレームを作るならAdobe Compが超実用的【iPad・スマホ】

最近iPad Proを買ってから、ワイヤーフレームはずっとAdobe Compで作っています。便利すぎる。 Webサイトの制作を進める工程で、デザイン、コーディング、システム制作などがありますが、序盤 …

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

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

WordPressの記事複製プラグイン「Duplicate Post」が便利すぎた。

仕事でWordPressを使っていると更新作業の時、全く同じ記事を複製する場面があります。 WordPressでWEB制作している人なら恐らく経験があるんじゃないかと思います。 わざわざ新規ページを作 …

PDFのパスワード解除方法が簡単すぎた

クライアントから頂いたPDFデータにパスワードがかかっていたときの話。 仕事で、別の制作会社が作成したPDFをもらう時がたまにあります。 PDFにロックをかけて、データの編集や抜き取りを防ぐんですが、 …

サービス終了するけど、Wunderlistは超便利だった

無料でシンプルだけど便利な機能が一通りそろっているWunderlist。 サービス終了の発表が1年以上前にあったけど、未だに使い続けています。 使いやすく、デザインも良い。 今の会社に入ってからは、こ …


コメント

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

CAPTCHA