サイトの作り方

ユーザビリティを意識する

2007/06/30 2023/07/10

この記事は執筆されてから16年が経過しています。

ユーザビリティとは「使いやすさ」を意味します。

WEBサイトはヘッダー、フッター、メインとなるナビゲーション、各ページにあるサブナビゲーション、内容を記載する部分などいくつかの要素に絞ることができます。もし、ページ毎にWEBサイトのデザインが変わりナビゲーションの位置が変わればユーザは快適な閲覧とは感じないでしょう。

まず、WEBサイトでは快適性を意識することが大切です。快適性とは色々な考え方がありますが、白い背景に黄色い色の文字にする、目的のページまでのクリック数を減らすなど様々な要素があります。そしてWEBサイトには暗黙のルールのようなものが存在することを忘れてはいけません。

例えばリンク部分にはマウスが触れると指の形に変形することでユーザにその部分がリンクであると明示します。もしあなたのWEBサイトのテキストリンク部分が赤色で下線がなければパッと見ただけでどこがリンクか分かるでしょうか。逆に目立たせたい部分に下線を入れたらどうなるでしょう。目立つことよりもリンクされている部分と感じるのではないでしょうか。

自分自身で作ったWEBサイトですから目立たせたい部分やリンクがどのような装飾になっているか分かるのは当然のことです。しかし、初めての訪問者がパッと見て判断できないような操作性が悪いのであれば意味がありません。

常にWEBサイトを見る人のことを意識した設計を心がけましょう。

実際に見かけた様々な事例

ナビゲーションとはWEBサイト内の移動をスムーズに移動するためのリンク設定のことです。

WEBサイトに合わせ縦型ナビゲーション、横型ナビゲーションなどいくつかのタイプを使い分けます。「簡単!Yahoo!オークション解説」、「誰にでも分かるHTML講座」のような解説を目的としたWEBサイトの場合にはページ数が膨大になり各ページ間の移動が難しくなるため、パンくずナビゲーションなども併用することで目的のページへの移動を容易になるよう意識することが大切です。

  1. 文字が小さい

    これはダミーテキストです。

    紙媒体と異なり文字サイズが変更できるWEB媒体では文字サイズの変更によってレイアウトがずれることを防ぐためにフォントサイズを固定(FirefoxではCSSの設定などでフォントサイズを固定されていても変更することができます)しているサイトが多く存在します。

  2. 文字と背景のコントラストが高い、低い

    これはダミーテキストです。

    これはダミーテキストです。

    文字色と背景色が極端に色味が近い、補色などでによって文字が読みにくくなります。一般の方だけでなく色覚障害者や年齢による視力低下を考慮した配色設定が必要です。

  3. リンク部分が分かりにくい

    これはダミーテキストです。これもダミーテキストです。

    パッと見てどちらがリンク箇所か分かりましたか?多くのWEBサイトではリンク部分は下線がついた状態になっています。それが暗黙のルールとなりユーザによっては下線のあるテキストはリンクだと思い込んでしまう可能性があります。

アバター画像
Crownfrog

2024年で、Webサイトの制作に従事して20年になる「インターネット老人会」の会員です。NIFTY-Serve、ISDNはじめちゃん、個人サイト、ウェブリング、前略プロフィール、mixiは一通り経験しております。

  • 追憶
  • デッドデッドデーモンズデデデデデストラクション(8)

最新ランキング