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

Web

みなさんこんにちは!

「Webサイトエンジニア」×「臨床検査技師」のハイブリットおじさんこと、ウエノです。

今回はWebサイトに設置するボタンデザインについて、ユーザーに好まれるデザインとはどのようなものなのか、ということについて解説します。

最近では様々なサイトでユニークなものが設置されていたり、おしゃれなものやかっこいいもがサンプルとして紹介されていたりと、選択の幅がかなり広がっています。

ですが、自分のWebサイトに一体いったいどのようなボタンを設置すれば良いのか…迷いますよね。

このブログを読めばユーザーに好まれやすいボタンデザインを知ることができ、設置するボタンの判断基準も得ることができます

これまで、僕も散々どういうボタンが成約率に繋がりやすいのか、逆にユーザーに不快感を与えるボタンの特徴はどういうものなのかを調べてきました。

その知見も貯まってきましたのでブログにて解説します。

このブログでは、ボタンデザインについて6つのポイントをお教えしますので、みなさんのWebサイトにどのようなボタンを設置するのかの判断基準にお役立てください。

みなさんがWebサイトについての知識を1つでも多く得てもられるように、一生懸命がんばりますのでよろしくお願いします!

【ボタンデザイン】ポイント①:色

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

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

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

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

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

ボタンデザイン色のサンプル「見比べ」

かなり極端な例ですが、答えとしては下の緑のボタンがクリックされやすいですね。

ウエノアイコン

ウエノ

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

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

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

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

【ボタンデザイン】ポイント②:形

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

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

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

余談ですが、丸みしかないアンパンマンが子供たちに大人気なのはこれが理由ですね!

ウエノアイコン

ウエノ

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

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

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

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

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

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

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

立体型ボタンデザイン

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

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

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

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

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

【ボタンデザイン】ポイント③:大きさ

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

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

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

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

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

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

画面の小さいスマートフォンでも問題なく押せるように、大きめのボタンを用意しておきましょうね!

ウエノアイコン

ウエノ

【ボタンデザイン】ポイント④:テキスト

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

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

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

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

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

「SONYの公式ページはこちら」と表示されていると、なんだか誘導されているようで、みなさんも不信感を抱きませんか?そう思わせてしまうと一気にクリック率が低下するので注意しましょう。

ウエノアイコン

ウエノ

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

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

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

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

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

当ウエノロジーブログでも色が反転するボタンを設置しており、Webサイトにマッチした色遣いとして美しく仕上がっていると自負しています。いかがでしょうか???

ウエノアイコン

ウエノ

【ボタンデザイン】ポイント⑥:設置数

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

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

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

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

今紹介したように1つは成約に繋がるボタン、もう1つはユーザーの心のハードルを下げるボタンをセットで設置すると、効果も高く期待できますよ!

ウエノアイコン

ウエノ

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

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

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

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

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

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

関連ブログのご案内

Web

Webサイト開設にはサーバーが必要であり、数あるサーバーの中からエックスサーバーを選ぶユーザーが多く、またWebサイトエンジニアの僕としてもおすすめするサーバーです。そのエックスサーバーについて「使ってみたいけどどうやればいいのかわからない」という人向けに、契約手順やWordPressの始め方を画像付きで解説します。また、初心者向けに基礎の解説も行います。

Web

Webサイトはただ作っただけでは顧客を獲得できません。顧客を呼び込むにはWebサイトの作り方にポイントがあります。そのポイントについて解説します。これからWebサイトを立ち上げようと考えている方は必見です。

Web

モーダルウィンドウは主に注意喚起やユーザーへの重要事項の確認に使用されています。このブログではそんなモーダルウィンドウについての基礎的な知識から、メリットとデメリット、デメリットに対する解決策を解説します。使い方を間違えるとユーザーに多大なストレスを与えてしまうため、知識をつけてしっかりと検討しましょう

TOPへ戻る