人間中心設計 × UI設計 の原理原則

うさうさ研修工房 人間中心設計 × UI設計 の原理原則 視認性の高い図解・スライド・画面をつくるための実践ガイド 講師：うさうさ先生

INTRODUCTION なぜ「原理原則」を学ぶのか WHY WHAT HOW 感覚だけでは 伝わらない HCDとUI設計の 共通言語 スライド・資料 への適用 「なんとなく良い／悪い」の判断を、再現性 ISO 9241-210のプロセス論と、視認性・操作 本編では各原則を、研修 PPTや画面設計 のある基準に置き換えるため。原理原則 性に関わるデザイン原則（ゲシュタルト、 にそのまま使えるチェックポイントの形に落 は自分の感覚を裏付ける根拠になる。 CRAP、認知負荷 など）を扱う。 とし込む。 うさうさ研修工房｜人間中心設計 × UI設計の原理原則 2

HUMAN-CENTERED DESIGN 人間中心設計の 5つの柱（ ISO 9241-210） 01 ユーザーと利用状況の理解 誰が・どんな環境で使うのかを最初に把握する 02 ユーザーを設計に巻き込む 作り手の想像だけで進めず、当事者の声を反映する 03 ユーザー中心の評価で磨く 完成前に試し、フィードバックを設計へ戻す 04 反復的なプロセス 一度で完成させず、試作と見直しを繰り返す 05 利用体験全体を設計する 個別の画面だけでなく、体験全体の一貫性を見る うさうさ研修工房｜人間中心設計 × UI設計の原理原則 3

USABILITY HEURISTICS ユーザビリティの原則（ Nielsen, 1994）より抜粋 システム状態の可視化 現実世界との一致 一貫性と標準 今どんな状態かを常に伝える 専門用語より使う人の言葉で語る 同じ意味には同じ見た目・言葉を使う 認知よりも想起 柔軟性と効率性 ミニマルなデザイン 覚えさせず、見て分かる形で提示する 初心者にも熟練者にも対応できる導線 無関係・過剰な情報を削ぎ落とす うさうさ研修工房｜人間中心設計 × UI設計の原理原則 4

GESTALT PRINCIPLES ゲシュタルトの法則：人はどう「まとめて」見るか PROXIMITY SIMILARITY 近接：近いものは同じグループに見える 類同：似た形・色は同じ仲間に見える CLOSURE CONTINUITY 閉合：欠けていても脳が補って形を見る 連続：並んだ要素は一続きの流れに見える うさうさ研修工房｜人間中心設計 × UI設計の原理原則 5

DESIGN BASICS 視認性を作る 4原則「CRAP」（Robin Williams, 1994） C A コントラスト 差をはっきりつけて優先度を伝える 整列 見えない線で要素を揃える R P 反復 同じ装飾ルールを全体で繰り返す 近接 関連する情報を物理的に近づける 見出し 説明テキスト うさうさ研修工房｜人間中心設計 × UI設計の原理原則 6

VISUAL FLOW 視線の流れを設計する： Zパターン／ Fパターン Zパターン：構成の少ないスライド／広告 Fパターン：文章量の多いページ／記事 ①見出し行を横に読む ②以降は左端をスキャンしながら、目に留まった行だけ横に読む。重要語は左寄 せ・段落先頭に置く。 ①ロゴ／タイトル ②見出し → ③本文 → ④行動を促す要素、の順に視線が動く うさうさ研修工房｜人間中心設計 × UI設計の原理原則 7

COGNITIVE LOAD 認知負荷とチャンキング（ Miller, 1956：7±2） 人が短期記憶で一度に扱える情報のまとまりは、およそ5〜9個までとされる。要素数が多いほど誤読・見落としが増える。 BEFORE：9項目を単純に並べる 項目 1 項目 2 AFTER：3つのまとまりに再構成 準備フェーズ 小項目1 小項目2 小項目3 小項目2 小項目3 小項目2 小項目3 項目 3 項目 4 項目 5 実行フェーズ 小項目1 項目 6 項目 7 項目 8 振り返りフェーズ 小項目1 項目 9 うさうさ研修工房｜人間中心設計 × UI設計の原理原則 8

COLOR & CONTRAST 色とコントラスト： WCAG 2.1 の基準 本文テキストはコントラスト比4.5:1 以上（AA基準）を目安にする。判断が難しい場合は自動判定ツールで確認する。 Aa 見本文字 Aa 見本文字 Aa 見本文字 Aa 見本文字 基準未満 AA適合 基準未満 AA適合 低コントラスト 高コントラスト 低コントラスト 高コントラスト 約 1.4 : 1 約 15 : 1 約 1.6 : 1 約 11 : 1 うさうさ研修工房｜人間中心設計 × UI設計の原理原則 9

INTERACTION LAWS 操作性を決める 2つの法則 フィッツの法則（ Fitts, 1954） ヒックの法則（ Hick, 1952） 到達時間は「対象までの距離」が長く「対象のサイズ」が小さいほど増える。押し 間違えやすいボタンは、大きく・近くに置く。 選択肢が増えるほど、意思決定にかかる時間も増える。メニューや設問は、必要 な数まで絞り込む。 選択肢 3個 選択肢 6個 小さい・遠い＝時間がかかる 選択肢10個 大きい・近い＝すぐ届く うさうさ研修工房｜人間中心設計 × UI設計の原理原則 横幅＝おおよその意思決定時間のイメージ 10

CHECKLIST 実践チェックリスト：視認性の高いスライドにする タイトルと本文で文字サイズに十分な差をつけたか 1枚に詰め込む要素は7±2個を目安に絞ったか 関連する情報同士を近づけ、無関係な情報と離したか 文字色と背景のコントラストは十分か（AA:4.5:1目安） 同じ役割の要素は同じ見た目で統一したか（反復） 要素は見えない線に沿って整列しているか 視線の流れ（Z／F）に沿って情報の優先順位を並べたか ボタンや選択肢を、押しやすいサイズ・数に絞ったか うさうさ研修工房｜人間中心設計 × UI設計の原理原則 11

まとめ 原理原則は「センスの言い訳」ではなく、誰でも再現できる判断基準。まずはチェックリストの 8項目から、自分の資料に当てはめてみる。 参考文献 • ISO 9241-210:2019 “Ergonomics of human-system interaction — Human-centred design for interactive systems” • Nielsen, J. (1994). “10 Usability Heuristics for User Interface Design.” Nielsen Norman Group. • Williams, R. (1994). “The Non-Designer’s Design Book.” Peachpit Press.（CRAP原則） • Miller, G. A. (1956). “The Magical Number Seven, Plus or Minus Two.” Psychological Review. • Fitts, P. M. (1954). “The Information Capacity of the Human Motor System.” Journal of Experimental Psychology. • Hick, W. E. (1952). “On the Rate of Gain of Information.” Quarterly Journal of Experimental Psychology. • W3C “Web Content Accessibility Guidelines (WCAG) 2.1.” うさうさ研修工房｜人間中心設計 × UI設計の原理原則 12