ChatGPT o3で「画像4枚で説明するやつ」を作ってみた。なかなかいいじゃん?

  • 2025年4月23日
  • Gizmodo Japan

ChatGPT o3で「画像4枚で説明するやつ」を作ってみた。なかなかいいじゃん?
Image: かみやまたくみ Generated with o3 (ChatGPT)

2025年4月中旬にアップデートがあって大きく強化されたChatGPT。

画像生成の性能も上がっており、以前はうまく生成できなかった「デザインスライド(プレゼン資料用の1枚画像)」が作れるようになっていました。ビジュアル要素(図形・アイコンなど)とテキスト要素(見出し・本文)をバランス良く配置する能力がありますね。

実際にいろいろと作っての結論は以下4つで、「日本語」がクオリティに影響するのが困りものでした。

1. デザイン力は確かで、実際に綺麗なスライド画像が作れます。

2. 漢字が変になるのがだいぶもったいない。漢字をなるべく排除(ひらがな・カナがほとんどに)できるなら、使いどころは広がりそう。

3. 「英語のみ」でOKならめちゃくちゃ綺麗に生成できます。

4. 「入れる内容をいかにシンプルにできるか」が最大のポイント。

以下、作例3つと、生成のポイントと手順、実際に用いたプロンプトを紹介します。

デザイン自体は本当にうまい

まずは仕上がりから見ていきましょう。作例はすべて上位モデル「o3」を用いて作成しています。

ちなみに、いちばん綺麗なのは作例3ですが、話の都合上、最後に回しております。

※当該カ所で注記しておりますが、画像内のテキストには不正確なものがございます。o3のデザイン能力を主として見ていただければ幸いです。

作例1:日本語・複雑め

最初の作例は、テーマが「OpenAIの新モデル o3・o4-mini はどうちがうのか?」。以下のような4枚構成です。

1. 全体像

2. o3の要点

3. o4-miniの要点

4. 使い分けのポイント

SFっぽい配色、右側になんかそれっぽいアイコンを配置する…等々、すべてo3のアイデアです。なかなか見やすくまとまっていると思いました。

右下のOpenAIロゴは描写も精緻で、ホンモノっぽい。

※コストは1/4ではなく、約1/9ほどです(画像内テキストの誤り)

ただ、細かいところを見ると、いろいろツメが甘い。

エメラルドグリーンが強調色として用いられていますが、一貫したルールで強調されていません。画像ごとに色味も微妙に異なります。

いちばん気になるのは漢字が変なこと。上掲の例だと短縮の縮が変ですね。全体像の像、連携の連など、画数が多いと怪しくなる傾向にあります。

フォント以外の部分は詰められそうでしたが、ChatGPT上でそれをやり始めるとむしろ大変。パワポで自作したほうが速い気が。

ほかにも脱字(1枚目は連携の携が切れています)があったり、プロンプトに従い切れていない部分があったりします(下部は@Source OpenAIって入れたかったんですが、SourceとOpenAIが離れていたりします)。

作例2:日本語・シンプル

もう1例、日本語での作ったデザインスライドをご紹介します。

こちらの例は複雑な要素を文字に限定してみた(減らした)ものです。テーマは「自転車が効率がいい乗り物だと言われる理由」で、3枚構成です。

内容的に複雑なデザイン要素が不要だと、かなりかんたんに統一感まで出せます。特に細かいこと言ってませんが、3枚この感じで出てきました。

漢字が変な以外はほぼ希望通りに生成されました。構想時点で「内容をどう絞るか」は大事そうです。そういうのが得意な人ほど生かしやすそうです。

例3:英語・テキスト主体

最後は英語での作例です。ぱっと見で感じると思いますが、日本語のときとは精度が段違い、すごく綺麗に作れます。

テーマは「30秒でわかるTransformer(今の生成AIの基本的な仕組み)」というかなり小難しいもので、7枚構成のうち5枚を掲載しています。

欧文フォントだと何の違和感もありません。くっきりしていて、とても読みやすい。

アイコンはバリエーション豊富なうえに、どれも綺麗に描写され、配置も的確。

文字の中央そろえ・左そろえも完璧です。

綺麗に生成するコツとして「日本語をやめること」があるのは明確です。めちゃくちゃいい能力をもらってますが、日本人的にはもうちょっとがんばってくれたら感が正直あります。

とはいえ、大学や社内の専門的なプレゼンテーション資料なんかだと使いどころがあるかもしれません。

