試行錯誤ログ

Webサイトに馴染む画像を生成AIで作るコツ｜非デザイナーでも統一感が出る作り方

2026年11月3日

最近、コーポレートサイトやサービスサイトの下層ページを作るときに、画像生成AIで挿絵やメインビジュアルを用意することが増えてきました。

Midjourneyで出てくる画像って、単体で見るとめちゃくちゃキレイなんですよね。ところが、いざページに貼ってみると……あれ？なんか浮いてる？？

色はサイトとケンカしているし、質感も周りの写真と合っていないし、そもそも「この画像、何を伝えたいんだっけ？」という状態。筆者も最初は「AIの画像ってこういうものだよね」と半分あきらめていました。

でも原因はAIの性能ではなく、プロンプトを書く前の「ページの読み取り」をサボっていたことでした。今回はブログのアイキャッチに限らず、コーポレートサイト、サービスサイト、ECサイトにも応用できる「ページにマッチする画像の作り方」を、非デザイナー目線でまとめてみました。ページのどこを見てプロンプトを組むか、色味の合わせ方、何の画像にすればページの内容が伝わるか、の3つを軸に、Midjourneyで実際にプロンプトを組み立てていきます。

そもそも生成AIの画像がWebサイトで「浮く」理由

浮いてしまう理由は、大きく分けて2つあります。

1つ目は、プロンプトに「そのページの情報」が入っていないこと。「明るいオフィスで笑顔のビジネスパーソン」のようなプロンプトは、どのサイトに置いても成立します。どのサイトにも置ける、ということは、裏を返せばどのサイトにも馴染まない画像になるわけです。

2つ目は、色と質感をサイト側に合わせる指示がないこと。AIはこちらのサイトの配色なんて知りません。何も指定しなければ、モデルの学習傾向やプロンプトの解釈しだいで、意図とまったく違う配色になることがあります。そりゃ浮きますよね。

ここで1つ、耳が痛いデータを紹介します。アメリカのユーザビリティ調査機関Nielsen Norman Groupのアイトラッキング調査では、ユーザーは目的に関係する情報を持った画像はしっかり見る一方で、ページを飾るためだけの装飾的な画像は無視する傾向がある、とまとめられています。モデルを使った汎用的なストックフォトの人物写真も読み飛ばされやすいそうです。なお、これは生成AIの画像を対象にした調査ではなく、Webページ上の写真全般についての調査です。

出典：Nielsen Norman Group「Photos as Web Content」
https://www.nngroup.com/articles/photos-as-web-content/

とはいえ考え方は同じで、生成AIで「それっぽい雰囲気画像」を量産すれば、ストックフォトと同じ道をたどることになります。

明るいオフィスで笑顔のビジネスパーソンを描いた汎用的なAI生成画像を、ミニマルなコーポレートサイトに配置して浮いてしまった例

プロンプトを組む前に、ページの「4か所」だけ見る

筆者がやっているのは、プロンプトを書く前にページを4か所だけチェックしてメモすることです。これだけでかなり結果が変わります。

①ページの目的（ユーザーに何をしてほしいか）

問い合わせ、購入、資料ダウンロード……。ざっくり言うと「信頼してほしい」のか「ワクワクしてほしい」のか。ここで画像の温度感が決まります。

②h1とリード文

ページで一番伝えたいことは、だいたいh1とその直下のリード文に書いてあります。ここに出てくる名詞を、そのまま画像のモチーフ候補にしてしまうのが一番の近道です。「木の家づくり」なら木材や職人、という具合ですね。

③背景色・アクセントカラー・文字色

サイトの色は、ブラウザのデベロッパーツールで調べるのが一番早いです。CSSが読めなくても、スポイト系の拡張機能で十分です。見るのは「一番面積が大きい背景色」「ボタンなどに使われているアクセントカラー」「文字色」の3つだけでOKです。

④既存の画像の質感

既存の画像は写真かイラストか、光は柔らかいか硬いか、色は鮮やかか落ち着いているか。既存の画像がフラットなイラストなら、新しく作る画像もフラットなイラストにする。ここをずらすと、一発で浮きます。

