伝わるデザインの作り方_色彩科学×テクニカルライティング

伝わるデザインの作り方 エンジニアのための色彩科学 × テクニカルライティング 査読済み研究に基づく実践ガイド うさうさ研修工房

Why なぜエンジニアに「伝わるデザイン」が必要か 設計書・README・図解・登壇資料――エンジニアが作るあらゆるドキュメントは、内容が正しくても「伝わ る形」になっていなければ、読み手に届きません。色とレイアウトは装飾ではなく、情報の理解速度と正確 性を左右する設計要素です。 本資料は、色彩科学・認知科学の査読済み研究を土台に、技術文書・図解・資料に応用できる原則を整理しま す。 伝わるデザインの作り方 2 / 12

根拠1 認知負荷理論（ Sweller, 1988） 内在的負荷 課題そのものの複雑さ。減らすことは難しい 課題外在的負荷 情報の提示方法が原因で生じる、不要な負荷。装飾過多・配色の乱れが典型例 学習関連負荷 理解・スキーマ構築に向かう望ましい負荷 → 色数を絞り、意味のない装飾色を削ることは「課題外在的負荷」を減らす直接的な手段になる 伝わるデザインの作り方 3 / 12

根拠2 視認性の基準： WCAGコントラスト比 読みにくい例 読みやすい例 この文字は薄いピンク背景に 薄いゴールドの文字色です この文字は薄いピンク背景に 濃いグレーの文字色です コントラスト比 約1.6:1 ✕ コントラスト比 約9.8:1 ○ WCAG 2.1 基準（Success Criterion 1.4.3） 通常テキスト：コントラスト比 4.5:1 以上 ／ 大きいテキスト（18pt太字 or 24pt以上）：3:1 以上 パステルカラーは装飾には良いが、文字色として単独使用しない。文字は必ず濃色を使う。 伝わるデザインの作り方 4 / 12

根拠3 色相と意味の対応（ Itten, 1961） 緑 赤 青 金 成功・完了・安全 エラー・警告・注意 情報・補足・信頼 強調・重要・注目 重要：機能色は文書・資料を通じて意味を固定する。「緑＝成功」を 1つの資料内で「緑＝注意」と混在させない。 伝わるデザインの作り方 5 / 12

根拠4 チャンク化と要素数の上限（ Miller, 1956） ワーキングメモリは、関連のない要素を7±2個（Miller, 1956）、後の研究では4個程度（Cowan, 2001）までしか同時に保持 できない。図解・資料内の要素数が多いほど、色で「グルーピング」して実質的なチャンク数を減らす必要がある。 A1 A2 A3 B1 B2 B3 6要素でも、色でグルーピングすれば「2チャンク」として処理される 伝わるデザインの作り方 6 / 12

What 1 2 3 4 機能色の設計原則 1資料あたりの意味を持つ色は4色以内（ブランド色1〜2＋機能色）に絞る 機能色（成功=緑／エラー=赤／補足=青）は文書全体で固定し、途中で意味を変えない 装飾目的の色（背景グラデーション等）と、情報を持つ色（正誤の色分け等）を混在させない 色だけに意味を持たせず、アイコンや形も併用する（色覚多様性への配慮） 伝わるデザインの作り方 7 / 12

What 図解での色の使い方： Before / After Before：色数が多く、意味が読み取れない After：状態の意味に沿って色を固定 受付 受付（未処理） 審査 審査中 承認 承認待ち 発送 発送準備 完了 完了 伝わるデザインの作り方 8 / 12

How テクニカルライティングとの接続 文章構造の階層（見出し1・見出し2・本文）と、色の階層（濃色＝重要／淡色＝補足）を一致させると、読み手は文章を読 まなくても構造を先に把握できる。これは「一文一義」「専門用語の初出定義」といったテクニカルライティングの原則と同 じ目的（認知負荷の最小化）を、視覚のレイヤーで達成する手法である。 実践：見出しの色の濃さ＝情報の重要度、というルールを文書全体で 1つに固定する 実践：警告・注意書きの色（赤等）は、本文中で他の目的に使わない（濫用すると警告の効果が薄れる） 伝わるデザインの作り方 9 / 12

セルフチェックリスト 本文文字色と背景のコントラスト比が4.5:1以上か 機能色（成功/エラー/補足）が資料全体で統一されているか 1資料あたりの色数が4色以内に収まっているか 色だけに頼らず、形やアイコンでも情報を区別できるか 文章構造の重要度と、色の濃淡が対応しているか 伝わるデザインの作り方 10 / 12

まとめ 1 2 3 色は装飾ではなく、認知負荷を減らすための機能である コントラスト比・色数・機能色の固定という、守るべき最低限のルールがある 文章の構造と色の階層を一致させることで、テクニカルライティングと色彩設計は同じ目的でつながる 伝わるデザインの作り方 11 / 12

出典・参考文献 ・Sweller, J. (1988). Cognitive load during problem solving. Cognitive Science, 12(2), 257-285. ・W3C, Web Content Accessibility Guidelines (WCAG) 2.1, Success Criterion 1.4.3 ・Itten, J. (1961). The Art of Color. ・Miller, G. A. (1956). The magical number seven, plus or minus two. Psychological Review, 63(2), 81-97. ・Cowan, N. (2001). The magical number 4 in short-term memory. Behavioral and Brain Sciences, 24(1), 87-114. うさうさ研修工房