ユーザーインタフェース

目次

応用情報技術者試験（レベル３）シラバス－情報処理技術者試験における知識・技能の細目－ Ver.7.0 に基づき，「ユーザインタフェース」の対策ノートを作成した。

• ユーザインタフェース技術
• UX/UI デザイン
• 本稿の参考文献

ヒューマンインタフェース技術

(1) 情報アーキテクチャ

インフォメーションアーキテクチャ（IF : Information Architecture）とは，情報を整理し，ユーザに分かりやすく伝える，ユーザが情報を探しやすくするための手法である。

ラベル

ラベル (label) とは、名札、標識、付箋、肩書、商標、（札や標識などを）貼る、名前をつける、分類する、レッテルを貼る、などの意味を持つ英単語。一般の外来語としては、物体（特に商品など）の名前や中身、分類などを表示するために貼り付けるシールなどのこと指すことが多い。

チャンク

チャンク (chunk) とは、大きな塊、ぶつ切り、大量（の）、などの意味を持つ英単語。IT の分野では、大きなデータを分割して制御情報を付加したひとまとまりの断片などのことをチャンクと呼ぶ。

ナビゲーション

ナビゲーションとは、航行、航法、航海（術）、運行指示などの意味を持つ英単語。目的地までの経路や道順、移動方法の案内のこと。

Web の分野では、サイト内の各ページに共通して置かれる、サイト内のどこに何があるのかを簡潔にまとめたリンク集やメニューなどのことをナビゲーションということが多い。

LATCH

情報を分類・整理する手法として，LATCH（Location，Alphabet，Time，Category，Hierarchy）法があり，以下の 5 つの分類基準をいう。

1. Location : 都道府県別での分類など
2. Alphabet : 50 音順やアルファベット順など
3. Time : 日程別やタイムテーブルでの分類など
4. Category : 種類別での分類など
5. Hierarchy : ランキングやサイズ別での分類など

階層型

直線型

Web リンク型

フォークソノミー型

セマンティック Web

メタデータ

Web サイト内のコンテンツを記述するメタデータもドキュメントと同様に、いずれも同じように作られているとは限らない。例えば、カテゴリの分類や、タグ付け、パフォーマンスのチューニングなど、品質としての一貫性を保つべきである。メタデータの要素は、情報検索とコンテンツの管理に関して、どの程度の段階から始めることになるのか決まる要素になる。

(2) ユーザーインタフェース

ユーザビリティ（usability）

ユーザビリティとは、機器やソフトウェア、Web サイトなどの使いやすさ、使い勝手のこと。利用者が対象を操作して目的を達するまでの間に、どのくらい迷ったり間違えたりストレスを感じたりすることなく使用できるかを表す概念である。国際規格の ISO 9241-11 では，ユーザビリティを次のように定義している。

特定の利用状況において、特定の利用者によって、ある製品が、指定された目標を達成するために用いられる際の、有効さ、効率、利用者の満足度の度合い

上記の定義を鑑みると，Web ユーザビリティとは，「ある環境のもとで Web サイトを利用して目的を達成しようとしたときに正しく操作できるまでの時間や負担の度合い」と読み取ることができる。

「イラストで学ぶ　ヒューマンインタフェース」では，ユーザビリティを次のように説明している。

使いやすさのこと。一般に「使い勝手」という表現も使われる。操作のしやすさ，わかりやすさ，使い心地のよさ，便利さの総称である。

アクセシビリティ（Accessibility）

アクセシビリティ（Accessibility）とは、高齢者・障害者を含む誰もが、さまざまな製品や建物やサービスなどを支障なく利用できるかどうか、あるいはその度合いのことである。Web ページにおいては、そのページが、高齢者や障害者も含めた、誰もが情報を取得・発信できるように柔軟に設計されていて、アクセスした誰もが同様に情報を共有できるか、あるいはその度合いを意味する。

アクセシビリティ

アクセシビリティとは，等しい水準のユーザビリティをすべての個人について達成することではなく，少なくともある程度のユーザビリティをすべての個人について達成することである。（出典）JIS X 8341-1:2010「高齢者・障害者等配慮設計指針－情報通信における機器，ソフトウェア及びサービス－第1部：共通指針」

Web コンテンツのアクセスビリティを高めるガイドライン WCAG 2.0 は，以下の 4 つの原則を示している。

