Open Accessibility Library Project

ヤコブ・ニールセンの考えをまとめたWebユーザビリティガイドライン

ユーザビリティのグル、ヤコブ・ニールセン氏の考えや調査を元にユーザビリティガイドラインを作りました。
デザインやコーディングをしている際に、このガイドラインを元に自分のデザインを一度チェックしてみるのもよいかと思います。
TRANS - ヤコブ・ニールセン氏の考えを元に、ユーザビリティガイドラインを作った。

---

デザイン・情報構造

デザイン・レイアウト

番号	詳細	備考
1	デザインを広告のようにしてはならない。
2	デザインの一般慣習を守る。	企業名やロゴが画面左上にない、など。
3	フレームはできる限り使わない。
4	サイト名とロゴは全ページに配置し、トップページへのリンクにする。
5	できる限りページ幅は固定しない。
6	サイト全体にデザインの一貫性を持たせる。
7	情報の仲間はひとまとめにして、空白を十分に取る。	企業情報などは一つの領域にまとめる。
8	意味のあるグラフィックス、画像を用いる。	サイトのコンテンツに関係したものを使う。

ページの最上部へ戻る

画面の縦幅（スクロールに関して）

番号	詳細	備考
1	ユーザーが情報の置き場所に何らかの期待を持っている場合はスクロールすることはない。	サイトIDであるロゴは通常画面左上にあるが、もしその位置にない場合に、わざわざ画面をスクロールさせて、探すことはない。
2	ブラウザが表示するエリアの下部に余白があると、それがページの終わりだと認識してしまう。	ブラウザが表示する最下部のすぐ上に見出しやコンテンツを置くと、ページの続きがあると考えてもらえる。
3	ブラウザが表示するエリアの周辺に広告があると、そこはページの終わりだと認識される。	広告は通常ページの周辺部に置かれるため。

ページの最上部へ戻る

ナビゲーション

番号	詳細	備考
1	全ページで統一性がある。
2	動いたり、読み込みに時間がかかってはならない。
3	隠しナビゲーションは使わない。	マウスをナビゲーションに持っていくと、ナビがスライドして項目が表示される、など。
4	同一ページで、ほかの同一のページに行くようなリンクを設けない。	ユーザーが違うリンクから同一のページに行ってしまうような体験をさせない。
5	できる限りページ幅は固定しない。
6	一見して分かりやすい、簡潔な名称を付ける。	気が利くかっこいい名前より、分かりやすさを重視する。
7	3クリックルールを無理に当てはめる必要はない。	特に大規模サイトの場合。それよりも、ユーザーがクリック数は多くても、迷わずに進めるサイトがよい。
8	デザインに凝りすぎない。	凝りすぎると、ユーザーの使い勝手が悪くなる。

ページの最上部へ戻る

ドロップダウンメニュー

番号	詳細	備考
1	メニューの内容を変化させない。	同一ページ内のメニューの選択結果によって、別のメニューの選択項目が変化する。
2	縦に長すぎるメニューは使わない。
3	使用する場合もせいぜい2段まで、その上で十分な表示時間を設定する。	何段もメニューの階層があったり、マウスがずれるだけ消えてしまうメニューは使い勝手が悪い。

ページの最上部へ戻る

トップページ

番号	詳細	備考
1	ワンセンテンスのタグラインを入れる。	そのサイトを一言で表すような説明文。
2	サイトの最重要タスクを強調し、直接リンクを貼る。	1個から3個に絞り込む。Firefoxのダウンロードページがよい事例。
3	実際のコンテンツの一部を紹介する。	単なるリンクではなく、コンテンツのサマリーなどを掲載する。
4	最新記事、情報にアクセスしやすくする。	人気のある項目は目立つようにしておく。

ページの最上部へ戻る

フォント

番号	詳細	備考
1	CSSでフォントサイズの絶対指定は行わない。	12pxなど。12ptなど。
2	デフォルトのフォントサイズを小さく設定しすぎない。	一般向けサイトなら最低10pt、シニア向けサイトなら最低12pt。追記：これくらいのフォントサイズが必要であって、ptで指定することを推奨するわけではないと思います。項目3においても同様。
3	できる限り、画像の中にテキストを埋め込まない。	必要な場合は、フォントのサイズを12ptは確保する。
4	代替CSSを読み込むためのボタンの設置を検討する。	各種ブラウザの文字サイズの変更は手間がかかるため、Webサイト上でできたほうが親切。
5	テキストと背景色のコントラストを最大化しておく。

ページの最上部へ戻る

文章・コンテンツの書き方

文章・コンテンツ

