フリーランスボード	20万件以上の案件から、副業に最適なリモート・週3〜の案件を一括検索できるプラットフォーム。プロフィール登録でAIスカウトが自動的にマッチング案件を提案。市場統計や単価相場、エージェントの口コミも無料で閲覧可能なため、本業を続けながら効率的に高単価の副業案件を探せます。フリーランスボード
ITプロパートナーズ	週2〜3日から働ける柔軟な案件が業界トップクラスの豊富さを誇るフリーランスエージェント。エンド直契約のため高単価で、週3日稼働でも十分な報酬を得られます。リモートや時間フレキシブルな案件も多数。スタートアップ・ベンチャー中心で、トレンド技術を使った魅力的な案件が揃っています。専属エージェントが案件紹介から契約交渉までサポート。利用企業2,000社以上の実績。ITプロパートナーズ
Midworks	10,000件以上の案件を保有し、週3日〜・フルリモートなど柔軟な働き方に対応。高単価案件が豊富で、報酬保障制度（60%）や保険料負担（50%）など正社員並みの手厚い福利厚生が特徴。通勤交通費（月3万円）、スキルアップ費用（月1万円）の支給に加え、リロクラブ・freeeが無料利用可能。非公開案件80%以上、支払いサイト20日で安心して稼働できます。Midworks

コミュニケーションと情報デザインとは

基本概念

情報デザインとは、情報を受け手にとって分かりやすく、使いやすく伝えるための設計手法です。単に見た目を美しくするだけでなく、情報の構造化、視覚化、インタラクションの設計を通じて、効果的なコミュニケーションを実現します。

重要なポイント

• ユーザー中心設計：利用者の視点に立った設計
• 情報の整理と構造化：MECE（漏れなくダブりなく）の原則
• 視覚的階層：重要度に応じた情報の配置
• 一貫性：デザインルールの統一

---

情報デザインの基本原則

1. 近接（Proximity）

関連する要素を近くに配置することで、情報のまとまりを表現します。

2. 整列（Alignment）

要素を揃えることで、視覚的な秩序と統一感を生み出します。

3. 反復（Repetition）

デザイン要素を繰り返すことで、一貫性と統一感を持たせます。

4. コントラスト（Contrast）

要素間に明確な違いをつけることで、重要な情報を強調します。

5. ゲシュタルトの法則

人間の視覚認知特性を活用した配置原則：

• 類同の法則：似た要素をグループとして認識
• 近接の法則：近い要素をまとまりとして認識
• 閉合の法則：不完全な図形を補完して認識
• 連続の法則：滑らかに続く線を一つの形として認識

---

ユーザビリティとアクセシビリティ

ユーザビリティ（使いやすさ）

ISO 9241-11による定義：

特定の利用者が、特定の利用状況において、有効性、効率性、満足度をもって目標を達成できる度合い

ユーザビリティの5要素（Jakob Nielsen）：

1. 学習しやすさ（Learnability）
2. 効率性（Efficiency）
3. 記憶しやすさ（Memorability）
4. エラー（Errors）の少なさ
5. 満足度（Satisfaction）

アクセシビリティ（利用しやすさ）

誰もが情報にアクセスできるようにする設計思想です。

Webアクセシビリティの4原則（WCAG）：

1. 知覚可能（Perceivable）：情報が認識できる
2. 操作可能（Operable）：インターフェースが操作できる
3. 理解可能（Understandable）：情報の理解が容易
4. 堅牢性（Robust）：様々な環境で利用可能

具体的な配慮例：

• 色覚多様性への配慮（色だけに頼らない情報伝達）
• 音声読み上げソフトへの対応（alt属性の設定）
• キーボードのみでの操作可能性
• 十分なコントラスト比の確保

---

視覚的表現の技法

1. 色彩設計

色の三属性：

• 色相（Hue）：赤、青、黄などの色の種類
• 明度（Value/Lightness）：色の明るさ
• 彩度（Saturation/Chroma）：色の鮮やかさ

色の心理的効果：

• 赤：情熱、警告、注意
• 青：信頼、冷静、安心
• 黄：活気、注意、明るさ
• 緑：自然、安全、リラックス

2. タイポグラフィ

フォントの種類：

• 明朝体：伝統的、格式高い、長文向き
• ゴシック体：現代的、視認性高い、見出し向き

可読性向上のポイント：

• 適切な文字サイズ（本文：14〜16px推奨）
• 十分な行間（1.5〜2倍程度）
• 1行あたりの文字数（40〜75文字程度）

