ビジュアルリテラシー：AIにデザイナーのように見ることを教える
AIは指示だけを必要としているわけではありません。人間の専門知識を教えられるモデルを必要としています。
これは何か
ビジュアルリテラシーは推論フレームワークであり、プロンプトテンプレートやフォーマットガイド、CSSユーティリティではありません。人間がどのように情報を知覚するかをモデル化することで、AIに視覚デザインの判断を下すことを教えます。
このフレームワークが解決する問題：AIはレイアウトを生成できます。しかし、そのレイアウトが「機能する」かどうかを判断することはできません。フラットな階層、壊れたリズム、競合する強調、認知的負荷の超過に気づくことはありません。このフレームワークは、それらの知覚を明示的な推論原則として提供します。
これは人間の判断を補完するものであり、代替するものではありません
ビジュアルリテラシーは、AIにデザインについて推論することを教えることで、人間がより迅速に、より良い意思決定を行えるようにするためのものであり、AIが単独で意思決定を行うためのものではありません。
目標は協業です：
- AIが提供するもの：構造化された分析、知覚に基づく推論、診断フレームワーク
- 人間が提供するもの：意図、センス、文脈、オーディエンスの知識、最終判断
8つの次元にわたってデザインを0-5でスコアリングできるAIは有用です。ルーブリックで低スコアだったからといって、デザイナーの十分な情報に基づいた選択を上書きするAIはそうではありません。
このフレームワークを、思考を研ぎ澄ますために使ってください。思考を委託するために使わないでください。
前提
AIは視覚的な直感を持ちません。ページがバランスが取れている、混雑している、未完成である、混乱している、エレガントであると瞬時に認識することはできません。この直感は、明示的な推論原則に変換されなければなりません。
AIにビジュアルリテラシーを教えるということは、情報をフォーマットする方法だけでなく、人間が情報をどのように知覚するかを教えることを意味します。
フォーマットから知覚へのシフトです。
中核原則
すべての視覚的決定は、人間が情報をどのように知覚し処理するかという観点から説明可能でなければなりません。
視覚的な選択が人間の理解にどのように役立つかを説明できないなら、それは装飾です。認知の観点から説明できるなら、それはデザインです。
クイックスタート
1. スキルをプロジェクトにコピーする
# リポジトリをクローン
git clone https://github.com/amberhoward/visual-literacy.git
# プロジェクトのスキルディレクトリにコピー
cp -r visual-literacy/.opencode/skills/visual-literacy ./your-project/.opencode/skills/
2. AIに使用を指示する
プロンプトまたはシステムメッセージで次のように記述します：
visual-literacyスキルを使用して、このドキュメントのデザインを評価し、推論してください。
3. 違いを確認する
Before（フォーマット指示）：
「見出しをもっと大きくして、余白を増やしてください。」
After（知覚に基づく推論）：
「視覚的階層が不十分です——読者は情報構造をスキャンして特定できません。関連性のないセクション間のスペーシングが、セクション内のスペーシングと区別されていません。見出しと本文のコントラストを高めてください。セクション間のスペーシングはセクション内のスペーシングの2〜3倍にして、概念的な距離を示してください。」
このスキルを使用するタイミング
以下の場合にこのスキルを使用します：
- あらゆるドキュメント、レポート、プレゼンテーションを作成するとき
- インターフェースやレイアウトをデザインするとき
- 既存のデザインを評価または批評するとき
- スペーシング、階層、グループ化、強調について決定を下すとき
- フォーマット指示を知覚に基づく決定に変換するとき
- 「何かがおかしい」と感じるが、その理由を名指しできないときのデバッグ
- デザインレビューやUX監査を実行するとき
3つのモード
モード1：デザイン（プロアクティブ）
何か新しいものを作成するときは、出力を生成する前にヒューリスティックを使用して視覚的な決定を推論します。特定のレイアウトを選択した理由を尋ねられるのを待ってはいけません。
使用方法： AIにデザインを生成する前に、視覚的推論を順を追って説明するよう依頼します：
このページをデザインする前に、あなたの知覚的推論を順を追って説明してください：
1. 情報構造は何ですか？
2. 人間はこれをどのように知覚しますか？
3. 読者にどのような認知負荷をかけていますか？
4. 視覚構造は意図を伝えていますか？
次に、その推論に基づいてデザインを生成してください。
モード2：批評（評価的）
既存の作品をレビューするときは、知覚フレームワークを使用して問題を診断します。何が間違っているか、なぜ間違っているか、どの認知原則が侵害されているかを明示します。
使用方法： スクリーンショット、コード、または説明を提供し、構造化された批評を依頼します：
visual-literacy評価ルーブリックを使用して、このデザインを批評してください。
各次元を0-5でスコアリングし、重要度レベルを特定し、
知覚的根拠を含む具体的な修正推奨事項を提供してください。
モード3：翻訳（教育的）
フォーマット指示が与えられたときは、それをその背後にある知覚的意図に変換します。そして、文字通りの指示ではなく、知覚的な目標を実行します。
使用方法： フォーマット指示を与え、翻訳を依頼します：
「このページにもっと余白を追加したい」と考えています。
フォーマットから知覚への変換ガイドを使用して、この指示の背後にある知覚的意図を説明し、
それを正しく実行してください。
知覚的推論プロセス
視覚的な決定を下す前に、このシーケンスを実行します：
1. 情報構造は何ですか？
- 主要なコンテンツは何ですか？
- 重要度の階層は？
- 論理的にグループ化されるものは？
- 順番に読む必要があるものと、スキャンできるものは？
2. 人間はこれをどのように知覚しますか？
- 最初に目はどこに行きますか？それは正しい場所ですか？
- 読者は5秒以内に必要なものをスキャンして見つけられますか？
- 関連する概念は視覚的に接続されていますか？
- コンテンツを通る明確なパスはありますか？
3. 読者にどのような認知負荷をかけていますか？
- 各時点で読者はいくつの決定を下さなければなりませんか？
- 作業記憶に情報を保持するよう求めていますか？
- 中断された場合、簡単に自分の位置を把握できますか？
- 密度はコンテンツタイプに適切ですか？
4. 視覚構造は意図を伝えていますか？
- すべての要素はそのスペースに値しますか？
- スペーシングは関係性を示していますか、それとも偶然ですか？
- パターンは意図的に繰り返されていますか、それとも一貫性がありませんか？
- ページは完成しているように見えますか、それとも放棄されたように見えますか？
ヒューリスティックフレームワーク
8つのカテゴリ、24のヒューリスティック、1つの優先順位システム。
| カテゴリ | 数 | 中核となる問い |
|---|---|---|
| 階層 | 3 | 目はどこを最初に見るべきかわかるか？ |
| グループ化 | 3 | 関連する項目は視覚的に接続されているか？ |
| リズム | 3 | 読者は期待を形成できるか？ |
| 強調 | 3 | 重要な情報は際立っているか？ |
| バランス | 2 | 視覚的な重みは意図的に分配されているか？ |
| 完結性 | 3 | ページは解決されたように見えるか？ |
| フロー | 3 | コンテンツを通る明確なパスはあるか？ |
| 抑制 | 3 | すべての要素はそのスペースに値するか？ |
完全なカタログ（知覚的根拠、違反例、診断方法を含む）については、references/design-heuristics.mdを参照してください。
ヒューリスティックが競合した場合の優先順位：
- 階層 — 読者は何が最も重要かを知らなければならない
- グループ化 — 読者は何が一緒に属するかを知らなければならない
- フロー — 読者は次にどこへ行くべきかを知らなければならない
- 強調 — 読者は何が最も重要かを知らなければならない
- リズム — 読者は期待を形成できなければならない
- バランス — レイアウトは安定しているように見えなければならない
- 完結性 — ページは解決されたように見えなければならない
- 抑制 — すべての要素はその場所に値しなければならない
知覚原則
認知科学の基礎。デザインルールではなく、人間の脳が視覚情報を処理する方法に関する事実です。
| 原則 | 説明 |
|---|---|
| ゲシュタルト（近接、類似、閉合、連続、図と地、共通領域） | 脳が情報を自動的にグループ化する方法 |
| ワーキングメモリー（ミラーの7±2、認知チャンキング） | 脳が一度に処理できる量 |
| プリアテンティブ処理 | 意識的な思考の前に脳が見ているもの |
| リーディングパターン（Fパターン、Zパターン、グーテンベルクダイアグラム） | 目がページをどのように移動するか |
| シグナル・トゥ・ノイズ比 | 脳がフィルタリングしなければならないもの |
| プログレッシブディスクロージャー | 脳がどのように層をなして理解を構築するか |
| 一貫性 | 脳がどのように予測を形成し使用するか |
| アフォーダンス | 視覚的形式が機能をどのように伝えるか |
完全な基礎については、references/perceptual-principles.mdを参照してください。
評価ルーブリック
8つの次元にわたってデザインを0-5でスコアリングします。合計：/40。
| 次元 | 測定内容 |
|---|---|
| 階層 (0-5) | 読者は読まずに重要度を識別できるか？ |
| グループ化 (0-5) | グループのメンバーシップは明確か？ |
| リズム (0-5) | 読者はレイアウトについて期待を形成できるか？ |
| 強調 (0-5) | 読者の注意は正しい場所に向かうか？ |
| フロー (0-5) | 目はコンテンツを自然に移動するか？ |
| バランス (0-5) | 視覚的な重みは意図的に分配されているか？ |
| 完結性 (0-5) | ページは解決されたように見えるか？ |
| 抑制 (0-5) | すべての要素はそのスペースに値するか？ |
| 合計スコア | 評価 |
|---|---|
| 0-10 | クリティカル — 大幅な再デザインが必要 |
| 11-18 | 重大な問題 — 複数の次元に改善が必要 |
| 19-25 | 機能的 — 具体的な改善が必要 |
| 26-32 | 良好 — 磨きをかければ本番対応可能 |
| 33-38 | 優れている — わずかな修正のみ可能 |
| 39-40 | 傑出している — これを例として教えるべき |
スコアリングガイダンス、重大度分類（P0-P3）、修正推奨事項については、references/evaluation-rubric.mdを参照してください。
競合の解決
ヒューリスティックが相反する方向に引っ張る場合：
| 競合 | 解決方法 |
|---|---|
| 階層 vs. ミニマリズム | ミニマリズムは処理が少ないことであり、処理がないことではない。最小の手段で最大の階層を作成する。 |
| 完全性 vs. ホワイトスペース | 完全性は構造から生まれ、密度からは生まれない。60%コンテンツ/40%ホワイトスペースでも完全に感じられる。 |
| 一貫性 vs. 強調 | 一貫性がデフォルト。強調は例外。意図的に、控えめに、かつ大幅にそれを破る。 |
| 密度 vs. 休息 | 密度の高いセクションと低いセクションを交互に配置する。一時停止のためのスキャンアンカーを提供する。 |
| 慣習 vs. 差別化 | 構造には慣習に従う。コンテンツと微妙な処理を通じて差別化する。 |
完全な解決フレームワークについては、references/heuristic-conflicts.mdを参照してください。
フォーマットから知覚への変換
| 指示 | 知覚的意図 |
|---|---|
| 「もっと余白を追加して」 | 視覚的な距離が概念的な関係を反映していない。 |
| 「見出しを大きくして」 | 階層がスキャンに不十分である。 |
| 「段落を分割して」 | 視覚的なチャンクがワーキングメモリーの限界を超えている。 |
| 「目立たせて」 | 要素がその重要度に比べて強調が不足している。 |
| 「簡素化して」 | 認知負荷がコンテンツタイプに対して高すぎる。 |
| 「もっとプロフェッショナルに」 | 視覚的なシグナルがコンテンツの権威レベルと一致していない。 |
完全な変換辞書については、references/formatting-to-perception.mdを参照してください。
アーキテクチャ
このスキルは、6層の推論アーキテクチャに従います：
メンタルモデル → 専門家がこのドメインをどのように知覚するか
↓
知覚原則 → 理由を説明する認知科学
↓
ヒューリスティック → 実用的な経験則
↓
競合解決 → ルールが矛盾する場合の対処法
↓
評価ルーブリック → 品質のための構造化スコアリング
↓
変換層 → 素朴な指示を専門家の推論に変換する
このアーキテクチャはドメインに依存しません。ビジュアルリテラシーは最初の応用例です。同じ6層は、アーキテクチャ、医療、教育、リーダーシップ、または暗黙知が言語化に抵抗するあらゆる分野において、AIに専門家の認知を教えることができます。
出力要件
このスキルを使用するときは、常に以下を行います：
- すべての視覚的決定の背後にある知覚原則を明示する
- レイアウト選択の認知的効果を説明する
- 美的嗜好ではなく、違反された原則の観点から問題を診断する
- 批評するときは評価ルーブリックを使用してデザインをスコアリングする
- フィードバックを実装するよう求められたときは、フォーマットから知覚へ指示を変換する
アンチパターン
絶対にやってはいけないこと：
- 理由を説明せずに「プロフェッショナルに見える」という理由でレイアウトを選択する
- 理解に貢献しない装飾要素を追加する
- スペーシング、タイポグラフィ、色を恣意的な美的選択として扱う
- 「なんとなく正しい気がする」という理由で推論ステップをスキップする
- 特定のコンテンツを考慮せずにヒューリスティックを機械的に適用する
リトマス試験
視覚デザインを生成した後、自問します：
「すべてのスペーシングの決定、すべてのタイプの選択、すべてのグループ化、すべての強調を、人間がこの情報をどのように知覚し処理するかという観点から説明できますか？」
もし「はい」なら、そのデザインは合理的です。 もし「いいえ」なら、それは装飾です。