情報デザインとヒューマンインタフェースとは?わかりやすく解説

テクノロジ系 ・ ヒューマンインタフェース ・ 読む目安9分

情報を分かりやすく整理する原則と、人とシステムの接点を使いやすくする考え方を学びます。

解説

良い情報デザインとは、説明を読まなくても「何が大事で、どこを操作すればいいか」が分かること。 まず実際の画面で、良い例と悪い例を見比べます。

1同じ画面の「悪い例」と「良い例」

入力する項目は同じ。変えたのは見せ方だけです。番号の場所を見比べてください。

✕ 悪い例

イベント予約

4郵便番号
2氏名
電話番号
メールアドレス
住所
1キャンセル送信

3※お申込みの締切は本日18時です。締切後の変更はできません。その他の注意事項は利用規約をご確認ください。

○ 良い例

イベント予約

3締切:本日18時まで

2氏名 必須
メールアドレス 必須
電話番号
4お届け先
郵便番号
住所
1予約を確定する

キャンセル

  • 1

    操作対象を明確に

    ✕ どれが押せるボタンか分からない

    ○ 押す所を目立つボタンに。主な操作は1つ

  • 2

    色だけに頼らない

    ✕ 必須を赤い色だけで伝えている

    ○ 「必須」と文字でも書く

  • 3

    対比:重要度で強弱

    ✕ 締切が小さな注記に埋もれている

    ○ いちばん上に大きく出す

  • 4

    近接:関係をまとまりで

    ✕ 郵便番号と住所が離れている

    ○ 関連する項目を近くにまとめる

2LATCH = 情報を並べる5つの切り口

同じ4つの店でも、何で並べるかで見つけやすさが変わります。目的に合う軸を選びます。

Location場所

地図・地域で並べる

Alphabet名前

あいうえお順・ABC順

  1. 青空カフェ
  2. 海風書店
  3. 木かげ珈琲
  4. さくら文庫

Time時間

日時・順序で並べる

  1. 7:00 青空カフェ
  2. 8:00 木かげ珈琲
  3. 10:00 海風書店
  4. 11:00 さくら文庫

Category種類

同じ種類でまとめる

カフェ:青空カフェ・木かげ珈琲

書店:海風書店・さくら文庫

Hierarchy階層・重要度

順位・大小・上下関係

  1. 1位 木かげ珈琲
  2. 2位 青空カフェ
  3. 3位 さくら文庫
  4. 4位 海風書店

3UI・UX・アクセシビリティ・ユーザビリティ

UI と 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パスポート試験の公開問題から、このテーマの問題を集めました。

あわせて覚える英略語

この解説をXでシェア

学習を記録して、合格まで続ける

教材と確認問題はこのページで全部無料で使えます。登録すると「情報デザインとヒューマンインタフェース」の結果や習熟度が記録され、苦手分野の復習提案、試験日までの学習計画、合格準備度の見える化が使えます。最初の7日間は学習記録も無料です。