UI設計の基本原則とアクセシビリティを学びます。使いやすさ・誰でも使える設計が重要です。
IPAの基本情報技術者試験シラバス、ISO 9241-11、W3CのWCAG 2.2の定義に沿って整理します。
日野 こむぎ
アプリの使いやすさって、見た目のデザインだけで決まるの?
藤森 さやか 先生
いいえ、利用状況を含む設計の話よ。
ユーザビリティとアクセシビリティは関連するけれど、同じ意味ではないの。
青木 澪
ISO 9241-11では、有効性・効率性・満足性を、利用者・目標・利用状況と組み合わせて評価します。
学習しやすさやエラーの起こりにくさも、設計を点検する有用な観点です。
桃井 すみれ
アクセシビリティって何ですかぁ?
青木 澪
高齢者・色覚障害・視覚障害の方も含めて誰でも使えるよう配慮すること。
WCAGという国際ガイドラインがあるわ。
藤森 さやか 先生
WCAGの四原則は、知覚可能・操作可能・理解可能・堅牢。
画像の代替テキストは知覚可能、キーボード操作は操作可能、一貫したラベルや分かるエラー説明は理解可能、支援技術が解釈できる名前・役割・値は堅牢につながるわ。
藤森 さやか 先生
代表的な原則: 一貫性 (同じ操作は同じ結果)、可視性 (操作可能な要素を明示)、フィードバック (操作結果を知らせる)、エラー対策。
日野 こむぎ
iPhoneとAndroidで操作感がちょっと違うのも、その辺の設計の違いってこと?
具体例: 申込フォームを改善する
青木 澪
必須項目を色だけで示すと、色を識別しにくい人には伝わりません。
『必須』という文字と記号を併用し、入力欄には内容を表すラベルを関連付けます。
桃井 すみれ
入力を間違えたら、赤くするだけじゃなく『郵便番号は7桁の数字で入力』と場所と直し方を伝えるんですねぇ。
藤森 さやか 先生
ええ。
選択肢が一つだけならラジオボタン、複数選択ならチェックボックス。
操作後は完了やエラーをフィードバックし、キーボードでも論理的な順番で移動できるようにするの。
日野 こむぎ
見た目がきれいでも、目的を達成できなかったら使いやすいUIとは言えないんだね!
確認クイズ
Webアクセシビリティの国際標準ガイドラインはどれか。
- WCAG
- ISO 9001
- PCI DSS
- ITIL
こたえを見る
正解: 1. WCAG
WCAG (Web Content Accessibility Guidelines) は W3C が策定するWebアクセシビリティの国際ガイドラインです。日本のJIS X 8341-3 もこれをベースにしています。
確認クイズ
申込フォームで複数の希望曜日を選ばせる部品として最も適切なものはどれか。
- ラジオボタン
- チェックボックス
- テキストボックス
- プログレスバー
こたえを見る
正解: 2. チェックボックス
複数の項目を独立して選択できるチェックボックスが適切です。ラジオボタンは同じグループから一つだけを選ばせるときに使います。
