プロデュース・ディレクション

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

Webに関わったことがある方であれば、「ユーザビリティ」と「アクセシビリティ」という単語は一度は耳にしたことがあると思います。では、「ユーザビリティ」と「アクセシビリティ」の違いを説明することはできますか?と問われると少し戸惑ってしまう方もいるかもしれません。
今回はこの「ユーザビリティ」と「アクセシビリティ」の違いについて詳しくご紹介します。

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

目次

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

まず、ユーザビリティとアクセシビリティそれぞれの定義を簡単におさらいしていきましょう。ユーザビリティとはユーザビリティの国際規格のISO9241-11では次のように定義されています。

ある製品を、特定の利用者が、特定の目的を達成しようとするにあたって、特定の状況で、いかに効果的に、効率的に、満足できるように使えるかの度合い

ではアクセシビリティはどういったものなのかというと、ウェブアクセシビリティ基盤委員会では次のように定義されています。

一般にアクセシビリティとは、アクセスのしやすさを意味します。転じて、製品やサービスの利用しやすさという意味でも使われます。似た意味をもつ言葉にユーザビリティがありますが、アクセシビリティはユーザビリティより幅広い利用状況、多様な利用者を前提とします。

まずユーザビリティとアクセシビリティの共通点は、「サイト訪問者にとって、Webページの内容をより理解しやすくする」という視点に基づいているということです。サイトを訪れた人にとって使用しやすく、そして分かりやすいサイトになっているかが両者とも重要なポイントになります。

ではユーザビリティとアクセシビリティの違いを見ていきましょう。両者の大きな違いは「誰に向けられた仕組みか」という点です。

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

それでは、以下からユーザビリティとアクセシビリティについてそれぞれ詳しくご説明します。

アクセシビリティとは

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

アクセシビリティ

アクセシビリティの概要

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

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

1:スクリーンリーダー(音声案内)とalt属性

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

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

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

3:コントラスト比を付ける

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

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

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

「色覚異常」をご存じですか?「色覚異常」とは、普通の見え方に比べ、色の識別がしにくい障害です。日本では男性の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/

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

ユーザビリティとは

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

ユーザビリティの概要

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

①効率性 (Efficiency)

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


②学習のしやすさ(Learnability)

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


③記憶しやすさ(Memorability)

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


④エラー発生率(Errors)

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


⑤満足度 (Satisfaction)

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

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

ユーザビリティの具体例

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

1:ファーストビュー

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

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

2:メタファーとアイコン

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

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

3:アフォーダンス

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

4:デフォルメ

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

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

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

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

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


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

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


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

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


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

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


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

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


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

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


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

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


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

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


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

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


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

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

まとめ

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

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

関連記事

この記事の著者

itra
ITRA株式会社

官公庁や大手企業を中心とした大規模なWebサイトを総合的にプロデュースするWeb制作会社。デザインからシステム、サーバーまでWebサイトに関わるお客様の悩みを解決します。