3. レイアウト設計

Zの法則：視線は左上→右上→左下→右下の順に移動 Fの法則：Webページでは上部と左側に視線が集中

グリッドシステム： 画面を格子状に分割し、要素を規則的に配置する手法

---

ユニバーサルデザインとインクルーシブデザイン

ユニバーサルデザインの7原則

1. 公平性：誰でも使える
2. 自由度：使い方が選べる
3. 単純性：使い方が簡単
4. 分かりやすさ：必要な情報がすぐ理解できる
5. 安全性：間違えても危険がない
6. 省体力：少ない力で使える
7. スペース確保：接近・利用に適したスペースがある

---

例題20選

【問題1】情報デザインの基本原則

問題：情報デザインにおいて、関連する要素を近くに配置することで情報のまとまりを表現する原則を何というか。

選択肢：

1. 整列
2. 近接
3. 反復
4. コントラスト

解答：2. 近接

解説：近接（Proximity）の原則は、関連する情報や要素を物理的に近くに配置することで、視覚的なグループ化を行い、情報の構造を明確にする手法です。逆に、関連性の低い要素は離して配置します。

---

【問題2】ユーザビリティの定義

問題：ISO 9241-11で定義されているユーザビリティの構成要素として正しくないものはどれか。

選択肢：

1. 有効性
2. 効率性
3. 美観性
4. 満足度

解答：3. 美観性

解説：ISO 9241-11におけるユーザビリティの定義は、「特定の利用者が、特定の利用状況において、有効性、効率性、満足度をもって目標を達成できる度合い」とされています。美観性は含まれません。

---

【問題3】Webアクセシビリティ

問題：Webアクセシビリティのガイドライン（WCAG）の4原則に含まれないものはどれか。

選択肢：

1. 知覚可能
2. 操作可能
3. 経済的
4. 理解可能

解答：3. 経済的

解説：WCAGの4原則は、「知覚可能（Perceivable）」「操作可能（Operable）」「理解可能（Understandable）」「堅牢性（Robust）」です。経済性は含まれません。

---

【問題4】色のユニバーサルデザイン

問題：色覚多様性（色弱・色盲）を持つ人への配慮として、最も適切なものはどれか。

選択肢：

1. 赤と緑の組み合わせを積極的に使う
2. 色の違いだけで情報を区別する
3. 色に加えて形や模様でも情報を区別する
4. 彩度の高い色のみを使用する

解答：3. 色に加えて形や模様でも情報を区別する

解説：色覚多様性への配慮として、色だけに頼らず、形、模様、テキストラベルなど複数の手段で情報を伝えることが重要です。赤と緑の区別が困難な人が多いため、この組み合わせは避けるべきです。

---

【問題5】ゲシュタルトの法則

問題：人間が近くにある要素をまとまりとして認識する傾向を示すゲシュタルトの法則はどれか。

選択肢：

1. 類同の法則
2. 近接の法則
3. 閉合の法則
4. 連続の法則

解答：2. 近接の法則

解説：近接の法則（Law of Proximity）は、物理的に近い位置にある要素を、一つのグループやまとまりとして認識する視覚特性です。この法則を利用して、関連情報をグループ化します。

---

【問題6】タイポグラフィ

問題：Webサイトの本文に適したフォントサイズとして、最も推奨されるものはどれか。

選択肢：

1. 8〜10px
2. 10〜12px
3. 14〜16px
4. 20〜24px

解答：3. 14〜16px

解説：Webサイトの本文には、可読性を確保するため14〜16px程度のフォントサイズが推奨されます。小さすぎると読みにくく、大きすぎると一度に見渡せる情報量が減少します。

---

【問題7】ユニバーサルデザインの原則

問題：ユニバーサルデザインの7原則に含まれないものはどれか。

選択肢：

1. 公平性
2. 単純性
3. 革新性
4. 安全性

解答：3. 革新性

解説：ユニバーサルデザインの7原則は、公平性、自由度、単純性、分かりやすさ、安全性、省体力、スペース確保です。革新性は含まれません。

---

【問題8】色の三属性

問題：色の三属性のうち、色の鮮やかさを表すものはどれか。

選択肢：

1. 色相
2. 明度
3. 彩度
4. 輝度

解答：3. 彩度

解説：色の三属性は、色相（色の種類）、明度（明るさ）、彩度（鮮やかさ）です。彩度が高いほど鮮やかで、低いほど灰色に近い色になります。

---

【問題9】視線の動き

