cognitive-design

認知デザインの原則

目次

• 概要
• ワークフロー
  • 認知原則の適用ワークフロー
  • 簡易検証ワークフロー
• パス選択メニュー
  • パス 1：認知の基礎を理解する
  • パス 2：デザインフレームワークを適用する
  • パス 3：分野固有のガイダンスを得る
  • パス 4：クイックリファレンスを利用する
  • パス 5：情報源の全体像を探る
  • パス 6：終了する
• 関連スキル

---

概要

このスキルでは、効果的なデザインを支える認知科学の基礎、つまり、特定のデザインが機能する理由を説明する知覚、注意、記憶、意思決定の原則を紹介します。デザインの意思決定を研究（Tufte、Norman、Ware、Cleveland & McGill、Mayer）に基づいて行い、体系的なフレームワーク（認知デザインピラミッド、デザインフィードバックループ、3 層モデル）を適用し、適切な視覚表現を選び、注意、記憶の限界、認知負荷を管理できるよう支援します。

関連スキル： 体系的なレビューには design-evaluation-audit、誤解を招く表現の検出には cognitive-fallacies-guard、データジャーナリズムには visual-storytelling-design、コンテンツの構成には information-architecture、D3.js の実装には d3-visualization を使用します。

---

ワークフロー

認知原則の適用ワークフロー

使用する場面： 新しいインターフェース、ダッシュボード、ビジュアライゼーション、または教育コンテンツをゼロから作成するとき

所要時間： 1～2 時間

このチェックリストをコピーして、進捗を記録してください：

Cognitive Design Progress:
- [ ] Step 1: Orient to cognitive principles
- [ ] Step 2: Structure design thinking with frameworks
- [ ] Step 3: Apply domain-specific guidance
- [ ] Step 4: Validate against quick reference

ステップ 1：認知原則を把握する

デザインが機能する理由（知覚、記憶、ゲシュタルト原則）を深く理解するには、認知の基礎から始めてください。または、手早く概要を把握するには、クイックリファレンス（20 の基本原則、判断ルール）を利用してください。基礎編では理論的な土台を築けます。クイックリファレンスなら、より速く始められます。

ステップ 2：フレームワークでデザイン思考を構造化する

デザインフレームワークを使って、体系的なアプローチを適用してください。認知デザインピラミッド（4 段階の品質評価）、デザインフィードバックループ（インタラクションのサイクル）、3 層ビジュアライゼーションモデル（データ伝達の忠実度）を利用できます。これらにより、デザインの意思決定に再現可能な構造を持たせられます。

ステップ 3：分野固有のガイダンスを適用する

分野を選んでください。チャートやダッシュボードにはデータビジュアライゼーション、インターフェースやアプリにはUX プロダクトデザイン、e ラーニングや研修には教育デザインを利用します。それぞれの状況に合わせた認知原則を適用してください。

ステップ 4：クイックリファレンスを使って検証する

クイックリファレンスを使い、3 つの質問（注意を引くか？ 記憶に残るか？ 明確か？）と 20 の基本原則に照らして、デザインを確認してください。デザインが認知原則との基本的な整合性を満たしていることを確かめます。

次のステップ： 体系的な評価には design-evaluation-audit スキルを、誤解を招く表現の確認には cognitive-fallacies-guard を使用してください。

---

迅速な検証ワークフロー

次の場合に使用します： 迅速に実施可否を判断したい場合、変更点をスポットチェックしたい場合、または設計作業中に認知の基本原則に照らして検証したい場合

所要時間： 5〜10 分

このチェックリストをコピーして、進捗を記録してください：

Quick Validation Progress:
- [ ] Step 1: Three-question rapid check
- [ ] Step 2: Spot checks if issues found

ステップ 1：3 つの質問による迅速なチェック

クイックリファレンスを使って、次の項目を確認します。（1）注意：「最初にどこを見ればよいかが明確ですか？」（視覚的階層が明確で、主要な要素が目立ち、予測しやすい順序で視線を誘導できる）、（2）記憶：「画面に表示できる情報を、ユーザーに記憶させる必要がありますか？」（状態が見える、選択肢が提示されている、4±1 個のまとまりに収まっている）、（3）明瞭さ：「初めて見る人でも 5 秒で理解できますか？」（目的が把握しやすく、不要な装飾がなく、用語がなじみやすい）。すべて「はい」なら、認知の観点から適切に設計されている可能性が高いです。

