ユーザーの心を捉えるボタンデザインの作り方

ウェブデザインに流行の移り変わりはありますが、いつの時代にも共通して大切なのは「ユーザーを迷わせない」ことです。せっかくユーザーが訪れても、直感的に分かりにくいデザインは、ページからの直帰・離脱につながってしまいます。

ウェブサイトの最終的な目的はそれぞれ異なりますが、特にECサイトや企業サイトにおいて、ボタンは「かごに入れる」「問い合わせる」「資料請求する」といった、利益に直結する役割を担っています。そのため、ユーザーを「ボタンを押す」というアクションにスムーズに誘導できるかどうかが重要です。

今回は、ユーザーの心を捉える「迷わない・混乱しない」ボタンをデザインするために抑えておきたいポイントをご紹介していきます。

ユーザーを迷わせないボタンデザインの工夫

はじめてウェブページを訪れたユーザーを迷わせないためには、どこにボタンがあるのか・押すことで何が起きるのかをひと目で理解できるようデザインの工夫が必要です。

どれがボタンなのか、押せる場所を明確にする

ボタンはほかの要素と区別を付け、押せる場所を明確にしましょう。2012年頃から広まった「フラットデザイン」の立体感や光沢感を排除したミニマムなデザインは、洗練された印象でコンテンツの伝えたいメッセージに焦点を絞ることが可能です。

しかし過度にシンプルな表現は、見出しやコンテンツなどの要素とボタンが似てしまい、ユーザーに「どこが押せるのか分からない」というストレスを与えてしまうこともあります。

ボタンに関しては、影をつけて奥行や立体感を表現するなど、ほかの要素と明確に区別できるようにデザインしましょう。また、周囲の要素と色のトーンが似ている場合もボタンが存在が埋もれてしまうので、色調や明度にも差をつけたコントラストを意識したいものです。

アイコンと文字（説明）を併用するのが望ましい

そのボタンを押すことでどんなアクションが起きるのか、確実に判別できるようにしましょう。アイコンは機能や役割をひと目で表現することに適していますが、その意図がユーザーに伝わらない場合もあります。例えば、下向き矢印のアイコンで「ダウンロード」を表現するケースは多いですが、それだけでは意味が伝わらない可能性もあるでしょう。

アイコンとともに「ダウンロードする」という端的な説明文の両方を表示すれば、ボタンの機能を確実に伝えることができます。また、アイコンだけの小さなボタンは、その存在（押せるということ）自体に気づかれない可能性も高いです。

オン・オフの状態がわかりやすいボタンにする

ボタンによって機能のオン・オフ切り替えを行う場合、今の状態を明確に示すことが必要です。例えば「オフ」とだけ表示されたボタンでは「今はオフの状態である」あるいは「このボタンを押すとオフになる（今はオンである）」、どちらなのか判断を迷います。

このような混乱を防止するためには、オン・オフ両方を表示するトグルボタンやラジオボタンの使用が有効です。

スマホ・タブレットユーザー向けのボタンデザインの工夫

かつてインターネット接続端末の主流はパソコンでしたが、近年はスマホからのアクセスが全体の7割を超えています。

そのため、スマホの小さな画面からも操作しやすいことが重要です。

ボタンにマウスオーバーのアクションを使用しない

パソコンのマウスカーソル（ポインタ）を、ウェブページの構成要素の上に置いた際に起こす効果（色や画像の変化など）を「マウスオーバー」といいます。そこがリンクやボタンであると明示する有効な手段ですが、スマホやタブレットでは画面に直接触れるため、この効果は使用できません。

モバイル端末からのアクセスが主流の現代では、マウスオーバーを使用せずにボタンをデザインしましょう。

ボタンの誤操作・誤タップを誘わないようにする

スマホの小さな画面上で指によるタップの精度は低めになります。小さすぎるボタンや、タップできる要素を狭い間隔で並べることは誤操作の原因です。逆に、大きすぎる要素も意図せずに触れてしまう可能性が高くなります。

ボタンは他の要素と明確に区別して充分に余白を持たせて配置し、ユーザーの意思で確実に押せるサイズにしましょう。

まとめ：シンプルなデザインは使いやすさとのバランスを考えよう

ユーザーの心を捉えるためのボタンデザインのコツをご紹介しました。使いやすいボタンにするためには、見つけやすい・混乱させない・誤タップを誘わないことが大切です。そのためには、押せる場所を明確に区別し、アクションの内容を明確に表示する必要があります。

装飾を排したデザインは機能が分かりにくくなる傾向がありますが、「使いやすいデザイン」はユーザーによっても異なってくるため、想定するターゲット層に合わせてバランスを考えていきましょう。

• 参考：

総務省｜平成29年版 情報通信白書｜パソコンからの主役交代

http://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h29/html/nc111210.html