作り方はこんな感じ

まず、こういった画像をChatGPTで作るときのポイントをまとめておきます。

1. モデルはo3推奨(高性能だが有料で、月額20ドルのPlusプランだと回数制限あり)。o4‑mini(軽量・無料枠で利用可)でもある程度いけましたが、要素を増やすほどプロンプトがシビアになります。完成させやすいのはo3です。

2. 掲載する要素(テキストや図表、アイコン)はできるかぎり絞る。それらを絞れるテーマや切り口選びはクオリティに影響します。

3. デザインコンセプトを決め、画像生成用のプロンプトを生成させる。

4. テスト生成をしてチェック&プロンプトを調整、はやったほうがいいです。

Plusプランの方がo3で試される際は、利用回数の上限(50回)にご注意ください。会話のキャッチボールがけっこう要るケースもあり、貴重なo3枠を溶かしてしまう可能性があります。最初はo4‑miniで試すのが無難かと思います。

具体的な手順

大まかに記載したい内容を準備。今回はo3に生成させました。

その後、内容を何分割するかを決定します。自分はo3に相談して決めました。

どういうデザインにするかを考えてもらいます。適当に投げたら、ガチでデザインし始めて、なかなかビビりました。

デザインが決まったら、生成用のプロンプトを仮で書いてもらいます。

この例だとコードみたいな形式で出てきていますが、必ずしもそうではなく、日本語でわかりやすくまとめられているケースもありました。案件ごとにブレがありますね。

別の会話を立てて画像をテスト生成します(プロンプトを生成したスレッドでそのまま生成すると、その後がやりにくくなるので個人的には避けたほうがいいと思いました)。

その後、できた画像をチェック、改善点がないか探ります。o3にも見てもらうのもいいでしょう。テスト生成して微調整は1回はやるものだと思ったほうがいいです(だいたい満足できない)。

今回は日本語部分の修正が多く、o3でもうまく反映できなかったため、Canvas機能を用いて自分で修正しました。この辺りもうまくやれてくれると嬉しかった

出てきた改善点をプロンプトに反映、最終版のプロンプトを生成してもらいます。

順次生成。手順はこんな具合です。

作例1に関してはテーマ的に比較グラフなどの複雑な要素を載せる必要があってo3でも苦しそうな印象でしたが、作例2・作例3はかなりさくっと完成しています。入れる要素はなるべくシンプルに、いかに必要最低限にするかが非常に大きなポイントになっていると言えます。

実際に生成に用いたプロンプト

1つの引用ブロックに、複数のプロンプトをまとめております。また、原文には絵文字が入っていましたが、掲載の都合上削除しております。

例1

この例だけ使い方が特殊で、「共通プリセット」を各画像の生成プロンプトの前に入れる形になっています。

\########################################

### 共通プリセット(4 枚すべてに先頭で記述)

Generate a 16:9 tech‑clean slide.\

Base color: #101013 (nearly black) background.\

Accent color:#00E0A8 (emerald) for keywords, numbers, simple stroke icons.\

Neutral color:#F4F4F5 for body text.\

Font: Inter Bold 24 pt (headlines) / Inter Regular 16 pt (body); Japanese fallback Noto Sans JP.\

Layout grid: 12 % header | 72 % body (2‑column: left text, right graphic) | 16 % footer.\

HEADER rule: body text is white; *keywords only* use accent color.\

Bullets autowrap at ≈26 JP chars per line.\

Graphics: lucide‑style icons & charts, 2 px stroke; rounded‑corner card (r=16 px) with soft shadow (0 4 12 rgba(0,0,0,0.25)).\

Place “@Source” **and** white OpenAI logo (70 % opacity) in lower‑right of *every* slide.\

No gradients, no extra colors. ########################################

\########## ① OVERVIEW — 全体像 ########## HEADER\_TEXT: 「o3とo4‑mini — 全体像」 LEFT\_TEXT: • 最大 **200k tokens** のロングコンテキスト\

• マルチモーダル / ツール連携\

• 回答品質とコストが異なる RIGHT\_GRAPHIC: two vertical bars inside a rounded frame;\

left bar labeled 推論力, right bar labeled コスト (shorter)。\

Accent‑highlight “200k”.

\########## ② QUALITY FIRST — o3 ########## HEADER\_TEXT: 「品質重視 — o3」 LEFT\_TEXT: • 難問が解ける性能\

• 重大エラー率 **‑20%**\

