同じ機能でも、使いやすいアプリと使いにくいアプリがあるのはなぜ? その差を生むのが情報デザインとUI/UXです。UIとUXの違い、ユーザビリティ・アクセシビリティ、覚えにくい類似用語の見分け方まで、会話でスッキリ整理します。
小夜川 ほのか
先生ぇ、アプリの紹介でよく『UI/UX』って書いてあるんですけどぉ、UIとUXって同じものなんですかぁ?
紫垣 こはる 先生
いい質問ね。
似ているけれど別物よ。
UIは『触れる部分』、UXは『感じる体験全体』。
レストランでたとえると、メニュー表やお皿がUI、お店に入ってから出るまでの満足度の全部がUXよ。
星見 めい
あー、料理が美味しくても店員さんの態度が最悪だったら『もう行かない』ってなるもんね。
それがUXってことじゃん!
紫垣 こはる 先生
そう、その通り。
料理の盛り付けやメニューの見やすさ(UI)も体験の一部だけど、UXはもっと広いの。
ふふ、めいさんは飲み込みが早いわね。
蜂谷 まこと
整理すると、UIはUXの一部ですね。
UXには操作性だけでなく、ブランドへの好感、買った後のサポート、また使いたいという感情までが含まれます。
小夜川 ほのか
じゃあ画面がキレイでも、使ってて疲れちゃったらUXは悪い…ってことですかぁ?
蜂谷 まこと
その理解で正しいです。
だからUIだけ磨いてもダメで、両方の視点が要ります。
紫垣 こはる 先生
そこで設計の物差しになるのがユーザビリティ、つまり使いやすさよ。
国際規格ISO 9241では『有効性・効率性・満足度』の3つで測ると決まっているの。
星見 めい
3つもあると覚えづらいな…マジか。
蜂谷 まこと
覚え方を補足すると、『ちゃんと目的を達成できる(有効性)・少ない手間で速くできる(効率性)・使って気持ちいい(満足度)』。
頭文字で『有・効・満』とつなげると思い出しやすいですよ。
小夜川 ほのか
有・効・満…なんだか呪文みたいで覚えられそうですぅ。
紫垣 こはる 先生
次に大事なのがアクセシビリティ。
これは『誰でも使えるか』ということ。
目の不自由な方、お年寄り、片手がふさがっている人まで含めて、みんなが情報にたどり着けるようにする考え方よ。
小夜川 ほのか
あれ…ユーザビリティとアクセシビリティって、どっちも『使いやすさ』っぽくて混ざっちゃいますぅ。
蜂谷 まこと
そこは試験でも狙われます。
ユーザビリティは『使いやすさの質を高める』、アクセシビリティは『使える人の幅を広げる』。
質を上げるか、対象を広げるか、で区別すると間違えません。
星見 めい
なるほど、『深さ』と『広さ』で覚えればいいんだ。
それなら混ざらないかも!
紫垣 こはる 先生
アクセシビリティの世界標準がWCAGという指針よ。
具体策としては、画像に代替テキストを付ける、文字と背景の色のコントラストを十分にとる、マウスなしでもキーボードだけで操作できるようにする、などね。
小夜川 ほのか
代替テキストって、目が見えない方が使う読み上げソフトが画像のかわりに読んでくれるやつですかぁ?
紫垣 こはる 先生
そう、ぴったりの理解よ。
スクリーンリーダーが『alt属性』に書かれた説明を読み上げてくれるの。
だから飾りでない画像には必ず付けるのが基本ね。
蜂谷 まこと
設計の進め方も押さえておきたいです。
代表的なのは、典型的な利用者像を1人の人物として描くペルソナ、その人の行動を時系列で並べるカスタマージャーニーマップ、試作品で早めに検証するプロトタイピングです。
星見 めい
プロトタイピングって、本番作る前に紙とかで試しに作ってみるやつだよね? 早めに失敗できるのが賢いじゃん。
紫垣 こはる 先生
その通りよ。
最近は最初から多様な人を巻き込んで設計するインクルーシブデザインや、年齢や性別を問わず誰でも使えるよう目指すユニバーサルデザインも重視されているわ。
小夜川 ほのか
インクルーシブとユニバーサル…また似たのが出てきましたぁ。
これも違うんですかぁ?
蜂谷 まこと
違いを補足します。
ユニバーサルデザインは『最初から全員が使える形』を目指すゴール、インクルーシブデザインは『当事者を巻き込んで作る』というプロセスや姿勢に重きがあります。
ゴールか、進め方か、で分けると整理できます。
星見 めい
今日のコツ、ぜんぶ『何で見分けるか』をセットで覚えるってことだね。
混乱しにくくて助かる!
紫垣 こはる 先生
ふふ、まとめてくれてありがとう。
最後に整理すると、UIは触れる部分でUXの一部、ユーザビリティは使いやすさの『深さ』、アクセシビリティは使える人の『広さ』。
この3点の関係を押さえれば、情報デザインの問題はぐっと解きやすくなるわよ。
確認クイズ
Webページの画像に代替テキスト(alt属性)を設定する主な目的として、最も適切なものはどれか。
- ページの表示速度(パフォーマンス)を向上させる
- 視覚障害者などが読み上げソフトで内容を把握できるようにし、アクセシビリティを高める
- 画像ファイルの容量を小さく圧縮する
- 不正アクセスを防ぎセキュリティを強化する
こたえを見る
正解: 2. 視覚障害者などが読み上げソフトで内容を把握できるようにし、アクセシビリティを高める
代替テキスト(alt属性)はスクリーンリーダーが画像の内容を読み上げる際に使われ、視覚障害者などが情報を把握できるようにするアクセシビリティ向上が主目的です。表示速度やファイル容量(圧縮)は画像自体の最適化の話で代替テキストとは無関係、セキュリティとも関係ありません。なお副次的にSEO評価の向上にもつながります。
