ユーザーインタフェース技術とUX/UIデザイン

この単元の範囲

基本情報技術者試験のシラバスは「技術要素」を大分類3として位置づけ、その中の中分類7が「ユーザーインタフェース」である。ここでは、利用者と情報システムの接点をどう設計するかを、小分類「1. ユーザーインタフェース技術」（情報の構造化とUIの基礎技術）と、小分類「2. UX/UIデザイン」（体験設計と具体的な画面・帳票・コード設計手法）の2本立てで扱う。単なる見た目の話ではなく、「使う人にとって迷わず・誤操作なく・快適に使える」ようにするための考え方と用語を体系的に押さえるのが到達目標になる。

1. ユーザーインタフェース技術

1-1 情報アーキテクチャ

情報アーキテクチャとは、大量の情報を利用者が迷わず見つけられるように組み立てる設計技術である。図書館の本を分類するのに近いイメージで捉えるとよい。情報を意味のまとまりごとにグループ化した最小単位をチャンク、そのチャンクに付けるわかりやすい見出しをラベルと呼ぶ。例えばECサイトのメニューで「食品」「日用品」とカテゴリ分けし（組織化）、その中を「上位カテゴリ→下位カテゴリ」の階層型構造や、複数のタグを横断的に付与するタグ付けで構造化し、目的のページへ導くナビゲーションを用意する、という一連の流れが情報アーキテクチャの実践例である。

1-2 ユーザーインタフェース（UI）

UIは「利用者とシステムの接点」全般を指す概念で、ユーザビリティ（使いやすさ）とアクセシビリティ（誰にとっても利用しやすいか）という2つの評価軸が土台になる。人間の感覚・動作の特性を踏まえてシステムとの対話（インタラクション）を設計する分野をヒューマンインタフェースと呼び、音声認識・画像認識・動画認識のように入力から必要な情報だけを取り出す特徴抽出、人が数ある刺激の中から特定の情報だけに注意を向ける選択的知覚の理解が土台になる。また、ボタンの見た目が「押せそうに見える」ことで操作を誘導するシグニファイアという考え方や、身体的な操作のしやすさを指す身体的適合性も重要な観点である。

近年のUIは、身振り・音声・自然な動作で操作する方向に広がっている。キーボードやマウスに依存しない直感的な操作方式であるNUI（Natural User Interface）、音声だけでシステムと対話するVUI（Voice User Interface）、手の動きで操作するジェスチャーインタフェース、指で画面に直接触れて操作するマルチタッチインタフェース（画面に触れるタップ、指をなぞるスワイプ、素早く払うフリック、2本指でつまむピンチ、長押しするロングプレスなど）が代表例で、言葉によらないノンバーバルインタフェースや話し言葉で指示する自然言語インタフェースもこの流れに含まれる。

1-3 GUI

GUI（Graphical User Interface）は、画面上の視覚的な部品を通じて操作するインタフェースであり、部品ごとの役割を正しく理解しておく必要がある。作業単位を表すウィンドウ、機能を絵で表すアイコン、複数候補から1つだけを選ぶラジオボタン（ラジオボックス）、オン・オフを切り替えるトグルボタン、複数選択が可能なチェックボックス、選択肢を一覧表示するリストボックス、クリックで選択肢を展開するプルダウンメニュー、任意の位置に表示されるポップアップメニュー、見出しをクリックして内容を開閉するアコーディオン、カーソルを重ねると反応するホバー（ロールオーバー）、補足説明を表示するツールチップ、文字を入力するテキストボックスなどが代表的な構成部品である。GUI画面を設計する際は、これらの部品を目的に応じて適切に使い分けることが利用者の誤操作防止につながる。

2. UX/UIデザイン

2-1 UXデザイン

UX（User Experience）デザインは、システムの使いやすさだけでなく、利用を通じて利用者が得る体験全体を設計対象とする考え方である。設計プロセスを整理した代表的な枠組みがUXデザインの五段階モデルで、「なぜ作るか」を定める戦略、「何を作るか」を定める要件、情報の骨組みを組む構造、画面上の配置を決める骨格、見た目を仕上げる表層の順に、抽象度の高い層から具体的な層へと段階的に設計を進める。

2-2 情報デザイン

情報を利用者にわかりやすく伝えるための技法である。要素同士の関係性を近くに置く近接、要素をきれいに揃える整列、同じルールを繰り返し使う反復、要素間の違いを際立たせる対比というデザインの原則（4原則）は、レイアウトを整える際の基本指針になる。ほかに、データを図解してひと目で理解できるようにするインフォグラフィック、文字の見せ方を工夫するタイポグラフィ、デザインの方向性を画像や色でまとめたムードボードも情報デザインの実務でよく使われる用語である。