1. 知覚可能　情報および UI コンポーネントは，利用者が近くできる方法で利用者に提示可能でなければならない。
2. 操作可能　UI コンポーネントおよびナビゲーションは操作可能でなければならない。
3. 理解可能　情報および UI の操作は理解可能でなければならない
4. 堅牢　コンテンツは，支援技術を含むさまざまなユーザエージェントが確実に解釈できるように十分に堅牢でなければならない。

例として，入力が必須な項目は，色で強調するだけでなく，項目名の隣に "必須" などと明記する。

インタラクティブシステム

インタラクティブ（interactive）とは、相互に作用する、対話的な、双方向の、相乗効果の、などの意味を持つ英単語。ITの分野では、情報の送り手と受け手の関係が固定的ではなく、その場で互いにやり取りできる状態を指す。

音声認識（speech recognition）

音声認識とは、人の話し声を含むデジタル化された音声データを解析し、話している内容を文字データとして抽出する技術や処理のこと。コンピュータへの文字入力の方式の一種。

画像認識

動画認識

特徴抽出

学習機能

選択的知覚

ユーザ操作の分析

身体的適合性

ノンバーバルインタフェース

マルチモーダルインタフェース

空間的インタフェース

自然言語インタフェース

VUI (Voice User Interface : 音声ユーザインタフェース)

VUI とは、コンピュータと人間のやり取りを声（音声）によって行う操作方式。人間がマイクに発話することで指示したり、システムからの応答を合成音声によって伝達する（あるいはその両方）方式。

UX デザイン（User Experience デザイン）

ユーザエクスペリエンス（User Experience）は，ISO9241-210 において，「製品，システム，サービスを使用した，および／または，仕様を予期したことに起因する人の知覚（認知）や反応」と定義されている。利用者がインタラクション（相互利用）のある製品やサービスを利用した際に得られる経験や満足などの全体を指す。多くの場合，UX と略されて記述される。

世界的企業の UX コンサルティングを数多く手がけてきたジェシー・ジェームス・ギャレット氏が考案した UX の概念「UX デザインの 5 段階モデル」を次表に示す。

上記のモデルは，良い UX を生むためには，土台となる戦略フェーズから徐々に具体化することの必要性を示している。例えば，ユーザが何を求めているのか（つまり戦略の段階）が明確ではないのに，文字のフォントやカラー（つまり表層の段階）を決めるのは，ナンセンスだということである。

(3) GUI

GUI 設計では，ユーザがタスクを遂行するために，必要な情報，必お湯な作業エリアおよび結果表示エリア，また，ユーザの入力を促す環境を提供する。ただし，GUI はユーザがタスクを達成するためのガイドにすぎないことを念頭に置き，あまり凝ったものにしないように注意する。

GUI 設計における基本的な考え方は，以下のようにまとめることができる。

1. メンタルモデルを作りやすいモデル
2. 説明不要で使えるデザイン
3. 落ち着いた色調のデザイン
4. 自然な流れを促すデザイン
5. 一貫性をもたせる
6. 視認性を高める

ウィンドウ（window）

コンピュータの操作画面上で個々のソフトウェアに割り当てられた矩形の表示領域をウィンドウという。

アイコン（icon）

アイコンとは、コンピュータの操作画面で、処理の対象や内容などを一定の大きさの小さな絵や図、記号などで表現したもの。

ラジオボタン（radio button）

ラジオボタンとは、グラフィック表示を用いたコンピュータの操作画面（GUI）で、複数の項目から一つを選択するための小さな丸いボタン状の入力要素。選択肢の先頭に表示され、そのうちの一つだけを選択状態にすることができる。「はい」「いいえ」など排他的な選択肢を選ばせるために用いられる。

チェックボックス（チェックボックス）

チェックボックスとは、グラフィック表示を用いたコンピュータの操作画面（GUI）で、オン・オフなど二つの状態を切り替えて選択するために表示される小さな四角い操作要素。

リストボックス（list box）

リストボックスとは、グラフィック表示を用いたコンピュータの操作画面（GUI）で、選択肢をリスト状に列挙し、その中から利用者が選択する方式の入力領域。

プルダウンメニュー（pull-down menu）

プルダウンメニューとは、グラフィック表示を用いたコンピュータの操作画面（GUI）で、複数の項目から一つを選択する表示形式の一つ。

ポップアップメニュー（pop-up menu）

コンピュータの操作画面で、利用者がマウスやタッチで指示した位置に出現する操作メニューをポップアップメニューという。特に、メニュー項目の一つをクリックなどで指示した時に、そのすぐ下や横などに展開される子メニュー項目の一覧のことを指す。

テキストボックス（text box）

