はじめに
技術ブログのアイキャッチをAIで作ると、説明スライド、比較表、細かいUI図解になりやすい。記事内容をすべて画像へ入れようとするほど、主役が分からなくなり、ブログ一覧で読めない画像になる。
実際、考え方としてはこれはあっていたが、やはり説明画像だったと思う。
この問題を避けるため、AIには背景・構図・主役モチーフだけを生成させる。日本語タイトルは画像生成後に配置する。
この記事では、記事分析、参考アイキャッチの観察、構図判断、背景生成、文字入れ、縮小確認までを9ステップで進める。
この記事を読むと分かること
- 技術記事から、読者の悩み・解決内容・読後の状態を抽出する方法
- 参考アイキャッチから、構図・余白・色・文字量を読み取る方法
- 主役モチーフ型・分離型・抽象ビジュアル型の使い分け
- 主役を1つ、補助を最大2つ、配色を70／25／5に絞る判断基準
- AIへ文字なしの4:3背景だけを生成させるプロンプトの作り方
- 日本語タイトルを後入れし、縮小表示で採用・修正・没を判定する方法
- はじめに
- 完成イメージ
- 前提環境
- 前回で説明画像になったため今回改造した。
- 全体構成
- 使ったプロンプト
- エラー修正時の指示
- 手順
- 実行結果
- 詰まったところ
- セキュリティ上の注意
- Before / After
- まとめ
完成イメージ
最終的な制作フローは次の通りである。
1. 記事を読む
↓
2. 参考アイキャッチを見る
↓
3. 構図タイプを決める
↓
4. 記事メッセージを短くする
↓
5. 主役モチーフを1つ決める
↓
6. 配色を3系統に絞る
↓
7. AIで背景だけ作る
↓
8. 文字を後入れする
↓
9. 縮小表示で確認する
目指す画像の条件は明確である。
技術ブログ向け フラット 低発光 文字少なめ 主役モチーフが明確 タイトル後入れ前提 図解資料にしない
前提環境
この記事を作成した時点の確認環境は次の通りである。
| 項目 | 内容 |
|---|---|
| 確認日 | 2026-06-28 |
| OS | Microsoft Windows 11 Home 10.0.26200 |
| シェル | PowerShell 7.5.5 |
| AIツール | Codex CLI 0.137.0 |
| 記事形式 | はてなブログ向けMarkdown |
| 実行場所 | Codex、PowerShell、<BLOG_REPO> |
前回で説明画像になったため今回改造した。
失敗の原因は、記事の情報量とアイキャッチの情報量を同じにしたことにある。
記事内容をそのまま画像化する
↓
説明要素が増える
↓
比較表・UIパネル・小さい文字が増える
↓
ブログ一覧では内容が読めない
アイキャッチの目的は、記事を細かく説明することではない。ブログ一覧で記事の主題を判別でき、本文へ入る入口として機能することが目的である。
改善後は、次の順序で情報を削る。
参考を見る 型を決める 削る 背景だけ作る 文字は後入れする
全体構成
今回のワークフローは、10個のMarkdownファイルに分かれている。
technical_blog_eyecatch_workflow_pack/ ├─ README.md ├─ 01_workflow_overview.md ├─ 02_mermaid_workflow.md ├─ 03_article_analysis_template.md ├─ 04_design_decision_template.md ├─ 05_composition_and_color_rules.md ├─ 06_prompt_template_background_only.md ├─ 07_quality_checklist.md ├─ 08_case_obsidian_vault_ai_human.md └─ 09_master_instruction.md
各ファイルの役割は次の通りである。
| ファイル | 役割 |
|---|---|
01_workflow_overview.md |
基本方針と最終フローを確認する |
02_mermaid_workflow.md |
分岐と修正ループを確認する |
03_article_analysis_template.md |
記事の主題、悩み、解決、読後の状態を抽出する |
04_design_decision_template.md |
参考画像、構図、余白、色、主役を決める |
05_composition_and_color_rules.md |
構図と70／25／5の配色比率を決める |
06_prompt_template_background_only.md |
文字なし背景の生成プロンプトを作る |
07_quality_checklist.md |
採用、修正、没を判定する |
08_case_obsidian_vault_ai_human.md |
Obsidian記事の具体例を確認する |
09_master_instruction.md |
AIへ一連の作業を指示する |
使ったプロンプト
最初に、記事分析から品質判定までの役割をAIへ渡す。
あなたは技術ブログ向けアイキャッチ設計アシスタントです。 目的: 記事内容を細かく図解するのではなく、ブログ一覧で読める 技術ブログ向けアイキャッチ背景を設計する。 基本方針: - フラット - 低発光 - 文字少なめ - 主役モチーフ1つ - タイトルは後入れ - 図解資料にしない 実行手順: 1. 記事の主題・読者の悩み・解決内容・重要キーワードを抽出する 2. 参考アイキャッチから構図・余白・主役・色・文字量を判断する 3. アイキャッチ型を選ぶ 4. 記事メッセージを短くする 5. 主役モチーフを1つ決める 6. 補助モチーフを最大2つに制限する 7. 配色をベース70%、メイン25%、アクセント5%で決める 8. 画像生成AIには背景だけ作らせる 9. 日本語タイトルは後入れする 10. 品質チェックリストで判定する 禁止: - 詳細なワークフロー図を作らない - 比較表にしない - 細かいUIパネルを大量に入れない - 小さい日本語文字を入れない - コード全文やファイル一覧を入れない - 発光や3D感を強くしない
背景生成には次の雛形を使う。
Create a 4:3 blog eyecatch background. Eyecatch type: 【Main motif layout / Separation layout / Abstract visual layout】 Visual goal: 【記事の印象を1行で書く】 Composition: 【構図を簡潔に指定する】 【余白の位置】 【主役モチーフ1つ】 【補助モチーフ最大2つ】 Color: Base 70%: 【ベースカラー】 Main 25%: 【メインカラー】 Accent 5%: 【アクセントカラー】 Style: Flat shading, low glow, clean vector illustration, modern technical blog eyecatch, minimal shadows, simple shapes, strong whitespace. Text: Do not generate Japanese title text. Do not generate detailed labels. Leave clear empty space for title text to be added later. Constraints: No dense infographic. No workflow diagram. No comparison table. No multiple UI panels. No small UI text. No code blocks. No long file names. No long error messages. No realistic screenshots. No glossy 3D rendering. No excessive glow. No logos.
エラー修正時の指示
生成画像が説明資料になった場合は、要素を追加せず削る。
生成結果を技術ブログのアイキャッチとして再評価してください。 次を確認してください。 - 主役モチーフが1つか - 補助モチーフが2つ以内か - タイトル用の余白があるか - 色が3系統以内か - ワークフロー図や比較表になっていないか - 小さい文字やUIパネルが入っていないか - 発光や3D感が強すぎないか 問題がある場合は、追加案ではなく削除する要素を先に示してください。 その後、背景生成プロンプトを短く書き直してください。
手順
1. 記事を読む
記事分析テンプレートを埋める。
記事タイトル: 記事の主題: 読者の悩み: 記事で解決すること: 読後の状態: 重要キーワード:
次に、記事を一文へ圧縮する。
この記事は、【読者の悩み】を【方法】によって【結果】に変える記事である。
2. 参考アイキャッチを見る
参考画像から内容をコピーするのではなく、配置の型を読む。
参考元: 構図: 二分割 / 三分割 / 中央配置 / タイル構成 / シンメトリー / 対角線 / 額縁 主役: 人物 / アイコン / 物体 / 抽象図形 / UIモチーフ 余白: 左 / 右 / 上 / 下 / 中央 色: ベースカラー: メインカラー: アクセントカラー: 情報量: 少ない / 中程度 / 多い 文字量: なし / 少ない / 多い
モチーフより先に構図を確認する。
3. 構図タイプを決める
用途に合わせて三つの型から選ぶ。
| 型 | 構成 | 対象 |
|---|---|---|
| 主役モチーフ型 | 左にタイトル余白、右に主役 | 技術記事、エラー記事 |
| 分離型 | 左右の役割を分け、中央へ境界を置く | AI運用、セキュリティ、Before／After |
| 抽象ビジュアル型 | 抽象背景、記号、タイトル余白 | デザイン、AI思想、概念記事 |
4. 記事メッセージを短くする
分析結果をすべて画像へ入れず、サムネイル用の短い中心メッセージへ変換する。
長い説明: Obsidian Vaultを人間用とAI用に分け、 AIが読む範囲を安全に管理する方法 短い中心メッセージ: Vaultを安全に分ける
5. 主役モチーフを1つ決める
主役は1つ、補助は最大2つに制限する。
主役モチーフ: 補助モチーフ1: 補助モチーフ2:
複数の要素を同じ強さで置かない。
6. 配色を3系統に絞る
配色比率は次の形に固定する。
ベースカラー: 70% メインカラー: 25% アクセントカラー: 5%
Obsidian／AI記事では、クリームや淡い紫をベースにし、紫・青紫を主色、シアンまたは淡いブルーをアクセントにする。
強すぎる発光、真っ黒な背景、ネオン過多、赤や黄色の多用、過剰な3D表現を避ける。
7. AIで背景だけ作る
4:3の背景画像を生成する。タイトルや詳細ラベルは生成させない。
画像内へ入れるのは、構図、主役モチーフ、補助モチーフ、3系統の配色、タイトル用の余白だけである。
8. 文字を後入れする
背景生成後に、文字入れツールで日本語タイトルを配置する。
メインタイトル: サブコピー: 小ラベル:
文字量を増やさず、ブログ一覧の縮小表示で読めるサイズを維持する。
9. 縮小表示で確認する
次のチェックリストで採用、修正、没を判断する。
□ 主役モチーフは1つか □ 補助モチーフは最大2つか □ 構図が一目で分かるか □ 参考アイキャッチの構図を拾えているか □ タイトルを置く余白があるか □ 小さい文字が入っていないか □ 発光が強すぎないか □ 色数は3系統以内か □ 図解資料ではなくアイキャッチに見えるか □ ブログ一覧で小さくしても伝わるか □ 技術ブログの内容と合っているか
ごちゃついている場合は、モチーフ、色、文字量を削り、背景生成からやり直す。
実行結果
Obsidian Vaultを人間用とAI用に分ける記事へ当てはめると、次の設計になる。
記事メッセージ: Vaultを安全に分ける アイキャッチ型: 分離型 + 二分割構図 主役モチーフ: Vaultの金庫 補助モチーフ: 左: 人間用ノート 右: AI用ファイル 配色: ベース 70%: クリーム、淡いベージュ、淡い紫 メイン 25%: 紫、青紫 アクセント 5%: シアン、淡いブルー 文字後入れ: Vaultを安全に分ける 人間用 × AI用
この状態まで決めてから背景生成プロンプトを作る。記事本文をそのまま図解する必要はない。
詰まったところ
| 詰まったこと | 原因 | 対処 |
|---|---|---|
| 説明スライドになる | 記事内容をすべて入れている | 中心メッセージと主役だけを残す |
| ワークフロー図になる | 接続線や工程を描かせている | No workflow diagramを指定する |
| UIパネルが増える | ツール画面を再現させている | 抽象モチーフへ置き換える |
| タイトルを置けない | 背景生成時に余白を指定していない | 左右どちらかへ明確な余白を作る |
| 発光や3D感が強い | 技術感をネオンと立体表現で示している | フラット、低発光、最小限の影へ戻す |
| 色が散らかる | 色数と比率を決めていない | 70／25／5の3系統へ戻す |
セキュリティ上の注意
- 非公開の記事本文、顧客名、個人名、メールアドレスを画像生成サービスへ送らない。
- APIキー、OAuthトークン、認証情報をプロンプトへ入れない。
- 実際のファイル一覧、長いエラー文、ローカルパスを画像へ描かせない。
- 製品ロゴや第三者のアイキャッチをそのまま複製しない。
- 参考画像から利用するのは構図、余白、色数、情報量の考え方に限定する。
- 生成画像は公開前に人間が確認する。
Before / After
Before: 記事内容をそのまま画像化 ↓ 説明スライド、比較表、細かいUIになる ↓ 小さく表示すると読めない
非常にごちゃごちゃになる。
After: 参考アイキャッチから構図を読む ↓ 中心メッセージと主役を決める ↓ AIで背景だけ作る ↓ 日本語タイトルを後入れする ↓ 縮小表示で採用判定する
だいぶスッキリしたと思う。
まとめ
技術ブログのアイキャッチを安定させる要点は、記事を詳しく分析した後、画像へ入れる情報を削ることにある。
制作時は次のルールを固定する。
- 参考画像から構図を読む。
- 主役を1つ、補助を最大2つにする。
- 配色を70／25／5の3系統にする。
- AIには4:3の背景だけを生成させる。
- 日本語タイトルは後入れする。
- 縮小表示で読めなければ要素を削る。
記事を説明する画像ではなく、記事をクリックしたくなる入口画像を作る。これが、このワークフローの最重要ルールである。
現在これを更に改造してエッセイなどにも仕様できるように考えているが、こうなると場面シーン作成に近くなる。また今回のワークフローでは使用しなかったが、資料を作成し、そのindexからフローを分岐して参考資料をあてる方法も考えている。
ただこうなってくるともはやアイキャッチ作成よりも資料作成のほうが大変になってくるし、そうなると楽とは？ という気もしてきている。なのでそれはもっと後かもしれない。
