ユーザビリティとは？サイト制作で使える基本からアクセシビリティとの違いを解説

「ユーザビリティという単語について正しく理解しているでしょうか。「ユーザビリティ」といえば「使いやすさ」という解釈をしている人が多いですが、実際にこの「ユーザビリティ」という言葉を説明する際に「使いやすさ」という説明だけでは不十分です。 また、サイト制作を行ううえで、よく混同してしまう「ユーザビリティ」と「アクセシビリティ」について、正しく理解する必要があります。
そこで今回は「ユーザビリティ」について正しい意味、使い方を解説すると共に、混同しやすい「ユーザビリティ」と「アクセシビリティ」の違いについてもご紹介します。

ユーザビリティとは

ユーザビリティについて、その概要と具体例、ポイントを解説します。

ユーザビリティの概要

ユーザビリティとは、そのWebサイトにおけるターゲットユーザーにとっての使い勝手の良さを表す指標です。ユーザビリティの第一人者であるヤコブ・ニールセンによれば、ユーザビリティの大きな要素は以下の５つです。

①効率性 (Efficiency)

一度ユーザーがそのシステムを習得すれば、２度目以降は素早く使用できる操作設計がなされているか、という点です。つまりユーザーの効率的なサイト活用を補助する観点です。

②学習のしやすさ(Learnability)

初めてのユーザーでも一通りの操作ができるか、という点です。誰でも簡単に操作方法が理解できるような仕組み作りがこれにあたります。

③記憶しやすさ(Memorability)

しばらく使っていなくても、またすぐに使用できるか、という点です。たとえば閲覧履歴や、閲覧済みのリンクが異なる色で表示されることがこれに当たります

④エラー発生率(Errors)

システムのエラー発生率を低くすることです。エラーを起こしにくくするほか、もしエラーが発生しても簡単に回復できるように、という点です。また、致命的なエラーが起こらないようにすることもこれにあたります

⑤満足度 (Satisfaction)

ユーザーがシステムを快適に利用できるようにする、という点です。操作に問題なく、楽しく利用できるようにする、という観点もこれに当たります。

そのサイトにおける「ターゲットユーザー」がある状況や目的において使いやすいか、というのがユーザビリティです。そして結果的にそのユーザーに「嫌な思いをしない」「また使いたい」と思わせ、リピーターになってもらうのがユーザビリティの目的です。

ISO 9241-11におけるユーザビリティ

ISOにおけるユーザビリティは、ある利用状況下で目標達成のために使用したモノの「有効さ」「効率」「満足度」の度合いのことです。

1. 有効さ：目標を達成する上での正確さ、完全性
2. 効率：目標を達成する際に、正確さと完全性のために費やした資源
3. 満足度：モノを使用した際の不快感のなさ、肯定的な態度

つまりモノを使用した際の上記3項目を複合的に評価したものがユーザビリティということになります。

ユーザビリティの具体例

ユーザビリティにおいて気を付けるべきは以下の４つのポイントです。

ファーストビュー

ファーストビューとは、Webサイトなどにおいてスクロールする前の段階で最初に見える範囲のことを指します。企業サイトにおいては、サイトを運営している「企業ロゴ」、サイトの雰囲気を伝える「メインビジュアル」、サイトの主要リンクにつながる「グローバルナビゲーション」の３つがユーザビリティ的に含むべき３点です。

他にも、予約サービスを提供しているのであれば、予約フォーム、イベントをおこなっているのであればイベントページへのリンクボタンなど、主要なサービスにおけるシステムもファーストビューに組み込むことがあります。しかし、ファーストビューのスペースは限られているので入れる要素は精査しなければなりません。

メタファーとアイコン

ユーザビリティにおけるメタファーとアイコンとは、操作や操作した結果を一目でわかるような絵や図で表すことを指します。デザインにおいて、現実の世の中に存在するものにたとえることもこれに当たります。

たとえば、検索において虫眼鏡のアイコンを用いたり、ホームに戻るために家のアイコンを用いたりすることがこれに当たります。何ができる機能なのか、理解しやすくするための工夫です。

アフォーダンス

アフォーダンスとは、説明がなくても、デザインや画面設計によって、特にガイドがなくても使い方がわかるようにすることです。たとえば、ヘッダーの企業ロゴをクリックすればトップページに戻る、青文字で下線が引かれているテキストはリンクに飛ぶことができる、などといった機能がユーザビリティにおけるアフォーダンスです。

デフォルメ

デフォルメとは、実際のものを簡略化したり、色や形をかえて特徴づけることであり、主にイラストによって表現されます。Webにおける例としては、マップを写真ではなく、イラストで表したりするのもデフォルメの一種です。

ユーザービリティ10の原則

先ほども少し述べたユーザビリティの第一人者、ヤコブ・ニールセンはユーザービリティの原則として、以下の10原則を述べています

①システム状態を視覚的に知らせること

例）フォーム送信でエラーが発生した場合に入力不備だった点を示す

②専門用語でなく、実社会の言葉を使い、現実に即した動作にすること

例）「デリート」→「削除する」

③画面上でユーザの操作が自由にできること

例）操作を間違えた場合に「１つ前に戻る」ことが可能なこと。

④一貫性のある表現や用語を使うこと

例）サイト内における操作やボタンのアイコンの統一

⑤エラーが起きないようにすること

