--- title: "Thumbnail Prompt Builder を作りました：AIで作ったサムネイル画像を各媒体に自然展開するための小さな実験" date: 2026-07-05 categories: column author: 長橋 canonical: https://www.liberogic.jp/topics/20260706-thumbnail-prompt-builder/ --- # Thumbnail Prompt Builder を作りました：AIで作ったサムネイル画像を各媒体に自然展開するための小さな実験 ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/4ed4dcc5e1124729b53b7cc8af920503/cover%402x.png) ブログ記事のアイキャッチ画像を作るとき、最近はChatGPTなどの画像生成AIを使えばかなり良いビジュアルを作れるようになりました。ただ、実際に運用しようとすると、媒体ごとに必要な画像サイズが違いすぎることが難点。そこでAIで作ったアイキャッチ画像を、実際の運用に耐える形へ整えるための補助ツールアプリを実際に作ってみたまとめです。 ブログ記事のアイキャッチ画像を作るとき、最近はChatGPTなどの画像生成AIを使えばかなり良いビジュアルを作れるようになりました。 ただ、実際に運用しようとすると、ひとつ問題があります。 **媒体ごとに必要な画像サイズが違いすぎる。** たとえば今回のツールでは、最終的に以下の出力を想定しました。 用途サイズInstagram1080×1350Thumbnail1080×1080X1200×675Cover1280×560Cover Retina2560×1120 最初は「正方形の画像を1枚作って、それを全部のサイズに展開できれば便利では？」と思っていました。 そこで作り始めたのが **Thumbnail Prompt Builder** です。 --- ## 最初に作りたかったもの 最初の目的はシンプルでした。 **記事タイトルや概要を入力すると、画像生成AIに貼り付けるためのプロンプトを作ってくれるツール。** さらに、生成した正方形画像をアップロードすると、 - Instagram - Thumbnail - X - Cover の各サイズに自動変換できるようにしたいと考えていました。 つまり、理想はこうです。 記事情報を入力 ↓ 画像生成プロンプトを作成 ↓ 正方形画像を生成 ↓ 各媒体サイズへ自動展開 最初はかなり素直な設計でした。 「中央に主役を置いて、周囲に余白を作れば、どの媒体にも使えるだろう」 と思っていたんです。 ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/bc6b388cb81e4bdbb611a4fdf052a0db/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202026-07-06%2013.34.11.png) *初期の予想図* ## 実際に試してわかった問題 ところが、実際に画像を出してみると問題が出ました。 特にCover画像です。 正方形画像を横長に変換すると、 - 上下が大きく切れる - 主役が不自然に小さくなる - 背景の境界線が目立つ - 正方形では成立していた構図がCoverでは崩れる ということが起きました。 当初はCodexと相談しながら、いくつかの方向を試しました。 たとえば、 - SAFE ZONEを中央60%にする - 主役を中央に集める - 背景オブジェクトを禁止する - 背景色だけで左右を拡張する - 元画像の端にフェードを入れる - X / Coverでは少し縮小して切れにくくする などです。 どれも一定の効果はありました。 ただ、決定的な問題が残りました。 **正方形画像からCoverを自然に作るのには限界がある。** Coverは 1280×560 というかなり横長の比率です。 正方形画像の中に、PC、人物、UIカード、アイコンなどを入れると、正方形では良くてもCoverでは上下がかなり切れます。 逆に全部を入れようとすると、主役が小さくなりすぎます。 ここで設計を変えることにしました。 ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/97388871bf2b4364bd533c2f2ec7a7f8/cover.png) *実際の画像* ## 最終的な結論：プロンプトを2系統に分ける 最終的には、プロンプトを2つに分ける設計にしました。 ``` `Instagram / Thumbnail 用プロンプト X / Cover 用プロンプト ` ``` つまり、正方形画像1枚ですべてをまかなうのではなく、 ``` `正方形画像 → Instagram / Thumbnail 用 横長画像 → X / Cover 用 ` ``` という考え方です。 これはかなり大きな方針転換でした。 最初は「1枚の画像から全部作る」ツールを目指していましたが、実運用を考えると、**媒体ごとに成立する構図を最初から分けた方が自然**だとわかりました。 最悪デザイナーがレイアウトをいじればいいのですがFigmaなどを触れない人にも使えるようにAIだけで簡潔できるものにしたかったです。 --- ## 現在のツールでできること 現在の Thumbnail Prompt Builder では、記事情報を入力すると2種類のプロンプトが生成されます。 ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/68eee41fba0f4b09aa19a24f3a768063/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202026-07-06%2013.10.49.png) ### 1. Instagram / Thumbnail 用 正方形アイキャッチ用のプロンプトです。 - 1:1の正方形画像 - 中央に主役 - Instagram縦長展開にも対応しやすい余白 - ブログサムネイルとして見やすい構図 を意識した内容になります。 ### 2. X / Cover 用 横長アイキャッチ用のプロンプトです。 - 最初から横長構図 - Coverでも上下が切れにくい - 左右に余白を持たせる - XでもCoverでも破綻しにくい という指示を入れています。 これにより、Cover画像が「正方形を無理やり横長にした感じ」になりにくくなりました。 ## 画像展開も2系統に変更 画像アップロードも2系統に分けました。 ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/ebb008eb8de5481db9ce39dc15414307/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202026-07-06%2013.12.25.png) - 正方形画像アップロード - 横長画像アップロード 正方形画像からは、 - `instagram.png` - `thumbnail.png` を生成します。 横長画像からは、 - `x.png` - `cover.png` - `cover@2x.png` を生成します。 ![](https://images.microcms-assets.io/assets/4b13731f29254025b91c8d846198ffc9/3461852ce4fc410996a1a40457b5383b/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88%202026-07-06%2013.11.25.png) CoverだけはRetina用に2倍サイズも出力するようにしました。 最初はすべての画像に2倍サイズを出そうとしましたが、InstagramやXは投稿時に圧縮されやすく、Thumbnailもすでに十分大きいため、最終的に **Coverだけ2倍出力** に絞りました。 ## 入力内容が消えないようにした 作っている途中で地味に困ったのが、ページ更新時に入力フォームが消えることでした。 Codexに作業してもらってページを更新すると、入力途中の内容が消えることがありました。 これは少しストレスだったので、保存機能も強化しました。 現在は、 - localStorage - Cookie の両方に入力内容を保存しています。 Cookie側は7日間のバックアップとして使います。 これで、ページ更新や開発中の再読み込みがあっても、入力内容が復元されやすくなりました。 ## 実装してみてわかったこと 今回の開発で一番大きかった気づきは、 **AI画像生成は「あとから変換する」より「最初から用途別に作る」方が安定する** ということです。 特にアイキャッチ画像は、媒体ごとの比率差が大きいです。 正方形で良い構図と、Coverで良い構図は違います。 無理に共通化しようとすると、 - 主役が小さくなる - 余白が増えすぎる - 上下が切れる - 背景が不自然になる という問題が起きます。 だから最終的には、 **共通化しすぎない 用途ごとに生成の前提を分ける** という設計に落ち着きました。 ## Codexとやり取りしながら進めたこと 今回のツールは、最初から完成形が見えていたわけではありません。 Codexとやり取りしながら、 - 正方形画像を各媒体へ展開する - 背景拡張の破綻をなくす - SAFE ZONEを見直す - Coverで主役が小さくなる問題を解消する - サイズ定義を整理する - Retina出力を追加する - ただしRetinaはCoverだけに絞る - プロンプトを2系統に分ける - 入力内容を保存する という流れで少しずつ設計を変えていきました。 最初のアイデアは「正方形画像を万能マスターにする」でした。 でも、テスト画像を見ながら改善していくうちに、最終的には「正方形用と横長用を分ける」という、より現実的な形になりました。 この変化が面白かったです。 ## まとめ Thumbnail Prompt Builder は、単に画像サイズを変換するツールではありません。 どちらかというと、 **AIで作ったアイキャッチ画像を、実際の運用に耐える形へ整えるための補助ツール** です。 現在の形では、 - 記事情報から2種類の画像生成プロンプトを作る - 正方形画像からInstagram / Thumbnailを生成する - 横長画像からX / Coverを生成する - CoverだけRetina用も出力する - 入力内容を一定期間保存する ところまでできるようになりました。 最初に考えていたものより少し複雑にはなりましたが、その分、実運用ではかなり使いやすい形になったと思います。 今後さらに改善するなら、 - プロンプトのテンプレート切り替え - ブランド別の配色管理 - 生成例の保存 - NotionやWordPress向けの出力導線 - 画像生成AIとの直接連携 あたりも試してみたいです。 AI画像生成は便利ですが、実際に記事やSNSで使うには、まだ人間側の設計が必要です。 その「設計の手間」を少し減らすためのツールとして、Thumbnail Prompt Builder を育てていきたいと思います。