記事に高品質な図解をAIで自動挿入する方法｜見出しを選ぶだけ

2026.08.08AI活用術

図解が入った記事は、文章だけの記事より内容が伝わりやすくなります。分かってはいても、1枚ずつ図解を作る手間を考えると、つい文章だけで公開してしまうのではないでしょうか。

ですが、図解づくりはAIで自動化できます。具体的には、図解したい見出しを選ぶだけで、高品質な図解が記事へ自動で入る仕組みを作れます。

この記事では、はたらクラフトで実際に使っている仕組みをもとに、次の内容を解説します。

見出しを選ぶだけで図解が入る仕組み
情報過多の図解を防ぎ、品質を安定させる2つの指定
図解する見出しの選び方と、作業を速くする工夫
自分の環境に同じ仕組みを作るための依頼文

動画で見たい方はこちら。

見出しを選ぶだけで図解が入る仕組み

見出しを選ぶだけで図解が自動挿入される3段階の流れ

はたらクラフトでは、図解づくりの手順をエージェントスキル（特定作業の手順書・資料・プログラムをまとめたフォルダ）にしています。この記事では「図解スキル」と呼びます。

この記事に入っている図解も、すべて図解スキルで自動生成したものです。

図解生成に使うのは、OpenAIの最新画像生成モデルであるGPT Image 2です。

図解の対象は、以下のようなMarkdownで書いた記事ファイルです。

Markdownで書いた記事ファイルのスクリーンショット

記事内の図解したい見出しを選んでAIへ伝えると、次の流れで図解スキルが実行されます。

プログラムが指定した見出しの章を抜き出し、AIへ渡す図解作成の指示文を組み立てる
AIが、指示文をもとに図解へ載せる要点を絞り込む
GPT Image 2が図解を生成する
プログラムが、できた図解を見出しの直後へ挿入する

このうち、本文の抜き出しや画像の挿入のような機械的な作業はプログラムの担当です。判断が必要な「要点の絞り込み」だけをAIに任せることで、速さと正確さを両立しています。

図解の生成にはCodexを使っており、1記事分の生成から挿入までは10分ほどで終わります。

※CodexはChatGPTのPlusプラン（月3,000円）で使え、画像生成に追加料金はかかりません。

文章をそのまま渡すと、情報過多で読みづらい図解になる

この仕組みは、最初から上手く動いたわけではありません。当初は、図解したい章の文章をそのままGPT Image 2へ渡していました。

すると、AIは文章の内容を全部図解へ入れようとします。要素が増え、1つ1つの文字は小さくなり、次のような図解ができあがります。

情報過多で文字が小さく読みづらい図解の失敗例

※当時の失敗を再現した図解です。

特にスマホで見ると、情報が細かすぎて理解しづらくなります。読者の理解を助けるはずの図解として、これでは逆効果です。

高品質な図解に仕上げる2つの指定

図解の品質を安定させるために、AIへの指示へ次の2つの指定を入れています。

文字の高さは「画像の高さの5%以上」を指定する

文字を5%以上にし情報量を絞る読みやすさの基準

情報過多への対策が、文字サイズの下限指定です。図解内のすべての文字について、高さを画像の高さの5%以上にするよう指定しています。

下限があると、収まらない情報は削るしかありません。その結果、AIが要点を絞り込み、スマホでも見やすい図解になります。

あわせて、図解へ入れる情報量の上限も決めています。

中心となる主張は1つ
構成要素は2〜3個
画像内のテキストは最大8件

文字サイズの下限と情報量の上限をセットで指定すると、どの章を図解しても情報の密度が安定します。

キャラクターシートで登場キャラクターを固定する

もう1つの指定が、キャラクターの固定です。何も指定しないと、生成のたびにキャラクターの見た目が変わり、記事全体の統一感がなくなります。

そこで、キャラクターのデザインを1枚にまとめた「キャラクターシート」を用意し、図解を生成するたびにAIへの入力画像として使っています。はたらクラフトで使っているのは、人物用とAI用の2枚です。

人物キャラクターのキャラクターシート

AIキャラクターのキャラクターシート

キャラクターシート自体もAIで作れます。手順は次の2ステップです。

ChatGPTで、元になるキャラクター画像を生成する
生成した画像を渡して「キャラクターシートを作成して」と依頼する

図解する見出しは自動判定せず、自分で選ぶ

人が図解する見出しを選び、その後をAIとプログラムへ任せる流れ

どの見出しを図解するかは、AIに判定させず自分で選んでいます。

当初は、図解に向く見出しをAIが自動で選ぶ形も検討しました。しかし、図解対象の見出しを判定する条件の調整に手間がかかり、自分で選ぶ方が速いという結論になりました。

手間の原因は、図解すべきかどうかの判定基準を一律に決められないことです。

見出しの中の文章の長さは、章によってバラバラ
章の中に、すでに画像が入っていることもある

こうした事情は記事ごとに違うため、機械的なルールでは決めきれません。図解する見出しは自分の目で選び、そのあとの作業をAIとプログラムに任せる方が、結局速く確実です。

見出しのコピーはChrome拡張に任せる

見出しを自分で選ぶ場合、記事から見出しを1つずつコピーして指示に貼り付ける作業が発生します。数が多いと、これが地味に面倒です。

そこで、Markdownを貼り付けると見出しだけを自動でコピーするChrome拡張機能（Chromeブラウザで動くプログラム）を自作しました。

Markdownを貼り付けて見出しだけを自動コピーするChrome拡張の画面

使い方は、記事のMarkdown全文を貼り付けるだけ。##と###の見出しだけがクリップボードへコピーされるので、AIへの指示にそのまま貼り付けられます。

この拡張も、以下の指示でAIに作らせました。

マークダウンを貼り付けるとH2、H3見出しのみがクリップボードにコピーされるChrome拡張を作成して

自分の環境に図解スキルを作る依頼文

ここまでのノウハウをまとめた依頼文を用意しました。Codexに指示すれば、はたらクラフトで使っている図解スキルと同じようなものが作れます。

記事のMarkdownファイルへ図解画像を自動挿入するスキルを作成したい。スキルは洗練された必要最低限の内容にして。

- 私が指定したH2・H3見出しの章だけを図解する
- 章の本文の抽出と、生成した画像の見出し直後への挿入はプログラムに任せる
- 図解は中心主張1つ・構成要素2〜3個・画像内テキスト最大8件に要点を絞る
- 図解内の文字の高さは画像の高さの5%以上にし、収まらない場合はさらに要点を絞る
- 使う色・描画様式・キャラクターシートはスタイル資料としてスキルに含め、毎回従わせる

スタイル資料を具体的にどうするかは、スキルを作る過程でAIが質問してきます。