番号	詳細	備考
1	流し読みしやすい文章を心掛ける。	見出し、段落、太字、箇条書きを効果的に使う。
2	紙媒体の50％以内の文章量にする。	一般ユーザーはWeb上の文章を読むのは苦手。
3	2段階、もしくは3段階の見出しを使う。
4	ハイライトや強調を使って、重要語句を分かりやすくする。
5	長い情報、コンテンツはリンクでページを分割する。	話の途中で別ページに移行させるようなことはしない。
6	一つの段落に一つのアイディアを載せる。	段落は短めにする。
7	結論から先に述べ、次にその根拠となる事実情報を書く。	なかなか本題に入らないサイトはダメ、分かりやすい文は最初の2文が勝負。
8	売り文句などの宣伝風の文体は避ける。	ただし、自己アピールも押し付けがましくない方法であればOK。
9	専門用語や略語はユーザーに分かりやすく、簡単な言葉に置き換える。
10	対象読者がどんな人かを想像し、彼らにマッチした文体、テーマを設定する。	ほとんどのユーザーは格式張った堅い文章よりも、くだけた会話調のトーンを好む。

ページの最上部へ戻る

見出し・タイトル

番号	詳細	備考
1	コンテンツの要約である。	簡潔な言葉であったほうがよい。
2	気の利いた見出しよりも、意味の分かる見出しにする。
3	広告風のものではない。
4	最初の単語を重視する。	始めの1、2文字に人は注目するので。
5	タイトルはせいぜい全角30字以内で収めること。	検索エンジンのヒット時やブラウザの履歴を考慮する。
6	見出しには太字やフォントサイズを効果的に使う。	大見出しは本文よりもフォントサイズを大きくしてボールド表示。小見出しは大見出しよりフォントサイズを小さくするが、本文よりは目立つようにする。また、見出しは左寄せが好ましい。

ページの最上部へ戻る

リスト

番号	詳細	備考
1	4項目以上ある場合は、通常の文章よりも箇条書きにしたほうがよい。
2	箇条書きの前に明快で具体性のあるリード文を設ける。	申し込みに必要なものは以下の通りです、など。
3	インデント（字下げ）する。	通常の文章が左寄せになっていると、インデントは目立つ。
4	各項目の書き出しに同じ語句を繰り返し使わない。	全ての項目に「弊社は」、など。
5	各項目の言い回しや表現法には一貫性を持たせる。	体言止めと通常文、など。
6	リストは箇条書き、手順には番号を振る。
7	行頭番号の後にスペースを空けすぎない。	ユーザーの視線がうまく誘導されない。

ページの最上部へ戻る

リンク

リンク

番号	詳細	備考
1	基本はリンクテキストに色をつけて下線を引く。	リンクテキストに色がついていれば、必ずしも下線を引く必要はない。
2	リンクテキスト以外に下線を引かない、同じ色を使わない。	特にブラウザのデフォルトの青色はリンクテキスト以外に使わない。
3	訪問済みと未訪問のリンクには異なる色を使用する。
4	リンクテキストにフォントサイズの小さな文字を使わない。	ただし、フッターなどは構わない。
5	ページ内リンクは避けたほうがよい。	ユーザーは一般的にリンクをクリックすると、別のページに移動すると考えるため。
6	新規ウィンドウを開かせない。	ただし、PDFなどの文書をリンクする際には、新しいウィンドウを開かせる。
7	テキストを使えない場合は、浮き彫り風のデザインを施したボタンにする。	ハンドカーソル（指差しカーソル）に変えるだけ、ポインターがテキストの上に来ると色が変わるだけでは、リンクとしては不十分。
8	リンクテキストは最重要キーワードから始める。	あらゆるリンクに企業名などを入れたりしない。
9	サイト内の直リンクを推奨する。	ただし、サイトのほかの部分との対比で、ユーザーの現在位置を明示する。ワンクリックで直接戻れる、トップページへのリンクが必要。サイト内検索もあったほうがよい。

ページの最上部へ戻る

リンクのtitle属性

番号	詳細	備考
1	リンク先のサイトの名称を記載する。	サイト内の場合、リンク先の副次的なサイトの名称を記載する。
2	リンク先ページのコンテンツの概要を記載する。	ただし、全角30文字以内に収める。
3	ページ内の全てのリンクにtitle属性をつけない。	ユーザーが読まなければならない文章量が増えてしまう。

ページの最上部へ戻る

サイト内検索

デザイン・レイアウト

番号	詳細	備考
1	シンプルなテキストボックスがよい。	少なくとも半角27文字分、将来的なことを考えると半角30文字分の幅を取っておく。
2	検索ボックスは画面左上か右上に配置する。

ページの最上部へ戻る

基本的な検索機能