ステップ 2：問題が見つかった場合のスポットチェック

いずれかの質問で問題があった場合は、関連する認知の基礎を参照してください。注意に関する問題ですか？認知の基礎で階層と視覚的顕著性を確認してください。記憶に関する問題ですか？チャンク化と記憶の制約を確認してください。明瞭さに関する問題ですか？シンプルさの原則とラベル付けの指針を確認してください。

---

パス選択メニュー

現在のニーズに合わせてパスを選択してください：

パス 1：認知の基礎を理解する

次の場合に選択します： 効果的な設計を支える中核的な認知心理学の原則（注意、記憶、知覚、ゲシュタルトによるグルーピング、視覚的符号化の階層）を学びたい場合。

得られること： 特定のデザインが機能する理由を、研究に基づいて深く理解できます。

所要時間： 20〜40 分

→ 認知の基礎のリソースへ

---

パス 2：設計フレームワークを適用する

次の場合に選択します： 設計について考える際に、体系的なフレームワークを活用したい場合。

得られること： 相互に補完する 3 つのフレームワーク：

• 認知設計ピラミッド（4 つの層：知覚効率 → 認知的一貫性 → 感情的エンゲージメント → 行動との整合性）
• 設計フィードバックループ（知覚 → 解釈 → 判断 → 行動 → 学習）
• 3 層の視覚化モデル（データ → 視覚的符号化 → 認知的解釈）

所要時間： 30〜45 分

→ フレームワークのリソースへ

---

パス 3：領域別のガイダンスを得る

次の場合に選択します： 特定の種類の設計に取り組んでおり、それに合わせた認知の原則を知りたい場合。

領域を選択してください：

3a. データ視覚化（チャート、ダッシュボード、分析）

→ データ視覚化のリソースへ

対象内容： タスクと符号化の整合性に基づくチャートの選択、ダッシュボードの階層とグルーピング、探索を促す段階的開示、ストーリー性のあるデータ視覚化

---

3b. プロダクト／UX デザイン（インターフェース、モバイルアプリ、ウェブアプリケーション）

→ UX プロダクトデザインのリソースへ

対象内容： なじみのあるパターンによる学習しやすさ、タスクフローの効率化、認知負荷の管理、オンボーディング設計、エラー処理

---

3c. 教育デザイン（E ラーニング、トレーニング、教材）

→ 教育デザインのリソースへ

対象内容： マルチメディア学習の原則、二重符号化、例題、想起練習、分割、整合性の原則

---

パス 4：クイックリファレンスを参照する

次の場合に選択します： 迅速な設計ガイダンス、中核となる原則の要約、または簡単な検証チェックが必要な場合。

得られること： 20 の中核原則、3 つの質問によるチェック、一般的な判断ルール、設計ヒューリスティクス

所要時間： 5〜15 分

→ クイックリファレンスのリソースへ

---

パス 5：研究分野の全体像を探る

次の場合に選択します： 認知設計の原則を支える研究の潮流や主要な著者について理解したい場合。

得られること： 主要な研究者（Tufte、Norman、Ware、Cleveland & McGill、Mayer、Nielsen）とその貢献、引用するタイミング。

所要時間： 10〜20 分

→ 研究分野の全体像のリソースへ

---

パス 6：終了

次の場合に選択します： デザイン作業を完了した場合、または必要な情報を集め終えた場合です。

終了する前に：

• このセッションの目標を達成しましたか？
• デザインを評価する必要がありますか？ → design-evaluation-audit スキルを使用します
• 誤解を招く表現がないか確認する必要がありますか？ → cognitive-fallacies-guard スキルを使用します
• データストーリーを伝える必要がありますか？ → visual-storytelling-design スキルを使用します

---

関連スキル

スキル	用途
design-evaluation-audit	認知チェックリストと視覚化監査を使用した体系的なデザインレビュー
cognitive-fallacies-guard	チャートジャンク、誤解を招く軸、認知バイアス、データ完全性の侵害の検出
visual-storytelling-design	データジャーナリズム、プレゼンテーション、インフォグラフィック、ナラティブビジュアライゼーション
information-architecture	コンテンツの整理、ナビゲーションデザイン、分類体系、情報の見つけやすさ
d3-visualization	D3.js を使用したインタラクティブなデータビジュアライゼーションの実装