SEOメディアを継続して量産しようとすると、多くのチームが「本文より先に図版で詰まる」経験をします。手作業のスクリーンショットは、記事が増えるほど破綻します。かといって生成AIに図版を任せると、別の問題が出ます。

この記事では、記事の図版を生成AIに頼らず「決定論的に」自動生成する仕組みを内製した記録を、実際に手を動かした立場から整理します。技術の細部よりも、なぜ生成AIを使わない判断をしたのかと、その設計の考え方に軸を置きます。

筆者（馬込）は、自社のSEOメディアで、記事の図版（表計算ソフトの画面風の図など）を決定論的に量産する仕組みを内製しました。「作れば毎回同じものが、正確に出る」状態をコードで担保する——この判断が、量産を続けるうえで効きました。

なぜ「図版」がメディア量産の隠れたボトルネックになるのか

How-to記事や技術解説では、図版が理解を大きく助けます。文章だけで手順を説明するより、画面のイメージが1枚あるほうが、読者はずっと速く理解できます。

問題は、その図版をどう継続的に用意するかです。1本や2本なら手作業のスクリーンショットで足ります。しかし記事を毎週量産するとなると、話が変わります。毎回スクショを撮り、トリミングし、ブランドの色や余白を揃える——この手作業は、記事が増えるほど重くのしかかり、いずれ量産の速度を決める律速になります。本文はAIの補助で速く書けても、図版がボトルネックとして残るのです。

生成AIに図版を任せると「もっともらしい嘘」になる

では図版も生成AIに描かせればいい、と考えるのが自然です。私も最初はそう考えました。しかし、これは技術記事では破綻します。

理由は、生成AIが数字や数式を「もっともらしい嘘」で埋めるからです。表計算の関数の解説図で、計算結果がAIの創作した値になっていたら、記事全体の信頼が崩れます。読者は「この記事は正確でない」と判断し、二度と戻ってきません。技術記事にとって、図版の中の数値が間違っているのは致命的です。

加えて、生成AIの画像はレイアウトが毎回ぶれ、ブランドの色も揺れます。量産で最も欲しい「毎回同じ品質」と、生成AIの「毎回違う結果」は、根本的に相性が悪い。図版に求めるのは創造性ではなく、正確さと再現性でした。ここを取り違えると、速そうに見えて実は使えない仕組みができあがります。

決定論的に生成する仕組み——HTML/CSSで組んでスクショを撮る

そこで採ったのが、生成AIを使わない決定論的なパイプラインでした。考え方はシンプルです。

  1. 図版の見た目をHTML/CSSで組む（表計算ソフトのグリッドや数式バーを再現し、ブランド色をCSSで固定）
  2. それをヘッドレスのブラウザでスクリーンショットする
  3. 余白を自動でトリミングして整える

コードで言えば、核心はこの一行です。

# 見た目をHTML/CSSで組み、2倍解像度でスクリーンショットを撮る（決定論的）
google-chrome --headless=new --force-device-scale-factor=2 --screenshot=fig.png figure.html

同じHTMLからは、いつ実行してもまったく同じ画像が出ます。生成AIのような揺らぎがありません。ブランド色はCSS変数で固定しているので、全記事で色がぶれることもない。「作るのは1回、同じ結果が何度でも」という状態を、コードで担保しました。この決定論性が、量産の土台になります。

数式は「先に計算してから図に流す」

決定論パイプラインのもう一つの肝が、数値の扱いです。

図版に載る計算結果は、AIに書かせるのではなく、プログラムが実際に計算した値だけを図に流すようにしました。表計算の関数を解説する図なら、その関数の結果をコードで先に計算し、確定した値を図版に埋め込む。こうすれば、図の中の数字が嘘になる余地が構造的にありません。

これは「気をつけて確認する」という運用ではなく、間違いようがない仕組みにするという設計です。人間の注意力に頼ると、量産のどこかで必ず抜けが出ます。捏造の入り込む隙間を、最初から設計で潰しておく——生成AIを図版に使わなかった判断の本質は、ここにありました。

