スライドをAIに作らせる試み自体は珍しくなくなりました。
一方で、SVGは自由度が高いぶん、AIに任せるとすぐに破綻します。試行錯誤の中で、プロンプトをどう作ると安定しやすいかが少しずつ見えてきました。
1. SVGにすると何が難しくなるのか
SVGはScalable Vector Graphicsというベクター形式の画像で、図形と文字を数値で配置できます。
SVGは拡大・縮小しても劣化しません。レイアウトを数値で厳密に制御できる、という強みもあります。
ただ、スライド用途では次のような問題が起きがちです。
文字が想定より多く入り、はみ出します。
色が毎回違い、全体の統一感がなくなります。
レイアウトが微妙にズレて、読みにくくなります。
HTMLとCSSであればブラウザが多少助けてくれますが、SVGではすべてを明示的に指定する必要があります。この融通のきかなさが、AIとの相性を悪くしていました。
2. 自由に描かせない発想に切り替えた
最初は、細かいデザイン指示をプロンプトに大量に書いていました。色コード、フォントサイズ、余白、配置ルールなどです。
しかし、これをやっても安定しませんでした。理由は単純で、AIが毎回どれを選ぶかを判断してしまうからです。指示が多いほど、解釈の揺れも増えます。
そこで発想を切り替えました。AIにデザインさせません。人間が用意した型と選択肢の中でだけ動かします。
# スライドSVGインフォグラフィック変換プロンプト
## 実行手順
1. コンテンツを分析
2. **アーティファクトでSVGを作成**
3. `create_file`で`/mnt/user-data/outputs/slide.svg`に保存
4. `present_files`でファイルを提示
## 判断フロー
AIは以下の順序で判断を行う。各ステップで迷いが生じないよう、選択肢を明確にする。
1. **コンテンツの意図を判定し、palette_idを1つ選択する**
2. **情報量を計算し、適切なレイアウトテンプレートを選択する**
3. **選択したレイアウトの収容条件を確認する**
4. **収容条件を超える場合、以下の優先順で対応する**
- 冗長な修飾語を削除
- たとえや感想を削除
- 図解で置き換え可能な部分を図に変換
- それでも収まらなければ別のレイアウトに変更
5. **SVGを生成し、ファイルとして保存する**
## カラースキーム選択
スライドの意図に応じて、以下のpalette_idから**必ず1つだけ**選択する。色コードを直接指定してはならない。
### palette_id: info_blue（情報説明用）
- 背景: #f3fafe
- アクセント: #1e50a2, #0095d9, #2ca9e1
- 用途: 一般的な情報提供、説明、データ表示
### palette_id: caution_yellow（注意喚起用）
- 背景: #fff7cc
- アクセント: #ffd900, #ffc107, #f39800
- 用途: 重要ポイント、注意事項、アクション推奨
### palette_id: alert_red（警告用）
- 背景: #fdf2f2
- アクセント: #e60033, #e95295, #ea5506
- 用途: 警告、エラー、否定的要素、リスク説明
### palette_id: success_green（成功・推奨用）
- 背景: #ebf8f4
- アクセント: #007b43, #3eb370, #8bc34a
- 用途: 成功事例、推奨事項、肯定的結果
### palette_id: advanced_purple（専門的内容用）
- 背景: #f3f0f7
- アクセント: #884898, #55295b, #1e50a2
- 用途: 高度な概念、専門的説明、技術詳細
### palette_id: neutral_beige（標準用）
- 背景: #F1F0DF
- アクセント: #5E5E5E, #333333, #0095d9
- 用途: ニュートラルな情報、汎用的内容
**ルール**:
- 選択したpalette_id以外の色を使用してはならない
- AIは色を選ぶのではなく、意味を選ぶ
- 1スライド内で複数のpalette_idを混在させない
## レイアウトテンプレートと収容条件
以下のテンプレートから1つ選択する。収容条件を超える場合は別のテンプレートに変更する。
### LT01: 中央フォーカス型
- タイトル: 最大25文字
- 中央メッセージ: 最大30文字、1行のみ
- 周辺補足: 各項目15文字まで、最大4項目
- 用途: 単一の重要メッセージを強調
### LT02: プロセスフロー型（横方向）
- タイトル: 最大25文字
- ステップ数: 最大5ステップ
- 各ステップ名: 10文字まで
- 各ステップ説明: 20文字まで
- 用途: 時系列、手順、段階的プロセス
### LT03: 比較対照型（2カラム）
- タイトル: 最大25文字
- 各カラム見出し: 15文字まで
- 各カラム項目数: 最大3項目
- 各項目: 15文字まで、1行
- 用途: 対比、Before/After、選択肢比較
### LT04: 階層構造型（ツリー）
- タイトル: 最大25文字
- 第1階層: 20文字まで、1項目
- 第2階層: 15文字まで、最大3項目
- 第3階層: 10文字まで、各第2階層に最大2項目
- 用途: 分類、構造説明、関係性の可視化
### LT05: グリッド型（2×3）
- タイトル: 最大25文字
- セル数: 6セル固定
- 各セル: アイコン + 短文10文字まで
- 用途: 複数要素の並列提示、特徴列挙
### LT06: 統計表示型
- タイトル: 最大25文字
- 数値表示: 最大3つ
- 各数値ラベル: 10文字まで
- 補足説明: 全体で30文字まで
- 用途: データ強調、数値比較
- 注意: 説明文の追加は禁止
### LT07: タイムライン型
- タイトル: 最大25文字
- イベント数: 最大4つ
- 各イベント名: 15文字まで
- 各イベント説明: 20文字まで
- 用途: 時系列の変化、歴史、ロードマップ
**収容条件超過時の対応**:
1. 文字サイズを縮める → **絶対禁止**
2. 内容を削る → 推奨
3. 図に置き換える → 推奨
4. レイアウトを変更する → 推奨
## 文言簡略化ルール
レイアウトに収まらない場合、以下の順序で削減する。
1. **削除優先**
- 接続詞（そして、また、しかし等）
- 冗長な修飾語（非常に、とても、かなり等）
- たとえ話や比喩
- 感想や評価（重要、効果的、最適等）
2. **変換**
- 動詞 → 名詞形（「説明します」→「説明」）
- 長文 → 箇条書き → キーワード
3. **図解化**
- 抽象概念 → アイコン + 短文
- プロセス → 番号 + 矢印 + キーワード
## ビジュアル優先ルール
- テキストだけの説明は避け、必ず視覚要素とペアにする
- プロセスは番号 + アイコン + 矢印の組み合わせで表現
- シンプルなアイコンセット（最大8種類）を一貫して使用
- 視覚的メタファーを活用（天秤=比較、電球=アイデア、矢印=プロセス等）
- 重要度の高い情報ほど大きく、目立つ位置に配置
- 要素を線でつなぐときは、線を奥に表示するため先に記述
## デザイン仕様
### 基本設定
- 出力形式: SVG
- サイズ: 640×360ピクセル（16:9）
- viewBox: "0 0 640 360"
- svgタグにwidth/height属性は付けない（可変サイズ対応）
- XML宣言と適切な名前空間を含める
### 背景設定
- タイトル領域（上部47px）: #F1F0DF
- メイン部分: #FFFFFF
- セクション分割背景: 選択したpalette_idの背景色を使用
### テキストサイズ制約
以下のサイズは**固定**であり、変更を禁止する。
- タイトル: 24px（.title）
- サブタイトル/セクション見出し: 20px（.subtitle）
- 主要説明テキスト: 18px（.body-text）
- 補足テキスト: 16px（.note）
**文字が収まらない場合の対処**:
- 文字サイズを縮める → **禁止**
- 内容を削る → 推奨
- 図に置き換える → 推奨
- レイアウトを変更する → 推奨
### スタイル定義
SVG内で`<defs>`と`<style>`を使用してスタイルを一元管理する。
```svg
<defs>
<style type="text/css">
text {
font-family: 'Meiryo', 'メイリオ', sans-serif;
fill: #333333;
}
/* テキストサイズクラス */
.title { font-size: 24px; font-weight: bold; }
.subtitle { font-size: 20px; font-weight: bold; }
.body-text { font-size: 18px; }
.note { font-size: 16px; }
.code { font-family: 'Courier New', monospace; font-size: 14px; }
/* 図形スタイル */
.box { rx: 4; ry: 4; }
.highlight-box { fill: #5E5E5E; }
.highlight-text { fill: #FFFFFF; }
/* 背景カラークラス（palette_idに応じて使用） */
.bg-title { fill: #F1F0DF; }
.bg-blue { fill: #f3fafe; }
.bg-yellow { fill: #fff7cc; }
.bg-red { fill: #fdf2f2; }
.bg-green { fill: #ebf8f4; }
.bg-purple { fill: #f3f0f7; }
.bg-beige { fill: #F1F0DF; }
/* アクセントカラークラス（palette_idに応じて使用） */
.accent-red { fill: #e60033; }
.accent-pink { fill: #e95295; }
.accent-purple { fill: #884898; }
.accent-deep-purple { fill: #55295b; }
.accent-indigo { fill: #1e50a2; }
.accent-blue { fill: #0095d9; }
.accent-light-blue { fill: #2ca9e1; }
.accent-cyan { fill: #00a3af; }
.accent-green { fill: #007b43; }
.accent-light-green { fill: #3eb370; }
.accent-lime { fill: #8bc34a; }
.accent-yellow-green { fill: #c3d825; }
.accent-yellow { fill: #ffd900; }
.accent-amber { fill: #ffc107; }
.accent-orange { fill: #f39800; }
.accent-deep-orange { fill: #ea5506; }
.accent-gray { fill: #5E5E5E; }
/* テキスト用アクセントカラー */
.text-red { fill: #e60033; }
.text-blue { fill: #0095d9; }
.text-green { fill: #3eb370; }
.text-purple { fill: #884898; }
.text-orange { fill: #f39800; }
.text-gray { fill: #5E5E5E; }
.text-white { fill: #FFFFFF; }
</style>
</defs>
```
### レイアウト要素
- 同じスタイルの要素はクラスで一元管理
- 関連する要素は`<g>`でグループ化し、`transform`で配置
- 角丸ボックス（rx="4" ry="4"）を使用
- アイコンは`<symbol>`として定義し`<use>`で再利用（8種類以内）
- アイコンの色は`<use xlink:href="#icon-id" fill="#color" />`で設定
### テキスト配置
- text-anchorは要素ごとに設定（start, middle, end）
- テキストエリアには適切な幅と高さを確保
- テキストの重なりを防止するため、配置前に空間を計算
## 配色適用ガイドライン
- 選択したpalette_idの色のみを使用
- 70%: ベース（背景、薄い色）
- 20-25%: メイン（テキストボックス、図形）
- 5-10%: アクセント（強調、重要要素）
- コントラスト比を考慮し、テキストの可読性を確保
## 変換するコンテンツ
（コンテンツがない場合は、これまでの会話内容を元に作成）
```
Code language: HTML, XML (xml)3. レイアウトと同じくらい色を固定する
プロンプト設計で一番効いたのは、カラーパレットをID化したことでした。
以前は、青系を中心にするとか、注意は黄色にするといった曖昧な指示をしていました。これだと、AIは毎回微妙に違う色を選びます。見比べたときに統一感が崩れます。
そこで、スライドごとにpalette_idを1つ宣言させるようにしました。palette_idごとに、使ってよい色の集合を完全に固定します。色コードを直接書かせない、というルールも入れました。
情報説明用の青系。注意と警告用の黄からオレンジ系。成功と結果用の緑系。こういった区分です。
AIはどの色にするかを考えません。このスライドは注意の話だからこのパレット、という判断だけをします。色を選ぶのではなく、意味を選ばせる。この切り替えで、見た目のブレが一気に減りました。
4. レイアウトは種類を減らすより収容条件を決める
もう一つ大きかったのは、レイアウトの扱いです。最初は、SVGは難しいからレイアウト数を絞ろう、と考えていました。ところが、これはあまり良くありませんでした。表現したい内容の種類は減らせないからです。
代わりに、レイアウトパターン自体は多めに用意しました。そのうえで、各パターンに入れてよい情報量を明示しました。
2カラム比較は各カラムが最大3項目で、1行ずつにします。
2×3グリッドは各セルがアイコンと短文1行までにします。
統計表示は数値と短いラベルのみで、説明文は禁止にします。
このレイアウトにはこれ以上入らない、というルールを先に決めておくと、AIは無理に詰め込まず、別のテンプレートに切り替えるようになります。
5. 小さな画面で読めるかを基準にする
スライドサイズは640×360で、文字サイズも大きめという前提は変えていません。スマートフォンや小さなウィンドウで見たときに、読めないスライドは意味がないと考えているからです。
その代わりに、要素数の上限を決めました。余白も数値で固定しました。文字が入らない場合は、削るか図に置き換えるようにしました。
フォントサイズを縮める、という逃げ道は使いません。人間が作るスライドでも、文字を小さくした瞬間に読まれなくなる感覚があります。
6. プロンプトは判断の順序を書く
最終的に気づいたのは、プロンプトで大事なのは制約の量ではなく、判断の順序だということです。
どのレイアウトを選ぶか。
どのパレットを使うか。
収まらなかったら何を削るか。
この順序を明示すると、AIの迷いが減ります。逆に、全部を一度に指示すると、AIは毎回違う解釈をします。人に曖昧な仕様書を渡したときと同じような動きになります。
7. まだ課題もある
もちろん、完璧ではありません。
SVGだけで背景画像や複雑な表現を扱うのは難しいです。抽象度の高い図解は、まだ人間の修正が必要です。パレットやレイアウトの追加管理は手間がかかります。
それでも、AIに丸投げするよりは、人間が設計した仕組みの中でAIを動かす方が、今のところはうまくいっています。スライド制作を作業ではなく、システムとして扱う。SVGプロンプト設計は、その延長線上にある取り組みだと捉えています。