情報デザインとヒューマンインタフェースとは?わかりやすく解説
情報を分かりやすく整理する原則と、人とシステムの接点を使いやすくする考え方を学びます。
解説
1同じ画面の「悪い例」と「良い例」
入力する項目は同じ。変えたのは見せ方だけです。番号の場所を見比べてください。
イベント予約
3※お申込みの締切は本日18時です。締切後の変更はできません。その他の注意事項は利用規約をご確認ください。
イベント予約
3締切:本日18時まで
キャンセル
- 1
操作対象を明確に
✕ どれが押せるボタンか分からない
○ 押す所を目立つボタンに。主な操作は1つ
- 2
色だけに頼らない
✕ 必須を赤い色だけで伝えている
○ 「必須」と文字でも書く
- 3
対比:重要度で強弱
✕ 締切が小さな注記に埋もれている
○ いちばん上に大きく出す
- 4
近接:関係をまとまりで
✕ 郵便番号と住所が離れている
○ 関連する項目を近くにまとめる
2LATCH = 情報を並べる5つの切り口
同じ4つの店でも、何で並べるかで見つけやすさが変わります。目的に合う軸を選びます。
Location場所
地図・地域で並べる
Alphabet名前
あいうえお順・ABC順
- 青空カフェ
- 海風書店
- 木かげ珈琲
- さくら文庫
Time時間
日時・順序で並べる
- 7:00 青空カフェ
- 8:00 木かげ珈琲
- 10:00 海風書店
- 11:00 さくら文庫
Category種類
同じ種類でまとめる
カフェ:青空カフェ・木かげ珈琲
書店:海風書店・さくら文庫
Hierarchy階層・重要度
順位・大小・上下関係
- 1位 木かげ珈琲
- 2位 青空カフェ
- 3位 さくら文庫
- 4位 海風書店
3UI・UX・アクセシビリティ・ユーザビリティ
UI と UX
UI=画面・ボタンなど操作する接点。UX=知ってから使い終わるまでの体験全体。
アクセシビリティ
高齢者や障害のある人を含め、多様な人が情報や機能を使えること。
✕ 色だけで区別
氏名
色が見分けにくい人には伝わらない
○ 文字や読み上げでも伝わる
氏名 必須
画像には代わりの説明文も付ける
ユーザビリティ
利用者が目的を迷わず・少ない手間で達成できる使いやすさ。
例:ユーザビリティテスト=実際の利用者に「予約してください」と頼んで操作してもらい、迷った場所を観察して直す。
4試験ではここを見分ける
- 情報デザインは誰が・何のために・どこで使うかから考え、近接・対比などで視線を導く
- LATCH=Location 場所・Alphabet 名前・Time 時間・Category 種類・Hierarchy 階層
- UI=操作する接点、UX=利用前後を含む体験全体
誤り:Hierarchy は日時順のこと
正しくは:日時順は Time。Hierarchy は順位や上下関係
誤り:UX は画面デザインのこと
正しくは:画面は UI。UX は知る・使う・問い合わせるまでの体験全体
試験のポイント
ITパスポート試験での問われ方
情報デザインの原則とLATCHの使い分け、UI・UX、アクセシビリティ、ユーザビリティを区別します。
間違えやすいポイント
- 情報を一つの並べ方だけで整理できると思う
- Hierarchyを日時順のことだと思う
- UXを画面デザインだけと考える
関連用語
情報デザイン、LATCH、UI、UX、ユーザビリティ、アクセシビリティ
図解の内容を文章で読む
情報デザインとヒューマンインタフェースをイメージでつかむ
情報デザインは、伝える目的と相手に合わせ、情報のまとまり・順序・強弱を設計することです。整理の切り口にはLATCHがあり、場所・名前・時間・分類・階層のどれで並べると探しやすいかを考えます。UIは画面などの接点、UXは利用前後を含む体験全体です。
たとえると:駅の案内板は路線を色で分類し、現在地と出口を場所で並べ、重要な案内を大きく見せます。情報の整理と操作のしやすさを一緒に設計している例です。
分かりやすい情報デザインでは、まず「誰が、何のために、どこで使うか」を決めます。その上で、関連する情報を近づける近接、同じ役割の表現をそろえる整列・反復、重要な情報を目立たせる対比などを使い、読み手の視線を導きます。大量の情報の並べ方を選ぶ手掛かりがLATCHです。Locationは地図や店舗を場所で、Alphabetは名簿を名前順で、Timeは履歴を日時順で、Categoryは商品を種類別で、Hierarchyは組織や重要度を上下関係で整理します。一つの画面で複数の軸を組み合わせることもあります。画面やボタンなどの接点がUI、利用前後を含む体験全体がUXです。多様な人が利用できるアクセシビリティと、目的を迷わず達成できるユーザビリティも合わせて確認します。
押さえどころ
- 情報デザインは目的・利用者・利用場面から考える
- LATCHはLocation・Alphabet・Time・Category・Hierarchyの五つの整理軸
- 近い情報をまとめ、表現をそろえ、重要度に応じて強弱を付ける
- UIは操作上の接点、UXは利用全体の体験
確認問題(6問)
確認問題は本サービスのオリジナル問題です。ログインなしで解けます(結果は保存されません)。
「情報デザインとヒューマンインタフェース」の過去問(8問)
IPAが公開しているITパスポート試験の公開問題から、このテーマの問題を集めました。
あわせて覚える英略語
学習を記録して、合格まで続ける
教材と確認問題はこのページで全部無料で使えます。登録すると「情報デザインとヒューマンインタフェース」の結果や習熟度が記録され、苦手分野の復習提案、試験日までの学習計画、合格準備度の見える化が使えます。最初の7日間は学習記録も無料です。