資格道場 › レッスン一覧 › ユーザーインタフェース
ユーザーインタフェース・1/3・10分

ユーザビリティとUI設計の基本原則

ゴール

ユーザビリティとアクセシビリティの違い、満足度の評価手法、操作の一貫性、パンくずリスト、色だけに頼らない表示、エラーメッセージの書き方を区別できるようになり、この分野の過去問の選択肢から正解を選べるようになる。

UI の問題は計算がなく、用語の区別だけで1問取れる得点源です。要件定義で「使いやすさ」を非機能要件として書くときにも、そのまま使える考え方です。

このレッスンで稽古する(用語チェック・過去問)

結論:ユーザビリティは「目的をストレスなく達成できる度合い」

ユーザビリティ(使用性)とは、利用者が目的をストレスなく達成できる度合いのことです。JIS Z 8521(使用性の日本の規格)は、これを有効さ・効率・利用者の満足度の3つで定義しています。

たとえば駅の券売機なら、切符が買えたか(有効さ)、早く買えたか(効率)、イライラしなかったか(満足度)の3つで「使いやすさ」を見ます。

3つの要素 意味 券売機の例
有効さ 目的を正確に・最後まで達成できたか 行き先の切符が正しく買えた
効率 達成までに使った時間や手間 30秒で買えた・ボタンを押した回数が少ない
満足度 使った人が不快でなかったか(主観) 「分かりやすかった」と感じた

満足度だけは**利用者本人の感じ方(主観)**です。このことが、後で出てくる評価手法の問題を解くカギになります。

いちばん狙われる区別:ユーザビリティとアクセシビリティ

試験では、ユーザビリティの説明を選ばせる問題にアクセシビリティやユニバーサルデザインの説明を混ぜてきます。見分けるポイントは**「誰のための話か」**です。

用語 中心となる考え方 見分けるキーワード
ユーザビリティ 利用者が目的をストレスなく・効率よく達成できる度合い 「ストレス」「目標の達成」「有効さ・効率・満足度」
アクセシビリティ 障がい者や高齢者も含めて、支障なく利用できること 「障がい者や高齢者」「利用できる」
ユニバーサルデザイン 障がい・年齢・性別・国籍などにかかわらず、だれもが使えるように最初から設計すること 「かかわらず」「だれもが」

選択肢に「障がい者」「高齢者」「だれもが」が出てきたら、ユーザビリティの説明ではありません。アクセシビリティが「使えるかどうか」の話なのに対して、ユーザビリティは「どれだけ快適に使えるか」の話です。

「使える」の上に「快適に使える」ユニバーサルデザイン:最初からだれもが② ユーザビリティストレスなく・効率よく達成できるか① アクセシビリティ障がい者や高齢者も利用できるか「障がい者」「高齢者」→① 「だれもが」→外枠
アクセシビリティは「利用できるか」という土台、ユーザビリティはその上の「ストレスなく達成できるか」。ユニバーサルデザインは、最初からだれもが使えるように全体を設計する考え方。

使用性を上げる施策と、他の品質特性の見分け方

ソフトウェアの品質は、いくつかの特性(観点)に分けて考えます。「使用性を上げる施策はどれか」という問題では、ほかの特性を上げる施策が誤りの選択肢として並びます。

品質特性 意味 向上させる施策の例
使用性 使い方が分かりやすく、使いやすいこと オンラインヘルプの充実・画面の統一・分かりやすいメッセージ
相互運用性 他のシステムとつながってデータをやり取りできること 外部インタフェースを見直して、連携先を増やす
機能性(機能適合性) 必要な機能がそろっていること 機能を追加して、使える業務の範囲を広げる
信頼性 故障しにくく、壊れてもデータを失わないこと データの複製を分散して置く

迷ったら、「利用者が使い方を理解しやすくなるか」で判断します。機能が増えても連携先が増えても、使い方が分かりやすくなるとは限りません。

評価手法:満足度は「本人に聞く」

ユーザビリティを評価する方法は、誰が評価するかと何が測れるかで区別します。満足度は利用者の主観なので、本人に直接聞くインタビュー法が向いています。

手法 誰が評価するか 何が分かるか
インタビュー法 利用者本人に質問する 満足度などの主観的な感想
ヒューリスティック評価 専門家が経験則(チェック項目)に照らして調べる 利用者を集めずに問題点を洗い出せる
ユーザビリティテスト 利用者に実際に作業をしてもらい、それを観察する 作業の成功率・かかった時間(有効さ・効率)
ログデータ分析法 システムに残った操作の記録を分析する クリック数・離脱した箇所など(客観的な数値)