• ツール連鎖で深い分析

RIGHT\_GRAPHIC: brain‑plus‑gear icon + upward arrow chart, 2 px stroke。\

Accent‑highlight “‑20%”.

\########## ③ SPEED & SCALE — o4‑mini ########## HEADER\_TEXT: 「k高速大量処理 — o4‑mini」 LEFT\_TEXT: • レイテンシ短縮\

•コスト 1/4\

• 大量処理向き\*\* RIGHT\_GRAPHIC: stacked‑server icon + stopwatch + lightning bolt, 2 px stroke。\*\*\

Accent‑highlight “1/4”.

\########## ④ DECISION & PRICING — まとめ ########## HEADER\_TEXT: 「どちらを使う?」 LEFT\_TEXT: • 品質重視 → **o3**\

• 速度 / 費用重視 → **o4‑mini**

RIGHT\_GRAPHIC:

– two horizontal price bars (log scale) inside subtle frame\

• o3 \$10 / \$40\

• o4‑mini \$1.1 / \$4.4\

– simple decision arrow from text block to bars FOOTNOTE: 「強みを使い分けたい!」

例2

A clean, flat-design infographic card (1080×1080px, 1:1) with 20px padding, background#F5F5F5.

Top small header text: "自転車が効率がいい乗り物だと言われる理由" in Noto Sans JP Bold, 14pt, color#388E3C.

Left-top icon: green line icon of a foot and bicycle tire, size ~48px.

Main heading: "1. 動力源/車体特性" in Noto Sans JP Bold, 28pt, color#4CAF50, next to the icon.

Below, two bullet points in Noto Sans JP Regular, 18pt, color #333333:

- 人の筋力を直接運動に

- 高い運動効率(約90%)

- 軽量で転がり抵抗小

Bottom-right: subtle semi‑transparent bicycle silhouette.