テキストボックスとは、グラフィック表示を用いたコンピュータの操作画面（GUI）で、文字（テキスト）情報を入力・表示することができる矩形（長方形）の領域。

インタフェース設計

(1) UX (User Experience) デザイン

(2) 情報デザイン

画面設計・帳票設計

① 画面設計

画面設計（画面レイアウト）とは、ソフトウェアの表示・操作要素を画面上にどのように配置するかを定めたもの。また、配置を定める設計作業のこと。

画面構成

情報の検索

情報の関係性

利用者の用語

情報提示ストーリ

ストーリボード

部分送信

ニューメリックチェック

フォーマットチェック

リミットチェック

組合せチェック

照合チェック

バランスチェック

チェックキャラクタ

穴埋め方式

メニューインプット方式

フォーマットエラー

論理エラー

シーケンスエラー

② 帳票設計

帳票とは、帳簿や伝票、申込書など、業務や取引に必要な情報の記入や印刷のために用いられる定型的な書類の総称。一般的には罫線などで項目が仕切られて、決まった位置に決まった内容が並ぶようデザインされた書類を指す。

出力特性

入力特性

(4) コード設計

順番コード（シーケンスコード）

シーケンスコードは、順番コードともいい、0001 → 0002 → 0003 → … → 9999 というように連続した値をデータに 1 つずつ割り当てていく方式である。

区分コード（分類コード）

区分コード（分類コード）は，ブロックコードとも言い，営業部は 1000 ～ 1999，企画部は 2000 ～ 2999 というようにグループごとに定められた範囲内でコードを割り当てる方式である。上位桁を見るだけで、どのグループに属しているのか判断できる特徴がある。

桁別コード

表意コード（ニモニックコード）

ニモニックコード（Mnemonic Code）は、表意コードとも言い、値から対象のデータが容易に連想できる英数字・記号の組合せをコードとして割り当てる方式である。他のコードよりも桁数が多くなりますが、利用者が記憶しやすい利点があり、商品番号や製品の型番としてよく使用されている。

例として，国名である日本を JP，アメリカを US と表現したり，色名である黒を BK，白を WH と表現する。

合成コード

デシマルコード

デシマルコードは、10 進コードとも言い、全てのデータを 0～9 の 10 グループに分割し、さらにグループごとに 10 個のサブグループに分割することを繰り返していく方式である。図書コード内の分類コードで使用されている。

(5) Web デザイン

空間近接原理

アフォーダンス

アフォーダンス理論は，アメリカの心理学者 J・J・ギブソンが提唱した認知心理学における概念で，「afford」（～ができる，～をあたえる）」と「-ance」の造語。アフォーダンスとは，動物（人間）に対して環境が提供するために備えているものであるとする。すなわち，物体，物質，場所，事象，他の動物，人工物などといった環境のなかにあるすべてのものが，動物（人間）の知覚や行為をうながす契機をつねに内包している（アフォーダンスをもつ）。たとえば椅子は「座る」ことをアフォードしているし，床はそこに立つことをアフォードしている。また知覚する動物の種が異なれば，アフォーダンスも異なる。

サイト内検索機能

ISO 9241

ISO 9241-210:2019 とは，国際標準化機構が 2019 年に制定したインタラクティブシステムの人間中心設計に関する規格である。英語名は "Ergonomics of human-system interaction -- Part 210: Human-centred design for interactive systems" である。

コンピューターを利用したインタラクティブシステムのライフサイクルにおける、人間中心設計の原則および活動のための要求事項と推奨事項について規定している。また、この規格ではユーザーエクスペリエンスについても定義されている。

ISO 9241 における人間中心設計のための基本原則として以下の 6 項目が挙げられている。

1. 設計は，ユーザ，タスク，環境の明確な理解に基づくべきである
2. ユーザは，設計から開発までの間，関与すべきである
3. 設計は，ユーザ中心の評価によって駆動され，改良されるべきである
4. これらの過程は反復的に行われるべきである
5. 設計はユーザエクスペリエンス全体を指向すべきである
6. 設計チームとして多様なスキルや視点をもった人を参加させるべきである

サイトマップ

サイトマップは，Web サイトにあるコンテンツを項目立てて一覧表示したもの。利用者がどのようなコンテンツがあるのかを素早く認識でき，目的の情報にたどり着きやすくなる利点がある。

クロスブラウザ

プログレッシブエンハンスメント

モバイルファースト

レスポンシブ Web デザイン

