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

ユーザビリティを考えたwebデザインとは?


こんにちは、小野です。
もうすぐハロウィンがきますね!皆さん、ハロウィンは仮装などする予定でしょうか?
毎年ニュースやテレビなどで東京や大阪のハロウィンの盛り上がりように少し憧れをもっています(笑)
最近週末は雨が降ることが多いので今週末は晴れるといいなあと思っています。

さて、今回はユーザビリティを考えたwebデザインにおいて特に気をつけたいポイントをご紹介したいと思います。

ユーザビリティ (usability)とは?
ユーザビリティとは、ソフトウェアやWebサイトの「使いやすさ」のこと。様々な機能になるべく簡単な操作でアクセスできることや、使っていてストレスや戸惑いを感じないことなどが、優れたユーザビリティにつながる。
参照:IT用語辞典 e-Words

一番大切なのはサイトに訪れたユーザーがストレスなく使いやすいと思えるサイトをつくることです。
最近では綺麗なデザインや動きをつけたサイトが増えてきていますが、時にクリエイティブから距離を置いてユーザの視点に目を向けたデザインを作成するようにしましょう。

1.適切な文字サイズを考える
webサイトは子供から大人、シニア層まで幅広く訪問するためフォントサイズはとても重要です。
16px以上がユーザにとってストレスなく読めるサイズと言われています。12px以下はなるべく控えるようにしましょう。

2.クリックできるボタンやリンクはわかりやすくする
購買やお申し込みへのコンバージョンさせるためのリンクやボタンはwebサイトにおいてとても大切な要素です。
安心感や信頼感を与えるコンテンツを作成した上で、目立つ色や大きさで他の要素と差別化するなど工夫しましょう。

3.レイアウトに統一感を与える
webサイト全体を通してヘッダーやナビ、フッターなど全ページついてくるものは同じものを使用し固定させるのが良いです。同じサイトであるのにトップページと下層ページレイアウトやデザインがガラリと変わってしまうことでユーザーが戸惑ってしまいます。なるべく統一感をもたせるようにしましょう。

4.アクティブな要素には効果をつける
フォームの入力欄やボタンなどアクティブな要素には押せたり、入力できることがわかるように効果をつけるようにしましょう。

5.情報に優先順位をつける
webサイトを端から端まで全て見るユーザーはなかなかいません。情報に優先順位をつけて推したい部分のデザインを工夫することで訴求したいポイントをユーザーに伝えることができます。全ての情報を強調するのではなく重要な情報が強調されるようにしましょう。

6.コンテンツ間の余白はあける
コンテンツ間を詰めすぎると視認性が悪くなり、情報が目に入りにくくなります。
特にスマホにおいてはスクロールがしにくいなどの問題もありますので適度な余白をつけるようにしましょう。

7.アイコンは直感的にわかりやすいものにする
アイコンはwebデザインをする中で非常に便利なデザイン要素です。一目見ただけで使用するユーザーに意味が伝わるアイコンを選ぶようにしましょう。

8.スマホでは要素を大きく配置する
スマホ向けのwebデザインはフォントサイズは読みやすい大きさで、ボタンや検索欄はタップしやすい大きさで配置するようにしましょう。
小さすぎるとユーザーにとってストレスになり、離脱率も増えてしまいます。

いかがだったでしょうか?
今回ご紹介したのは一部ですが、ユーザビリティを考えることはデザイナーにとっても非デザイナーにとても大切なことです。
是非これを機にデザイン性だけではなくユーザーがいかに使いやすくサイトを利用できるか考えてみてください。それでは。