AI画像生成でブログ図解を作る、設計と検収の実例

ホームラボ運用を描いたアイキャッチ画像

ブログ図解の生成で最初に失敗したのは、文字化けではなく見た目です。背景が白とベージュで揺れ、図が中央に小さく浮き、余白が面積の大半を占めました。ここでは実在するbefore/afterと、どの検収項目を追加したかを並べます。

目次

入力仕様に失敗が埋め込まれていた

旧仕様は背景をlight backgroundとだけ書き、さらにgenerous marginsを要求していました。生成器は指示どおり、薄いベージュや大きな余白を返します。検収側もラベル、見切れ、矢印だけを見ており、背景色・余白・配色を判定していませんでした。

before:ベージュ背景と余白過多

修正前のベージュ背景の図解
修正前1:連載内で背景色が揃っていない。
修正前の余白が大きい図解
修正前2:図が中央に小さく浮き、余白が情報より目立つ。

変更:生成指示と検収項目を対で直す

観点 旧仕様 修正後
背景 明るい背景 白として読め、ベージュ・クリームの色被りを避ける
余白 たっぷり取る 各辺およそ5%を目安に全幅を使う
配色 生成ごとに自由 淡青、強調1箇所の琥珀、濃紺文字の同一パレット族
検収 ラベル・見切れ・矢印 背景、余白支配、パレット一致も目視する

after:同じ連載として読める図へ寄せた

背景と余白を修正した図解
修正後:白基調、情報を大きく、強調色を限定した。

厳密値の指定は一度失敗した

最初の修正では「完全な#FFFFFF、階調やグレインを一切禁止」と書きました。しかし生成結果には僅かな階調が残り、検収が候補をすべて拒否しました。そこで、機械的な完全一致ではなく「白として読める」「ベージュの色被りを拒否する」という知覚基準へ戻しています。

配信の200と、読者が見た品質を分ける

画像URLがHTTP 200を返すことは、ファイルが届いた証拠です。背景の揺れ、余白、文字の大きさ、矢印の向きは証明しません。生成後は実画像を開き、モバイル幅で見てから本文へ入れます。

1枚の検収表

  • ラベルが原稿どおりか
  • 矢印の向きと関係が正しいか
  • 文字や箱が切れていないか
  • 背景が同じ連載の白基調に見えるか
  • 余白が図より支配的でないか
  • 強調色が増えすぎていないか
  • 390px幅でも主要文字を読めるか

図解の品質は、生成プロンプトだけでも、公開URLのreadbackだけでも閉じません。生成側の仕様と、人が見る検収項目を同時に変更する必要があります。

第1期の制作物5本へ戻る

この検証を回している環境

この検証は、自宅の常設ラボ(使い捨てVM/LXCを回す母艦+GPU+VLAN分離ネットワーク)で動かしています。使っている機材と選定理由、全体構成は1本にまとめています。

ラボ構成のまとめを見る →
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

目次