1 つの HTML ファイルを用意し，CSS3 のメディアクリエによって画面サイズごとの表示を制御する手法。画面サイズ（ブラウザの描画領域のサイズ）に応じて，適切なデザイン／レイアウトに切り替えて表示する手法。

レスポンシブ Web デザインの利点は，以下の通り。

• URL が 1 つなので，ユーザによるコンテンツの共有やリンクが簡単になる。
• 同じコンテンツのページをいくつも維持管理する手間が省ける
• ユーザをリダイレクトする必要がないので読み込み遅延が少ない

Google がレスポンシブ ウェブ デザインをモバイル対応のベストプラクティスとして推奨していることもあり，既存サイトがレスポンシブ ウェブ デザインに対応する例が増えている。なお，Google ではレスポンシブ ウェブ デザインを次のように説明している。

レスポンシブ ウェブ デザインは、サーバーからどのデバイスに対しても常に同じ HTML コードを配信しつつ、CSS を使用して各デバイスでのページのレンダリングを変更する設定方法です。

（出典）Google 検索セントラル「レスポンシブ ウェブ デザイン」

ナビゲーションバー

ナビゲーションバーは、Web サイトがどのようなコンテンツがあるかを知らせ、コンテンツへの誘導を促すメニューの役割をもつ UI 部品である。サイト内で共通してページの固定位置に設置することで利用者を迷わせないメリットがある。

パンくずリスト

利用者が現在閲覧している Web ページに表示する，Web サイトのトップページからそのページまでの経路情報をパンくずリストという。

(6) 人間中心設計

ISO 13407

国際標準化機構（ISO）により1999年に制定された規格で，英語名は "Ergonomics - Human-centred design processes for interactive systems" である。JIS Z 8530「人間工学 - インタラクティブシステムの人間中心設計プロセス」という名称で翻訳されている。

ユーザビリティ関連の規格の改定作業に伴い，ISO 13407 は ISO 9241 シリーズに統合され，ISO 9241-210:2010 として 2010 年に改訂された。

人間中心設計の原則（Principle of human-centred design）は，以下の 4 つの原則に基づいて行われることが望ましいとされている。

1. the active involvement of users and a clear understanding of user and task requirements（ユーザの積極的な参加，及び，ユーザとタスク要求の明確な理解）
2. an appropriate allocation of function between users and technology（ユーザと技術との適切な機能配分）
3. the iteration of design solutions（解決策の繰り返し）
4. multi-discipilinary design（多様な職種による設計）

使用状況の理解と明示

利用者と組織の要求事項の明示

設計による解決策の作成

要求事項に基づく設計の評価

(7) ユニバーサルデザイン

すべての人々に利用しやすい製品と環境のデザインをユニバーサルデザインと呼ぶ。ユーザビリティやアクセシビリティとは，明確に分けるものではなく，相互に補完しなければならない。そのため，Web の UI においてもユニバーサルデザインを意識することが重要となる。

ユニバーサルデザインは，多くのデザイナーなどによって 7 つの原則として掲げられている。これらの原則の中からも，ユーザビリティやアクセシビリティに関連していることが見て取れる。

1. 公平な利用（Equitable Use）
   誰もが同じ方法または代替の方法を提供して利用できるなど公平に作られていること。利用者が利用できないことで差別感や屈辱感を与えないようにする。
2. 利用における柔軟性（Flexibility in Use）
   自分のペースで利用や使い方を選べるなど利用者の好みや学習レベル，能力に合うように作られていること。初心者にはウィザードで，熟練者用のカスタム可能な詳細設定を利用するなどが考えられる。
3. 単純で直感的（Simple and Intuitive）
   利用者の経験や知識，言語能力，集中力に関係なく，簡潔で直感的に使い方がわかるように作られていること。操作のためのガイドや確認などを提供することが考えられる。
4. 認知できる情報（Perceptible Information）
   使用状況や，利用者の視覚，聴覚などの間隔能力に関係なく，必要な情報が効果的に伝わるように作られていること。ピクトグラム（絵文字）やアイコンを用いた表示などの利用が考えられる。
5. 失敗に対する寛大さ（Tolerance for Error）
   利用者の意図しない操作や行動によって思わぬ結果につながらないように作られていること。誤操作をしないようなデザインや構成にするほか，警告の表示や操作の取り消しなどの利用が考えられる。
6. 少ない身体的な努力（Low Physical Effort）
   同じ動作を何度も繰り返すことを減らすなど，利用者が煩わしさを感じることなく，効率良く，気持ちよく，疲れないで使えるように作られていること。一度選択されたボタンが画面の遷移などによってリセットされたりせずに，繰り返し利用できるなどが考えられる。