番号	詳細	備考
1	キーワードの出現回数のみで判断しない。	検索結果の最初のリストには本命が出てくるのが一番よい。
2	サイト内検索は100ページ以上あるサイトでよい。	1,000ページ以上の場合は、より高度なサイト内検索を用意する。
3	1語検索を扱えるようにする。
4	検索結果は見出しと2、3行の説明文で構成する。
5	検索語句の強調表示や文書格納情報のURLはあったほうがよい。
6	スペルミスの際に、Googleのように「もしかして○○？」と聞くのもよい。
7	高度な検索機能を提供しない。	もし、必要ならば、通常の検索結果のページでオプションとして用意する。

ページの最上部へ戻る

高度な検索検索

番号	詳細	備考
1	デフォルトは全体（サイト全体）にする。
2	検索結果を絞り込んだ場合は、対象範囲をはっきりと示しておく。	ユーザーが自分でどんな対象範囲で検索したのか、分かるようにする。
3	ワンクリックで対象範囲を拡大できるようにする。
4	検索結果が多すぎる場合は、範囲を絞り込むようユーザーに提案する。

ページの最上部へ戻る

PDFなどのファイル

PDF

番号	詳細	備考
1	あくまでPDFは印刷用と明示する。	同一のコンテンツを通常のHTMLページでも作っておく。
2	入り口となるHTMLページを用意し、PDFの概要を掲載する。
3	サイトのほかのページからリンクする際は、PDFに直接ではなく、入り口ページに貼る。
4	検索エンジンにはPDFを登録せず、入り口ページを登録する。
5	PDFは少なくとも1つ前のバージョンのものにする。変更：検討が必要	PDFのバージョンも新しくなり、後方互換性が重視されていることから、現在ではさほど気にする必要はなさそう。
6	異なる用紙サイズで印刷できるように文書の体裁を整える。
7	ファイルのページ数とサイズを明記する。
8	サイズの大きなPDFは分割して、それぞれに簡単な要約とコメントを掲載する。一方で、全ページをまとめた単一のファイルも用意する。
9	PDFへのリンクは原則として別ウィンドウを開かせる。

ページの最上部へ戻る

ドメイン・URL

ドメイン・URL

番号	詳細	備考
1	覚えやすくスペルも簡単なドメイン名にする。
2	短いほうがよい。
3	サイト構造を反映している。	URLの末尾に手を加えることで情報構造の上位レベルに移動できる。
4	一定不変で永続的なものにする。

ページの最上部へ戻る

フォーム・アプリケーション

フォーム

番号	詳細	備考
1	Undo（取り消し）コマンドを用意して、直近に行った変更を取り消せるようにする。	多段階UndoやRedo（やり直し）はユーザーを混乱させる恐れがある。
2	リセットやキャンセルボタンは通常必要ない。	ユーザーは代わりにブラウザの「戻る」をクリックすることが多い。
3	項目名と入力欄の対応関係を分かりやすく配置する。
4	上から下に入力してもらうのが一般的である。	上から下まで入力してもらってから、更に右上のフォームを入力させない、など。
5	トラブルの答えをすぐ近くに用意する。	パスワードを忘れた際の対処法、など。
6	操作の実行に複数のステップを踏まえる必要がある場合は、段階的にユーザーを誘導する。	ただし、多すぎる選択肢はユーザーが混乱させる。
7	ユーザーにとって自明なデータはドロップダウンメニューを使わずに、打ち込んでもらう。	誕生日、など。

ページの最上部へ戻る

エラーメッセージ

番号	詳細	備考
1	はっきりと異常の状態を知らせる。	最悪なのはエラーメッセージがないことである。
2	人間が読んで分かる言葉にする。	コードや略語が出てくるのは好ましくない。
3	礼儀正しい言葉遣いを使う。
4	正確に問題点を記述し、建設的なアドバイスで問題を解決できる。	単に在庫切れではなく、いつ入手可能になるのか、どうやったら入手できるのか、など。
5	エラーメッセージの視認性が高く、ユーザーが気付くようになっている。	エラーメッセージがコンテンツに埋もれてはならない。
6	全てをやり直させるのではなく、元々の入力した成果に手を加えて修正できる。
7	エラー修正の手間を減らす。	正しい方法をいくつか提示するのがよい。
8	リンクを用意して、問題解決のためのヘルプのページに結び付けておく。

ページの最上部へ戻る

広告

広告

番号	詳細	備考
1	クリックした時、何が起きるのかを明確に表示する。
2	それが広告であると、明確に表示する。
3	宣伝している商品の情報を、明確に伝える。	サイトの目的が何なのか分かりにくくてはならない。
4	ユーザーの行動を邪魔しない。	具体的には、ポップアップ、長い読み込み時間、ページの中を動き回るコンテンツ、自動的に鳴り出す音声、など。

ページの最上部へ戻る

Copyright (c) Arata Kojima | NPO法人しゃらく All Rights Reserved.