「満足度」とあればインタビュー法、「専門家」とあればヒューリスティック評価と覚えれば十分です。ヒューリスティックは「経験則」という意味です。

操作の一貫性と、迷わせないナビゲーション

操作の一貫性とは、どの画面でも同じ操作は同じ見た目・同じ位置にすることです。家の照明スイッチがどの部屋でもドアの横の同じ高さにあれば、手探りでも押せるのと同じです。

一貫性の問題では、ほかの設計原則が誤りの選択肢として並びます。どれも良い設計ですが、目的が違います。

設計の例 目的(原則)
どの画面でもボタンの位置や形を同じにする 操作の一貫性
Undo(元に戻す)で一つ前の状態に戻せる 操作の誤りから回復できるようにする
処理の進み具合を表示する 利用者へのフィードバック(いま何が起きているかを伝える)
ショートカットキーで操作できる 慣れた人の効率を上げる

Web サイトで迷わせないための部品も、名前と役割を区別して覚えます。

部品 役割
パンくずリスト トップページから今いるページまでの経路を表示する(例:ホーム > 製品 > ノートPC)
サイトマップ サイト全体の構造を一覧にしたページ
ナビゲーションバー 主要なページへ移動するための共通メニュー
スクロールバー 画面に入りきらない内容を上下左右に動かすための部品

パンくずリストという名前は、童話『ヘンゼルとグレーテル』で、帰り道が分かるようにパンくずを落としていった話から来ています。「経路」とあればパンくずリストです。

サイトマップ=この木の全体を一覧にホーム製品会社案内ノートPCタブレット今いるページホーム > 製品 > ノートPCパンくずリスト=今いるページまでの経路
サイトマップはサイト全体の木を一覧にしたもの。パンくずリストはその中で、トップから今いるページまでの経路だけを1行で表示する。

アクセシビリティ設計:色だけに頼らない

色の見え方は人によって違うので、色だけで情報を伝えないことが基本です。入力必須の項目は、色で強調するだけでなく「(必須)」と文字でも書きます。

  • 適切:必須項目を色と文字(「(必須)」)の両方で示す
  • 不適切:ページを開いた瞬間に音声を自動再生する(画面読み上げソフトの音声とかぶり、利用者が止められない)
  • 不適切:見た目を整えるために表組みでレイアウトする(読み上げソフトが読む順番が崩れる)
  • 不適切:リンク画像の alt属性(画像の代わりに読み上げる説明文)に URL を書く(URL を聞いてもリンク先の内容は分からない。alt属性にはリンク先の内容を書く)
× 色だけ○ 色+文字氏名メモ色が見分けにくいと必須か分からない氏名(必須)メモ色が見えなくても文字で必須と分かる
必須項目を色だけで示すと、色が見分けにくい人には分からない。「(必須)」と文字でも書けばだれでも分かる。

エラーメッセージ:利用者が「次に何をすべきか」を書く

エラーメッセージは、利用者が何をすべきかを簡明かつ正確に伝えるように書きます。開発者向けの情報だけを出す、エラーコードや略号だけを出す、対処方法を省く、といった書き方は利用者に不親切なので誤りです。

試験での問われ方

  • 定義問題:ユーザビリティの説明の中に、アクセシビリティ(障がい者・高齢者)とユニバーサルデザイン(だれもが)の説明を混ぜてくる
  • 施策問題:「使用性を上げる」施策の中に、相互運用性・機能性・信頼性を上げる施策を混ぜてくる
  • 評価手法問題:「満足度」を評価する手法を、ヒューリスティック評価・ユーザビリティテスト・ログ分析と並べて選ばせる
  • 設計原則問題:「一貫性」の例を、Undo・進行状況の表示・ショートカットと並べて選ばせる
  • 名前当て問題:経路の表示をサイトマップやナビゲーションバーと並べて選ばせる

この分野は、キーワード1語で選択肢を絞れる問題がほとんどです。

要点(試験直前に読む)

  • ユーザビリティは「目的をストレスなく達成できる度合い」。JIS Z 8521 では、有効さ・効率・満足度の3要素で定義する。
  • 「障がい者・高齢者」とあればアクセシビリティ、「だれもが・かかわらず」とあればユニバーサルデザイン。どちらもユーザビリティではない。
  • 満足度は主観なのでインタビュー法で評価する。ヒューリスティック評価は専門家、テストとログ分析は有効さ・効率を見る方法。
  • 操作の一貫性は「どの画面でもボタンの位置や形を同じにする」こと。トップから今いるページまでの経路の表示はパンくずリスト。
  • 色だけで情報を伝えず、「(必須)」と文字でも書く。エラーメッセージには、利用者が次に何をすべきかを簡明に書く。

