【基礎解説】Webサイトにおけるユーザーに好まれるボタンデザインとは

1. 【ボタンデザイン】ポイント①：色

結論としてはボタンの色に正解はありません。

大切なのは「ボタンの色がWebサイトのカラーに反していないか」であり、ユーザーに不快感を与えるような配色にならないようにすれば問題ありません。

最低限これを守れば問題ないですが、クリック率を上げるポイントとしてはボタンの「可読性」を上げることです。

「可読性」を上げるには、ボタンに書かれたテキストが引き立つようなボタン色を選ぶことです。

例えば、下のように２つのボタンがあったらどちらがクリックされやすいでしょうか。

ボタンの内容を際立たせることによって、例えば資料請求してもらいたいのであれば、資料請求することをより強く意識させることができるので、配色には気を付けたいところですね。

さらに、ユーザーが「これが欲しい！」となったときに、成約のボタンが見つかりにくければ機会損失になるかもしれません。

「申し込みたいけど、どこから申し込めばいいのかわからない」では、ユーザーの熱も冷めてしまうかもしれませんからね。

という理由で、クリック率を上げたいのであれば「可読性」を上げると良いですよ。

2. 【ボタンデザイン】ポイント②：形

ボタンデザインの「形」については、無難に「長方形」が良いです。

角に丸みが帯びている方がなお良い傾向があります。

理由としては、丸みを帯びている方が「やさしい」感じがありますので、ユーザーの心のハードルを下げやすいからです。

とはいえ、これに関しては微々たる影響しかなく、あくまで「傾向」なので無理に丸みをつける必要はありません。

長方形で「これはボタン」と認識されれば問題ありません。

また、できる人は影つきの立体的なボタンにするのもおすすめです。

まるで本物のボタンのような、タッチ画面でもないのに思わず押したくなるようなボタンだったら、「迷っていたけど、つい押したくなってしまい契約までしてしまった」というパターンも期待できますからね。

「その発想は強引だ」…ですか？

いいえ、これがボタンの魔力です。

「そこにボタンがあったら迷わず押す」という人、まわりにいませんか？

すいません、これは画像なので押せません。

でも、思わず押したくなりませんでしたか？

押してしまった人はボタンの魔力に負けましたね。

ボタンって不思議ですよね。押したらどうなるかが知りたくて、つい押したくたまらない衝動に駆られてしまうのですから。

ということで、影つきの立体型ボタンは好奇心を煽るのに役立ちますので、できる人はやってみるのもおすすめです。

3. 【ボタンデザイン】ポイント③：大きさ

ボタンデザインの「大きさ」については、「大きい方が良い」です。

大きい方が良いとはいえ、画面半分もあるような大きすぎるボタンはダメですよ。

あくまで常識の範囲内であって、ユーザーに不快感を与えない大きさにしましょう。

ボタンが小さいとユーザーが認識しにくいですし、インパクトもないて忘れられてしまいますので、ある程度の大きさは保ちましょう。

さらにスマートフォンでは画面が小さいので、ボタンも小さいととってもタップしづらいです。

ですので様々な場面を想定しても、大きめにするのが最適解ですね。

4. 【ボタンデザイン】ポイント④：テキスト

ボタンに表示するテキスト（文面）は、「ユーザーを主体とした言葉」にしましょう。

どういうことかというと、例えばSONYの商品を紹介しているブログで、SONYの公式ページに飛んでもらいたいのでボタンを設置するとしましょう。

このとき、「SONYの公式ページはこちら」とボタンに表示する人もいるでしょう。

しかしそうではなく、「SONYの公式ページを見に行く」や「SONYの公式ページで購入する」のように、「書き手主体」ではなく「ユーザー主体」にするのが良いです。

なぜなら、そう書いた方がユーザーが自分事として捉え、クリックしやすいからです。

5. 【ボタンデザイン】ポイント⑤：アニメーション

ボタンにアニメーションをつけることに関して最低限、マウスカーソルがボタンに重なったときに何かしらの反応をするようにしましょう。

なぜなら、何も起きないとユーザーは「あれ、これはボタンじゃないのかな」と混乱するからです。

少なからず色が反転したり、ボタンがアニメーションで拡大するなど、何かしらの反応が起きるようにするのが良いですよ。

アニメーションをゴッテゴテにつけてユニーク感を出しても良いですが、設置するWebサイトにマッチしていなければ違和感しかないので、よく考えてから実装しましょう。

6. 【ボタンデザイン】ポイント⑥：設置数

ボタンの設置数については、いくつ置いても問題ありませんが置きすぎ注意です。

よくある商品ページで、合間合間にやたらと「お問い合わせをする」というようなボタンが置かれていると、正直目障りでなので節度を持って設置しましょう。

必要な所に必要な分だけ、ですね。

また、「お問い合わせをする」ボタンの下に「○○の商品レビューを見る」というボタンを置くと、迷っているユーザーに安心感を与え成約に繋がることもあるので、わりとおすすめですよ。

7. 【まとめ】ボタンデザインはユーザー主体で考えることが大切

ボタンデザインを決める際に最も大切なことは「ユーザー主体で考えること」です。

ボタンを押すのはユーザーなので、ユーザーファーストで考えれば自ずと答えは見えてきます。

ユーザーのためにどのような配色でデザインすれば良いのか、ユーザーのためにどこにボタンを設置するべきか、ユーザーのためにボタンに何を表記すべきなのか…ユーザーにとって最適であるようにしましょう！

このブログがみなさまのお役に立てれば幸いです。

最後まで、ご閲覧いただきありがとうございました。

2022-12-02