4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Geminiで文字の崩れないインフォグラフィックスを生成するデザインプロンプト術

4
Posted at

資料作成の際、「画像一枚で概要をパッと伝えたい」場面は多いですよね。そんな時に役立つのがインフォグラフィックスです。

最新のAI(Gemini Nano Banana Proなど)を使えば、プロンプト次第で非常に綺麗な画像を生成してくれますが、「あともう少し、イメージに近づけたい……」とモヤモヤした経験はありませんか?

今回は、そんな悩みを解決し、意図通りのデザインを出力するための 「デザイン定義プロンプト」 の活用術をご紹介します。

デザインプロンプトのテンプレートを活用する

「なんとなく」指示を出すのではなく、デザインの構成要素(色、トーン、スタイル、フォントなど)を構造化して伝えるのがコツです。

有志によって公開されている以下のツールを使うと、目的に合わせたデザイン定義を簡単に取得できます。

実践的なプロンプト例

取得したデザイン定義をどのようにプロンプトに組み込むか、2つのパターンを紹介します。

パターン1:内容を指定して1から作成する場合

特定のトピックをプロンプトに記載して、1枚の画像にまとめたい時の基本構成です。

# 命令
以下の情報を、[デザイン定義]のスタイルに従って、1枚のインフォグラフィック画像にしてください。
文字は日本語で、文字は崩れないように、大きくハッキリと描画してください。

# 内容(ここを描いてほしい!)
タイトル: 朝のコーヒーの効果
ポイント:
1. 目覚めスッキリ (Awake)
2. 集中力アップ (Focus)
3. リラックス効果 (Relax)

# デザイン定義(ここがBanana X!)
bg_color: "#F5F5F5"
text_colors:
  primary: "#1A1A1A"
  secondary: "#555555"
accent_color: "#FF6B6B"
tone: "Corporate, Flat, Memphis, Clean, Minimal"
image_style: "Vector illustration, Geometric shapes, Simple icons"
typography: "Sans-serif, Bold, Modern, Easy to read"

image.png

パターン2:チャットの文脈から作成する場合

Geminiとのやり取りで情報を整理した後に、「今話した内容を画像にして」と頼む場合のプロンプトです。
今回は、弊社WebARサービスであるLESSARをDeepResearchした結果を元に、インフォグラフィックス画像を作成しています。

# 命令
今まで話してきた内容で、インフォグラフィックス画像を作成してください。
文字は日本語で、崩れないように、大きくハッキリと描画してください。

# デザイン定義
全体デザイン設定:
  トーン: "情報的, 遊び心, 明快, プロフェッショナル, モダン。"
  ビジュアル・アイデンティティ:
    背景色: "ライトグレー、または薄いグリッド。"
    文字色: "#FF6B6B (Red)"
    アクセントカラー: "#4ECDC4 (Teal)"、"#FFE66D (Yellow)"、"#1A535C (Dark Blue)"
    画像スタイル:
      特徴: "3Dアイソメトリック・ベクターイラストを用いた、データ視覚化へのフォーカス。"
      形状: "等角投影グラフ, 円グラフ, フローチャートのコネクタ。"
      イメージャリ: "微細な人々(マイクロ・ピープル), 浮遊するプラットフォーム, アイコン。"
      構成: "構造化されたフロー, 相互接続された要素, 明確なパス。"
  タイポグラフィ:
    見出し: "丸みを帯びたサンセリフ。"
    スタイル: "明確な階層構造, ラベル。"

image.png

すごい、一発で分かりますね。

運用上の重要な注意点

プロンプトを投げる際、Geminiのモデル選択には注意が必要です。

  • 推奨: 思考モード(Thought) または Proモデル
  • 非推奨: 高速モード

スクリーンショット 2026-02-24 15.45.47.png

高速モードの場合、旧版のモデル(Nano Bananaなど)が使用されることがあり、日本語の文字が崩れたり、意味不明な記号になったりする可能性が高くなります。クオリティを重視する場合は、必ず上位モデルで実行するようにしましょう。

まとめ

インフォグラフィックス生成において、「デザイン定義」を言語化して与えることは、AIへの「指示の解像度」を上げることと同義です。

今回紹介したテンプレートを活用して、ぜひ業務効率化や資料のクオリティ向上に役立ててみてください!

4
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?