Use a harmonious green palette (#4CAF50,#81C784,#388E3C), flat icons, minimalist style.

A clean, flat-design infographic card (1080×1080px, 1:1) with 20px padding, background #F5F5F5.

Top small header text: "自転車が効率がいい乗り物だと言われる理由" in Noto Sans JP Bold, 14pt, color#388E3C.

Left-top icon: green line icon of a road meter and wrench, size ~48px.

Main heading: "2. エネルギー利用/製造・維持管理" in Noto Sans JP Bold, 28pt, color#4CAF50.

Below, three bullet points in Noto Sans JP Regular, 18pt, color #333333:

- 少ない力で遠くまで移動

- 製造にかかるエネルギー低

- 短時間でのメンテナンス可能

Bottom-right: subtle semi‑transparent bicycle silhouette.

Use consistent green palette (#4CAF50,#81C784,#388E3C), flat icons, minimalist layout.

A clean, flat-design infographic card (1080×1080px, 1:1) with 20px padding, background#F5F5F5.

Top small header text: "自転車が効率がいい乗り物だと言われる理由" in Noto Sans JP Bold, 14pt, color#388E3C.

Left-top icon: green line icon of a leaf and Earth globe, size ~48px.

Main heading: "3. 環境への影響" in Noto Sans JP Bold, 28pt, color#4CAF50.

Below, two bullet points in Noto Sans JP Regular, 18pt, color#333333:

- 無燃料でCO₂排出ゼロ

- 地球にやさしいエコ移動

Bottom-right: subtle semi‑transparent bicycle silhouette.

Maintain the same green color scheme (#4CAF50,#81C784,#388E3C), flat-design icons, and minimalist aesthetic.

例3

/Prompt

タイトル: 「Transformer in 30 Seconds」

キャンバス: 正方形 1024×1024px・白背景・余白24px

配色: メイン #0E2A45・アクセント#FF6A3D・サブ#3DBBFF(フラット・高コントラスト)

フォント: サンセリフ・太字は見出しのみ

レイアウト:

1. 上部センターにタイトル(36‑40 pt)

2. [アイコン+本文]を 5 行で左右に整列

3. 各アイコンは単色ラインアイコン(64 px)・左余白12 px

4. 本文は 24 pt/最大2行・要約は15語以内

視覚階層:

・タイトル > アイコン > テキスト

・行間18 pxで可読性を確保

スタイル: ミニマル・余白を広く取り、情報量を絞る

出力: PNG, 高解像度、アンチエイリアス

内容:

: Replaces recurrence with self‑attention

: Parallel processing on GPUs

: Captures long‑range context instantly

: Scales to billions of parameters

: Backbone of modern LLMs

/End

/Prompt

タイトル: 「Why the Transformer Was Needed」

キャンバス: 正方形 1024×1024px・白背景・余白24px

配色: メイン #0E2A45・アクセント#FF6A3D・サブ#3DBBFF(フラット・高コントラスト)

フォント: サンセリフ・太字は見出しのみ

レイアウト:

1. 上部センターにタイトル(36‑40 pt)

2. [アイコン+本文]を 4 行で左右に整列

3. 各アイコンは単色ラインアイコン(64 px)・左余白12 px

4. 本文は 24 pt/最大2行・要約は15語以内

視覚階層:

・タイトル > アイコン > テキスト

・行間18 pxで可読性を確保

スタイル: ミニマル・余白を広く取り、情報量を絞る

出力: PNG, 高解像度、アンチエイリアス

内容:

: RNNs were sequential and slow

: 1‑D CNNs had limited receptive fields

: Self‑attention gives global context instantly

: Parallel matrix ops accelerate training

/End

以下のPromptに5. Popular Transformer flavoursのテキストを入れ、完成させてください:

/Prompt

タイトル: 「{見出し}」

キャンバス: 正方形 1024×1024px・白背景・余白24px

配色: メイン #0E2A45・アクセント#FF6A3D・サブ#3DBBFF(フラット・高コントラスト)

フォント: サンセリフ・太字は見出しのみ

レイアウト:

1. 上部センターにタイトル(36‑40 pt)

2. [アイコン+本文]を {行数} 行で左右に整列

3. 各アイコンは単色ラインアイコン(64 px)・左余白12 px

4. 本文は 24 pt/最大2行・要約は15語以内

視覚階層:

・タイトル > アイコン > テキスト

・行間18 pxで可読性を確保

スタイル: ミニマル・余白を広く取り、情報量を絞る

出力: PNG, 高解像度、アンチエイリアス

内容:

{行1アイコン}: {行1テキスト}

{行2アイコン}: {行2テキスト}

{行3アイコン}: {行3テキスト}

...

/End

以下のPromptに7. Impact since 2017のテキストを入れ、完成させてください:

/Prompt

タイトル: 「{見出し}」

キャンバス: 正方形 1024×1024px・白背景・余白24px

配色: メイン #0E2A45・アクセント#FF6A3D・サブ#3DBBFF(フラット・高コントラスト)

フォント: サンセリフ・太字は見出しのみ

レイアウト:

1. 上部センターにタイトル(36‑40 pt)

2. [アイコン+本文]を {行数} 行で左右に整列

3. 各アイコンは単色ラインアイコン(64 px)・左余白12 px

4. 本文は 24 pt/最大2行・要約は15語以内

視覚階層:

・タイトル > アイコン > テキスト

・行間18 pxで可読性を確保

スタイル: ミニマル・余白を広く取り、情報量を絞る

出力: PNG, 高解像度、アンチエイリアス

内容:

{行1アイコン}: {行1テキスト}

{行2アイコン}: {行2テキスト}

{行3アイコン}: {行3テキスト}

...

/End

以下のPromptに8. One‑sentence takeawayのテキストを入れ、完成させてください:

/Prompt

タイトル: 「{見出し}」

キャンバス: 正方形 1024×1024px・白背景・余白24px

配色: メイン #0E2A45・アクセント#FF6A3D・サブ#3DBBFF(フラット・高コントラスト)

フォント: サンセリフ・太字は見出しのみ

レイアウト:

1. 上部センターにタイトル(36‑40 pt)

2. [アイコン+本文]を {行数} 行で左右に整列

3. 各アイコンは単色ラインアイコン(64 px)・左余白12 px

4. 本文は 24 pt/最大2行・要約は15語以内

視覚階層:

・タイトル > アイコン > テキスト

・行間18 pxで可読性を確保

スタイル: ミニマル・余白を広く取り、情報量を絞る

出力: PNG, 高解像度、アンチエイリアス

内容:

{行1アイコン}: {行1テキスト}

{行2アイコン}: {行2テキスト}

{行3アイコン}: {行3テキスト}

...

/End

Source: OpenAI

キーワードからさがす

gooIDで新規登録・ログイン

ログインして問題を解くと自然保護ポイントが
たまって環境に貢献できます。

掲載情報の著作権は提供元企業等に帰属します。
copyright 2025 (C) mediagene, Inc. All Rights Reserved.