ひっかけ

  • ユーザビリティの定義問題に、アクセシビリティやユニバーサルデザインの説明が混ざる → 「障がい者」「だれもが」という語が入った選択肢を外す。
  • 使用性を上げる施策に、連携先の追加(相互運用性)・機能の追加(機能性)・データの複製(信頼性)が混ざる → 「使い方が分かりやすくなるか」で判断する。
  • 満足度の評価に、ヒューリスティック評価やユーザビリティテストが混ざる → 満足度は主観なので、本人に聞くインタビュー法を選ぶ。
  • 一貫性の例に、Undo・進行状況の表示・ショートカットが混ざる → どれも良い設計だが、「同じにそろえる」話はボタンの位置や形をそろえる選択肢だけ。
  • alt属性に URL を書く、エラーコードだけを表示する、といった一見親切そうな選択肢 → 利用者が内容を理解できるか、次に何をすべきか分かるかで判断する。

用語(15)

ユーザビリティ(使用性) ユーザビリティ(Usability)
利用者が目的をストレスなく、有効に・効率よく・満足して達成できる度合い。
⚠ アクセシビリティは障がい者や高齢者も「利用できる」こと。ユーザビリティは「どれだけ快適に使えるか」。
アクセシビリティ アクセシビリティ(Accessibility)
障がい者や高齢者を含む人が、支障なく情報やサービスを利用できること。
⚠ 選択肢に「障がい者や高齢者」と出てきたらアクセシビリティ。ユーザビリティとは別の概念。
ユニバーサルデザイン ユニバーサルデザイン(Universal Design)
障がい・年齢・性別・国籍などにかかわらず、だれもが使えるように最初から設計すること。
⚠ 「だれもが」「かかわらず」がキーワード。アクセシビリティは「利用できること」そのもの。
JIS Z 8521 ジス ゼット はちごーにーいち
使用性を、有効さ・効率・利用者の満足度の度合いとして定義した日本の規格。
有効さ・効率・満足度 ゆうこうさ・こうりつ・まんぞくど
使用性の3要素。目的を達成できたか、どれだけ手間をかけずに達成できたか、利用者が不快でなかったか。
⚠ 満足度だけが主観なので、利用者に聞く方法(インタビュー法)で評価する。
インタビュー法 インタビューほう
利用者に直接質問して、満足度などの主観的な評価を聞き出す方法。
⚠ ユーザビリティテストは作業を観察して、成功率や時間を測る方法。
ヒューリスティック評価 ヒューリスティックひょうか(Heuristic Evaluation)
専門家が経験則のチェック項目に照らして、UI の問題点を調べる方法。
⚠ 評価するのは利用者ではなく「専門家」。
ユーザビリティテスト ユーザビリティテスト(Usability Test)
利用者に実際に作業をしてもらって観察し、達成できたか・どれだけ時間がかかったかを調べる方法。
⚠ 有効さや効率を測るのが得意。満足度を聞くならインタビュー法。
ログデータ分析法 ログデータぶんせきほう
システムに残った操作の記録を分析して、利用状況を客観的な数値で把握する方法。
⚠ 数値で分かるのは行動だけで、満足度(気持ち)は分からない。
相互運用性 そうごうんようせい(Interoperability)
他のシステムとつながって、データをやり取りできる性質。
⚠ 「連携できる他システムを増やす」はこれ。使用性ではない。
信頼性 しんらいせい(Reliability)
故障しにくく、壊れてもデータを失わずに使い続けられる性質。
⚠ 「データの複製を分散配置」はこれ。使用性ではない。
オンラインヘルプ オンラインヘルプ(Online Help)
画面上から呼び出せる、使い方の説明。
⚠ 使用性を上げる施策の代表例。
操作の一貫性 そうさのいっかんせい
どの画面でも、同じ操作のボタンを同じ位置・同じ形にそろえること。
⚠ Undo は誤りからの回復、進行状況の表示はフィードバック、ショートカットは慣れた人の効率のための工夫。
パンくずリスト パンくずリスト(Breadcrumb List)
トップページから今いるページまでの経路を、階層の順に並べた表示。
⚠ サイトマップはサイト全体の一覧、ナビゲーションバーは共通メニュー。「経路」ならパンくずリスト。
alt属性 オルトぞくせい(alternative text)
画像の代わりに読み上げソフトが読む説明文を指定する、HTML の属性。
⚠ URL ではなく、画像の内容やリンク先の内容を書く。

このレッスンの過去問

このレッスンで稽古する