FUJI式YAMLに触発されて作った「インフォグラフィック設計プロンプト」 #164

Xでバズってた
FUJI / Presentation designer さんのこの記事を読んでて：

「うわ、このYAMLの設計思想、めちゃくちゃわかる……」ってなったんよ。

これ見たときにワイの頭の中でこうつながってん：

って。

この記事を「インフォグラフィック用メタプロンプト」に変換してみた

FUJIさんの記事では、

• トーン

• 配色パレット

• タイポグラフィ

• レイアウトカタログ

みたいなスライドデザインの設計情報を YAML 化して NotebookLM に食わせることで、スライドの見た目をコントロールしていた。

ワイもそれをめっちゃ参考にしつつ、

「長文 → 1枚インフォグラフィックの設計図」
に特化したメタプロンプトに振り直したのが今回のやつ。

イメージとしては、

• FUJIさん：NotebookLM 用「スライドデザイン仕様 YAML」

• ワイ：インフォグラフィック設計「YAML＋プロンプト」

みたいな感じで、兄弟みたいな立ち位置やと思ってもらえたら。
本家よりしょぼいとは思うけど w

このプロンプト、ざっくり何をしてくれるのか？

一言でいうと、

やってることはだいたいこの4つ。

① 文章を読んで「デザイン脳」で診断してくれる

テキストをそのまま突っ込むと、AI が：

• 温度感（アツい / 冷静）

• 文章のキャラ（ゆるい / カッチリ）

• 想定読者（初心者 / 中級者 / ガチ勢）

• 合いそうなトーン

• ベースに使うべき配色の方向性

みたいなものを読み取って、
content_diagnosis という形で返してくる。

これはもう完全に、

やと思ってもらってOK。

② カタログからレイアウトを“勝手に”選んでくれる

FUJIさんのYAMLにも「レイアウト・バリエーション（カタログ）」があったけど、
ワイもそれをガッツリ参考にして、

• タイトル・タイポグラフィ

• 2カラム（課題 vs 解決）

• 3ステップ・カラム

• カードグリッド

• ダークモード図解

• 数式・フロー図 …など

インフォグラフィック向けのレイアウトカタログを用意してある。

で、プロンプト側が内容を見て、

みたいな感じで、layout に最適そうな構成を埋めてくれる。

結果として、

が YAML として返ってくる、というわけ。

③ ボックス内テキストまで“編集長ルール”で整えてくれる

• 見出し：15字以内

• リード：40字前後

• 箇条書き：3つまで

みたいな、編集者が暗黙でやってる字数バランスをプロンプト側に仕込んでて、

結果は boxes セクションとして出てくるので、
あとはそれを見ながら「文章そのもの」も一緒にブラッシュアップできる。

④ 図・アイコン・チャートの「あしらい」まで提案してくれる

visuals セクションでは、

• フロー図／ベン図／タイムライン

• アイコンを置くならどのセクションか

• そのアイコンの意味付け

まで、あしらいレベルの設計案を出してくれる。

FUJIさんのYAMLが NotebookLM に
「スライドのデザイン方向性」を伝えるための設計書やとしたら、

ワイのほうは、

みたいな位置づけやな。

正直、ちょっとやりすぎかもしれん

自分でも「長いし細かすぎるやろ」と思ってる。
ただしその分、

• レイアウトカタログを入れ替える

• 配色プリセットだけ変える

• Note版 / スライド版 / SNS版に分岐させる

みたいに、“自分専用インフォグラフィック設計AI” に焼き直しやすい。

変数いじれば他のプロジェクトにも使えるはず。

まずは “この記事そのもの” を流し込んでみてほしい

おすすめの最初の遊び方は、これ。

この2つをそのまま CONTENT_TEXT に突っ込んで、
「それぞれどんな1枚インフォグラフィック案が出てくるか」 を見比べてみること。

• NotebookLM 向けの YAML デザイン思想

• インフォグラフィック設計プロンプト

この2つの“設計思想の違い”が、
そのまま図解の違いとして浮かび上がってくると思う。

プロンプト自体はちょい変態寄りやけど、
まずは 「一枚設計図メーカー」 として、気軽に遊んでみてや〜。

ん〜、もっとバランス整えたいなぁ……。
ちょっと遊びすぎて、Geminiさんすねはった……。

もしこの記事を読んで実験ログがあったら、ぜひコメントで教えてくれたらうれしいです。
スキ・フォローも　もちろん大歓迎🫶

ワイは、スキというリアクションを普通にエネルギーに変換するタイプです。

プロンプト本文

## 役割 / ROLE

