Claude Codeで図解・写真風画像をH2下へ自動配置する仕組みと実装フロー

「H2の直下にどの画像を入れるか」「次のH3には図解と写真風どっちが正解か」を、毎回手作業で考えていませんか。私も以前はクライアント案件で画像配置の指示書を毎回読み返し、1記事あたり15〜20分を配置判断だけに使っていました。

本記事の内容は私が自分のメディア運営で実際に使っているやり方であり、全てのWebライターに推奨できるものではありません。クライアント側で別の指示があれば当然クライアント指示が優先です。

一方で『毎回の配置判断が地味に時間を食っている』と感じている方には、参考になる部分があると思います。

記事の画像配置を『毎回手作業で判断』しているWebライターの現実

画像配置の手作業に慣れたWebライターほど『そういうもの』として無駄な時間を受け入れている節がある。私も以前は、画像配置にかかる時間を当然のコストとして受け入れていた側です。なぜそうなるのか、2つの背景から整理します。

『どこに何を入れるか』を毎回考えるのが業界標準

クライアント案件で画像挿入を担当するWebライターなら、レギュレーションシートに『各H2の直下に1枚』『偶数H3には写真風』『H3が3本以上のH2にはサブ図解』といった指示が並んでいるのを見たことがあるはずです。

私が受けた案件でも、細かい配置仕様を持つメディアでは、画像配置だけで独立したルールが用意されていました。

業界標準として『画像配置はライターの裁量』『指示書を都度確認』のスタイルが残っているため、画像配置の自動化という発想が出にくいのが実情だと感じます。

H3が多い記事では配置チェックだけで15分以上かかっていた

実際にH2が8〜10個あり、各H2配下にH3が3〜5本ぶら下がる記事を担当した時、画像配置の判断だけで15〜20分を使っていました。

内訳としては、各H2のH3本数を数える作業に5分、配置パターン(図解／写真風／terminal)を割り当てる作業に8分、最後にalt案を考える作業に5分、といった配分です。

『手作業をなくしたい』という単純な動機が、私にとってClaude Code導入の直接的なきっかけになりました。AIで本文を書きたかったというより、配置判断のような『考えるほどでもないが時間を食う作業』を消したかったのが本音です。

谷口テツ

私も最初は配置判断を職人技だと思い込んでました。でも実は、H3の本数を数えるだけで自動化できる業務だったんです。まずは自分の配置ルールを紙に書き出すところから始めてみてください。

H2直下に図解・偶数H3に写真風を入れる3つの根拠

画像配置の自動化を進める前に、なぜ『H2直下が図解・偶数H3が写真風』というパターンが効くのかを言語化しておく必要があります。『H2直下が図解・偶数H3が写真風』というパターンが記事制作において重要とされる理由は以下のとおりです。

H2直後の図解が『章の入り口』として読者の離脱を防ぐ

H2は章の切り替えポイントであり、読者がスクロールを止めて『目の前の章は読む価値があるか』を判断する瞬間です。H2直下に図解を1枚入れると、章の内容が視覚的に予告され、読者はスクロールを続けやすくなります。

H2直下を図解で固定するルールは、読者の離脱対策としても、画像生成の判断簡略化としても、両方の意味で効率的だと感じています。

偶数H3の写真風が読み疲れを防ぐ視覚リズムを作る

H3が3本以上連続するH2では、H3-2(2本目のH3)の直下に写真風画像を入れると、図解と写真風が交互に現れる視覚リズムが生まれます。私が読者として記事を読む時も、図解だけが続く章は『情報量が多くて疲れる』と感じることが多く、写真風が挟まると休憩ポイントになる感覚があります。

交互配置のリズムは数値化しづらい部分ですが、配置を切り替えてから読了率が体感で上がっており、直帰直後の離脱が減った印象があります。Google AnalyticsとSearch Consoleのデータを今後突き合わせて検証する予定です。

図解と写真風の交互配置が単調さを消して最後まで読ませる

H2直下が図解、H3-2直下が写真風、H3-4直下が再び図解、という交互配置にすると、1つのH2セクション内で『情報伝達(図解)→雰囲気休憩(写真風)→再び情報伝達(図解)』の波ができます。波があるから読者が飽きにくく、最後まで記事を読み切ってもらえる確率が上がります。

谷口テツ

図解と写真風は『役割が違う』と理解すると配置が決めやすくなります。図解は情報伝達、写真風は雰囲気休憩。まずは自分の記事を1本だけ役割の視点で見直してみてください。

Claude Codeで配置を自動化する3ステップの実装フロー

配置パターンが決まれば、あとはClaude Codeに自動判定させるだけの話です。Claude Codeによる画像配置の自動化実装は、大きく3ステップに分かれます。

① 構成案(02_outline)でH3数から配置表を自動生成する

私のクロコライターでは、構成案ファイル02_outline(記事の構成案ファイル)を作る段階で、各H2配下のH3本数をClaude Codeが数え、配置テーブルを自動生成する仕組みを入れています。H2タイトルとH3の見出しリストを書いた直後に『H3本数:4本→H2直後:図解／H3-2直下:写真風／H3-4直下:図解』といった配置案がコメント形式で挿入されます。

