図解デザイン学習ライブラリ

AI（特にClaude）に図解を作らせる時のデザインリファレンス。実例パターンから学ぶ。

30秒で全体像

パターンA：サービス紹介バナー（集客主任型）

構成

graph TB
    S1[1. 競合を丸裸にする<br/>競合施策と自社の差分を独自調査で可視化] --> S2
    S2[2. 次の一手を明確にする<br/>データに基づく戦略策定+コンサル付き] --> S3
    S3[3. あとは実行するだけ<br/>予算・効果を整理し即実行できる状態へ]

    style S1 fill:#212121,color:#fff
    style S2 fill:#212121,color:#fff
    style S3 fill:#212121,color:#fff

実績バー（下部横並び4つ）

デザイン特徴

• 各ステップは ダークカードで囲み
• アイコン付き（虫眼鏡・チェス駒・ロケット）
• 高級感・信頼感のあるビジネストーン

パターンB：情報まとめ図解（AIトレンド型）

構成（2カラム＋下部）

graph TB
    Left[左カラム<br/>01 開発・エンタープライズの加速]
    RightTop[右カラム上<br/>02 生活・個人の生産性向上]
    RightBottom[右カラム下<br/>03 主要サービス比較]
    Bottom[まとめ帯<br/>AIは特別なツールから日常のインフラへ]

    Left --> Bottom
    RightTop --> Bottom
    RightBottom --> Bottom

    style Bottom fill:#fce4ec

左カラム：01 開発・エンタープライズの加速

• ChatGPT Pro（月額100ドル）の紹介
• Codex: 5倍 → 10倍 → 高度な業務
• 自律型AIエージェント / 統合管理 / Managed Agents
• エンタープライズ収益が 全体の40%突破

右カラム上：02 生活・個人の生産性向上

• Gemini「ノートブック」機能の統合
• 日本で「Gemini for Home」早期アクセス
• Meta の新モデル「Muse Spark」→ 時価総額1000億ドル増加

右カラム下：03 主要サービス比較

デザイン特徴

• セクションごとに色分け枠（緑系・オレンジ系・青系）
• アイコン多用（ロボット・クラウド・家・グラフ等）
• 強調数字は大きく太字＋色付き
• 比較表は色分けカード形式
• 右下に NotebookLM ロゴ

デザインパターン使い分け

AIに図解を作らせるプロンプト例

パターンA を再現するプロンプト

以下の構造で横長バナー（16:9）を作成してください：

【背景】ダークカラー（#1A1A1A）
【文字色】ゴールド（#D4AF37）とホワイト
【構成】横並び3ステップ + 下部実績バー4つ
【ステップ内容】
1. [タイトル1] - [説明1]
2. [タイトル2] - [説明2]
3. [タイトル3] - [説明3]
【実績バー】
- [実績1]: [数値]
- [実績2]: [数値]
- [実績3]: [数値]
- [実績4]: [数値]
【トーン】高級感・信頼感のあるビジネストーン
【出力形式】HTML + CSS（Tailwind可）

パターンB を再現するプロンプト

以下の構造で横長情報まとめ図解（16:9）を作成してください：

【背景】ノート風（方眼・罫線テクスチャ）
【文字色】ダークブラウン（#3E2723）
【構成】2カラム + 下部まとめ帯
【左カラム】[テーマ1] - 4つの箇条書き
【右カラム上】[テーマ2] - 3つの箇条書き
【右カラム下】[テーマ3] - 比較表3列
【まとめ帯】[キャッチコピー]
【トーン】親しみやすく情報整理が美しい
【強調】数字は大きく太字＋色付き
【出力形式】HTML + CSS（Tailwind可）

今日からやるアクション

• [ ] パターンA / B の HTMLテンプレ を整備
• [ ] 自社のサービス紹介を パターンA で再構築
• [ ] 情報まとめ投稿を パターンB で量産
• [ ] 図解作成プロンプトを Skills 化
• [ ] AI生成図解と 手動デザイン の品質比較

関連ノート

• Claude — Artifacts で図解生成
• Gemini — NotebookLM × スライド連携
• マーケティング
• プロンプト設計
• AI _README