問題：Webページにおいて、ユーザーの視線が上部と左側に集中しやすい傾向を示す法則はどれか。

選択肢：

1. Zの法則
2. Fの法則
3. 黄金比
4. フィボナッチ数列

解答：2. Fの法則

解説：Fの法則は、Webページを閲覧する際、ユーザーの視線がアルファベットの「F」の形に動く傾向があることを示します。上部を横に見た後、左側を縦に見て、再び横に見るパターンです。

---

【問題10】情報の構造化

問題：情報を整理する際の「MECE」の原則が意味するものはどれか。

選択肢：

1. 美しくエレガントに
2. 漏れなくダブりなく
3. 最小限で効果的に
4. 測定可能で評価可能に

解答：2. 漏れなくダブりなく

解説：MECE（Mutually Exclusive, Collectively Exhaustive）は、「相互に排他的で、全体として漏れがない」という意味で、情報を重複なく、かつ抜け漏れなく分類・整理する原則です。

---

【問題11】コントラスト比

問題：Webアクセシビリティガイドラインにおいて、通常サイズのテキストに推奨される最小コントラスト比はどれか。

選択肢：

1. 2:1
2. 3:1
3. 4.5:1
4. 7:1

解答：3. 4.5:1

解説：WCAG 2.0のレベルAAでは、通常サイズのテキスト（14pt未満、または18pt未満の太字でないテキスト）に対して、最小コントラスト比4.5:1が推奨されています。大きなテキストでは3:1です。

---

【問題12】UIデザインパターン

問題：ユーザーが過去の操作を取り消せる機能を提供することで、エラーへの不安を軽減し、積極的な操作を促すUIデザインの原則は何か。

選択肢：

1. フィードバック
2. アンドゥ（元に戻す）
3. 一貫性
4. 制約

解答：2. アンドゥ（元に戻す）

解説：アンドゥ（Undo）機能は、ユーザーが操作を間違えても元に戻せるという安心感を与え、積極的な操作を促します。これはNielsenのユーザビリティ原則の一つでもあります。

---

【問題13】レスポンシブデザイン

問題：様々な画面サイズに対応し、デバイスに応じて最適な表示を行うWebデザイン手法を何というか。

選択肢：

1. フラットデザイン
2. レスポンシブデザイン
3. マテリアルデザイン
4. スキューモーフィズム

解答：2. レスポンシブデザイン

解説：レスポンシブデザインは、PC、タブレット、スマートフォンなど、異なる画面サイズに対応し、単一のHTMLで最適な表示を実現するWebデザイン手法です。

---

【問題14】画像の代替テキスト

問題：HTML内の画像に設定する「alt属性」の主な目的はどれか。

選択肢：

1. 画像のファイルサイズを小さくする
2. 画像の読み込み速度を向上させる
3. 画像が表示されない場合や音声読み上げ時の代替情報を提供する
4. 画像の著作権情報を記載する

解答：3. 画像が表示されない場合や音声読み上げ時の代替情報を提供する

解説：alt属性は、画像が表示されない環境や、スクリーンリーダーを使用する視覚障害者のために、画像の内容を説明するテキストを提供します。アクセシビリティ向上に不可欠です。

---

【問題15】情報アーキテクチャ

問題：Webサイトの情報を階層的に整理し、ユーザーが目的の情報に到達しやすくする設計を何というか。

選択肢：

1. 情報アーキテクチャ
2. ワイヤーフレーム
3. プロトタイプ
4. モックアップ

解答：1. 情報アーキテクチャ

解説：情報アーキテクチャ（IA: Information Architecture）は、情報を体系的に整理し、ユーザーが効率的に情報を見つけ、理解できるようにする設計手法です。

---

【問題16】フィードバックの重要性

問題：ユーザーの操作に対して、システムが適切な応答を返すことの重要性を説明したUIデザイン原則はどれか。

選択肢：

1. 視認性（Visibility）
2. フィードバック（Feedback）
3. 制約（Constraints）
4. マッピング（Mapping）

解答：2. フィードバック（Feedback）

解説：フィードバックは、ユーザーの操作に対してシステムが適切な応答を返すことで、操作が正しく実行されたかを伝える重要な原則です。ボタンのクリック時の視覚的変化や処理中の表示などが該当します。

---

【問題17】アイコンデザイン

問題：アイコンデザインにおいて、対象の外観を模倣した現実的な表現をするデザイン手法を何というか。

選択肢：

1. フラットデザイン
2. スキューモーフィズム
3. ミニマリズム
4. アブストラクト

