「Webユーザビリティ・デザイン」を元に、要約メモしておきたいと思います。

36_テキストリンクには具体的な内容を記載する

「ここをクリック」や「詳細はこちら」ではなく、「○○サービスの詳細仕様」などのようにリンク先の内容を具体的に示すことが重要。

37_テキストリンクはWebブラウザの標準仕様をベースにデザインする

「青くて下線のある文字はクリックできる。一度見たページは紫色になる」ということは、インターネットを利用しているユーザーのほとんどが知っている。Webサイトの配色にあわせてテキストリンクの色をアレンジするのであれば、未訪問リンクと訪問済みリンクで色分けをし、下線を引くかマウスオーバー時にのみ下線が表示されるようにする。

38_target=”_blank”による新規ウィンドウ表示は避ける

「そのままのウィンドウで他サイトに移動させてしまうとユーザーを逃がす」という発想は、ユーザーの操作の妨げとなるだけで、有効なユーザーの囲い込み策にはならない。

39_HTMLページ以外のリンクは事前に知らせる

「売上報告書：PDF形式（300KB）」のように、ファイルの内容、形式、サイズを明記しておく。

40_ページ内リンクは他ページへのリンクと区別してわかりやすくする

ページ内リンクの先頭に「▼」の記号を付けたり、リンクの色を変えたりして区別する。ページ内リンクは、自分がどこにいるか見失いやすいし、「戻る」ボタンをクリックすると元の場所ではなく、ひとつ前のページに移動してしまう。

41_画像リンクはまわりとのメリハリで目立たせる

画像サイズをむやみに大きくするよりも、ボタン部分だけをポイントで色を使って目立たせて、「注文する」「お申し込みへ」といった簡潔な文字を入れて太字で囲む、あるいは影付きにするなど。

42_サムネイル画像リンクからアクションを起こしやすくする

大きな画像を最初からページに掲載すると表示に時間がかかるうえ、同時に他の情報を見せられなくなる。このため、ファイルサイズを縮小したサムネイル画像を表示しておき、クリックすると画像が拡大するようにするのがスマート。

43_ページの「戻る」リンクは JavaScript ではなく URL 指定にする

「Javascript:history.back()」は、途中ページから閲覧したユーザーをWebサイトから離脱させる。

44_文字の行間を調整して読みやすくする

文字の行間は読みやすさに大きく影響する。

45_読まずにパッと見てわかる文章にする

ブログのような読みものをのぞき、ユーザーは文字を「読む」のではなく「見る」。ビジュアルが目にとまったあとで初めて文章が読まれるくらいの位置づけでデザインのバランスを考えたほうがいい。

46_表記と用事用語を統一してユーザーの混乱を防ぐ

商品名はスペースの半角・全角まで気を配る。前ページに戻るボタンが「戻る」だったり「Back」だったりするのもわかりにくい。「尚」と「なお」、「下さい」と「ください」、「出来ます」「できます」なども統一する。

47_ユーザーが誤解しやすい表現は避ける

「ご注文日から2営業日以内に発送します」といった文章はあいまいな表現の代表例。「遅くとも何日以内」などと表示したうえで、受注メールや発送連絡メールでフォローする。

48_機種依存文字は使わない

文章が文字化けしていると、ユーザーはその部分を読めなくなり、Webサイトの信頼も落ちる。

49_外国語はカタカナ表記でわかりやすく検索しやすくする

たとえば「Bambino」というイタリアンレストランであれば、「イタリアンレストラン・バンビーノ」と併記する。

50_制作者ではなくユーザーにわかる言葉を使う

「スパム」は「迷惑メール」に、「ヤフオク」は「Yahoo! オークション」のように正式名称にする。「ワンセグ」のように「1セグメント放送」よりも略語が一般的な場合は略語を使う。

51_ページ内にスクロール枠は付けない

新着情報などをスクロール枠の中に表示させている場合、表示されていない部分はほとんど読まれない傾向にある。こうした情報は、最新の何件かだけをトップページに表示し、以降の部分は一覧ページを別に用意するほうが読みやすい。