2-3 画面設計・帳票設計

①画面設計では、情報の画面構成や項目同士の関係性を踏まえたうえで、入力ミスを防ぐための各種チェックを組み込む。数値かどうかを確認するニューメリックチェック、決められた書式かを確認するフォーマットチェック、値が上限・下限の範囲内かを確認するリミットチェック、項目同士の組み合わせが妥当かを確認する組合せチェック、既存データと突き合わせる照合チェック、入力値の合計や貸借の一致を確認するバランスチェック、番号の末尾に検査用の数字を付与し入力誤りを検出するチェックキャラクターなどが代表例である。②帳票設計では、既存の帳票の様式に印字内容を重ね合わせて確認するフォームオーバーレイという技法が用いられる。

2-4 コード設計

データを一意に識別するための符号（コード）を設計する技術である。登録順に番号を振る順番コード、区分ごとにグループ分けする区分コード（分類コード）、桁ごとに意味を持たせる桁別コード、コード自体が内容を表す表意コード、複数の方式を組み合わせる合成コードの5方式を使い分けることで、業務要件に応じたコード体系を構築する。

2-5 Webデザイン

Webサイト特有の画面設計技術として、画面を複数領域に分割するフレーム、サイト内を回遊するためのナビゲーション、目的の情報を探すサイト内検索機能が基本要素になる。複数種類のWebブラウザで表示が崩れないようにするクロスブラウザ対応、基本機能から先に提供し高度な機能を段階的に追加するプログレッシブエンハンスメント、画面サイズに応じてレイアウトを自動調整するレスポンシブWebデザイン（判定にはメディアクエリを用いる）、文言そのもので体験を導くUXライティング、実装前にレイアウトの骨組みを示すワイヤーフレーム、限られた領域で複数の画像を切り替え表示するカルーセルなども頻出用語である。スタイルシートを用いてサイト全体のデザインを統一しつつ、これらの技術でブラウザ間の差異を吸収するのがWebデザインの基本方針になる。

2-6 人間中心設計

利用者の使いやすさを起点にシステムを設計する考え方を人間中心設計と呼び、その国際規格がJIS Z 8530（ISO 9241-210に対応）である。要件定義の段階から利用者を理解し、試作・評価を繰り返しながら改善していくプロセスを規格として定めたもので、ユーザビリティ向上のための基本的な指針として位置づけられる。

2-7 ユニバーサルデザイン

年齢・文化・障害の有無・能力の違いなどにかかわらず、できる限り多くの人が快適に情報システムを利用できることを目指す考え方がユニバーサルデザインである。日本の高齢者・障害者等配慮設計指針を定めたJIS X 8341（ウェブコンテンツを対象とする第3部が「ウェブアクセシビリティ規格」として特に知られる）、言葉によらず情報を伝える図記号のピクトグラム、視認性・可読性を高めたユニバーサルデザイン（UD）フォント、Webのアクセシビリティ向上に取り組む団体のWAI（Web Accessibility Initiative）、その具体的な達成基準をまとめたWCAG（Web Content Accessibility Guidelines）が代表的な用語である。

2-8 ユーザビリティ評価

設計したUIが実際に使いやすいかを検証する手法として、専門家が経験則（ヒューリスティックス）に基づいて画面を点検するヒューリスティック評価と、実際の利用者に操作してもらい問題点を観察するユーザビリティテストの2つが代表的である。専門家評価と利用者評価を組み合わせることで、設計者自身では気づきにくい問題を早期に発見できる。

---

参考文献

• IPA「基本情報技術者試験シラバス Ver.9.2」大分類3「技術要素」中分類7「ユーザーインタフェース」（PDF本文表記で-24-～-25-、目次表記ではp.24）: https://www.ipa.go.jp/shiken/syllabus/omgdg50000005kpe-att/syllabus_fe_ver9_2.pdf
• JIS Z 8530:2021（人間工学―人とシステムとのインタラクション―インタラクティブシステムの人間中心設計、ISO 9241-210:2019対応）参考情報: https://jis.eomec.com/jisz85302021
• JIS X 8341-3（高齢者・障害者等配慮設計指針－情報通信における機器，ソフトウェア及びサービス－第3部：ウェブコンテンツ）参考情報: https://kikakurui.com/x8/X8341-3-2016-01.html