既存の記事に図解を後から足すと決めた理由

きっかけは、サイト全体の改善指示書に「コラム図解ルール」と「図解は装飾でなく理解補助」の章が入ったことです。新しく書く記事だけでなく、公開済みの86本にも図を入れることにしました。

新しく書く記事なら、書きながら「ここは図にしよう」と決められます。既存の記事は、1本ずつ開いて中身を読み直し、どこを図にするかを決める必要があります。そこで、規則を先に文章で決め、AIエージェントに規則どおりに足させ、結果を機械で検査する形にしました。

先に決めたのは「何を図にしてよいか」

図を作る作業では、本文に無い数字や、それらしい例が入り込む余地があります。図は目立つので、本文に無い内容が入ると、記事全体の信頼を落とします。

そのため、最初に決めたのは図の見た目ではなく、図にしてよい中身の範囲でした。この範囲を言葉にしておいたことで、あとの検証の項目も決めやすくなりました。

全数を一気にやらなかった

86本を一度に処理することもできました。ただ、最初に決めた型が悪ければ、86本すべてに同じ欠点が入ります。

そこで、よく読まれている上位5本で型を固め、残りは束に分けて回しました。次の節から、規則、型、進め方、検証、公開の順に説明します。

AIに渡した図解の規則は「1記事1〜3図、本文にある事実だけ」

規則は次の内容にまとめました。AIへの指示にも、検査の基準にも、同じ文面をそのまま使っています。

  • 1記事に入れる図は1〜3図とする
  • 図にする中身が無い記事は、0図のまま記録する。無理に足さない
  • 図の中身は、記事本文にある実物の事実だけにする。本文に無い数字や例を図で足さない
  • 画面のモックや、文字を焼き込んだ画像は置かない
  • 図の文字はすべてHTMLのテキストにする。選択も読み上げもできる状態にする
  • 書式は1つにする。figure 要素と、figcaption の見出しで組む

図だけ読んで意味が通るようにする

図の見出しでは、何の図かを言い切ります。「上の表のとおり」のように、ページ内の別の場所を指す言葉は図の中で使いません。

図だけを切り出しても意味が通るようにするためです。この条件は、あとで図を他の媒体に使い回すときに効いてきます。

置き場所は、見出しの直後でなく説明の後

図は見出しの直後ではなく、その節の説明を読んだあとに置きます。読み手は先に文章で理解し、図で確かめる順になります。

0図を許したことも大事な点です。「全記事に必ず図を入れる」を目標にすると、中身の無い記事にも図をひねり出す余地が生まれます。1〜3図という範囲と、0図の記録は、同じ規則の両側です。

AIに図解を足させるときの5つの規則
  1. 1記事1〜3図図にする中身が無い記事は、0図のまま記録する
  2. 本文にある事実だけ本文に無い数字や例を、図で足さない
  3. 画像を使わない画面のモックや文字を焼き込んだ画像は置かない。図の文字はHTMLのテキストで書く
  4. 書式は1つfigure 要素と figcaption の見出しで組む
  5. 図だけで読める見出しで何の図か言い切り、ページ内の別の場所を指す言葉を使わない

図解の型は3つ。「並び」の型は失敗から足した

図の型は、最終的に次の3つになりました。

  • 流れ：段と段の間に矢印を置く。基本形は「問題、なぜ起きる、relmeaで起きたこと、どう直した、現在のルール」
  • 対比：直す前と直した後を左右に置く。スマホでは上下に並べる
  • 並び：矢印を置かない。順番の無い列挙に使う

最初は流れと対比の2つしか無かった

最初に用意した型は、流れと対比の2つだけでした。そのため、順番の無い列挙も流れで組まれていました。

たとえば「定義ファイルが劣化する4つの型」「5つのトリガー型」「人の目を入れる3つの配置パターン」のような図です。矢印があると、読み手は「この順にやる」と受け取ります。順番に意味が無いものに矢印を付けたのは誤りでした。

矢印を出さない型をCSSに足した

直し方は単純で、矢印を出さない「並び」の型をCSSに足しました。そのうえで、流れで組んでいた10図を並びに付け替えています。対象は9記事でした。

付け替えのあと、それまでに図を入れた35本を3つの画面幅で検証し直しました。型を増やすかどうかは、見た目の好みではなく、読み手が図をどう読み違えるかで決めています。

順番の無い列挙を、流れの型から並びの型へ付け替えた

付け替える前（流れの型）

  • 「4つの型」のような列挙も、矢印でつないでいた
  • 矢印は「この順にやる」と読まれる

付け替えた後（並びの型）

  • 矢印を出さない並びの型をCSSに足した
  • 10図（9記事）を付け替え、図を入れ済みの35本を検証し直した

2026-10-27 時点の内訳は、対比116図、流れ80図、並び31図の計227図です。

AIに図解を足させる進め方は、5本で型を固めてから束で回す

進め方の骨組みは次のとおりです。

  1. よく読まれている上位5本で試行する。ここで型と規則を固める（計12図）
  2. 残りの81本を束に分けて回す。実際は、10本ずつの6束と、7本ずつの3束
  3. 束ごとに3つの画面幅で機械検証を回す
  4. 人が確認画面を見て承認する
  5. 承認後に本線へ取り込み、公開する

