情報デザインの要点とまちがえやすい点（ITパスポート試験 論点テキスト）
ITパスポート試験のテクノロジ系（技術要素）のうち、「情報デザイン」にあたる9論点を、要点50本・まちがえやすい点34本にまとめました。
最終更新：2026年10月6日
ご利用にあたって：本ページおよびアプリ「ITウカール」は、政府・経済産業省・独立行政法人情報処理推進機構（IPA）のいずれとも関係のない、個人開発の非公式サイト・アプリです。公式の文章の転載ではありません。出題範囲・受験の情報は、必ずITパスポート試験の公式サイトでご確認ください。
このページの論点
情報デザイン
情報デザインの原則と表現の考え方
近接などのデザインの原則、情報の構造化、インフォグラフィックス、メタファ、アフォーダンスといった表現の考え方を扱う。
要点
- 近接は、関連する要素を近づけて配置し、関連の薄い要素との間には距離を取ることで、情報のグループを直感的に把握できるようにする原則である。
- 整列は要素の端や中心をそろえて秩序を与える原則、反復は色や書体などを繰り返して統一感を出す原則、対比は大きさや色の差で重要度の違いを際立たせる原則である。
- 箇条書きや表による整理は、情報の構造や項目間の関係を明確にし、読み手が短時間で把握できるようにする情報デザインの手法である。
- インフォグラフィックスは、データや情報を図やグラフ、イラストで視覚的に分かりやすくまとめた表現手法である。
- メタファは、ファイルの削除をごみ箱の絵で表すように、現実世界の物や行為になぞらえてアイコンや操作の意味を直感的に伝える考え方である。
- アフォーダンスは、対象の形状や見た目が使い方を自然に示唆する性質であり、UI設計で操作の直感性を高めるために利用される。
まちがえやすい点
- 近接はまとまりを距離で示す原則であり、要素の端をそろえる整列や色・書体を繰り返す反復とは目的が異なる。
- アフォーダンスは見た目が使い方を示唆する性質であり、現実の物になぞらえるメタファや使いやすさの度合いであるユーザビリティとは別である。
- インフォグラフィックスは情報を視覚化した表現物であり、画面の取り込みであるキャプチャや縮小見本画像のサムネイルとは異なる。
- メタファは現実の物になぞらえる考え方であり、画面上の要素の配置を指すレイアウトや画面の骨組みを示すワイヤーフレームではない。
UXと試作・評価の手法
UIとUXの違い、プロトタイピング、ヒューリスティック評価、ワイヤフレームといった設計と評価の手法を扱う。
要点
- UXは、製品やサービスの利用を通じて利用者が得る満足感や印象など、体験全体を表す概念である。
- プロトタイピングは、本格的な開発の前に画面イメージや操作の流れなどの試作品を作り、利用者からの評価をもとにインタフェースを改善していく手法である。
- ヒューリスティック評価は、実際の利用者にテストを依頼せず、専門家があらかじめ定められた経験則に基づいて画面や操作の使いやすさを評価する手法である。
- ワイヤフレームは、配色や画像などの装飾を省き、要素の配置や画面構成だけを簡素な線画で示す設計図である。
- UX デザインは、製品やサービスの利用を通じて利用者が得る体験全体が良いものになるように設計する考え方。
まちがえやすい点
- UIは画面や操作方法など利用者と機器の接点そのものであり、その接点を通じて得られる体験まで含むUXとは範囲が異なる。
- ヒューリスティック評価は専門家の経験則による評価であり、実際の利用者に操作してもらい観察するユーザビリティテストとは異なる。
- プロトタイピングは試作品で評価する手法であり、完成に近いプログラムの不具合を検出・修正するデバッグやテストとは段階が異なる。
- ワイヤフレームは要素配置を示す骨組みの設計図であり、ページ全体の構成を示すサイトマップや処理の流れ図であるフローチャートではない。
ユニバーサルデザインとアクセシビリティ
ユニバーサルデザインとバリアフリーの違い、アクセシビリティ、色や代替テキストへの配慮、ピクトグラムを扱う。
要点
- アクセシビリティは、高齢者や障がいのある人を含む、より幅広い利用者が情報や機器に不自由なくアクセスし利用できることを表す概念である。
- ユニバーサルデザインは、年齢や身体的特性、障がいの有無などにかかわらず、できるだけ多くの人が利用しやすいように製品や環境をあらかじめ設計する考え方である。
- カラーユニバーサルデザインは、色の見え方に個人差があることを踏まえ、色の組合せだけに頼らず形・模様・文字なども併用して情報を伝える考え方である。
- JIS X 8341は高齢者・障害者等配慮設計指針を定めた日本産業規格で、Webアクセシビリティの指針であるJIS X 8341-3を含む。
- ピクトグラムは、意味を単純な絵記号で表し、言語が異なる人にも直感的に伝える図記号であり、案内標識などに使われる。
- 代替テキスト（alt属性）は画像に内容を説明する文字情報を付けておく配慮で、音声読み上げソフトが画像の代わりに読み上げ、視覚障害者もページを理解できる。
- 文字と背景のコントラストを十分に確保するのは、色覚の特性がある人や視力の弱い人、明るい屋外での閲覧者にも読みやすくするためである。
まちがえやすい点
- ユニバーサルデザインは設計の最初から多くの人の利用を考える考え方であり、既存の障壁を後から取り除くバリアフリーとは設計の出発点が異なる。
- アクセシビリティは幅広い利用者の利用可能性を表すのに対し、ユーザビリティは特定の利用者にとっての使いやすさに焦点を当てる概念で、対象の範囲が異なる。
- 画像に代替テキストを付けない方がよいのではなく、付けないとアクセシビリティが下がる。読み上げソフトを使う人は代替テキストで内容を理解する。
- JIS Q 15001は個人情報保護マネジメントシステムに関する規格であり、Webアクセシビリティを扱うJIS X 8341とは対象領域が異なる。
インタフェース設計
ユーザビリティとインタフェースの種類
ユーザビリティの意味と、GUI・CUI・NUIといった利用者インタフェースの方式の違いを扱う。
要点
- ユーザビリティは、特定の利用者が特定の目的のもとで製品やサービスを利用する際の、効果・効率・満足度といった使いやすさの度合いを表す概念である。
- GUIは、アイコンやウィンドウ、メニューなどを画面上に視覚的に表示し、マウスやタッチ操作で直感的に機器を操作できるようにした利用者インタフェースである。
- CUIは、マウスなどを使わず、キーボードから文字によるコマンドを入力してコンピュータを操作する方式のユーザインタフェースである。
- NUIは、音声やジェスチャ、視線など、人間が普段の生活で行う自然な動作によって機器を操作できるようにした利用者インタフェースの総称である。
まちがえやすい点
- CUIはコマンドを文字で入力する方式であり、アイコンやウィンドウなど図形を用いて直感的に操作するGUIとは操作方法が異なる。
- NUIは身振りや音声など自然な動作全般を用いる広い概念であり、特定の操作手段に限定されるCUIやGUIとは範囲が異なる。
- キャラクタベースインタフェースはCUIの別表現であり、NUIとは異なる方式である。
音声・ジェスチャ・マルチモーダル操作
音声認識と音声合成、VUI、タッチ操作のジェスチャ、複数の入力手段を組み合わせるインタフェースを扱う。
要点
- 話しかけた言葉を文字データに変換する技術は音声認識、文字データを人の声のように読み上げる技術は音声合成と呼ばれる。
- VUIは、話しかけた音声を認識し、それに応じた応答や機器の操作を行う、音声を中心とした利用者インタフェースである。
- ジェスチャ操作は、タッチパネル上のスワイプや2本指の間隔を変えるピンチイン・ピンチアウトのように、指の動きそのものによって機器を操作する方式である。
- マルチモーダルインタフェースは、音声・タッチ・視線・ジェスチャなど、複数の異なる入力手段を組み合わせて機器の操作を可能にするインタフェースである。
- ジェスチャーインタフェースは、利用者の手や体の動きをカメラやセンサーで読み取り、機器を操作する指示として受け付ける方式。
まちがえやすい点
- VUIは音声操作に特化したインタフェースであり、身振りや音声など自然な動作全般を指すNUIとは範囲が異なる。
- マルチモーダルインタフェースは複数の入力手段の組合せを特徴とし、単一の入力手段のみを用いるシングルモーダルとは異なる。
- 音声認識と音声合成は音声を対象とする技術であり、紙などの画像から文字を認識するOCRとは対象が異なる。
- ジェスチャ操作は指の動きそのものを操作手段とし、文字入力を中心とするキーボード操作や発話で指示する音声操作ではない。
選択・入力に使うGUI部品
ラジオボタン・チェックボックス・プルダウンメニュー・スライダーの選択方法の違いを扱う。
要点
- ラジオボタンは、複数の選択肢の中から1つだけを選択する操作に用いられるGUI部品である。
- チェックボックスは、複数の選択肢の中から0個以上いくつでも自由に選択できるGUI部品である。
- プルダウンメニューは、項目をクリックすると選択肢の一覧が下方向に表示され、その中から1つを選べるGUI部品で、限られた画面スペースで多くの選択肢を提示できる。
- スライダーは、つまみを動かして範囲内の値を連続的に設定するGUI部品で、音量や明るさの調整に使われる。
- リストボックスは、複数の項目を一覧で表示し、その中から1つまたは複数を選択させるGUI部品。
まちがえやすい点
- ラジオボタンは択一選択の丸型の部品であり、複数選択できる四角型のチェックボックスとは選べる個数の制約が異なる。
- スライダーはつまみを動かして値を設定する部品であり、文字入力のテキストボックスや複数選択のチェックボックスではない。
- スクロールバーは表示範囲を移動させるための部品であり、選択肢の一覧から1つを選ぶプルダウンメニューとは別である。
表示・操作に使うGUIの機能
ツールチップ・プログレスバー・ハンバーガーメニュー・ドラッグアンドドロップ・ショートカットキーの働きを扱う。
要点
- ツールチップは、ポインタをアイコンやボタンの上にしばらく重ねたままにすると、その項目の名称や簡単な説明が小さな吹き出しとして表示される機能である。
- プログレスバーは、ファイルのダウンロードやインストールなど、処理がどこまで進んだかを帯状の図形で視覚的に示すGUI部品である。
- ハンバーガーメニューは、三本線アイコンをタップするとメニューが開く、画面の狭いスマートフォンで広く使われる省スペースなUIである。
- ドラッグアンドドロップは、対象をクリックしたまま別の場所へ移動させ、目的の位置でボタンを離すことで、ファイルの移動やコピーなどを行う操作である。
- ショートカットキーは、Ctrlキーなどと他のキーを組み合わせて押すことで、メニューを開く操作を経ずに特定の機能を素早く呼び出せるキー操作である。
- ヘルプ機能は、操作の方法や用語の意味などを、利用者がいつでも調べられるように用意された説明の機能。
- ポップアップメニューは、画面上の任意の位置でマウスの右クリックなどを行うと、その場に現れる項目一覧のメニュー。
- ホバーは、マウスポインタをボタンなどの上に重ねた状態のこと。色を変えるなどの表示の切替えに使われる。
まちがえやすい点
- ツールチップはポインタを重ねたときに一時的に説明を表示する機能であり、現在の状態を常時表示するステータスバーとは別である。
- ハンバーガーメニューは三本線アイコン式のメニューであり、項目をクリックすると下に選択肢が出るプルダウンメニューとは異なる。
- ショートカットキーはキーの組合せで機能を呼び出す操作であり、キー自体を指すファンクションキーとは異なる。
- プログレスバーは処理の進捗を示す部品であり、表示範囲を移動させるスクロールバーとは目的が異なる。
- ドラッグアンドドロップは対象を掴んで移動させる操作であり、短時間に2回クリックしてファイルを開くダブルクリックではない。
画面設計と入力の確認
入力フォームの検証、エラー表示と入力例の示し方、元の画面の操作を止めるモーダルウィンドウを扱う。
要点
- 入力バリデーションは、入力フォームで入力内容が正しい形式かどうかをその場で確認し、利用者に知らせる仕組みである。
- 誤った操作をしたときに、何が問題でどうすれば直るかを具体的に示すエラーメッセージは、利用者が自力で回復する助けになる。
- 入力欄に書式の例をあらかじめ示す入力例の提示は、誤入力そのものを減らす設計である。
- モーダルウィンドウは、表示されている間は裏にある元の画面の操作をできなくし、利用者に確認や入力への応答を強制する小さなウィンドウである。
まちがえやすい点
- エラー時の表示は、何も表示しないのではなく、問題と直し方を具体的に示す。何も表示しないと利用者は次に何をすればよいか分からない。
- モーダルウィンドウは元の画面の操作を制限する性質を持ち、ツールバーやステータスバー、タブとは異なる。
- 入力バリデーションは入力内容の形式確認を主目的とし、処理を高速化する一時保存のキャッシュや、ブラウザに保存される小さなデータのクッキーではない。
Webデザインとナビゲーション
画面サイズに応じて変化するレスポンシブデザイン、現在位置を示すパンくずリスト、ダークモードを扱う。
要点
- レスポンシブデザインは、1つのWebページのデザインを、閲覧するデバイスの画面サイズに応じて自動的に最適なレイアウトに変化させる設計手法である。
- パンくずリストは、現在表示しているページがサイト全体の階層構造のどこに位置するかを一列で示すナビゲーション表示である。
- ダークモードは、画面の背景を黒などの暗い色調で表示するUIの設定で、暗い環境での目の負担の軽減につながるとされる。
- モバイルファーストは、スマートフォンなど小さな画面での利用を先に想定してWebサイトを設計し、その後に大きな画面へ広げる設計方針。
- レスポンシブ Web デザインは、同じ内容のWebページを、閲覧する機器の画面幅に応じてレイアウトを自動的に調整して表示する設計手法。
- リダイレクトは、Webページの URL が変わったときなどに、アクセスしてきた利用者を自動的に別のURLへ転送する仕組み。
まちがえやすい点
- レスポンシブデザインは画面サイズへの追従を主眼とし、装飾を排して平面的に表現するフラットデザインではない。
- パンくずリストは階層上の現在位置を経路として示し、サイト全体のページ構成を一覧化したサイトマップとは別である。
- ダークモードは暗い色調を基調とする設定であり、背景を明るい色調にする通常の表示設定であるライトモードとは異なる。
- ユニバーサルデザインは年齢や身体的特性によらず誰もが利用しやすいよう設計する考え方であり、画面サイズに応じて変化するレスポンシブデザインではない。
ほかのページ
この論点の問題は、アプリで解けます
ITウカールは、ITパスポート試験の対策アプリです。論点テキストはアプリの中でも無料で読めて、各論点の問題を解いて理解を確かめられます。分野別の演習・本番形式の模擬試験・間違えた問題の復習まで、1つのアプリで進められます。
出典と作り方
この読み物は、IPA「ITパスポート試験 シラバス Ver.6.5」の中分類の順に、アプリ「ITウカール」の収録問題の解説をもとにアプリ製薬が作成したものです。公式の文章の転載ではありません。問題文・選択肢は載せていません。