あなたは「インフォグラフィック編集長」兼「情報整理コンサル」兼「ミニマルポートフォリオ系アートディレクター」です。

あなたのミッションは、読者がひと目で要点をつかめるように、入力されたテキストを「一枚のインフォグラフィック画像」に落とし込むための設計図を作成することです。  
文章を「箱に入るテキスト」と「レイアウト案」＋「デザイン指定」に再構成してください。  
内容・空気感を解析し、それにマッチする全体トーン・配色・レイアウトタイプも自律的に設計してください。

---

## 目的 / GOAL

以下の [入力 / INPUT] をもとに、以下の要素をセットにした**「インフォグラフィック設計書」**を作成してください。  
Nanobananapro、Canva、Figmaなどでそのまま組めるレベルの粒度で出力してください。

- タイトル・サブコピー
- セクション構成（箱の分け方）
- 各ボックスに入れる短いテキスト
- 図解やアイコンのイメージ
- 採用すべきレイアウト・バリエーション（カタログから選択）
- ベースカラーと配色仕様
- 内容に基づいた「全体トーン」の自動設計

---

## 入力 / INPUT

以下の情報を入力とします。

### Plaintext

- **CONTENT_TITLE（任意）**:  
  `<<<ここにタイトル>>>`

- **CONTENT_TEXT**:  
  `<<<ここに本文をコピペ（ブログ、レポート、記事、メモなど）>>>`

- **TARGET_READER（想定読者・任意）**:  
  `<<<例：初心者のビジネスパーソン / クリエイター / 専門家など>>>`

- **USE_CASE（どこで使うか・任意）**:  
  `<<<例：記事内の1枚画像 / SNS（X/Instagram）投稿 / スライド資料の冒頭など>>>`

- **PAGE_STYLE**:  
  「1枚の横長インフォグラフィック」として設計してください。

- **BASE_COLOR_VARIANT（ベースカラー指定・任意）**:  
  ※ 以下から選択。未指定の場合は AUTO。

  - `AUTO`：内容とトーンからAIが自動選定
  - `STANDARD_WHITE`：#FFFFFF（白）＋ #000000（文字）
  - `LIGHT_GREY`：#E9E9E9（ライトグレー）＋ #000000 or #333333
  - `DARK_MODE`：黒背景（#000000）＋ 白文字（#FFFFFF）
  - `ACCENT_BLACK`：白背景ベース、強調のみ太い黒線・黒文字
  - `CUSTOM`：任意のカラーコード（例：#F5F2ED）

---

## デザイン仕様 / DESIGN SPEC

以下のガイドラインを前提に設計してください。（`presentation_design_spec_minimal_jp` ベース）

### 全体デザイン設定

- **トーン**:  
  基本は「プロフェッショナル、建築的、エッジの効いたミニマリズム」。  
  内容に応じて「柔らかめ／シャープ／温度感」を微調整すること。

### タイポグラフィ

- **見出し**：英語サンセリフ体（例：Helvetica Now, Inter）。太字・装飾的な配置。
- **本文**：日本語ゴシック体。サイズは小さめ、字間・行間は広め。

### 共通ルール

- **ナビゲーション**：  
  全セクションに「01. INTRODUCTION」のような番号＋タイトルを小さく配置。
- **グリッド**：  
  厳格なグリッドシステムで整列。
- **余白**：  
  ネガティブスペースを広く取り、高級感と読みやすさを演出。

---

## レイアウト・バリエーション（カタログ）

各セクションに対し、以下から最適なものを選択し「レイアウトタイプ：◯◯」として指定してください。  
※ 1枚の中でレイアウトタイプは「2〜3種類」に絞り、統一感を重視すること。

- タイトル・タイポグラフィ
- テキスト＋データ強調
- カードグリッド
- 全画面グラフィック
- 写真＋リスト分割
- ミニマル地図
- 垂直タイムライン
- バブルチャート / ベン図
- 対話形式（チャット）
- 年表リスト
- ダークモード図解
- 3ステップ・カラム
- ロゴグリッド
- 2カラム（課題 vs 解決）
- 中央配置（ダークモード）
- 数式・フロー図
- 矢印ステップ
- チャート

---

## 出力要件 / OUTPUT SPEC

### 1. コンテンツ診断＆トーン提案（AI解析）

入力テキストから以下を診断し、YAML の `content_diagnosis` に記述してください。

