情報デザイン
アプリで見る情報を受け手に正確に，分かりやすく，目的に合う形で伝えるために，内容や表現を設計すること．
補足
- 誰に（対象），何を（要点），どうしてほしいか（目的）を先に決める．文字量，図表，レイアウト，強調，順序などで理解の負担を下げる．誤解や見落としを防ぐ工夫が重要．
具体例
- 注意事項を箇条書き＋アイコンで示す，グラフの凡例や軸を分かりやすくする．
第4章 情報デザイン
伝える工夫．重要用語22語を1つずつ確認できます．
情報デザインの考え方
情報の整理の基準（LATCH）
アプリで見る情報を整理するときの5つの基本的な切り口．Location（位置），Alphabet（五十音・アルファベット順），Time（時間），Category（分類），Hierarchy（階層・連続量の大小）の頭文字．
補足
- 情報デザイナーのリチャード・ワーマンが提唱した「究極の5つの帽子掛け」に由来するとされる．目的に応じてどの基準で並べるかを選ぶと，情報が整理して伝わりやすくなる．
具体例
- 五十音順の電話帳（Alphabet），年表（Time），商品カテゴリ別の売り場（Category），路線図（Location），成績順位（Hierarchy）．
ユーザインターフェイス
アプリで見る人（ユーザ）と機器・システムがやり取りするための接点（操作画面，ボタン，メニューなど）．
補足
- 見た目だけでなく，操作方法や反応も含む．分かりやすい配置，一貫した操作，誤操作しにくい設計が大切．
具体例
- スマホアプリの画面，券売機の操作パネル，Webサイトのメニュー．
ユーザビリティ
アプリで見る使いやすさ．ユーザが目的を効率よく，正確に，満足して達成できる度合い．
補足
- 学習しやすい，迷いにくい，間違えにくい，回復しやすい（やり直せる）などが重要．評価は主観だけでなく，操作時間やミス回数などで測れる．
具体例
- 初めてでも申込みフォームを迷わず入力できる，戻る操作で簡単に修正できる．
ユーザエクスペリエンス
アプリで見るUX．製品やサービスを使う前・最中・後にユーザが得る体験全体（感情や印象を含む）．
補足
- 使いやすさ（ユーザビリティ）はUXの一部．安心感，楽しさ，信頼感，達成感なども影響する．利用者の状況（端末，時間，目的）を想定して設計する．
具体例
- 購入後の案内が分かりやすく安心できる，アプリが気持ちよく使えて継続したくなる．
シグニファイア
アプリで見るユーザに「ここをどう操作するか」を気づかせる手がかり（合図）．
補足
- ボタンらしさ，クリックできそうな見た目，矢印，ラベルなど．シグニファイアが弱いと，機能があっても気づかれず迷いが増える．
具体例
- 押せる形のボタン，リンク部分が下線表示，スワイプを示す矢印アイコン．
フィッツの法則
アプリで見る目標（ボタンなど）までの距離が近く，かつ目標が大きいほど，そこに到達するまでの操作時間が短くなるという経験則．
補足
- 画面上のボタンの大きさや配置を設計するときの指針になる．押しやすさを高めたい要素は「大きく」「近くに」配置するとよい．
具体例
- スマホの画面端に配置した大きなボタンは押しやすい，小さく遠いアイコンは誤操作やタップミスが増えやすい．
ユニバーサルデザイン
アプリで見る年齢，障害の有無，言語などに関わらず，できるだけ多くの人が使いやすいように設計する考え方．
補足
- 最初から「多様な利用者」を想定して作る．後付けの対応よりも，標準として配慮を組み込むことが重要．
具体例
- 大きく見やすい表示，分かりやすいピクトグラム，多言語表記．
カラーユニバーサルデザイン
アプリで見る色の見え方の違い（色覚の多様性）に配慮し，色だけに頼らず情報が伝わるようにする設計．
補足
- 色だけで区別しない（形，模様，文字，位置も併用）．背景と文字のコントラストを確保する．凡例や注記を分かりやすくする．
具体例
- グラフを色分け＋線種（実線，点線）で区別する，警告を赤だけで示さずアイコンや文言も添える．
アクセシビリティ
アプリで見る障害の有無などに関わらず，情報やサービスにアクセスし利用できるようにする性質．
補足
- 視覚・聴覚・身体的制約に配慮し，代替手段を用意する（音声読み上げ対応，字幕，キーボード操作など）．Webでは見出し構造や代替テキストなども重要．
具体例
- 画像に代替テキストを付ける，動画に字幕を付ける，キーボードだけで操作できるサイトにする．
バリアフリー
アプリで見る障害となるもの（バリア）を取り除き，利用しやすくする考え方・取り組み．
補足
- 段差や狭さなど物理的バリアだけでなく，情報の分かりにくさや制度上の壁も含む．ユニバーサルデザインが「最初から誰でも使える設計」を目指すのに対し，バリアフリーは「障害を除去する改善」として語られやすい．
具体例
- 段差にスロープを付ける，案内表示を見やすくする，字幕・手話通訳を用意する．
表現要素
アイコン
アプリで見る機能や状態，対象を簡単な図で表す記号．
補足
- 文字より素早く認識できるが，意味が伝わらないと誤操作の原因になる．ラベル併用や一貫したデザインが有効．
具体例
- ゴミ箱＝削除，虫眼鏡＝検索，歯車＝設定．
ピクトグラム
アプリで見る言語に頼らず，形で意味を伝える図記号（案内記号）．
補足
- 誰にでも伝わることを目指すが，文化差で解釈が変わることもある．視認性（単純さ，コントラスト）と統一感が重要．
具体例
- 非常口，トイレ，エレベータ，禁止マーク（赤い斜線）．
ロゴタイプ
アプリで見る企業や製品名などを，文字のデザインで表したロゴ（文字ロゴ）．
補足
- ブランドの印象を作る要素．読みやすさと識別性が重要で，小さく表示しても潰れない工夫が必要．
具体例
- 企業名を独自の書体や配置で表したロゴ文字．
レイヤー
アプリで見る要素を層（重なり）として扱い，前後関係を持たせて配置する考え方．
補足
- 重ね順で強調や見やすさを調整できる．情報が重なりすぎると見づらいので，必要な層だけに整理する．
具体例
- 地図で「道路」「施設」「ラベル」を別レイヤーとして表示する，画像編集で文字を上の層に置く．
リンク
アプリで見るクリックやタップで別のページ，別の位置，別の情報へ移動できる仕組み（ハイパーリンク）．
補足
- 関連情報へ素早く移動できるが，リンク先が分かりにくいと迷う．リンクであることが分かる表示（下線，色，ボタン形状）と，行き先の予測可能性が重要．
具体例
- Webページの青い下線文字を押して別ページへ移動する，目次から該当見出しへ飛ぶ．
ナビゲーションシステム
アプリで見る利用者が迷わず目的の情報に到達できるようにする案内の仕組み（メニュー，パンくずリストなど）．
補足
- 「今どこにいるか」「どこへ行けるか」「どう戻れるか」が分かることが重要．階層構造と名称の分かりやすさが使いやすさを左右する．
具体例
- サイト上部メニュー，サイドバー，検索窓，パンくずリスト（トップ＞カテゴリ＞記事）．
マークアップ
アプリで見る文章に対して，見た目そのものではなく，見出しや段落，リストといった「構造」を指定する記法・考え方．
補足
- 構造を指定しておくと，スタイルの一括変更，目次の自動生成，音声読み上げソフトによる読み上げなどがしやすくなる．
具体例
- HTMLで見出しをh1タグ，段落をpタグで表す，文書処理ソフトで「見出し1」スタイルを設定する．
絵コンテ
アプリで見る映像やアニメ，スライドなどの構成を，場面ごとに絵と説明で示す設計図．
補足
- 流れ，画面構成，台詞や効果を事前に共有でき，制作の手戻りを減らす．情報の順序や強調点の設計に有効．
具体例
- 動画制作で，カットごとの画面とナレーションを並べた計画表．
インタラクティブ
アプリで見る利用者の操作に応じて表示や動作が変化し，双方向にやり取りできる性質．
補足
- 理解や没入感を高められるが，操作が複雑だと逆効果になる．反応の速さ，フィードバックの分かりやすさが重要．
具体例
- 地図の拡大縮小，グラフに触ると数値が表示される，クイズ形式の教材．
その他の重要語
色の三属性
アプリで見る色を表すときの3つの尺度である色相（色み）・明度（明るさ）・彩度（あざやかさ）のこと．
補足
- 「赤・青」といった色みの違いが色相，白に近いか黒に近いかが明度，色のあざやかさの度合いが彩度である．配色では，色相の差だけでなく明度・彩度の差をつけると，色の見え方に多様性がある人にも区別しやすくなる．
具体例
- 同じ赤でも，明度を上げると桃色に，彩度を下げるとくすんだ赤になる．
色相環
アプリで見る色相を連続的に変化する順に並べ，円環状に配置したもの．
補足
- 向かい合う位置にある色を補色といい，組み合わせると互いを目立たせる．隣り合う色は調和しやすい．資料の配色を考えるときの手がかりになるが，色相の差だけに頼らず明度差も確保する．
具体例
- ポスターの見出し色と背景色を色相環上の位置関係から選ぶ．