束の並びは、アクセスが付いている記事を先、アクセスが0の記事を後にしました。読まれている記事ほど、直した図を見る人が多いためです。

既存記事86本に図解を足した進め方
  1. 試行よく読まれている上位5本で型と規則を固める。計12図
  2. 束で回す残り81本を10本×6束と7本×3束に分ける。アクセスのある記事が先
  3. 機械検証1440・1024・390pxの3幅で全記事を開き、NGを数える
  4. 人が承認1440pxと390pxで撮った図のスクリーンショットを見る
  5. 取り込み・公開別の作業場所で進めた束を、承認後に本線へ取り込む

束ごとの図の数

束1から束9までの図の数は、25、20、24、27、27、25、19、21、21でした。試行の12図と合わせて、計221図です。

その後に書いた新しいコラム2本には、書くときに3図ずつ入れました。2026-10-27 時点では88本・227図で、88本すべてが1〜3図の範囲に収まっていることを検査で確かめています。結果として、0図のまま残した記事はありませんでした。

同じ手順を何度流しても二重にならない

図を入れるスクリプトは、本文の特定の一文の直後に図を差し込む方式です。同じ見出しの図がすでにあれば、入れません。

束の途中で止まって流し直しても、図が二重になりません。AIに同じ作業をくり返させるときは、この性質を先に作っておくと後が楽になります。

図解の機械検証は、3つの画面幅で全記事を開いて数える

束を回すたびに、Playwright（ブラウザを自動で動かす道具）で全記事を1440px、1024px、390pxの3幅で開きました。次のどれかに当たるものをNGとして数えています。

  • ページに横スクロールが出る
  • 図の左右の端が、本文の段落とずれる
  • 図の中身が、図の枠からはみ出す
  • 図の中で最も小さい文字が12px未満になる
  • 並びの型に、矢印が出ている
  • 流れの型で、矢印の数が「段の数−1」と合わない
  • ページでJavaScriptのエラーが出る

規則を数に置き換え、意味は人が見る

この検査では、規則の多くを数に置き換えています。矢印の数は「段の数−1」で確かめられ、文字の大きさはpxで判定できます。

一方で、図の意味が通じるかどうかは機械では判定できません。そこで1440pxと390pxでは、図を1枚ずつスクリーンショットに撮り、人が見る確認画面にしました。機械は数えられるものを数え、人は意味を見る分担です。

全束でNGは0でした。検証中はアクセス解析への送信を止めています。検査で開いたページが、実際のアクセス数に混ざらないようにするためです。

別のAIにも計画を見せた

計画は GPT（gpt-4o）にも見せました。取り入れたのは、媒体別の画像の比率、ロゴとURLの入れ方、ファイル名とフォルダの規則です。

取り入れなかった提案も2つあります。検索効果の測定は、検索からの流入が少なく判定できないため見送りました。無料ページのA/Bテストは、訪問数が足りるか確かめていないため見送っています。

公開事故を防ぐ規則と、まだ測っていないこと

図解を足す作業で、いちばん注意したのは公開のタイミングです。

relmea のサイトでは、毎日17:20に無人のコラム自動公開が動き、サイトのフォルダを丸ごと上げます。記事のフォルダの変更は「公開してよい変更」として通る設計です。本番のフォルダで図を編集すると、人の承認の前に公開されてしまいます。

git worktree で束ごとに作業場所を分けた

対策として、git worktree（同じリポジトリを別のフォルダに取り出す仕組み）で、束ごとに作業場所を分けました。本番のフォルダには手を付けず、人の承認のあとで本線に取り込み、公開しています。

自動公開が動いているサイトで、AIに既存ファイルを大量に書き換えさせるなら、作業場所を切り離すことが先です。

止める検査と止めない検査を分けた

新しく書くコラムでは、図の数を数える検査を毎回回します。ただし図の警告は記録に残すだけで、公開は止めません。記事末の案内などの検査は、不合格なら公開を止めます。

検査を1つにまとめず、公開を止めるものと記録だけ残すものを分けて持っています。

図は他の媒体にも使い回す

図はサイト専用にしていません。figure 要素だけをPNGに書き出すスクリプトを作り、媒体別の比率と右下のロゴを付けて書き出します。

  • Instagram：縦長1080×1350、または正方形
  • X：1600×900
  • note：1280×670
  • メール：横1200px

書き出したあとに図の最小文字が12px未満になる形式は、書き出さずに理由を出します。試行の時点で、図45枚分・計255枚を書き出しました。図の文字をHTMLのテキストにしておいたことと、図だけで読めるようにしておいたことが、ここで活きています。

図の効果は、まだ測っていません

図を足したことで、アクセス数や読まれる時間がどう変わったかは、まだ測っていません。この記事で示せるのは、規則に沿って221図を足し、3幅の検査でNGが0だったところまでです。

自分のサイトで同じことをする場合、先に決めておくとよいのは3点です。図にしてよい中身の範囲、型ごとの検査の項目、そして自動公開と作業場所の切り離しです。