プロンプト集を3つ読みました。
テンプレートも試しました。
「cinematic lighting, 8k, ultra detailed」も付けました。
出てくる画像は綺麗です。
でも、ブログに貼ると浮く。
サイト全体の色味と合わない。
記事ごとにトーンがバラバラになる。
50枚以上のブログアイキャッチをAIで作ってきて、ようやく気づいたことがあります。
プロンプトは「入力」の最適化でしかない。
画像の品質は「出力をどう評価するか」の問題でした。
なぜこれを試したのか — 50枚の画像制作で見えた壁
ブログ記事を書くたびにアイキャッチ画像が必要です。
以前はCanvaのテンプレートを使っていました。
手軽だけど、量産すると全部似たような見た目になる。
差別化がゼロ。
そこでMidjourneyとDALL-E、さらにClaude Code × PencilでAIデザインの隙間を埋める実体験で書いたPencilも加えて、AI画像生成に本格的に移行しました。
最初は快適でした。
プロンプトを入れれば30秒で画像が出てくる。
Canvaで20分かけていた作業が一瞬で終わる。
「もうアイキャッチで悩むことはないな」と思っていました。
10枚目あたりで違和感が出ました。記事の一覧ページを見たとき、アイキャッチの色味がバラバラだったんです。
ある記事はネオンブルー、隣はパステルピンク、その横はダークグリーン。
1枚ずつ見れば綺麗なのに、並べると統一感がない。
20枚、30枚と増えるほど、この問題は悪化しました。
何をしたか — プロンプト設計の3つの工夫
「プロンプトを改善すれば解決するはず」。
最初はそう考えました。
ネットで「Midjourney プロンプト コツ」を検索すると、出てくるのはプロンプトテンプレート集です。
「cinematic lighting」「soft gradient」「professional photography」。
品質を上げる魔法の呪文のような修飾語が並んでいます。
片っ端から試しました。
その上で、自分なりに3つの構造を意識してプロンプトを組むようになりました。
1. 構造の指定 — 何をどう配置するか
漠然と「ブログのアイキャッチを作って」では使い物になりません。
被写体の配置、視線の方向、余白の位置を言語化します。
✕ blog header image about AI design
○ centered isometric illustration of a laptop with floating UI components,
negative space on the right third for text overlay右3分の1にテキストを載せるスペースを確保する。
こういう具体的な構図の指定が、実際のブログ運用では一番効きました。
2. スタイルの指定 — どんなテイストか
「きれいに」は指示になりません。
写真風なのか、イラスト風なのか、フラットデザインなのか。
自分の場合、テック系ブログなのでアイソメトリックイラストに固定しました。
スタイルを1つに決めると、プロンプトの変数が減って結果が安定します。
isometric tech illustration, flat vector style, clean lines,
minimal shadow, white background3. トーンの指定 — 色と雰囲気
ここが一番苦労したポイントです。
「ネイビーとコーラルの配色で」と書いても、Midjourneyが返してくる色は毎回微妙に違う。
同じプロンプトでも、ある日はティールが強く出て、別の日はスレートグレーが混じる。
color palette: navy blue #1a1a4e, coral accent #ff6b6b,
warm gray background #f5f5f0HEXコードまで指定しても、出力が完全には一致しませんでした。
何が起きたか — プロンプトだけでは解決しない問題
3つの構造を意識してプロンプトを組むようになって、1枚単体の品質は確実に上がりました。
でも、根本的な問題は残りました。
配色の不統一
50枚並べると、ブランドカラーから外れた画像が2割くらい混じっています。
プロンプトで「navy blue」と指定しても、AIが解釈する「ネイビー」は幅がある。
ある画像では品のある紺色、別の画像ではほぼ黒。
アクセントカラーのコーラルも、オレンジ寄りになったりピンク寄りになったり。
ぶっちゃけ、HEXコードを指定しても無駄なケースが多いです。
生成AIの画像モデルは色をピクセル単位で制御しているわけではありません。
「ネイビーっぽい雰囲気」を出そうとしているだけ。
だからプロンプトをいくら精密にしても、出力の配色にはブレが残ります。
コントラスト不足
これは自分でも気づくのが遅れました。
AI生成画像は全体的にソフトなトーンになりがちです。
「きれいに見える」ようにバランスを取った結果、背景と要素のコントラストが弱い。
画像の上にテキストを重ねると読めない。
サムネイルサイズに縮小するとぼやけて何が描かれているかわからない。
Figma AIが「使えない」と感じたときの本当の原因で書いた5軸のうち、コントラストと配色がまさにこの問題に直結していました。
記事との文脈の不一致
もうひとつ。
プロンプト集には「高品質な画像を生成するコツ」は書いてあっても、「その画像が記事の内容に合っているか」の判断基準はありません。
SEOの記事にフォトリアルな風景写真は合わない。
技術解説にアート寄りの抽象画像は合わない。
でもプロンプトだけで「この記事のトーンに合うか」を制御するのは、かなり難しい。
なぜそうなったのか — 入力の最適化 vs 出力の評価
ここが一番大事なポイントです。
プロンプトの改善は「入力の最適化」です。
AIに渡す情報の質を上げる作業。これ自体は意味があります。
構造・スタイル・トーンを指定すれば、出力のばらつきは確実に減ります。
でも、品質は「出力の評価」の問題です。
生成された画像が「良いかどうか」は、プロンプトの中にはありません。
配色がブランドガイドラインに沿っているか。
コントラスト比がWebで視認できるレベルか。
記事のトーンと整合しているか。
これらは、生成後に人間が判断するしかない。
上位の記事がプロンプト集ばかりなのは、ここに気づいていないからだと思います。
入力側を磨けば出力の品質が上がる、という暗黙の前提がある。
正直、50枚作るまでは自分もそう思っていました。
バイブコーディングの限界を体験した話でも同じ構造がありました。
プロンプトでコードの品質を100%制御できないのと同じで、プロンプトで画像の品質を100%制御することはできません。
AIは生成できます。
でも「これが良い」「あれはダメ」「ここを直せば使える」という判断はできません。
次に試すこと — 配色とコントラストの後処理チェック
50枚の実験を経て、今はプロンプト設計の「後」に評価ステップを入れています。
やっていることはシンプルです。
配色チェック（3項目）
- ブランドカラーとの距離:
メインカラー（ネイビー）とアクセントカラー（コーラル）が画像に含まれているか。
含まれていても彩度や明度が大きくずれていないか - アクセントカラーの数:
1枚の画像にアクセントカラーが3色以上入っていたら再生成。2色までに絞る - 背景色の統一:
記事一覧で並べたときに、背景色がバラバラだとそれだけで雑に見える。白系か暗色系かを決めて統一する
コントラストチェック（2項目）
- テキスト視認性:
画像の上にタイトルテキストを重ねたとき、WCAG AA基準（コントラスト比4.5:1以上）を満たすか。
ブラウザの開発者ツールか、Figmaのコントラストチェッカープラグインで測定 - サムネイル視認性:
画像を200px幅まで縮小しても主要な要素が識別できるか。
Twitterカードやブログ一覧ではこのサイズで表示されるから、ここで潰れたら意味がない
正直、最初は面倒でした。でもこの5項目を通すだけで、ボツにする画像が激減しました。
以前は5枚生成して2枚使えればいいほうだったのが、今は3枚中2枚が通ります。
AIデザインツール4種を実際に使って比較した記録でも触れましたが、どのツールを使うかより、生成後にどう判断するかのほうが最終品質に効きます。
この先にあるもの — 5軸チェックという設計思想
配色とコントラストは5軸のうちの2つです。
残りの3軸は余白、階層（ビジュアルヒエラルキー）、タイポグラフィ。画像生成では直接関わりが薄いように見えますが、画像をサイトに配置したときのレイアウトや、画像内のテキスト要素には確実に影響します。
5軸すべてを体系的にチェックする方法は、AI生成デザインの品質チェック方法で詳しく書いています。
プロンプトのコツを掴んだ次のステップとして、品質チェックの仕組みを持つことをおすすめします。
デザイン初心者が最初にやるべきことでも書きましたが、判断基準は「見る力」から始まります。
プロンプトを磨くのは「作る力」。両方あって初めて、AIツールが実用になります。
5つの軸を体系的に深掘りしたい方のために、「Vibe Codingの落とし穴 — AI生成サイトをプロ品質に仕上げる5つの判断基準」というUdemy講座を準備中です。
配色・コントラストの実践テクニックは、セクション4「カラー・ビジュアル」で詳しく扱う予定です。
まとめ
AI画像生成のプロンプトにはコツがあります。
構造・スタイル・トーンの3層を意識して組むだけで、出力の質は上がります。
ただし、プロンプトは入力側の話です。
50枚作って学んだのは、「良い画像が出たかどうか」を判断する基準が別に必要だということでした。
配色がブランドに合っているか。コントラストがWebで視認できるか。
この2つをチェックするだけで、ボツ率は半分以下になります。
プロンプト集を読むのは無駄ではありません。
ただ、それだけで解決すると思っていると、50枚作っても統一感のないサイトが出来上がります。
入力を磨いたら、次は出力を評価する目を持つ。そこがAI画像生成の本当のコツです。
参考になれば幸いです。
このシリーズの他の記事
「AIデザインの隙間を埋める」シリーズでは、AIデザインの判断基準を8つの切り口で解説しています。