手作業だと毎回考えていた『1章あたり何枚画像が必要か』を、構成案の段階で機械的に確定できるメリットが大きいと感じます。記事執筆に入る前に画像枚数が見えるため、API(外部のサービスをプログラムから呼び出すしくみ)コストの事前見積もりも可能になりました。

② 図解プロンプトファイルに挿入位置と種別を自動記録する

構成案で配置が決まったら、次は『03_図解プロンプト.md』というファイルに、各画像の挿入位置(H2直後／H3-2直下など)と種別(diagram／photo／terminal)を1行ずつ書き出します。私の運用では、Claude Codeが構成案から自動で図解プロンプトファイルを生成し、各画像のalt案・英語プロンプト・出力ファイル名まで一括で書き出してくれます。

プロンプトファイルがあることで、後から『過去記事で使った画像の構成を確認したい』という時にも見返しやすく、運用ログとしても機能します。1記事あたり10枚前後の画像を扱うため、ログ化しないと管理しきれない量になります。

③ ファイル名に『diagram』か『photo』を入れるだけで画像の種類が自動で決まる

最後の自動化ポイントが、画像生成スクリプトgenerate_image.py(画像生成スクリプト)のファイル名連動機能です。ファイル名に『diagram』が含まれていれば図解スタイル、『photo』が含まれていれば写真風スタイル、『terminal』が含まれていればターミナル画面風スタイルが自動で選択されます。

ファイル名連動機能のおかげで、画像生成時にWebライターが意識するのは『どの位置に何種類目の画像か』だけで、スタイル選定の判断は完全に省略されます。手作業時代に毎回プロンプトを書き分けていた時間が、ファイル名を決めるだけの数秒に圧縮されました。

コードさん

generate_image.pyのファイル名判定は、ファイル名に『diagram』『photo』『terminal』が含まれるかをチェックするだけだよ！スクリプト本体は一切書き換えなくていいんだ。ファイル名だけがスタイルの設定値なんだね！

谷口テツ

この3ステップを組み込む前は、構成案を書いた後で「あ、あのH2はH3が4本だから写真風も1枚必要だった」と気づいて後から差し戻すことが月に何度もありました。

構成案の段階で画像枚数を確定させてしまえば、後からの差し戻しがゼロになります。

H3本数別・実際に使っている配置テーブルを公開

私がクロコライターで実装している『H3本数→配置パターン』の対応表を全文公開します。記事ごとに迷わず配置を決められるよう、4パターンに収束させています。

H3が0〜2本の小さなH2は、H2直下の図解1枚で十分カバーできます。H3が3本以上に増えたら写真風を1枚足し、5本以上で図解をもう1枚足す、という単純な階段構造です。表を一度作ってしまえば、構成案の段階で『該当H2のH3は4本だから画像2枚』が機械的に決まります。

数値が事前に見えるため、月間の画像生成予算を立てやすくなり、APIコストが想定外に膨らむリスクも消えました。配置の自動化は時間削減だけでなく、コスト管理面でも効いている実感があります。

コードさん

1記事の画像枚数は(各H2のH3本数を対応表で照合した合計)+(まとめH2の1枚)で出せるよ！H2が5個でH3合計12本なら、対応表から枚数が即座に出るんだ。

谷口テツ

配置テーブルは『自分のメディアではどう運用するか』を一度紙に書き出すのが先決です。H3本数の閾値は記事の長さや読者層で変わるので、私の数字をコピペするより、自分なりにカスタマイズした方が結果は良くなります。

まとめ：15〜20分の配置作業をゼロにした効果と残る課題

本記事で紹介してきたのは、私がクロコライター運営で実装している『H3本数を起点とする画像配置の自動化』です。3ステップを振り返ると、構成案でH3本数を数えて配置テーブルを参照し、プロンプトファイルに挿入位置を記録し、ファイル名のプレフィックスで画像スタイルを切り替える、という流れでした。

画像配置自動化の残る課題としては、H3本数のカウントが厳密にH2配下のみを対象にする仕組みのため、見出し階層を間違えて書いた時に配置パターンの割り当てがズレる点があります。構成案の段階でMarkdownの見出し階層を確認するチェックを1工程入れているのですが、見出し階層の検証はClaude Codeでもう少し自動化したい部分です。
» Claude Code導入でWebライター業務をどう効率化しているかを体験談で紹介

本記事で紹介したのはあくまで私のやり方です。Claude Codeでの画像配置自動化はWebライターごとに最適解が違いますし、もっと洗練された運用を実践している方も多いと思います。改善提案や別の実装パターンがあれば、コメント欄やXのリプライでぜひ教えてください。同業のWebライターと知見を持ち寄って、お互いの自動化レベルを上げていけたらと願っています。

谷口テツ

Webライター・マーケター

工場作業員20年からWebライターに転身した男。Claude Codeを使いこなし「AIに代替される」と言われているWebライターでも食べていけるスキルを身に付けている。ライター仲間が減るのも悲しいので、Claude Codeの活用方法を発信している。