この4つを、筆者は毎回こんなメモにしています。

  • 目的：
  • h1・リード文の主な名詞：
  • 背景色／アクセント色／文字色：
  • 既存画像のタッチ（写真orイラスト、光、彩度）：

ちなみに、このように文体・画像・配色をひとつのコンセプトにそろえることを、広告業界では「トンマナ（トーン&マナー）」と呼びます。LINEヤフーのビジネス向けコラムでも、トンマナをそろえると制作物に統一感が生まれ、訴求力が上がるうえに制作時間やコストも減らせると解説されています。

出典：LINEヤフー for Business「トンマナとは? ビジネスでの意味やデザインでの設定方法を解説」
https://www.lycbiz.com/jp/column/ly-ads/marketing/what-is-tone_manner/

「何の画像にするか」でページの理解度が伝わる

比喩や雰囲気ワードはAIにほぼ通じない

非デザイナーがやりがちなのが、「信頼感のある画像」「先進的なイメージ」といった雰囲気ワードだけでプロンプトを書いてしまうパターンです。

ドイツのIT系メディアt3nの記事では、「熊のように強い」という比喩をMidjourneyに渡すと、意図をくみ取らずに本物の熊を描いてしまう例が紹介されています。そのうえで、AIには文脈と視覚的なヒントを多めに渡すことが、ブレない画像を作るカギだと解説されています。

出典：t3n「Prompten fürs Branding: Drei Tipps, die deine KI-Bilder markenkonform machen」
https://t3n.de/news/prompten-branding-tipps-ki-bilder-markenkonform-253604/

「信頼感」と書いて握手の画像が出てきた経験、ありませんか？握手、もうお腹いっぱいでござる。抽象的な言葉は、必ず「目に見えるモノ・人・場所」に置き換えてからプロンプトに入れましょう。

ページの種類ごとのモチーフの選び方

  • コーポレートサイト：事業の「現場」や「道具」を描く。会社の中身が想像できる画像がベスト。
  • サービスサイト：サービスを使った「後」の状態を描く。機能そのものより、ユーザーがラクになった瞬間を見せる。
  • ECサイト：商品の形状・色・仕様を正確に伝えるメイン画像には、実物の写真を使うのがおすすめ。生成AIは使用シーンや背景などの補助画像に回す。商品そのものをAIで描くと実物との差が出て、誤認やクレームの元になりかねません（これは法律上の決まりではなく、筆者の編集方針です）。
  • ブログ記事：記事の結論を1枚で表すモチーフにする。

迷ったときのチェック方法はシンプルです。「画像だけを見て、ページの内容を想像できるか？」。内容との関連が薄く、理解の助けにもなっていないなら、その画像は飾りになってしまっている可能性があります。

色味を合わせるなら、色名と使う場所を具体的に指定する

サイトのアクセントカラーがわかったら、ついHEXのカラーコードをそのままプロンプトに書きたくなります。ただ、カラーコードを書いたからといって、その色がそのまま再現されるとは限りません。そこで筆者は、カラーコードだけに頼らず、「色の名前」「その色を画像のどこに使うか」「どれくらいの面積か」を組み合わせて言葉で指定するようにしています。これは公式仕様ではなく筆者の実践ノウハウですが、意図を伝えやすくなる感覚があります。

筆者は生成AIの画像でも、「画像の大部分はサイトの背景に近い色にして、アクセントカラーはごく小さい面積だけに使う」ようにしています。フランスのデザイナー向けブログgraphiste.comでも、サイトの色は最大5色程度に絞り、画像も特定のスタイルに沿わせるかどうかを決めておくことがすすめられています。

出典：graphiste.com「Web design : 4 étapes pour une charte graphique parfaite !」
https://graphiste.com/blog/webdesign-charte-graphique-parfaite-site-web

たとえば白背景にマゼンタピンクがアクセントのサイトなら、こんな色指定を入れます。

日本語プロンプト白とライトグレーを基調にした背景、アクセントにマゼンタピンクを小さく一点だけ使う、彩度は低め、フラットなイラスト

英語プロンプト（Midjourney・海外サイト用）white and light gray dominant background, a single small accent of magenta pink, low saturation, flat illustration

