お役立ちコラム
ホームページ成果の要!押したくなるボタンデザインのご紹介!
ホームページを運営する目的とはなんでしょう?
情報を発信するのに加えて、購入を目的とした通販サイトや、お問い合わせ、申し込みを募集しているランディングページなど、ユーザーの「アクション」を目的としたホームページもあります。
これらのホームページはユーザーに特定のアクションをしてもらう事がゴールであり、そこまでユーザーを誘導できるかが肝と言えます。
ユーザーに必要性を訴えかける巧みな文章や、滞りなく導くレイアウトなど、すべき施策は沢山ありますが、まず重要でかつ簡単に変更できる「ボタンデザイン」のご紹介をいたします。
CONTENTS
コンバージョン率?コンバージョンボタン?
ホームページに情報発信以外の目的がある場合、どれだけの人がページを閲覧して、その中のどれだけの人が目的まで達したかという要素は非常に重要です。
通販サイトであれば、「商品を購入した数÷商品ページへのアクセス数」で「コンバージョン率」が導き出されます。
このコンバージョン率が高ければ、目的までユーザーを導くのが上手なページと言えます。
そしてコンバージョン率をあげるために、まず気を遣うべきなのが「コンバージョンボタン」です。
通販サイトでいえば「購入する」ボタン。
お問合せページなら「送信する」ボタン。
それぞれ目的を達成する最後ボタンがこれに当たります。
コンバージョンボタン作成のススメ
ボタンのデザインやレイアウトによって、コンバージョン率に大きな差が出るので、
コンバージョンボタンを作成する際は以下の点に気を付けましょう。
まず、ボタンに見える?
もし、ユーザーが商品を購入したいと考えてくれていたといして、購入ボタンを見つけることが出来なかったら、それほどの悲劇はありません。
テキストリンクや、ボタンタグではどうしても地味になりがちです。
一目見て「このボタンを押せば購入できる!」ということが分かるような目立つデザインをCSSや画像で表現しましょう。
目立つカラーで!
前回の記事で紹介しましたが、色が人に与えるイメージは非常に大きいです。
https://homepage-best.jp/blog/website-seisaku/color/
押して貰いたいボタンの色は、他とは一味違う「アクセントカラー」に設定して目立つようにしましょう。
大きさは?
小さなボタンでは目につかないことは火を見るより明らかです。
他のボタンより一回り大きめのサイズに設定するのがベターです。
ただしあまりに大きくしすぎると、ユーザーの警戒心を煽ってしまいかねないので程々にしましょう。
押したいデザイン
フラットなデザインだと、ボタンと認識されない可能性があります。
影やテカリなどを入れて立体感を出すのが効果的です。
またマウスを載せた時に、色を変えたり少し動くようにすることでもっと分かりやすくなります。
スマホ対応も忘れずに
パソコンのモニタで見ているときは、キレイなボタンでもスマホの画面で見ると小さすぎたりレイアウトが崩れている場合があります。
他にも言えることですが、スマホユーザーを無視することは、半分以上のユーザーを損失することになりかねません。
スマホ画面で見た際、横幅いっぱいになる大きなボタンデザインにするのがベターです。
手軽に作成!ボタンジェネレーター
ボタンを作成するには、画像加工の技術や、CSSの知識が必要になりがちです。
しかし以下の「ボタンジェネレーター」を用いれば、パラメーターを変更するだけで簡単にボタンデザインのCSSが作成できます。
CSS Button Creator – Imageless CSS Button Creato
http://cssbuttoncreator.com/
色々なボタンを試して、最適なデザインを探るのも良いかもしれません。
S&Eパートナーズではコンバージョン率を高めるボタンのご提案も含めたホームページ制作を承っています。
ご不明な点等ございましたらお気軽にお問い合わせくださいませ。