台帳で駆動して、1行足すだけで量産する

決定論パイプラインが本当に効いてくるのは、量産の段階です。図版を1枚ずつ手で組んでいたら、決定論であっても手間は残ります。そこで、図版の作り方を**台帳（どの図を、どのレシピで作るか）**として持たせました。

台帳に1行足すと、パイプラインがその行を読み、決まったレシピ（合計・検索・条件集計といった関数の型ごとのビルダー）に沿って、検証済みの数値・本文の図版・サムネイル・ダウンロード用のファイルまでを一括生成します。記事を1本増やすとき、図版まわりでやることは「台帳に1行」だけ。ここまで来て初めて、図版がボトルネックでなくなりました。

手作業のスクリーンショットが「記事が増えるほど重くなる」のに対し、台帳駆動は「記事が増えても足すのは1行」です。量産のコストが記事数に比例しない——これが、最初に仕組みを組んだことの見返りでした。

内製化の判断として何が良かったか

この仕組みを内製した結果、量産の性質が変わりました。

  • 再現可能：同じ入力から同じ図版が出る。品質が記事ごとにぶれない
  • 正確：数値は計算結果なので、嘘が載らない
  • ブランド統一：色・余白がCSSで固定され、全記事で揃う
  • 低コスト：一度組めば、あとは台帳（どの図をどう作るか）を1行足すだけで量産できる

派生した学びとして、「創造性が要る作業」と「正確さが要る作業」を分けて、後者には生成AIを使わないという線引きは、他の場面でも効くと感じています。文章はAIの補助が効きますが、数字の出る図版は決定論で。この使い分けが、AIを賢く使う勘所でした。生成AIをどこまで開発に入れるかの判断は、GitHubにAI開発支援を組み込んだ記録でも同じ基準（間違っても戻せる作業か）で考えています。なお、この仕組み自体は複数プロダクトを1つのモノレポで運営する構成の上で動いており、一度作った仕組みを他プロダクトへ横展開できるようにしています。

TechMateの開発・内製化支援

私たちTechMateは、こうしたコンテンツ基盤や開発の内製化を、月単位の準委任で伴走しています。設計・実装まで手を動かして並走し、社内に仕組みと判断が残る進め方を前提にしています。内製化や開発体制の相談はこちらからどうぞ。

よくある質問

Q. 図版の自動生成に、なぜ生成AIを使わないのですか？ A. 技術記事の図版に求められるのは、創造性ではなく正確さと再現性だからです。生成AIは数値や数式を創作してしまうため、計算結果が嘘になるリスクがあります。図版の見た目をHTML/CSSで組み、数値はプログラムが計算した実値を流す決定論的な方式なら、毎回同じ・かつ正確な図版が出ます。用途によって使い分けるのが要点です。

Q. この仕組みを作るのは大変ではないですか？ A. 最初に組むコストはかかりますが、一度作れば量産のたびに効いてきます。図版の作り方を台帳（レシピ）として持っておけば、新しい記事は1行足すだけで図版まで揃います。手作業のスクリーンショットを毎回撮り続けるコストと比べると、記事数が増えるほど内製の仕組みが有利になります。

Q. 生成AIはコンテンツ制作でまったく使わないのですか？ A. そうではありません。文章の下書きや構成の補助には有効です。使わないと決めたのは「数値の出る図版」だけで、そこは正確さが命だからです。「創造性が要る作業はAI、正確さが要る作業は決定論」という切り分けで、AIの強みだけを取り出しています。

記事の図版の自動化で効いたのは、最新のAIを使うことではなく、「この作業に創造性は要らない。要るのは正確さと再現性だ」と見極めたことでした。そこを取り違えず、生成AIではなく決定論的な仕組みを選んだことが、量産を止めずに続けられる土台になりました。

コンテンツ基盤や開発の内製化で迷う段階でも構いません。開発・内製化のご相談から、お気軽にお問い合わせください。