ポイントは「一点だけ」「小さく」と面積まで指定すること。書かないと画像全体がピンクに染まりがちです。

Midjourneyでサイト全体の統一感を出す方法

スタイルのキーワードを「定型文」にしてしまう

枚数を重ねるとテイストがバラバラになるのは生成AIあるあるです。ドイツ版のHostingerのチュートリアルでは、画像生成ツールはできるだけ1つに絞り、うまくいったプロンプトをテンプレートとして使い回すこと、ブランドを表すスタイルのキーワードを少数決めて毎回プロンプトに入れることがすすめられています。

出典：Hostinger（ドイツ語版）「KI-Bilder erstellen: Anleitung für Einsteiger」
https://www.hostinger.com/de/tutorials/ki-bilder-erstellen-anleitung/

筆者は「モチーフだけ差し替えて、スタイル部分は一字一句変えない」ルールにしています。地味ですが一番効きます。

–srefで質感をそろえる

Midjourneyの伝家の宝刀が、スタイルリファレンス（–sref）です。Midjourney公式ドキュメントによると、既存の画像の雰囲気を新しく作る画像に適用できる機能で、プロンプトの最後に –sref と画像のURLを付けて使います。画像の代わりにスタイルコードを指定することもできます。

出典：Midjourney Docs「Style Reference」
https://docs.midjourney.com/docs/style-reference

公式ドキュメントでは、–sref は物や人物をコピーするのではなく、色・質感・光といった全体のスタイルだけを参照する機能だと説明されています。使い方としては、まず1枚「これだ！」という基準画像を作り、以降の画像はすべてその画像を –sref に指定します。効きすぎる、または弱いと感じたら –sw（スタイルの強さ）を調整します。–sw は0〜1000の範囲で指定でき、初期値は100。数値を上げると参照スタイルの影響が強まりますが、被写体や構図まで同じになるわけではありません。

画像の中に文字は入れない

画像の中の文字は、拡大や色の変更がしにくく、スクリーンリーダーで使う人への配慮も必要になります。W3CのWCAG解説でも、見た目を再現できるなら画像の文字ではなく実際のテキストを使うことが求められています（ロゴなど一部の例外はあります）。ドイツのハイデルベルク大学も、自校のWebサイト向け画像ガイドラインで、画像内に説明テキストを入れることを推奨しない方針を示しています。また、アメリカのオンライン講座プラットフォームRuzukuの解説でも、Midjourneyの文字生成はまだ不安定なので、文字なしで画像を作って後から文字を重ねるほうが使い回しもきく、と書かれています。

出典：W3C「Understanding Success Criterion 1.4.5: Images of Text」
https://www.w3.org/WAI/WCAG21/Understanding/images-of-text.html

出典：Universität Heidelberg「Webkit Vorgaben Guidelines für Bilder」
https://www.uni-heidelberg.de/en/node/50916

出典：Ruzuku「Midjourney Style References」
https://www.ruzuku.com/learn/tools/ai/midjourney-style-refs

なので、プロンプトの最後には –no text, logo を付けておくのがおすすめです。Midjourney公式ドキュメントによると、–no は画像に入れたくない要素を指定するパラメータで、カンマ区切りで複数指定できます。ただし、文字やロゴが絶対に出ないと保証されるわけではないので、生成後に必ず目で確認しましょう。見出しやキャッチコピーはHTMLのテキストとして載せれば、読み上げや拡大に対応しやすく、検索エンジンにもページの内容が伝わりやすくなります。

出典：Midjourney Docs「No」
https://docs.midjourney.com/docs/no

実戦：架空の3ページで画像を作ってみた

ここからは、架空のページを3つ用意して、実際に「読み取りメモ → プロンプト」の流れで組み立ててみます。今回は英語プロンプトを中心に紹介します。日本語プロンプトも並べているので、日本語での生成結果と比べながら、用途に合う表現を選ぶのもおすすめです。

コーポレートサイト：地域の工務店の「会社概要」ページ

  • 目的：信頼してほしい、問い合わせしてほしい
  • h1：「木の家づくり、50年。」
  • 背景色：生成り（オフホワイト）／アクセント：深緑／文字：濃いグレー
  • 既存画像：自然光の写真、落ち着いた色