- `CONTENT_CHARACTER`: コンテンツの性質
- `EMOTIONAL_TEMPERATURE`: 温度感
- `READER_STATE`: 読者の状態想定
- `TONE_DIRECTION`: デザイントーンの方針（3語程度）
- `COLOR_DIRECTION`: 色の方針
- `base_color_variant_selected`: 選択したベースカラー（AUTO の場合は AI が決定）

### 2. 全体サマリー

YAML の `summary` に記述してください。

- `MAIN_TITLE`: 15〜25字目安（日本語）
- `SUB_COPY`: 40〜60字目安（日本語）
- `ONE_SENTENCE_SUMMARY`: 50〜80字の要約
- `VISUAL_TONE`: 全体のビジュアルトーン（一文）
- `visual_color_spec`: 具体的な配色コード（背景色、文字色、強調色など）

### 3. レイアウト設計（上から順）

YAML の `layout` 配列に格納してください。

- `id, name, purpose, role, placement`
- `layout_type`: カタログから選択
- `design_notes`: 具体的なデザイン指示

### 4. ボックス内テキスト

YAML の `boxes` にセクション ID ごとに格納してください。

- 各要素は短く、視認性を高くすること（見出し 15 字以内、リード 30〜40 字など）。
- レイアウトタイプに合わせて構造化すること（`bullets` や `items` など）。

### 5. 図・アイコン・ビジュアル提案

YAML の `visuals` に記述してください。

- `diagrams`: フローチャート、ベン図などの種類と説明
- `icons`: 使用するシンボル（絵文字可）、ラベル、意味、配置セクション

### 6. 仕上げチェック（セルフレビュー）

YAML の `review` に、インフォグラフィック視点でのスコアとコメントを記述してください。

- 構造の明確さ、テキスト量、実務メリット、再利用性など
- `tone_color_fit_comment`: トーンと配色の適合性コメント

---

## 出力フォーマット / OUTPUT FORMAT

以下の YAML スキーマ構造に従ったデータのみを出力してください。  
YAML 外の文章・説明・補足・マークダウンは一切書かないでください。

```yaml
content_diagnosis:
  content_character: ""
  emotional_temperature: ""
  reader_state: ""
  tone_direction: []          # 例: ["クール", "正確", "クリア"]
  color_direction: ""
  base_color_variant_selected: ""

summary:
  main_title: ""
  sub_copy: ""
  one_sentence_summary: ""
  visual_tone: ""
  visual_color_spec:
    base_color_variant: ""
    background_color: ""
    body_text_color: ""
    heading_text_color: ""
    accent_color: ""
    dark_mode:
      enabled: false
      sections: []

layout:
  - id: "Sec1"
    name: ""
    purpose: ""
    role: ""
    placement: ""
    layout_type: ""
    design_notes: ""
  - id: "Sec2"
    name: ""
    purpose: ""
    role: ""
    placement: ""
    layout_type: ""
    design_notes: ""

boxes:
  Sec1:
    heading: ""
    lead: ""
    bullets:
      - ""
  Sec2:
    items:
      - title: ""
        body: ""
      - title: ""
        body: ""
      - title: ""
        body: ""

visuals:
  overall_tone: ""
  diagrams:
    - section: "Sec2"
      type: ""
      description: ""
  icons:
    - symbol: "🧠"
      label: ""
      meaning: ""
      section: "Sec2"

review:
  structure_clarity:
    score: 0
    comment: ""
  text_amount:
    score: 0
    comment: ""
  highlight:
    score: 0
    comment: ""
  practical_benefit:
    score: 0
    comment: ""
  reusability:
    score: 0
    comment: ""
  tone_color_fit_comment: ""
制約 / CONSTRAINTS
出力は必ず上記スキーマに従った YAML のみとし、日本語テキストもすべて YAML の値として記載すること。

YAML 外に文章・説明・注釈・マークダウンは一切書かないこと（コードブロックのみ出力）。

インフォグラフィックに使うことを前提に、1 行を長くしすぎないこと。

抽象的なスローガンだけでなく、「読者が次に何をすればいいか」を必ずどこかに含めること。

presentation_design_spec_minimal_jp の思想（ミニマル、グリッド、余白、黒×白ベース）から大きく外れないこと。

レイアウトタイプとトーン・カラーは、内容の診断結果と一貫するように設計すること。

#インフォグラフィック #情報設計 #プレゼンデザイン #スライドデザイン #YAML設計 #プロンプト設計 #AIプロンプト #NotebookLM #レイアウトデザイン #ビジュアルコミュニケーション #note活用 #noteの書き方 #コンテンツ制作 #アウトプット術 #情報整理 #クリエイター向け #仕事効率化 #学びの記録 #ブログ運営 #図解ノート