出し方は、2パターンあります
構成案ができたら、それで作ってと言えば作ってくれます。 で、その出てき方が2種類あって、どちらでいくかを先に決めます。
| パターン | 中身 |
|---|---|
| 1. そのまま書いてもらう | コードで描かれた、ブラウザで開けるスライドが出てくる |
| 2. 画像として出させる | 画像生成モデルが、1枚ずつ絵として描いたスライドが出てくる |
1は、どのエージェントでもできます。ただ、僕の体感では崩れやすいです。 文字が枠から出ていたり、余白がそろっていなかったり、 絵に見えるところが記号の寄せ集めになっていたり。2の画像として出させるほうは、レイアウトも図も絵として一度に決まるので、 見た目がちゃんとスライドになります。きれいさを求めるなら2です。
画像で出せるかは、道具の組み合わせで決まります
2でいく場合、1つだけ条件があって、画像生成のモデルを持っている道具が、どこかに要ります。手元の道具ごとに並べるとこうなります。
| 使っている道具 | 画像スライドは |
|---|---|
| Codex 単体 | できる。下のプロンプトを使う |
| Claude Code 単体 | できない(画像生成モデルが無い)。パターン1で書いてもらう |
| Claude Code から Codex を呼び出す | できる。下のプロンプトをそのまま使う |
| Claude Code から Gemini Notebook を呼び出す | できる。構成案を渡すだけ(下のプロンプトは使わない) |
両方を契約しているなら、呼び出しの組み合わせが使えます。 Claude Code の中から Codex や Gemini Notebook に生成だけやらせる、という形です。 やり方は「こういう連携はできますか」とAIに聞けば、そこから案内してくれます。
画像で出すときは、この1行を足す
出してもらった構成案で、スライドを生成してください。
$imagegenを使って、画像生成モデルでラスター画像として生成してください。SVG、HTML、CSS、canvasでは代替しないでください。
Codex 単体のときも、Claude Code から Codex を呼び出すときも、このプロンプトは同じです。後ろの一文を消さないでください。書かないと、コードで描く方向へ戻ります。 Gemini Notebook に作らせる場合だけ、この行は要りません。構成案をそのまま渡せば出ます。
デザインプロンプトを渡すと、もう一段上がる
ここまででも見られるものにはなりますが、見た目の指定を渡すと、質がはっきり変わります。色、文字の太さ、レイアウトの型、使わないものまで書いた指示書のことで、 デザインプロンプトと呼ばれています。
世の中にいくらでもあるので探してもいいんですが、 まず感じを掴むために、僕が使っているものを1つ置いておきます。構成案と一緒に、これも渡してください。
デザインプロンプトの例
role_definition: title: "Senior Friendly UX Storytelling Designer" specialization: "Product Story Deck & Pop UX Design Presentation" mission: "UXデザイン・事業理解・ユーザーインタビューの話を、明るいターコイズ背景と白いカード、吹き出し、図解でわかりやすいスライドへ変換する。" tone: "親しみやすい、明るい、学びがある、ポップ、実践的" design_system: philosophy: theme: "Turquoise UX Storyboard" keywords: - "Friendly UX" - "Storytelling Deck" - "Interview Journey" - "Pop Diagram" - "Learning Board" visual_metaphor: "UXデザインの考え方を、教室のホワイトボードやワークショップのボードのように、楽しく整理して見せる。" color_palette: rule: "Turquoise Base + White Card + Navy Text + Lime Highlight" colors: turquoise: hex: "#35C3BD" description: "メイン背景。表紙、章扉、外枠に使用。" light_turquoise: hex: "#DDF7F5" description: "大きなカードや淡い背景に使用。" white: hex: "#FFFFFF" description: "本文カード、図解ボード、吹き出しに使用。" navy: hex: "#073763" description: "タイトル・本文・重要語に使用。" lime: hex: "#A7F20A" description: "下線、丸いポイント、強調に使用。" teal_dark: hex: "#009D98" description: "吹き出し、ボタン風ラベル、濃いアクセントに使用。" visual_style: illustration_type: "Friendly UX Diagram and Storyboard" rendering_rules: - "写真は禁止" - "人物写真は、丸いアバターやシンプルな顔アイコンに置き換える" - "画面キャプチャや資料画像は、ぼかしたワイヤーフレームや抽象UIカードに置き換える" - "実際のワークショップ写真は、付箋ボードのイラストに置き換える" - "背景はターコイズで、薄いドットと太い線のパターンを入れる" - "本文は大きな白い角丸カードの中に置く" - "重要語にはライムの下線を引く" - "吹き出し、丸、矢印、タイムラインで会話や流れを表す" motifs: - "ターコイズ背景" - "薄いドットパターン" - "大きな白い角丸カード" - "ライムの丸ポイント" - "ライムの下線" - "太い白い矢印" - "会話の吹き出し" - "ユーザーインタビューの流れ" - "付箋ボード" - "丸いアバター" - "チェックアイコン" background_texture: "ターコイズ地に、薄いドットと大きな線のパターン。本文エリアは白カードで読みやすくする。" typography: font_family: japanese: "Noto Sans JP Black / ヒラギノ角ゴ W8" english: "Inter Rounded / Helvetica Neue" hierarchy: main_heading: size: "Massive" weight: "Black" usage: "白カード内またはターコイズ背景上に大きく配置する。" card_heading: size: "Large" weight: "Bold" usage: "カードの左上に置く。ライム下線と組み合わせる。" body_text: size: "Medium" weight: "Bold" usage: "読みやすく、少し太めにする。" small_label: size: "Small" weight: "Bold" usage: "章名、年号、ステップ名、吹き出しラベルに使用。" page_number: size: "Small" weight: "Regular" usage: "右下に控えめに配置する。" layout_rules: - "外側はターコイズ背景、内側は大きな白カードにする" - "見出しは太く、大きく、短くする" - "重要語にはライムの下線を使う" - "1枚の中で話の流れが見えるように、矢印やタイムラインを使う" - "説明は図解中心にし、文章を詰め込みすぎない" - "余白はあるが、親しみやすい密度を保つ" slide_templates: - template_name: "Turquoise Story Cover" structure: "Full Turquoise Background + Large White Text" components: - "全面ターコイズ背景" - "薄いドットと大きな線のパターン" - "左上にロゴ風テキスト" - "中央から左に大きな白いタイトル" - "ライムの丸ポイントを1つ配置" - template_name: "Profile / Context Card" structure: "White Card + Avatar + Small Cards" components: - "ターコイズ背景の上に白いカード" - "左に丸いアバター" - "右にプロフィールや概要を小カードで整理" - "写真は使わず、顔アイコンとサービスカードで表す" - template_name: "Journey Flow" structure: "Horizontal Arrow Timeline" components: - "大きな白カード内に横長の白い矢印" - "左に出発点、右にゴールの丸" - "途中にライムの丸ポイントを並べる" - "各ステップを白いピル型ラベルで表示" - "外側はターコイズ背景" - template_name: "Section Divider" structure: "Turquoise Background + Timeline Bubbles" components: - "全面ターコイズ背景" - "白い章タイトルを大きく配置" - "小さな丸い年表や進行バブルを背景に薄く置く" - "現在位置だけ白とライムで強調" - template_name: "Learning Statement" structure: "Centered Typography Card" components: - "大きな白カード" - "中央に太いネイビーのメッセージ" - "重要行にライムの下線" - "左右に細い線を添える" - "装飾は少なく、言葉を強く見せる" - template_name: "Interview / Conversation" structure: "White Board + Avatars + Speech Bubbles" components: - "中央に抽象化したワークフローや資料ボード" - "左右下に人物アバター" - "吹き出しで会話を表す" - "強調吹き出しは濃いティール、通常吹き出しは白" - "写真や実画面は、ぼかした図解として扱う" - template_name: "Tool / Process Explanation" structure: "Three Cards or Before After" components: - "3つのカードで課題・方法・結果を並べる" - "各カードにアイコン、短い見出し、2行説明" - "必要に応じて矢印でつなぐ" - "ライムをポイントだけに使う" - template_name: "Final Message" structure: "Turquoise Message Slide" components: - "全面ターコイズ背景" - "中央に白い大きなメッセージ" - "ライムの丸または下線で一点強調" - "最後に小さなCTAカードやQRコード風要素を配置可能" content_direction: theme_example: "ビジネスについて本気出して考えていたらデザインに辿り着いた話" copy_style: - "数字は、結果でしかない。" - "ユーザーの声は、事業を前に進める材料になる。" - "ギャップを埋めることが、UXデザインの仕事になる。" - "よい問いは、チームの見える景色をそろえる。" - "デザインは、見た目の前に理解から始まる。" output_constraints: forbidden_elements: - "写真" - "実写人物" - "実画面キャプチャのそのまま再現" - "暗い高級感" - "細すぎる文字" - "長文の詰め込み" - "寒色だけで単調にすること" - "ライムの使いすぎ" - "複雑すぎる表" - "ビジネス資料っぽすぎる硬い見た目" final_quality: - "中学生にも流れがわかるくらい明快" - "ワークショップ資料のように親しみやすい" - "UXの学びが一目で伝わる" - "ターコイズ、白、ネイビー、ライムの役割がはっきりしている" - "写真なしでも会話・体験・プロセスが伝わる"
ターコイズのUX資料風の型です。色や雰囲気を変えたいときは、colors と keywords のところを書き換えてください。

出したら、通しで1回だけ見る
全枚そろったら、頭から通しで1回見てください。1枚ずつ見ると、どれもそれなりに見えるので。引っかかった枚があったら、絵ではなく構成案のほうを直して、 その枚だけ出し直す。確認はそれで十分です。
ここまでのまとめ
出てきた絵が思っていたのと違うので、1枚ずつ直していこう。
1枚ずつ直すと、直した枚だけ絵柄が浮きます。ずれているのがデザインの方向なら、デザインプロンプトのほうを1行変えて出し直すほうが速いし、全枚そろいます。1枚だけの手直しは、その1枚に固有の問題があるときだけにしてください。
本文を先に用意して、構成案に分けさせて、画像として出させる。構成案プロンプトとデザインプロンプトは手元に残るので、 次からは本文を差し替えるだけで同じ品質で出てきます。
次は「MCP連携 ── AIに道具をつなぐ」です。 AIにできることの範囲そのものを、自分で広げに行きます。
- 自分の道具で、画像スライドが出せるかどうか言える
- デザインプロンプトを一緒に渡した
- 頭から通しで1回見た