1. 現場のAI・業務改善ラジオ
  2. 記事に高品質な図解をAIで自動..
記事に高品質な図解をAIで自動挿入する方法|見出しを選ぶだけ
2026-08-12 07:23

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

【目次】

オープニング

見出しを選ぶだけ

情報過多で逆効果

文字サイズの下限

見た目の統一感

見出しは自分で選ぶ

コピーも自動化

あなたの環境にも

まとめ


エージェントスキルの解説回

https://open.spotify.com/episode/2J2TC9jjsU9TUNtpzvTKUF


今回の内容の解説記事

https://hataracraft.com/articles/ai-article-diagram-automation


お仕事のご依頼はこちら

⁠https://hataracraft.com/booking

感想

まだ感想はありません。最初の1件を書きましょう!

00:00
こんにちは。現場のAI・業務改善ラジオの大地です。 今日は、見出しを選ぶだけで高品質な図解が記事に自動で入るというテーマでお話しします。
僕は自分のサイトで、AIや業務改善についての記事を書いています。 記事には、見出しごとに内容を図解した画像を入れています。
図解入りの記事は読みやすいと分かっていても、作る手間を考えて、文章だけで公開してしまいがちです。
ですが、AIを使えば、図解したい見出しを選ぶだけで、1期自分の図解を生成から挿入まで10分ほどでやってくれます。
今日は、見出しを選ぶだけで図解が入る仕組みから、品質を安定させる工夫、そしてあなたの環境に同じ仕組みを作る方法まで順番にお話しします。
僕の図解作りは、記事の中で図解したい見出しを選んでAIへ伝えるだけで終わります。 後の作業はプログラムとAIが分担して進めます。
記事の図解挿入手順は、Agent Skillsという形でまとめています。
Agent Skillsとは、特定の作業の手順書、資料、プログラムをひとまとめにしたフォルダのことです。
Agent Skillsの解説会は概要欄に貼っておくので、興味があれば見てみてください。
これ以降は、この仕組みを図解スキルと呼びます。
図解の生成には、OpenAIの最新の画像生成モデルであるGPT Image2を使います。
図解の対象になるのは、見出しの前にシャープの記号を付けて書くマークダウン形式の記事ファイルです。
見出しを指定すると、次の4段階で図解スキルが動きます。
まず、プログラムが指定した見出しの章を抜き出し、AIへ渡す指示文を組み立てます。
次に、AIが指示文をもとに図解へ載せる要点を絞り込みます。
そして、GPT Image2が図解を生成し、最後にプログラムができた図解を見出しの直後へ挿入します。
このうち、文章の抜き出しや画像の挿入といった機械的な作業はプログラムの担当です。
判断が必要な要点の絞り込みだけをAIに任せることで、速さと正確さを両立しています。
この図解スキルを動かしているのはCodeXというAIです。
CodeXはChatGPTのプラスプラン、月3000円で使えて、画像生成に追加料金はかかりません。
図解スキルは最初からうまく動いていたわけではありません。
最初にできた図解は、読者の理解を助けるどころか逆効果でした。
AIに図解を作らせるときに、まず試すのは、図解する文章をそのままAIへ渡し、以下の文章を図解してのように指示することです。
僕も最初はそうしていました。
これをやると、AIは文章の内容を全部図解へ入れようとします。
要素が増えるほど、一つ一つの文字が小さくなり、特にスマホの画面では情報が細かすぎて読み取れません。
この情報型は、文字サイズの加減を決める指定で解消しました。
図解の中の文字は、すべて高さを画像全体の高さの5%以上にするよう指定しています。
加減を決めると、収まらない情報は削るしかありません。
その結果、AIは要点を絞り込むようになり、スマホの画面でも見やすい図解になりました。
03:00
合わせて、図解に入れる情報量の上限も決めています。
中心となる主語は1つ、構成要素は2、3個、画像の中に入れるテキストは最大8件までです。
文字サイズの加減と情報量の上限をセットで指定することで、どの章を図解しても情報の密度が安定します。
ややすさはこれで安定しました。
もう一つ、見た目の統一感を保つための指定があります。
何も指定しないと、図解を生成するたびにキャラクターの見た目が変わってしまい、記事全体としての統一感がなくなります。
そこで、キャラクターのデザインを1枚にまとめたキャラクターシートを用意し、
場合を生成するたびにAIへの入力画像として使っています。
僕の授業で使っているのは、人物キャラクター用とAIキャラクター用の2枚です。
このキャラクターシート自体もAIで作れます。
手順は2ステップで、まずChatGPTで元になるキャラクターの画像を生成し、
その画像をまたChatGPTに渡して、キャラクターシートを作成してと依頼するだけです。
ここまでは、できるだけプログラムやAIに任せて自動化してきましたが、
記事のどの見出しを図解するかは、あえてAIに任せていません。
当初は、図解に向く見出しをAIが自動で選ぶ形も検討しました。
ですが、図解すべきかどうかを判定する条件の調整に手間がかかり、
自分で選ぶ方が早いという結論になりました。
手間がかかる理由は、判断基準を一律に決められないことです。
見出しの中の文章の長さは章によってバラバラですし、
章の中にすでに画像が入っていることもあります。
こうした事情は記事ごとに違うため、機械的なルールで決めきれません。
図解する見出しは自分の目で選び、その後の作業をAIとプログラムに任せる方が、
結局は早くて確実でした。
自分で選ぶと、今度は見出しをコピーする手間が出てきます。
これも自動化しました。
ここから見出しを一つずつコピーして、AIへの指示に貼り付けるのは面倒です。
そこで、マークダウンの記事を貼り付けると、
見出しだけを自動でコピーするChrome拡張を自作しました。
Chrome拡張とは、Chromeブラウザに追加して使う小さなプログラムのことです。
使い方は、記事のマークダウン全文を貼り付けるだけです。
タープが2個の見出しと3個の見出しは、それぞれH2・H3と呼ばれます。
この拡張を使うと、この2種類の見出しだけがクリップボードへコピーされるので、
AIへの指示にそのまま貼り付けられます。
この拡張も、AIへの一文の指示で作らせました。
マークダウンを貼り付けると、
H2・H3見出しのみがクリップボードにコピーされるChrome拡張を作成して、という指示です。
最後に、この仕組みをあなたの環境に作る方法を紹介します。
ここまでのノウハウをまとめた依頼文を用意しました。
先ほど紹介したAI CodeXにこの依頼文で指示すれば、
僕の授業で使っている図解スキルと同じようなものが作れます。
依頼文に入れているのは、指定した見出しの章だけを図解すること。
章の抜き出しと画像の挿入はプログラムに任せること。
会話要点を絞り、文字の高さを画像の高さの5%以上にすること。
そして、色や描画のスタイル、キャラクターシートといった
06:00
スタイル資料をスキルに含めて、毎回従わせることです。
スタイル資料を具体的にどうするかは、
スキルを作る過程でAIのほうから質問してきます。
音声で伝えるのは難しいので、
コピーして使える依頼文を概要欄の記事に貼ってあります。
内容をまとめます。
図解スキルを使えば、見出しを選ぶだけで
高品質な図解が記事へ自動で入ります。
文章の抜き出しや画像の挿入のような機械的な作業はプログラムが、
要点の絞り込みはAIが担当する仕組みです。
図解した一章の文章をAIにそのまま渡すと、
情報型で読みづらい図解になります。
文字の高さを画像の高さの5%以上にすると、
AIが要点を絞り込み、スマホでも見やすい図解になります。
キャラクターシートを毎回の入力画像に使うと、
図解のキャラクターが固定され、記事全体に統一感が出ます。
図解する見出しは判断基準を一律に決めづらいので、
AIに任せず自分で選んでいます。
見出しをコピーするような機械的な作業は、
AIに自分の指示で作らせたChrome拡張が自動でやってくれます。
組みをまとめた依頼文をAI送れば、
あなたの環境にも同じ図解スキルが作れます。
まずは概要欄の記事の依頼文をAI送って、
自分専用の図解スキルを作ってみてください。
次の記事から見出しを選ぶだけで、
図解入りの記事を公開できるようになります。
質問やご意見、取り上げてほしいテーマがあれば、
ぜひコメントをお願いします。
それでは今日はこの辺で。
07:23

コメント

スクロール