解答：2. スキューモーフィズム

解説：スキューモーフィズム（Skeuomorphism）は、デジタル上のオブジェクトを現実世界の物体に似せてデザインする手法です。例：カレンダーアプリを実際の手帳のようにデザインする。

---

【問題18】プロトタイピング

問題：デザイン開発の初期段階で、実際に動作する簡易版を作成し、ユーザーテストを行う手法を何というか。

選択肢：

1. ウォーターフォール
2. プロトタイピング
3. アジャイル
4. スクラム

解答：2. プロトタイピング

解説：プロトタイピングは、製品開発の早い段階で試作品（プロトタイプ）を作成し、実際のユーザーに使ってもらうことで、問題点を早期に発見し改善する開発手法です。

---

【問題19】行間の設計

問題：テキストの可読性を向上させるため、適切な行間（行送り）の設定が重要である。一般的に推奨される行間の倍率はどれか。

選択肢：

1. 0.8〜1.0倍
2. 1.0〜1.2倍
3. 1.5〜2.0倍
4. 2.5〜3.0倍

解答：3. 1.5〜2.0倍

解説：可読性を高めるため、行間は文字サイズの1.5〜2.0倍程度が推奨されます。行間が狭すぎると読みにくく、広すぎると文章のまとまりが分かりにくくなります。

---

【問題20】ペルソナ設計

問題：製品やサービスの典型的なユーザー像を具体的に設定し、デザインの方向性を決める手法を何というか。

選択肢：

1. ペルソナ
2. シナリオ
3. ユースケース
4. ストーリーボード

解答：1. ペルソナ

解説：ペルソナは、製品やサービスのターゲットユーザーを代表する架空の人物像です。年齢、職業、ライフスタイル、課題などを具体的に設定することで、ユーザー中心の設計が可能になります。

---

まとめ：受験対策のポイント

頻出テーマ

1. 情報デザインの4原則（近接・整列・反復・コントラスト）
2. ユーザビリティとアクセシビリティの違い
3. 色のユニバーサルデザイン
4. WCAGの4原則
5. ユニバーサルデザインの7原則
6. ゲシュタルトの法則
7. フィードバックとインタラクション

学習のコツ

• 具体例で理解：身近なWebサイトやアプリで実例を探す
• 比較して覚える：ユーザビリティとアクセシビリティ、近接と整列など
• 数字を正確に：4原則、7原則、コントラスト比など
• 英語の略語：WCAG、MECE、UIなどの正式名称も確認

実践演習

この20問を繰り返し解き、解説をしっかり読んで理解を深めましょう。共通テストでは、具体的な事例を示して原則や手法を問う問題が出題されます。理論だけでなく、実際の適用例を理解することが重要です。

テックジム東京本校では「情報」科目の受験対策指導もいたします。

---

関連キーワード：情報Ⅰ、共通テスト、情報デザイン、ユーザビリティ、アクセシビリティ、UI/UX、ユニバーサルデザイン、受験対策、高校情報科

最終更新日：2024年度版

フリーランスボード	20万件以上の案件から、副業に最適なリモート・週3〜の案件を一括検索できるプラットフォーム。プロフィール登録でAIスカウトが自動的にマッチング案件を提案。市場統計や単価相場、エージェントの口コミも無料で閲覧可能なため、本業を続けながら効率的に高単価の副業案件を探せます。フリーランスボード
ITプロパートナーズ	週2〜3日から働ける柔軟な案件が業界トップクラスの豊富さを誇るフリーランスエージェント。エンド直契約のため高単価で、週3日稼働でも十分な報酬を得られます。リモートや時間フレキシブルな案件も多数。スタートアップ・ベンチャー中心で、トレンド技術を使った魅力的な案件が揃っています。専属エージェントが案件紹介から契約交渉までサポート。利用企業2,000社以上の実績。ITプロパートナーズ
Midworks	10,000件以上の案件を保有し、週3日〜・フルリモートなど柔軟な働き方に対応。高単価案件が豊富で、報酬保障制度（60%）や保険料負担（50%）など正社員並みの手厚い福利厚生が特徴。通勤交通費（月3万円）、スキルアップ費用（月1万円）の支給に加え、リロクラブ・freeeが無料利用可能。非公開案件80%以上、支払いサイト20日で安心して稼働できます。Midworks

■らくらくPython塾 – 読むだけでマスター

【現役エンジニア歓迎】プログラミング学習お悩み相談会

【現役エンジニア歓迎】プログラミング学習お悩み相談会

続きを見る