情報デザインは、目的や受け手の状況に合わせて、情報を正確に伝わり、迷わず操作できる形に整える技術です。
デザインの基本原則(近接・整列・反復・対比)
見る人に意図が伝わりやすい配置にするための考え方をデザインの基本原則といい、代表的なものが次の4つです。
近接・整列・反復・対比の4つで、見る人に意図が伝わりやすい配置になります。
デザインの基本原則
近接 … 互いに関連する要素は近づけてグループにする。関係の無い要素は離す
整列 … 要素を、意図したルール(見えない線)にもとづいてそろえて配置する
反復 … 見出しの色や大きさなど、同じデザインのルールを要素ごとに繰り返す
対比 … 大小や強弱、色の濃さなどの違いを明確にして、目立たせたいものを目立たせる
たとえば申込フォームなら、「氏名」の見出しを氏名の入力欄のすぐ上に置き(近接)、全部の入力欄の左端を1本の線にそろえ(整列)、どの見出しも同じ色と大きさにし(反復)、「送信」ボタンだけを大きく濃い色にします(対比)。 4原則は「近接・整列・反復・対比」。名前と働きを1対1で結びつけておきます。
ある申込フォームでは、「電話番号」の見出しが、電話番号の入力欄よりも、その下にあるメールアドレスの入力欄に近い位置に置かれていて、どちらの欄の見出しなのか迷う人が続出しました。 守られていないデザインの原則として、最も適切なのはどれですか。
× 対比は大小や強弱の違いをはっきりさせる原則です。ここで起きているのは、見出しと欄の「距離」の問題です。
× 反復は同じデザインのルールを繰り返す原則です。見出しの見た目がそろっていても、置く位置が離れていれば迷います。
○ 正解 近接です。
関連する要素(見出しと、その入力欄)は近づけてグループにし、関係の無い要素とは離すのが近接です。見出しが別の欄に近いと、別のグループに見えてしまいます。
× 整列は要素を見えない線にそろえる原則です。左端がそろっていても、見出しと欄の距離が逆なら迷う人は出ます。
LATCHの法則とインフォグラフィック
たくさんの情報を並べるときは、何を軸に整理するかを先に決めます。 LATCHの法則は、情報を整理する軸は5つに分けられる、という考え方で、5つの軸の頭文字をとった名前です。
情報を並べる軸は、位置・五十音やアルファベット・時間・分類・階層の5つに分けられます。
LATCHの5つの軸
Location(位置) … 場所で並べる。地図、駅の構内図、フロア案内
Alphabet(五十音・アルファベット) … 文字の順で並べる。辞書、索引、名簿
Time(時間) … 時刻や日付の順で並べる。年表、時刻表、スケジュール
Category(分類) … 種類で分ける。スーパーの売場、通販サイトの商品カテゴリ
Hierarchy(階層) … 大小や重要度などの量で順位をつける。売上ランキング、価格の安い順
同じ商品の一覧でも、「売場ごと」なら分類、「安い順」なら階層、「発売日順」なら時間です。 受け手が何を探しに来るかで、どの軸で並べるかを選びます。
整理した情報やデータを、図・イラスト・グラフなどで一目で伝わるように視覚化したものがインフォグラフィックです。路線図や、統計の数字を絵で示したポスターがその例です。
ユーザーインタフェースとユーザビリティ
ユーザーインタフェース(UI)は、利用者とシステムが情報をやりとりする接点です。画面の表示、ボタン、入力欄、音声案内などがそれにあたります。 ヒューマンインタフェースも、人とシステムの接点となるインタフェースのことで、ほぼ同じ意味で使われます。
接点の見た目そのものが「どう扱えばよいか」を教えてくれることがあります。青い下線の付いた文字は「押すと別のページへ移る」と、つまみに刻まれた細かい溝は「ここをつまんで回す」と、見た人に伝えます。 このように、説明を読まなくても正しい操作を思いつかせる、目や手で感じ取れる手掛かりをシグニファイアといいます。
UIの出来を測る物差しがユーザビリティ(使いやすさ)です。国際規格 ISO 9241-11(日本産業規格では JIS Z 8521)は、ユーザビリティを 「特定のユーザーが特定の利用状況において、システム、製品又はサービスを利用する際に、効果、効率及び満足を伴って特定の目標を達成する度合い」と定義しています。 「特定の」が重なっているのは、だれが・どんな場面で・何のために使うかを決めないと、使いやすさは測れないからです。
Webサイトでは、見る端末の画面の大きさも利用状況の1つです。レスポンシブWebデザインは、どの端末にも同じページ(同じHTML)を送り、見ている画面の幅に合わせて、段組みや文字・画像の大きさ、並べ方を切り替える作り方です。 PCでは横に3列並ぶ商品の写真が、スマートフォンでは1列に縦に並び、横にスクロールしなくても見られるようになります。
ソフトウェアの要件を定義するときにも、品質特性の1つとして使用性(利用者が目標を達成するために、製品を使える度合い)を考えます。 使用性は利用者から見た使いやすさなので、考える場所は、利用者が直接触れる接点です。
使いやすさを考えるのは、利用者と機器が触れ合う接点です。機械どうしの接点ではありません。
銀行のATMなら、使用性を考えるのは利用者とパネル(画面)のインタフェースです。 パネルとOS、OSとハードウェア、ソフトウェアどうしの接点は、機械の内側の受け渡しで、利用者は直接触れません。 ユーザビリティを考える接点は、いつも「人」と「機器」のあいだにあります。
UX(User Experience:ユーザーエクスペリエンス)は、ユーザビリティより広い考え方です。人間中心設計の国際規格 ISO 9241-210 は、製品・システム・サービスを使うこと、または使うことを予期することから生じる人の知覚や反応と説明しています。 使う前の期待から、使っている間の安心感、使ったあとの満足までを含みます。
ジェスチャーとマルチタッチ
指や手の動き(ジェスチャー)で操作する仕組みをジェスチャーインタフェースといいます(画面をなぞる操作のほか、カメラで手の振りを読み取るものもあります)。 スマートフォンの画面のように、同時に複数の点に触れたことを検知できるものをマルチタッチインタフェースといいます。
タップ・ロングプレス・スワイプ・フリック・ピンチ。ピンチだけは2本の指を同時に使います。
代表的な操作
タップ … 画面を指で軽く1回たたく。ボタンを押す、項目を選ぶ
ロングプレス … 触れたまま押し続ける(長押し)。メニューを呼び出す、アイコンを動かせる状態にする
スワイプ … 触れたまま、指を一定の方向に滑らせる。画面を切り替える、ロックを解除する
フリック … 触れた指を、すばやく払うように弾く。ページを送る、スマートフォンの文字入力(フリック入力)
ピンチ … 2本の指で広げる(ピンチアウト)と拡大、つまむように狭める(ピンチイン)と縮小
指をしっかり滑らせるのがスワイプ、短くすばやく弾くのがフリックです。ピンチは2本の指を同時に使うので、マルチタッチが要ります。
アクセシビリティとユニバーサルデザイン
アクセシビリティは、利用者の身体の特性や能力の違いにかかわらず、様々な人が同じように操作し、情報を入手し、利用できる状態やその度合いです。 JIS X 8341-1 は「様々な能力を持つ最も幅広い層の人々に対する製品、サービス、環境又は施設(のインタラクティブシステム)のユーザビリティ」と定義しています。 デジタル庁のガイドブックは、ユーザビリティとアクセシビリティは明確に区分できず、重なり合う考え方だとしています。 アクセシビリティは、作る側が設計の段階から配慮して高めるものでもあります。JIS X 8341 シリーズの規格名が「高齢者・障害者等配慮設計指針」であるのはそのためで、「アクセシビリティに配慮した設計」という言い方もよく使われます。
対象は障害のある人だけではなく、高齢の人、色の見分けが難しい人、手をけがしてマウスが使えない人なども含みます。動画に字幕を付ける、色の違いだけで情報を伝えない、といった配慮をします。
「〜ビリティ」「〜シティ」で紛らわしい語:スケーラビリティは利用者や処理量が増えたときに規模を広げて対応できる度合い、トレーサビリティはあとから経緯をたどれる度合い、ダイバーシティは人材などの多様性です。 また、ファイルやデータベースの参照・更新の権限を制限するアクセス制御(セキュリティ)や、顧客との関係を深めるCRM(顧客関係管理)も、名前が似ていたり場面が近かったりしますが、アクセシビリティとは別の話です。
ユニバーサルデザインは、年齢や文化、障害の有無や能力の違いなどにかかわらず、はじめからできる限り多くの人が快適に使えるように、製品や環境を設計する考え方です。 あとから段差にスロープを付けるような、特定の人のための障壁を取り除くバリアフリーとは、出発点が違います。 米国ノースカロライナ州立大学のユニバーサルデザインセンターが1997年にまとめた7原則が知られています。
7原則は、だれもが使える・選べる・迷わない・伝わる・失敗しても安全・疲れない・入れる、の7つです。
ユニバーサルデザインの7原則
1 公平な利用 … 様々な能力の人が、同じように使える
2 利用における柔軟性 … 使い方を選べる。右利きでも左利きでも使える
3 単純で直感的な利用 … 経験や知識、言語の力にかかわらず、使い方がすぐ分かる
4 認知できる情報 … 周りの状況や感覚の能力にかかわらず、必要な情報が伝わる
5 失敗に対する寛大さ … うっかりした操作をしても、危険や悪い結果につながりにくい
6 少ない身体的な努力 … 楽な姿勢で、少ない力で、疲れずに使える
7 接近や利用のための大きさと広さ … 体の大きさや姿勢、移動の手段にかかわらず、近づいて使える大きさと広さがある
アクセシビリティは「様々な人が使えるかどうかの度合い」で、設計の配慮で高めるもの。ユニバーサルデザインは「はじめから多くの人が使えるように作る考え方」です。 これに近い考え方にインクルーシブデザインがあります。一般に、これまで製品やサービスの対象から外されがちだった人(障害のある人、高齢者など)を、設計の段階から参加者として巻き込んで一緒に作る進め方、と説明されます。
言葉に頼らず伝える工夫の代表がピクトグラム(絵文字・図記号)です。文字や言語によらず、対象物や概念、状態についての情報を伝える図形で、トイレやエレベーターの案内などに使われます。 日本では、不特定多数の人に向けた案内に使う図記号が JIS Z 8210(案内用図記号)として定められています。
ある文具メーカーが、刃の向きや持ち手の形を工夫して、右利きの人も左利きの人も同じように使えるはさみを作りました。 ユニバーサルデザインの7原則のうち、この工夫が最もよく当てはまるのはどれですか。
× うっかりした操作をしても危険や悪い結果につながりにくくする原則です。利き手の違いに対応する工夫とは別です。
○ 正解 利用における柔軟性です。
使い方を選べるようにし、右利きでも左利きでも使えるようにすることは、7原則をまとめたユニバーサルデザインセンターの資料でも、この原則の例として挙げられています。
× 周りの状況や感覚の能力にかかわらず、必要な情報が伝わるようにする原則です。はさみの持ち方の話ではありません。
× 体の大きさや姿勢、車いすなどの移動の手段にかかわらず、近づいて手が届き、使える大きさと広さを用意する原則です。利き手の違いに合わせる工夫とは別です。
まとめ
この回で持ち帰ること
1. デザインの基本原則=近接(関連するものを近づける)・整列(ルールにそろえて配置)・反復(同じルールを繰り返す)・対比(違いを明確に)
2. LATCHの法則=情報を整理する5つの軸(位置・五十音やアルファベット・時間・分類・階層)。インフォグラフィック=情報を図やイラストで一目で伝わる形にしたもの
3. UI(ヒューマンインタフェース)は人とシステムの接点。ユーザビリティ(使用性)は、その接点での効果・効率・満足を伴う使いやすさ。考えるのは「人」と「機器」のあいだ。UXは使う前後の感じ方や反応まで含む
4. タップ(1回触れる)・ロングプレス(押し続ける)・スワイプ(滑らせる)・フリック(すばやく払う)・ピンチ(2本の指で拡大・縮小)。ピンチにはマルチタッチが要る
5. アクセシビリティ=能力や特性にかかわらず、様々な人が同じように操作・入手・利用できる度合い。ユニバーサルデザイン=はじめから多くの人が使えるように作る(7原則)。ほかにインクルーシブデザイン、ピクトグラム
この節で解ける公開問題
令和4〜8年度の公開問題のうち、この節の知識で解ける問題は次の4問です。
デザインの原則
ユーザビリティとアクセシビリティ
令和7年度 問47使用性を考えるインタフェース令和4年度 問33アクセシビリティ令和7年度 問18ITにおけるアクセシビリティ
教科書の一覧(現行の試験の順)教科書の一覧(新しい試験の順)過去問
Udemy の ITパスポート講座を、受講者数・★評価・口コミで比べたページです(広告を含みます)。
出典:IPA「ITパスポート試験 シラバス(案)Ver0.1」(2026年8月31日)、「ITパスポート試験 シラバス Ver6.5」、 デジタル庁「ウェブアクセシビリティ導入ガイドブック」(2025年10月16日)、「DS-671.1 ユーザビリティ導入ガイドブック」(2026年6月1日)、 NC State University, The Center for Universal Design「The Principles of Universal Design」Version 2.0(1997年)、国土交通省「案内用図記号」、 D. A. Norman「Signifiers, not affordances」(2008年)、Google 検索セントラル「モバイルサイトとモバイルファースト インデックスに関するおすすめの方法」。 練習問題は当サイトが説明のために作ったものです。