52_テキストをスクロール・点滅させない

点滅する文字は非常に読みづらいので、内容が読まれないままほとんど無視されてしまう。それに加えて、画面に細かな動きがあるとユーザーの気が散り、操作や閲覧の妨げになる。

53_Webサイトの目的に応じて画像の量や使い方を決める

画像には、「テキストでは表現しにくい内容を伝える」「テキストを補完する」といった情報伝達目的のものと、「見出しに添えるイラスト」のような修飾的なものがある。修飾として用いる画像はあくまでも脇役であることを意識し、主役となる情報伝達の画像よりも目立つ使い方は避ける。

54_アイコンには意味をそえる

アイコンでユーザーの視角に訴え、テキストで意味を補足する。誰もが知っていると思えるようなアイコンでも、意味の取り方は人それぞれ違う。

55_CSSで読みやすい表組みを作成する

以下のポイントを念頭にデザインする。「見出しとデータを明確にする」「罫線を立体ではなくフラットなものにする」「罫線と文字の間を十分にとる」

56_図や表の統一を図る

• 色彩設計
  Webサイトのベースカラーと図表の色を同一の色相やトーンにする
• 文字の種類と大きさ・位置
  文字の大きさ、行間、フォントを統一することで可読性を向上させる
• グラフ・図表の基本形式
  ラベルの記載箇所、縦軸と横軸の幅、キャプションの位置、枠の付け方や、矢印などの形や影の落とし方
• 図表のサイズ
  極端に大きいものや小さいものがないように、最大/最小の幅を決めておく
• 表組みの設計
  色彩のほか、見出しの方向や罫線の太さなどを統一する

57_印刷できて迷わない地図ページを作る

地図ページはWebサイトでもっとも利用されることが多いページのひとつ。

58_ユーザーが本当に安心できるSSLを導入する

Internet Explorer 7 で、より厳しくなったセキュリティ警告に適切に対応する。

59_情報バーで注意される技術は使わない

ポップアップウィンドウは使わない。

60_「よくある質問と答え」でユーザーの問題を解決する

企業のWebサイトは一方的な情報発信になりがちだが、「よくある質問と答え」を用意すれば、ユーザーの問題を解決して相互の信頼関係を築くことができ、その後のアクションに つなげることもできる。また、1ページに質問と答えを複数掲載せずに、質問をまとめたインデックスページを作成し、質問と答えを1ページに1つずつ掲載するのが望ましい。アクセス解析でユーザーの悩み、問題点などをリサーチすることができる。

61_現在位置を常に明確にする

ユーザーが目的の情報を探しやすくするためには、 ナビゲーションメニュー、見出し、パンくずリストの3つが助けになる。複数ページにわたる文章の場合は、総ページ数や現在表示されているのが何ページ目なのかという情報を掲示する。

62_サイト内に検索ボックスを各ページに付ける

検索ボックスがあれば、とりあえず検索してみようという気になるユーザーは少なくない。

63_サイト内検索の結果表示の最適化に力を入れる

Google Co-op や Google Mini など。

64_サイトマップはユーザー用と検索エンジン用を分けて作る

Google ウェブマスター用と、ユーザー用を用意する。

65_要所にナビゲーションを置いてサイト共通のナビゲーションを補完する

「グローバルナビゲーション」は、カテゴリの上部階層にある項目を掲示するナビゲーションで、ページ上部に配置されることが多い。「ローカルナビゲーション」は、同じ階層内のコンテンツを掲示するナビゲーションで、ページの左右いずれかに配置されることが多い。このような「埋め込み型ナビゲーション」は、コンテンツを並列に並べるため優劣が付けにくいなどの問題がある。それを解決する手段として、「コンテンツナビゲーション」がある。本文中に適切なタイミングで自由にナビゲーションを挿入できる。そのため、ユーザーを効果的に誘導でき、Webサイトのユーザビリティを容易にアップさせることができる。