7. 接近や利用のためのサイズと空間（Size and Space for Approach and Use）
   どのようなデバイスや利用環境においてもアクセスしやすく，操作がしやすい空間や大きさで表現されること。

WAI (Web Accessibility Initiative)

WAI とは、あらゆる人が WWW を利用できるように、アクセシビリティの向上を率先する組織のことである。WWW に関する技術の標準化を推進する団体である W3C の中で組織されている。

WAI は、高齢者や身体的ハンディキャップを負った人など、身体の不自由な人々であっても容易にインターネットにアクセスできるように、アクセシビリティに関するガイドラインである WCAG（Web Content Accessibility Guidelines）を策定したり、Web に関する技術や補助機器の開発をおこなったり、あるいはガイドラインの研究、策定、教育などを推進したりしている。

WCAG （ Web Content Accessibility Guidelines）

WCAG とは、Web 技術・仕様の標準化を推進する W3C が提唱している Web ページのアクセシビリティに関するガイドライン。

1. （視覚に限定せず）何らかの形で内容を知覚できるようにする「知覚可能」（perceivable）
2. （特定の装置や方法に限定せず）様々な手段で操作できるようにする「操作可能」（operable）
3. 内容や操作方法を理解しやすくする「理解可能」（understandable）
4. 記述の完全性や技術仕様の互換性に配慮する「堅牢」（robust）

JIS X 8341

日本工業標準調査会（JISC）が制定した、情報通信における機器、ソフトウェアおよびサービスの情報アクセシビリティを確保・向上するために、企画・開発・設計者および経営者が配慮すべき具体的な要件がまとめられた標準規格です。

JIS X 8341は「高齢者・障害者等配慮設計指針―情報通信における機器，ソフトウェア及びサービス」と記され、規格群は次に示す第1部から第7部まで編成があります。

• JIS X 8341-1 第1部：共通指針
• JIS X 8341-2 第2部：パーソナルコンピュータ
• JIS X 8341-3 第3部：ウェブコンテンツ
• JIS X 8341-4 第4部：電気通信機器
• JIS X 8341-5 第5部：事務機器
• JIS X 8341-6 第6部：対話ソフトウェア
• JIS X 8341-7 第7部：アクセシビリティ設定

(8) ユーザビリティ評価

ユーザビリティに関する標準規格である JIS Z 8521 では、ユーザビリティ(使用性)を「ある製品が，指定された利用者によって，指定された利用の状況下で，指定された目的を達成するために用いられる際の，有効さ，効率及び利用者の満足度の度合い」と定義している。端的にいえばユーザビリティとは「利用者にとっての使いやすさ」のことである。

上記の定義中の「利用者の満足度」を評価するときには，インタビュー法を用いる。

ユーザビリティ評価手法は，以下に示す。

アンケート（質問紙法）

専門家が用意した質問用紙を多数の利用者に配布し、記入したもらった回答を分析することで評価する手法。

回顧法

被験者にタスクを実行してもらい、専門家がその行動を観察し、事後の質問への回答とともに分析する手法。

思考発話法

被験者にタスクを実行してもらい、その操作を行っている間、考えたことや感じたことを口に出してもらうことで利用者の感じ方や思考を分析する手法。

認知ウォークスルー法

複数の専門家が、設計仕様書や紙のプロトタイプを見ながら、対象となるユーザの行動をシミュレーションしていくことで問題点を明らかにしていく手法。人の認知過程を基準にする。

ヒューリスティック評価法

複数の専門家が、設計仕様書や紙のプロトタイプを見ながら、既知の経験則に照らし合わせて問題点を明らかにする手法。ヒューリスティックとは「経験則」の意で、専門家の経験則を基準にする。

ユーザビリティ評価は，どのような人が行うのかによって，以下の 3 つに分類することができる。

1. ユーザインタフェース専門家による評価手法
2. 開発担当者による評価手法
3. ユーザによる評価手法

本稿の参考文献

• 一般社団法人 日本ウェブアクセシビリティ協会
• 北原 義典，「イラストで学ぶ　ヒューマンインタフェース」，講談社，2011年9月20日
• 濱 勝巳，「入社１年目からの「Web 技術」がわかる本」，翔泳社，2015年8月21日
• 香西 睦，「だから，そのデザインはダメなんだ。 Web サイトの UI 設計・情報デザイン 良い・悪いが比べてわかる」，インプレス，2016年5月1日
• Google 検索セントラル「レスポンシブ ウェブ デザイン」