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

スポンサーリンク

制作日: 2007/06/30
最新更新日: 2007/10/04

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

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

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

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

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

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

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

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

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

  1. 文字が小さい

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

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

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

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

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

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

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

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

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

スポンサーリンク

サイトの作り方に関する参考書籍

  • A Better Design Webページ リ・デザインブック
  • A Better Design Webページ リ・デザインブックII
  • WEB DESIGNERS FILE
  • ウェブ時代をゆく - いかに働き、いかに学ぶか
  • ウェブ進化論 本当の大変化はこれから始まる
  • グーグル - Google 既存のビジネスを破壊する
  • グーグル・アマゾン化する社会
  • 「買いたい!」のスイッチを押す方法 消費者の心と行動を読み解く
  • 色彩の世界地図
  • 仕事に役立つWebデザイン完全ガイド
  • たのしいロゴづくり - 文字の形からの着想と展開
  • ニホンゴロゴ - ひらがなカタカナ漢字による様々な業種のロゴ
  • ネットショップ起業 成功バイブル
  • フリー <無料>からお金を生みだす新戦略
このページのトップに戻る