情報デザインの方法
このノートの問いがそのまま復習カードになり、忘れかけたころに出題されます。
0. どういうまとまりか
ポスター・スライド・Web ページのように、伝えたい情報をまとめて形にしたものをコンテンツといいます。
コンテンツは一度作って終わりではなく、受け手の反応を見て直していきます。
| 段階 | 何をするか |
|---|---|
| 設計 | 目的と受け手を決め、伝える内容と構成を考える |
| 制作 | レイアウト・配色・フォントを決めて形にする |
| 実行 | 公開・発表して、受け手に届ける |
| 評価 | 受け手の反応や意見を集め、伝わったかを確かめる |
| 改善 | 評価をもとに直し、次の設計に生かす |
分かれ目は次の 3 つ。
- 設計の最初に「誰に・何のために」を決める（受け手を具体的な人物像にしたものがペルソナ）。
- レイアウトの 4 原則は近接・整列・反復・対比。
- HTML は文書の構造と内容、CSS は見た目を指定する。
1. コンテンツを作る流れ
根拠: 学習指導要領 情報Ⅰ-(2)-ア-(ウ)
コンテンツを作るときは、いきなり形にせず、目的と受け手を決めるところから始めます。
完成前に試作して確かめ、評価と改善を繰り返すことで、伝わるものに近づけます。
情報デザインでコンテンツとは何か？
文字・画像・音声・動画などで、伝えたい情報をまとめて形にした中身
ポスター・スライド・Web ページ・動画など。
コンテンツを作るときの流れを、5 つの段階で答えよ。
設計 → 制作 → 実行 → 評価 → 改善
改善したら次の設計に戻り、繰り返して質を上げる。
ペルソナとは何か？
コンテンツを届けたい典型的な受け手を、年齢・生活・目的などまで具体的に描いた架空の人物像
「この人ならどう読むか」を基準にすると、表現を決めるときに迷いが減る。
プロトタイプとは何か。なぜ作るのか？
完成前に作る試作品。早い段階で受け手に試してもらい、問題点を見つけて直すため
完成してから直すより、手間と費用が少なくて済む。
2. レイアウトの原則
根拠: 学習指導要領 情報Ⅰ-(2)-ア-(ウ)
文字や図の置き方を整えるだけで、同じ内容でも読みやすさが大きく変わります。
レイアウトの 4 つの基本原則は？
近接・整列・反復・対比
関係・揃え・一貫性・強弱の 4 つを整える原則。
レイアウトの原則の近接とは何か？
関係の深い要素どうしを近くに置き、関係の薄い要素とは離す
見出しとその説明を近づけると、どれとどれがひとまとまりかが一目で分かる。
レイアウトの原則の整列とは何か？
要素の端や中心を、見えない線にそろえて並べる
文字や画像の左端をそろえるだけで、まとまりのある印象になる。
レイアウトの原則の反復と対比とは何か？
反復は同じ役割の要素に同じ書式を繰り返し使うこと、対比は重要なものと他のものの差をはっきりつけること
見出しを毎回同じ色と大きさにするのが反復、最も伝えたい語を大きく太くするのが対比。
3. 配色とフォント
根拠: 学習指導要領 情報Ⅰ-(2)-ア-(ウ)
色は、色相・彩度・明度の 3 つの性質（色の三属性）で表せます。文字を読みやすくするには、文字と背景の明るさの差が大切です。
色の三属性とは何か？
色相（色あい）・彩度（あざやかさ）・明度（明るさ）
赤・黄・青などの違いが色相。同じ色相でも、彩度と明度で印象が変わる。
補色とは何か？
色相環で向かい合う位置にある、色相が正反対の 2 色
赤と青緑、黄と青紫など。並べると互いを目立たせるが、文字と背景に使うとちらついて読みにくい。
文字を読みやすくするには、文字と背景の色をどう選ぶか？
明度の差を大きくする
白地に黒文字は読みやすい。明度の近い色どうし（黄色の地に白文字など）は読みにくい。
4. Web ページの仕組み
根拠: 学習指導要領 情報Ⅰ-(2)-ア-(ウ)
Web ページは、文書の構造を書く言語と、見た目を指定する言語を分けて作ります。
役割を分けておくと、内容を変えずにデザインだけを差し替えることができます。
Web ページの作成で、HTML と CSS はそれぞれ何を担当するか？
HTML は文書の構造と内容（見出し・段落・リンクなど）、CSS は見た目（色・大きさ・配置など）
HTML ではタグで文書の各部分に役割を付け、CSS でその見た目を指定する。
ハイパーリンクとは何か？
文書中の文字や画像から、別の文書や同じ文書の別の場所へ移動できるようにする仕組み
HTML では a タグで作る。関連する情報をつなぐ構造化の手段でもある。