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

11_わかりやすいディレクトリ名とファイル名を使う

動的ページは静的ページの URL に変換するなど。URL を見ただけで Web サイトの構成や自分の現在位置を想像できるようになる。

12_ページの内容がひと目でわかる title 要素にする

Web ブラウザのタイトルバーやブックマークの登録にも使われ、検索エンジンの検索結果にも表示されるので、特に強調したい内容を15文字程度に収める。「ページの内容｜サイト名」の順番にしてページ内容をわかりやすくする。

13_alt 属性で画像の代替テキストを入れる

画像を表示できない環境のユーザーに画像の内容をテキストで説明するという本来の意味で使うべきであり、SEO 効果はあくまでも副次的なもの。

14_検索結果をわかりやすくする

現在では meta 要素のキーワードよりも description に重きが置かれるようになっている。

15_ユーザーがわかりやすいカテゴリに分ける

たとえば「生活雑貨」というカテゴリに「ティッシュ、タオル」など、カテゴリに説明文を付けて補う。
Webサイトの情報量が多い場合は、ひとつのカテゴリを見ただけでは目的の情報にたどり着きにくいので、機能別、ブランド別など複数のカテゴリ分類を併用する。

16_ナビゲーションに例外規則を作らない

「たとえ初めて訪れたユーザーでも、それ以降すぐにそのWebサイトの閲覧方法や操作を覚えることができる」あるいは「リピーターが最初に訪れたときとは異なる目的のページに行こうとする場合でも、以前の経験を手がかりにすばやく移動できる」。
サブサイトやグループサイトでも、ナビゲーションの規則を統一させることで、ユーザーがWebサイトで迷子になる可能性を下げられる。

17_フッタ部分から次のアクションへ結びつける

ページの下までスクロールするユーザーは、次のアクションを考えていたり、なんらかの情報を求めている場合が多い。グローバルナビゲーションや、関連商品の案内・関連カテゴリなどを入れる。

18_レイアウトで情報を明確に区分する

たとえばテレビは情報を順番に流すが、Webサイトはいくつもの情報がページの各所にちりばめられている。これを分かりやすく見せるために、情報の塊（チャンク）ごとに区分けし、レイアウトしていく。

19_ユーザーの視線をコントロールする

Webブラウジングの経験が少ないユーザーほど画面の上部から情報を探し始めるというデータがあるので、重要な要素は画面の上部に配置する。また、画面のチャンクを意識して視線を移動するユーザーは多いので、ボーダーや背景色などでチャンクを明確にする。

20_文字サイズはユーザー側で変更できるようにする

意図したデザインを崩したくないという理由から文字サイズを固定しているWebサイトは多いが、「% か em」で相対的に指定する。

21_Webサイトの横幅は1024ピクセル表示を前提にしない

実際にはユーザーはWebブラウザを画面いっぱいに広げない場合もあるし、サイドバーを表示している場合もあるので、3カラムレイアウトの3カラム目は表示されない可能性がある。

22_文字色と背景色の組み合わせを考え、コントラストを十分にとる

「見出しは文字色と背景色のコントラストを十分にとる」「本文は白背景に黒い文字か濃いグレーの文字にする」など。雑誌の場合も見出し要素はコントラストを十分にとっている。

23_Webサイトのテーマカラーを決める

色数の多いWebサイトは、場合によってはチープな印象を与えてしまいかねない。テーマカラーを決めて色味を統一し、目立たせたいところだけにアクセントカラーとして目にとまりやすい色を使用する。

24_コンバージョンを上げるサイト設計にする

コンバージョンレートは「具体的に行動を起こしたユーザーの数 ÷ 訪問者数」。
トップページの場合は、ユーザーにすすめたい商品やニーズの高い商品があるページへのリンクやバナーを置く。カテゴリページの場合、リピーターや欲しい商品が決まっているユーザーのために、詳細ページを確認することなく買い物ができるよう、カテゴリページのサムネールに「今すぐ購入」のボタンを配置する。詳細ページは、コンバージョンを促す情報やリンク、レビューや送料、個人情報の取り扱いなどを設け、ユーザーが安心してコンバージョンできるような環境を整える。

25_1ページの情報を多くして盛りだくさん感を演出する

ユーザーテストを行うと、はじめに表示されていない情報は、ユーザーの目にとまらない傾向にある。商品紹介などのコンテンツの場合は、情報をあえてまとめず、1ページの情報量を多くして認知度を上げることも有効。

26_CSSで印刷されることも考えたページをデザインする

Internet Explorer 6 の初期設定の状態では、ページの横幅が640ピクセルまでしか印刷されないので、印刷用の CSS では次のような設定を行う。

• ナビゲーションメニューや広告など不要と考えられる要素を display:none; で消す
• フォントサイズは font-size:12px のようにポイントで指定する
• リンクには下線を指定する
• 画像リンクがある場合を考えて、画像に枠線が付かないように border を0にする

27_ノイズのないデザインを目指す

信号は「本来伝えたいこと」を差し、ノイズは一連の行程の中で入る「雑音」。ノイズの部分を最小化し、信号がユーザーに伝わりやすくすることが、Webサイトをデザインするうえでの唯一の目標といってもいい。

• ボタン
  ボタンで一番伝えたい信号は「このラベルがクリック可能なこと」
• ナビゲーション
  重要なのはラベルと現在位置を示すこと。クリックできることを明確にするためにエンボスや影を付けることは悪くないが、そればかりが目立ってしまってはノイズとなる。
• 見出し
  見栄えをよくするために写真を重ねたくなるが、そうするとバナーと間違えられやすくなる。
• 製品写真
  製品写真では、製品の写真だけでなくユーザーにとっての利用シーンがわかるようにするといい。単に抽象的な背景を敷いたようなものはノイズといえる。