ジーニアスブログ – WEB制作会社ジーニアスウェブのお役立ちブログ

ランディングページにおけるボタンの重要性


こんにちは。景山です。

本日はランディングページで最重要な

”ゴールであるボタンを押させるデザインや表現”についてお話します。

前回ターゲティングの重要性について説きましたが、
ホームページでは相手が見えないので、ゴール(ボタン)まで導いてあげる
過程が非常に重要です。

ユーザーに負荷を与えることなく導いてあげましょう。

ページビューがどんなに多くても、ボタンを押してもらえないと意味がありません。

ボタンデザインですが、

1、ボタンとはっきりわかること

フラットデザインが流行していますが、ボタンだとわからなければせっかくフラットデザインで、おしゃれに作成したページでも意味がありません。

例えば、
・ボタンを少し立体的にする。
・周りのデザインと比較してすこし目立つカラーを選ぶ。
・CSSアニメーションなどで、少しだけ動かしてあげる。

などの方法を用いることができます。
この際、重要なのが過度にしすぎないこと。

押し込めるようなデザインのボタンの場合。
ホバーすれば、5px程押し込まれ、クリックされればさらに5px押し込まれる。
とした時、最初の5pxの部分をアニメーションで教えてあげることで
押し込めるボタンだと伝わりやすくなります。

動かす際に、アニメーションさせる間隔をあまりに短く設定してしまうと
ユーザーにとってうっとおしいものになってしまうので適度なアニメーションが
必要ですが、人間の目は動いているものを追う傾向があるので、少し動かすことは
非常に効果的な手段です。

他にも、キラっと光らせたり、少し震えさせたり、サイトのイメージによって
いろいろ対策を練ることができると思います。

2、ボタンまわりを調整してやる

わかりやすいボタンを設置した後は、ユーザーがボタンを押しやすいように
背中を押してあげる配慮を加えます。

ユーザーの悩みを解決できるような一文を添えたり、「無料」ですとか「先着●●名様限定」などのように、押してみようかなとアクションを誘導してあげます。

コンビニのレジ周りでも、ちょっと買いできるものがレジの周りに置いてありますが、そういった配慮に近いものがあります。

2つ買えば、●●円引きなどに共通する部分です。

このように、ランディングページのゴールであるボタンについてよりユーザー目線でデザインすることで結果を得られることも少なく無いと思います。

一度、ボタンデザインをよく検討してみてはいかがでしょうか?

本日のポイント
・ボタンのデザインをボタンとわかりやすく。
・ボタンまわりでユーザーの背中を押してあげる。