まずはNG例から。雰囲気ワードだけで書くとこうなります。

日本語プロンプト（NG例）信頼感のある工務店のイメージ画像

英語プロンプト（NG例）image of a trustworthy construction company

これだと、どこの会社でも使えそうな汎用画像になりがちです。メモをもとに書き直すとこうなります。

日本語プロンプト（OK例）木造住宅の建築現場で、無垢材の柱にカンナをかける職人の手元、朝の自然光、生成りと深緑の落ち着いた色調、浅い被写界深度の写真 --ar 16:9 --no text, logo

英語プロンプト（OK例）close-up of a carpenter's hands planing a solid wood pillar at a wooden house construction site, soft morning natural light, calm palette of off-white and deep green, shallow depth of field, photography --ar 16:9 --no text, logo

「木の家づくり」を無垢材と職人の手元に置き換え、50年の歴史は手仕事で表現しています。

サービスサイト：家計簿アプリの機能紹介ページ

  • 目的：使ってみたいと思ってほしい
  • h1：「レシートを撮るだけで、家計簿が終わる。」
  • 背景色：白／アクセント：マゼンタピンク／文字：黒
  • 既存画像：グレーの線画のフラットイラスト

日本語プロンプトスマートフォンでレシートを撮影したあと、ソファでほっとくつろぐ人物、フラットイラスト、白背景、グレーの細い線画、マゼンタピンクを小さなアクセントに一点だけ、余白多め --ar 3:2 --no text, logo

英語プロンプトa person relaxing on a sofa with relief after scanning a receipt with a smartphone, flat illustration, white background, thin gray line art, a single small magenta pink accent, generous negative space --ar 3:2 --no text, logo

機能そのもの（撮影画面）ではなく、「撮ったあとにラクになった状態」を描いているのがポイントです。この1枚が気に入ったら、他の機能紹介の挿絵もこの画像を –sref に指定して作れば、ページ全体のテイストがそろいます。

ECサイト：コーヒー豆の商品ページ（サブ画像）

  • 目的：買ってほしい
  • h1：「深煎りエチオピア 200g」
  • 背景色：ベージュ／アクセント：こげ茶／文字：黒
  • 既存画像：商品パッケージの実物写真

先ほども書いたとおり、商品そのものは実物の写真を使います。AIに任せるのは「この豆を買ったらどんな朝になるか」という使用シーンのサブ画像だけです。

日本語プロンプト朝のキッチンの木のテーブルでハンドドリップしているシーン、湯気の立つマグカップ、窓からのやわらかい光、ベージュとこげ茶の温かい色調、商品パッケージやロゴは写さない写真 --ar 4:5 --no text, logo

英語プロンプトhand drip coffee brewing on a wooden table in a morning kitchen, a steaming mug, soft light from the window, warm palette of beige and dark brown, photography without any product package --ar 4:5 --no text, logo

パッケージやロゴを写さないのは、AIが描いた架空のパッケージを実際の商品と見間違えられないためです。

参考にしたサイト

まとめ

Webサイトに馴染む画像を生成AIで作るコツは、プロンプトを書く前の「ページの読み取り」にあります。ページの目的、h1とリード文、背景色やアクセントカラー、既存画像の質感という4か所をメモしてから書き始めるだけで、浮いた画像はぐっと減ります。モチーフは「信頼感」のような雰囲気ワードではなく、目に見えるモノや人、場所に置き換えるのが基本です。コーポレートサイトなら事業の現場、サービスサイトなら使ったあとの状態、ECサイトなら商品は実写にして使用シーンだけをAIで作る、と考えると迷いにくくなります。色はカラーコードだけに頼らず色名と場所・面積で伝え、アクセントカラーは小さく一点だけ。統一感はスタイルの定型文と–srefで作り、文字は画像に入れずHTMLで載せましょう。非デザイナーでも、見る場所と順番さえ決めてしまえば、ページの内容がしっかり伝わる画像は十分作れます。まずは手元のサイトの1ページで、読み取りメモから試してみてください。

##プロンプト ##初心者向け ##生成AI ##画像生成AI #Web制作 #ホームページ

Related Posts