例）「電話番号を入力してください」→「電話番号をハイフンなし、半角数字で入力してください。」

⑥見た目をわかりやすくして、記憶をする必要性をなくす

例）閲覧済みのページ先リンクの色を変える

⑦ユーザのレベルにあわせて操作性を良くすること

例）初心者向けにガイドの表示、熟練者向けにショートカット機能

⑧情報は必要最低限にしぼり、デザインの規則を守ること

例）「設定」→レンチやギアのアイコンにする

⑨エラーが発生した場合はわかりやすいエラーメッセージにすること

例）「404 not found」→ページが見つかりませんでした。URLが間違っている可能性があります。

⑩見やすく、簡潔なヘルプとマニュアルを用意すること

例）問題における項目の対処がわからない→箇条書きにする

ユーザビリティとアクセシビリティの違い

ユーザビリティとアクセシビリティの共通点として、「サイト訪問者にとって、Webページの内容をより理解しやすくする」という視点に基づいていることです。相違点としての大きな違いは「誰に向けられた仕組みか」という点です。

ユーザビリティは特定のターゲットユーザーにとっての使いやすさを考えます。極論を言うと、それ以外のユーザーの使いやすさは考慮しません。一方アクセシビリティは、高齢者やハンディキャップを持つ人など、より多くの人にとっての使いやすさを考えたものです。

それでは、以下からアクセシビリティについて説明します。

アクセシビリティとは

アクセシビリティについて、その概要と具体例、ガイドラインをご紹介します。

アクセシビリティの概要

アクセシビリティとは、年齢や身体的な制約の有無や利用環境などに関係なく、誰でも必要とする情報に簡単にたどり着けて、利用できることを指します。特にWebでは、視覚障害を持つ方や色覚特性がある方、また、高齢者などに配慮が求められます。

アクセシビリティの具体例

スクリーンリーダー（音声案内）とalt属性

スクリーンリーダーはPC上のテキストを音声で読み上げてくれる機能で、主に目の不自由な方に用いられます。サイト上において重要な情報は、画像に依存せず、文字による説明を併記することで、音声案内を使用する方にも理解しやすいサイトとなります。画像にalt属性でキャプションを入れるのもこの一例です。

文字サイズの変更を可能にする

文字サイズを変更できるボタンの設置もアクセシビリティの一つです。主に高齢者を対象とした仕組みです。また、動く文字や点滅する文字もアクセシビリティの観点からは不親切といえるかもしれません。

コントラスト比を付ける

コントラストとは、画面表示における明暗の差のことを言います。また、コントラスト比は、画面上の最も明るい白表示と最も暗い黒表示の明るさの比率のことを指します。この比率が高いと明暗の差がはっきりし、シャープで鮮やかな表現になります。

テキストと背景色のコントラスト比が低いと読みづらくなるため、コントラスト比はWeb制作を行う上では必ず確認しましょう。

色に頼ったデザインを避ける

「色覚異常」をご存じですか？「色覚異常」とは、普通の見え方に比べ、色の識別がしにくい障害です。日本では男性の5%、女性の0.2%の割合で色覚異常だといわれています。色覚異常と一口に言っても様々な見え方がありますが、ほとんどの場合が赤、もしくは緑の識別が困難だと言われています。

このため、Web制作においては、「色によって重要性を判断する、操作をする」といったような設計は避けましょう。特にフォームや重要事項の確認画面などは気を付けたいところです。

アクセシビリティのガイドライン

アクセシビリティには「WCAG2.0」と「JIS X 8341-3」という公式に定められたガイドラインが存在します。どちらを基準にすればよい、という明確な決まりはありませんが、「WCAG2.0」は海外向け、「JIS X 8341-3」は国内向け、とおさえておきましょう。

WCAG2

「W3C」というWeb技術の標準化団体が提唱しているアクセシビリティの基準です。対策レベルを「A」「AA」「AAA」の三段階で掲載しています。詳しくは以下のURLを参照ください。

https://waic.jp/docs/UNDERSTANDING-WCAG20/Overview.htm

JIS X 8341-3

日本の標準化団体である、日本工業規格（JIS規格）から公開されているものです。先ほどの「WCAG2」と互換性のある企画です。詳しくは以下のURLを参照ください。

https://waic.jp/

この他にもアクセシビリティの指針を示している企業が多く存在します。一度検索してみれば情報が出てくるので、参考にしてください。
アクセシビリティについて詳しく知りたい方は過去のまとめ記事をご覧ください。

WebMedia参考記事

Webアクセシビリティ対策のポイントと向上のためのチェックツール

https://www.itra.co.jp/webmedia/accessibility_tool.html

Webサイトを作る際、アクセシビリティについてどれくらい意識していますか？近年、Webサイトを閲覧する人の層が広がり、...

まとめ

「ユーザビリティ」も「アクセシビリティ」もどちらもWebサイト制作において押さえておきたい知識であり、少なくとも「ユーザビリティ」におけるサイト設計は必須です。また、官公庁や教育機関などであれば、「アクセシビリティ」の対処も考えなければなりません。

Web制作を行っている弊社ITRAでは、アクセシビリティ向上やユーザビリティ向上のサポートを行っており、過去には賞をいただいた実績もあります。Webサイトのユーザビリティやアクセシビリティを向上をお考えの方は、ぜひ弊社ITRAまでご相談ください。