こんにちは、まいです！
みなさんはAIで図解を作るとき、「なんだか説明書みたいで硬いデザインになっちゃうな」とか、「キャラクターを置いてみたけれど、ただの飾りになって浮いている気がする……」と悩んだことはありませんか？
今回は、そんなお悩みをすっきり解決する、とってもおしゃれで実用的な図解表現をご紹介します。まるで洗練された科学雑誌や技術専門誌の1ページのような、知的なデザインが作れる方法です。
難しそうな情報も、キャラクターが優しくナビゲートしてくれることで、一気に読みやすくなりますよ。さっそく一緒に見ていきましょう！
今回の図解表現
今回ご紹介する図解表現は、
Editorial Character Guide（エディトリアル・キャラクター・ガイド）
です。
これは、キャラクターを単なる「マスコット」として端っこに置くのではなく、誌面の「ナビゲーター（案内役）」としてデザインに組み込む表現方法です。
この図解はどんな表現？
一般的なキャラクター付きの図解だと、四角い枠の中にキャラクターとセリフの吹き出しが並んでいるような、少し子供向けのレイアウトになりがちですよね。
でも、この Editorial Character Guide は違います。
イメージは、「大人のための洗練された専門誌」です。 すっきりとした白い背景（Pure White Background）に、美しい図形やグラフ、整えられた文字が並び、そこにキャラクターが自然に溶け込んでいます。
キャラクターはただ立っているだけではなく、図解をのぞき込んだり、重要な数値を指し示したりして、読者の視線を「ここを見てね！」とスムーズに誘導してくれるのが特徴です。
この表現ならではのポイント
この図解表現ならではの魅力的なポイントを分析してみました。
- 情報そのものが主役：キャラクターが目立ちすぎるのではなく、伝えたい情報や図解が一番引き立つように設計されています。
- キャラクターと誌面の融合：「後からキャラクターのイラストをペタッと貼った」ような違和感がありません。キャラクターが巨大な文字の横に立ったり、図解の中に入り込んだりして、誌面と一体化しています。
- 知性と親しみやすさの両立：過度な装飾や派手なエフェクトを抑え、引き算のデザインを意識することで、信頼感のあるクリーンな印象を与えられます。
デザインのポイント
私がこのプロンプトを分析して「素敵だな！」と思った、デザイン上のポイントを3つに絞ってご紹介しますね。
1. 「非対称」がつくる心地よいリズム
左右対称のきっちりしたレイアウトも綺麗ですが、この表現ではあえて「非対称（アシメトリー）」な構成や、大胆な余白を取り入れます。これにより、雑誌の特集ページのような動きのある、おしゃれなリズムが生まれます。
2. キャラクターのポーズと視線
キャラクターがどこを見ているかが、実はとても重要です。キャラクターがグラフを見つめていれば、読者の目線も自然とそこに向かいます。ポーズや視線そのものが「視線誘導」の役割を果たしているんですね。
3. 色数を絞ったスマートな配色
背景はクリーンな白。基本は黒やグレーのモノトーンで構成し、アクセントカラーを1〜2色に絞ります。このとき、キャラクターの髪色や服の色をアクセントカラーとして図解にも少し取り入れると、画面全体の統一感がグッとアップしますよ。
こんな内容におすすめ
この図解表現は、少し複雑で、テキストだけだと難しく見えてしまうテーマにぴったりです。
- テクノロジー・ITの仕組み（AIの構造、通信の仕組みなど）
- 科学や自然の解説（宇宙の歴史、天体の比較、動植物の生態など）
- ビジネス・データの比較（市場の成長率、2つのサービスの比較など）
- 手順やステップの解説（プログラミングの手順、デザインの工程など）
キャラクターが一緒に考えてくれているような雰囲気になるので、読者が置いてきぼりになりません。
実際に作ってみよう
この図解を作るための、汎用プロンプトの使い方を説明しますね。
使い方はとってもシンプルです。 お手持ちの画像生成AIに、専用のプロンプトを入力するだけで作ることができます。
プロンプトの中には、以下のような入力欄を用意しています。
- 【情報】のあとに、あなたが図解にしたい解説文やデータを入力します。
- 【キャラクター】の部分で、一緒に配置したいキャラクターの特徴を指定するか、元になるキャラクター画像を添付します。
これだけで、AIが情報を自動的に分析し、タイトルや見出し、図解、そしてキャラクターの最適な配置をゼロから設計してくれますよ。
今回使った汎用プロンプト
# Editorial Character Guide
## 目的
入力された情報を分析し、読者の理解を助ける高品質な
「キャラクター・エディトリアル型の解説図」を生成してください。
専門誌・科学誌・技術誌・ビジネス誌・デザイン誌のような
知的で洗練されたエディトリアルデザインを基本とします。
添付されたキャラクターは「説明の主役」ではなく、
読者と情報をつなぐナビゲーターとして使用してください。
幼稚な教材表現は避け、
専門性・信頼感・清潔感・親しみやすさを両立してください。
# 入力情報
【情報】
(ここに解説したい情報)
【キャラクター】
添付されたキャラクター画像を使用してください。
# 最優先原則
1. 情報の理解を最優先する
2. 情報そのものを視覚的な主役にする
3. キャラクターは理解と視線を案内する
4. 文章より図解で伝える
5. 入力内容に応じて毎回最適な構図を設計する
# 情報設計
入力情報をそのまま文章として配置しないでください。
生成前に内容を分析し、以下へ整理してください。
- 最も伝えるべき結論
- 重要な数値・キーワード
- 視覚化すべき構造や関係
- 比較・変化・因果関係・工程
- 補足として扱う情報
整理した内容を、
タイトル、短い見出し、図解、数値、キーワード、
短い注釈へ再構成してください。
主要な図解だけを見ても、
内容の基本構造が理解できることを重視してください。
# キャラクター設計
## 役割
キャラクターは誌面のナビゲーターです。
内容に応じて以下のような行動を自然に選択してください。
- 重要部分を指し示す
- 図解を見る・観察する
- 数値や比較対象へ視線を向ける
- 対象物へ近づく
- 図版を覗き込む
- 重要ポイントへ読者の視線を誘導する
## 誌面との融合
キャラクターを画面端へ単純に配置しないでください。
必要に応じて、
- 大きな文字の横に立つ
- 巨大な数値のそばに立つ
- 図版と部分的に重なる
- 図解の中へ入り込む
- 対象物とのスケール差を作る
など、誌面と意味のある関係を作ってください。
「後からキャラクターを貼り付けた」ような構成は禁止します。
## 表情・ポーズ
毎回同じ正面立ちや指差しに固定しないでください。
説明、観察、比較、発見、注意、納得など、
情報に適した自然な表情・姿勢・視線を選択してください。
## キャラクターの再現
添付画像の以下の特徴を維持してください。
- 髪型
- 髪色
- 顔立ち
- 服装
- 配色
- アクセサリー
- 全体的な印象
原則として1人だけ使用してください。
# エディトリアルデザイン
## レイアウト
整ったグリッドを基礎としながら、
非対称構成、余白、大小差によって誌面的なリズムを作ってください。
固定テンプレートは禁止します。
入力情報に応じて、
- 左右構成
- 上下構成
- 中央構図
- 比較構成
- 大型図版中心
- 大型数値中心
- タイポグラフィ中心
などから最適な構成を選択してください。
「左にキャラクター＋右に説明」を毎回使用しないでください。
# 情報階層
以下に明確な視覚的優先順位を作ってください。
1. 最重要情報
2. 主要図解
3. タイトル・重要数値・キーワード
4. キャラクター
5. 補足情報・注釈
ただし内容に応じて優先順位は調整してください。
すべての要素を同じ大きさで並べないでください。
大／小
太／細
密／疎
文字／図版
余白／情報
のコントラストを積極的に利用してください。
# 図解表現
入力内容に応じて最適な視覚表現を選択してください。
使用可能な例：
- 模式図
- 比較図
- フロー
- グラフ
- チャート
- 技術イラスト
- 線画
- 抽象図形
- 数値表現
- 因果関係図
- 工程図
重要な図解は小さな補助素材にせず、
必要なら画面の大部分を使ってください。
文章で説明するより、
位置
大きさ
方向
距離
線
形
色
スケール
で表現できるものは視覚化を優先してください。
重要な数値は文章へ埋め込まず、
独立した視覚要素として扱ってください。
# 視線誘導
以下を組み合わせて、
自然な読み順を設計してください。
- キャラクターの視線
- 指先
- 身体の向き
- 図解の方向
- 矢印・接続線
- 文字サイズ
- 配置
- 色
- 余白
基本的な読み順：
タイトル
↓
視覚的主役
↓
重要な関係・仕組み
↓
補足情報
# タイポグラフィ
文字もグラフィック要素として扱ってください。
基本：
現代的で可読性の高い日本語ゴシック体
必要に応じて：
上品な明朝体を限定的に併用
文字サイズには明確な差を作ってください。
- 大：タイトル・重要数値
- 中：キーワード・短い見出し
- 小：注釈・補足
長文は使用せず、
短い見出し、キーワード、数値、簡潔な注釈を中心にしてください。
キャラクターの吹き出しは必要な場合のみ使用し、
短い一言に限定してください。
# 色彩・背景
背景：
Pure White Background
十分な余白を確保してください。
基本色：
- 白
- 黒
- 濃いグレー
- 淡いグレー
アクセントカラー：
1～2色程度
必要に応じてキャラクターの主要色を
図解やタイポグラフィへ反映し、
キャラクターと誌面に統一感を持たせてください。
色は装飾ではなく、
- 強調
- 比較
- 分類
- 状態
- 視線誘導
のために使用してください。
# 編集的な演出
専門誌としての品位を保ちながら、
軽い視覚的な遊びや意外性を取り入れてください。
例：
- 巨大な数値と小さなキャラクター
- 大きな文字の横からキャラクターが覗く
- キャラクターと図版を部分的に重ねる
- 図解世界へキャラクターが少し入り込む
- 大胆な余白と局所的な情報密度
- 図版を通常より大胆なサイズで配置する
装飾のための演出ではなく、
情報理解や視線誘導につながる演出を優先してください。
# 禁止事項
以下は避けてください。
- キャラクター＋長文だけの構成
- キャラクターを画面端へ置いただけの構成
- 固定テンプレート的なレイアウト
- 丸角カードを大量に並べたUI風デザイン
- 漫画のコマ割り
- 過剰な吹き出し
- 派手な集中線
- 重いドロップシャドウ
- 過剰な光沢・発光
- 複雑なグラデーション
- 意味のない3D効果
- 過剰な装飾
- 同じキャラクターの意味のない複製
- 情報よりキャラクターを優先する構成
# 文字ルール
画像内の説明文、見出し、ラベル、吹き出しは日本語にしてください。
ただし以下は適切な原表記を維持してください。
- 固有名詞
- 製品名
- 規格名
- 数式
- コード
- 単位
- 材料記号
- 専門用語
# 出力仕様
アスペクト比：16:9
高解像度。
文字、線、図形、キャラクターをシャープに描画し、
ノイズやぼやけを避けてください。
専門誌、技術メディア、ブログ、教育コンテンツに使用できる
高品質な仕上がりを目指してください。
# 最終イメージ
「キャラクターを置いたインフォグラフィック」
ではありません。
「情報そのものが美しく編集された誌面の中で、
キャラクターがナビゲーターとして自然に機能している」
デザインにしてください。
情報を主役にし、
キャラクターによって理解・視線・親しみやすさを加えてください。このプロンプトは、以下のような考え方で設計されています。
- 情報の理解を最優先にする：文章をそのまま並べるのではなく、重要な数値やキーワード、関係性をAIに整理させ、視覚的な「図」として再構成します。
- テンプレートに当てはめない：入力された情報に合わせて、毎回最適なレイアウト（上下、左右、比較など）をAIが自分で考えて作ります。
- 禁止事項を明確にする：安易な「漫画のコマ割り」や「派手な集中線」、「丸角カードの並べすぎ」などを禁止することで、専門誌としての品位を保ちます。
読者が「自分の情報でも試してみたい！」と思えるような、実用性の高いプロンプトになっています。
まいのポイント
私なら、この図解表現を使うときに「スケール感の対比」を意識してプロンプトを調整してみたいです！
たとえば、画面いっぱいに「85%」という巨大な数値を配置して、その数字の横にちょこんと小さなキャラクターを立たせて、上を見上げるようなポーズにしてみるんです。
こうすると、ただ数字が大きく書いてあるだけよりも、数字のインパクトが引き立ちますし、絵としての面白さや可愛さもプラスされますよね。
情報の大きさとキャラクターの大きさの「対比」を使って、ぜひあなただけの素敵なエディトリアルデザインを作ってみてくださいね。
それでは、また次回の図解表現紹介でお会いしましょう。 ぜひ試してみてくださいね！
# Editorial Character Guide
## 目的
入力された情報を分析し、読者の理解を助ける高品質な
「キャラクター・エディトリアル型の解説図」を生成してください。
専門誌・科学誌・技術誌・ビジネス誌・デザイン誌のような
知的で洗練されたエディトリアルデザインを基本とします。
添付されたキャラクターは「説明の主役」ではなく、
読者と情報をつなぐナビゲーターとして使用してください。
幼稚な教材表現は避け、
専門性・信頼感・清潔感・親しみやすさを両立してください。
# 入力情報
【情報】
ある業務工程を自動化した結果、作業全体の85%をAIと自動処理で完結できるようになりました。
これまで人が行っていた作業のうち、
データの読み込み、分類、定型処理、集計、レポート生成などは自動化できます。
一方で、最終確認、例外への対応、重要な判断など、
残り15%は人による確認や判断が必要です。
重要なポイントは、
「人の仕事がなくなる」のではなく、
人が担当する範囲が100%から15%へ絞られ、
判断が必要な仕事へ集中できるようになることです。
最も強調したい数値：
85%
比較：
自動化できる作業 85%
人が判断する作業 15%
図解では「85%」を非常に大きな視覚要素として扱い、
その巨大さとキャラクターの小ささを対比させることで、
自動化できる範囲の大きさを直感的に伝えてください。
キャラクターは巨大な「85%」の近くに小さく立ち、
数字を見上げたり、その大きさに驚いたりすることで、
数値のスケール感を読者へ伝えるナビゲーターとして使用してください。
【キャラクター】
添付されたキャラクター画像を使用してください。
# 最優先原則
1. 情報の理解を最優先する
2. 情報そのものを視覚的な主役にする
3. キャラクターは理解と視線を案内する
4. 文章より図解で伝える
5. 入力内容に応じて毎回最適な構図を設計する
# 情報設計
入力情報をそのまま文章として配置しないでください。
生成前に内容を分析し、以下へ整理してください。
- 最も伝えるべき結論
- 重要な数値・キーワード
- 視覚化すべき構造や関係
- 比較・変化・因果関係・工程
- 補足として扱う情報
整理した内容を、
タイトル、短い見出し、図解、数値、キーワード、
短い注釈へ再構成してください。
主要な図解だけを見ても、
内容の基本構造が理解できることを重視してください。
# キャラクター設計
## 役割
キャラクターは誌面のナビゲーターです。
内容に応じて以下のような行動を自然に選択してください。
- 重要部分を指し示す
- 図解を見る・観察する
- 数値や比較対象へ視線を向ける
- 対象物へ近づく
- 図版を覗き込む
- 重要ポイントへ読者の視線を誘導する
## 誌面との融合
キャラクターを画面端へ単純に配置しないでください。
必要に応じて、
- 大きな文字の横に立つ
- 巨大な数値のそばに立つ
- 図版と部分的に重なる
- 図解の中へ入り込む
- 対象物とのスケール差を作る
など、誌面と意味のある関係を作ってください。
「後からキャラクターを貼り付けた」ような構成は禁止します。
## 表情・ポーズ
毎回同じ正面立ちや指差しに固定しないでください。
説明、観察、比較、発見、注意、納得など、
情報に適した自然な表情・姿勢・視線を選択してください。
## キャラクターの再現
添付画像の以下の特徴を維持してください。
- 髪型
- 髪色
- 顔立ち
- 服装
- 配色
- アクセサリー
- 全体的な印象
原則として1人だけ使用してください。
# エディトリアルデザイン
## レイアウト
整ったグリッドを基礎としながら、
非対称構成、余白、大小差によって誌面的なリズムを作ってください。
固定テンプレートは禁止します。
入力情報に応じて、
- 左右構成
- 上下構成
- 中央構図
- 比較構成
- 大型図版中心
- 大型数値中心
- タイポグラフィ中心
などから最適な構成を選択してください。
「左にキャラクター＋右に説明」を毎回使用しないでください。
# 情報階層
以下に明確な視覚的優先順位を作ってください。
1. 最重要情報
2. 主要図解
3. タイトル・重要数値・キーワード
4. キャラクター
5. 補足情報・注釈
ただし内容に応じて優先順位は調整してください。
すべての要素を同じ大きさで並べないでください。
大／小
太／細
密／疎
文字／図版
余白／情報
のコントラストを積極的に利用してください。
# 図解表現
入力内容に応じて最適な視覚表現を選択してください。
使用可能な例：
- 模式図
- 比較図
- フロー
- グラフ
- チャート
- 技術イラスト
- 線画
- 抽象図形
- 数値表現
- 因果関係図
- 工程図
重要な図解は小さな補助素材にせず、
必要なら画面の大部分を使ってください。
文章で説明するより、
位置
大きさ
方向
距離
線
形
色
スケール
で表現できるものは視覚化を優先してください。
重要な数値は文章へ埋め込まず、
独立した視覚要素として扱ってください。
# 視線誘導
以下を組み合わせて、
自然な読み順を設計してください。
- キャラクターの視線
- 指先
- 身体の向き
- 図解の方向
- 矢印・接続線
- 文字サイズ
- 配置
- 色
- 余白
基本的な読み順：
タイトル
↓
視覚的主役
↓
重要な関係・仕組み
↓
補足情報
# タイポグラフィ
文字もグラフィック要素として扱ってください。
基本：
現代的で可読性の高い日本語ゴシック体
必要に応じて：
上品な明朝体を限定的に併用
文字サイズには明確な差を作ってください。
- 大：タイトル・重要数値
- 中：キーワード・短い見出し
- 小：注釈・補足
長文は使用せず、
短い見出し、キーワード、数値、簡潔な注釈を中心にしてください。
キャラクターの吹き出しは必要な場合のみ使用し、
短い一言に限定してください。
# 色彩・背景
背景：
Pure White Background
十分な余白を確保してください。
基本色：
- 白
- 黒
- 濃いグレー
- 淡いグレー
アクセントカラー：
1～2色程度
必要に応じてキャラクターの主要色を
図解やタイポグラフィへ反映し、
キャラクターと誌面に統一感を持たせてください。
色は装飾ではなく、
- 強調
- 比較
- 分類
- 状態
- 視線誘導
のために使用してください。
# 編集的な演出
専門誌としての品位を保ちながら、
軽い視覚的な遊びや意外性を取り入れてください。
例：
- 巨大な数値と小さなキャラクター
- 大きな文字の横からキャラクターが覗く
- キャラクターと図版を部分的に重ねる
- 図解世界へキャラクターが少し入り込む
- 大胆な余白と局所的な情報密度
- 図版を通常より大胆なサイズで配置する
装飾のための演出ではなく、
情報理解や視線誘導につながる演出を優先してください。
# 禁止事項
以下は避けてください。
- キャラクター＋長文だけの構成
- キャラクターを画面端へ置いただけの構成
- 固定テンプレート的なレイアウト
- 丸角カードを大量に並べたUI風デザイン
- 漫画のコマ割り
- 過剰な吹き出し
- 派手な集中線
- 重いドロップシャドウ
- 過剰な光沢・発光
- 複雑なグラデーション
- 意味のない3D効果
- 過剰な装飾
- 同じキャラクターの意味のない複製
- 情報よりキャラクターを優先する構成
# 文字ルール
画像内の説明文、見出し、ラベル、吹き出しは日本語にしてください。
ただし以下は適切な原表記を維持してください。
- 固有名詞
- 製品名
- 規格名
- 数式
- コード
- 単位
- 材料記号
- 専門用語
# 出力仕様
アスペクト比：16:9
高解像度。
文字、線、図形、キャラクターをシャープに描画し、
ノイズやぼやけを避けてください。
専門誌、技術メディア、ブログ、教育コンテンツに使用できる
高品質な仕上がりを目指してください。
# 最終イメージ
「キャラクターを置いたインフォグラフィック」
ではありません。
「情報そのものが美しく編集された誌面の中で、
キャラクターがナビゲーターとして自然に機能している」
デザインにしてください。
情報を主役にし、
キャラクターによって理解・視線・親しみやすさを加えてください。