UX/UI視点で考えるホームページの使いやすいボタンデザイン

ホームページの使いやすいボタンデザイン

ホームページにおいてボタンはなくてはならない存在です。

ボタンはサイトの利用者のアクションをスムーズにし、情報の取得やサービスの利用を快適に行ってもらうために使われています。そのため、より使いやすいデザインのボタンを配置することは、サイトの質の向上につながるのです。

ボタンは利用者に識別してもらい、操作の選択肢を与えて、ホームページ内のサービスまでスムーズに誘導する役割をになっています。ボタンはカートへの商品追加、フォームの送信、コンテンツの削除など、色々なアクションと繋がるパーツです。ボタンの役割とはボタンが正しく機能し、利用者を効率的に導くことはことは、ホームページにおいて非常に重要です。

ボタンにとって重要なこと

一目でボタンであることがわかる

単純に文字を並べただけであったり、画像を貼り付けただけであった場合、それがクリックできるボタンであると認識されないかもしれません。

丸で囲む、文字色を変える、下線を引く等の工夫することで、ボタンであることをアピールしましょう。

また、背景色や周りの記述に埋もれてしまうようなデザインは望ましくありません。

色調や明度を変えてみたり、影を付けて見たりすることで、他の記述とは違うことを示しましょう。

見つけやすい場所にある

利用者がアクションを起こす時に、ボタンをすぐに見つけられる場所に配置しておかなければなりません。押したい時に探すことなく目に付く場所にあるのが、理想的なボタンと言えます。

押せば何が起こるのかがすぐわかる

ボタンは押すと何が起こるのか明確でないと押してもらえません。

例を出すと、ショップサイトなどの『カートに入れる』『カートの中を確認する』『注文を確定する』などのボタンが挙げられます。

ショップサイトはお金のやりとりがある分、ボタンを押した時の結果が明確でなければ、利用者は押すことを躊躇してししまいます。

利用者が迷うことなく、意味を理解して押してもらえるボタンを配置することが重要です。

ホームページのボタンを押しやすくするコツ

アイコンと併用する

文字だけの簡素なボタンの場合、用途を正確に伝えるのに、文言が長くなりがちです。これを解消するのがアイコンです。

最も簡単な例を挙げると、『お問合せページへはここをクリック』よりも『お問合せページへ→』と矢印のアイコンを使う方が、意味は同じでも短い文言になります。

これは画面の小さいスマートフォンが広く普及している現在には非常に重要になります。究極的にいうと、正確に意味が伝わるのであれば、アイコンのみのボタンでも問題ありません。実際、各種SNSではアイコンだけのボタンが多く使われています。

マウスホバーアクションに頼らない

マウスホバーアクションとはパソコンの画面で、マウスカーソルがボタンなどの要素の上に重なった時に、何らかの動きを見せることです。

この表現はパソコン画面上では非常に簡単にボタンの存在を示せるため、長らくボタンのデザインに多く使用されていました。しかし、上記のアイコンの項目でも触れましたが、タッチパネルで操作するスマートフォンやタブレットの普及により、この表現だけでは不十分である事例が増えました。最近ではホバーアクションを使わずとも、一目でボタンだと認識できるデザインが求められています。

間違って押してしまわない大きさにする

マウスホバーアクションとはパソコンの画面で、マウスカーソルが上記2項目でも書いた通り、近年の利用者のほとんどは、ホームページをスマートフォンの小さな画面で見ることになります。

この場合、ボタンが小さすぎたりボタンの間隔が狭いと、簡単に誤操作が起こってしまいます。また、逆にボタンが大きすぎても意図せず触ってしまいかねません。

誤操作は利用者に大きなストレスを与えてしまうため、できる限り避けなければなりません。ボタンは押しやすい大きさで、十分な感覚を空けて配置するようにしましょう。

押した状態を分かりやすくする

ページが遷移するボタンの場合は考えなくていいことですが、ボタンの中にはスイッチのON・OFFのように、押している状態かどうかを認識させる必要があるものがあります。分かりやすいのはSNSの『いいね』ボタンやYouTubeの『高評価』ボタンなどがそれにあたります。

このような種類のボタンは、色の彩度や明度の上下をなどを使うことで、ボタンを押した状態かどうかを表現するといいでしょう。

まとめ

利用者を快適に誘導するボタンを作るには、色、形、配置する場所、文言など、気をつけるべきことがたくさんあります。

基本的には見つけやすくて、迷わせず、間違って押すことのないボタンが良いボタンと言えますが、利用者の目的によって理想的なデザインは異なってくるので、しっかり利用者目線になって作ることが重要です。