困ったときの生成AI活用術!WEBサイト用の画像を効率よく作成する方法 | ant2お役立ち情報 | CMSなら「ant2-ASP」でホームページ制作!

2026.03.11

困ったときの生成AI活用術!WEBサイト用の画像を効率よく作成する方法

こんにちは。アントアントのメルマガ担当です。
いつもメールマガジン「ここだけは知っておきたい編」をご覧いただき、誠にありがとうございます。

テキスト原稿はなんとかなったけれど、

「キービジュアルに置く写真が決まらない」
「フリー素材だと探すのが大変」
「制作や写真撮影を依頼すると費用がかかってしまう」

このように、WEBサイト内で使用する写真や画像の選定に困ったことはないでしょうか。
実は、制作時間の中で「画像選定」が最も時間を使う工程になることも少なくありません。

そこで今、制作現場で活用が進んでいるのが生成AIによる画像自動生成です。
今回は有名な生成AIである「ChatGPT」と「Gemini(Nano Banana 2)」を使用して、WEBサイトで使いやすい画像を生成するためのプロンプト例と、実際に生成された画像をご紹介します。

困ったときの生成AI活用術 WEBサイト内で使用する写真や画像の選定に困った場合はAI生成を使用してみよう

ChatGPTとGeminiの違い

まずは簡単にChatGPTとGemini(Nano Banana 2)を使用して画像を生成する場合の向き・不向きを実際に使用した感想をもとに比較してみます。
(2026年3月現在)
※AIは日々アップデートされているため、この傾向は常に変化しています。

比較項目 Gemini ChatGPT 備考
写真・リアル系 Geminiは実写に近い質感が得意。ChatGPTは曖昧な指示に強い。
フラットイラスト Geminiの方が現代的なビジネス用イラストに向いています。
抽象背景 芸術的・抽象的な表現はChatGPTが得意。
日本人表現の自然さ リアルな写真については、Geminiの方が自然に仕上がる傾向。
ポップ・柔らかい表現 ビジネスライクなものであればGeminiの方が得意な傾向。
サイズ・縦横比指定 × ChatGPTは指定通りにならない場合があり、トリミングが必要。
ロゴの制作 文字や記号を組み合わせたデザインはChatGPTが先行。
背景が透明な画像 × 素材として使いやすい透過背景の生成はChatGPTが得意。

すぐに使える!画像生成プロンプト3選

1. トップページ用「信頼感のあるキービジュアル」

例えば「トップに置く写真が決まらない」「コーポレート感・安心感を出したいが写真撮影をしている時間と予算がない」という時に、AIを使用してリアルな写真を作成することができます。

プロンプト例

日本の中小企業向けコーポレートサイトのトップページ用イメージ画像(リアルな写真)を作成してください。
清潔感と信頼感がある雰囲気。
明るい自然光、白と青を基調とした配色。
人物は20代~30代くらいの日本人が3人、作り込みすぎない自然な表情。
WEBサイト向け、横長構図(縦横比率は16:9、横幅は1920px)。
写真のみでロゴやテキストなど入れないでください。

1Gemini(Nano Banana 2)

Geminiで生成したキービジュアル

2ChatGPT

ChatGPTで生成したキービジュアル

2. 業種イメージ「サービス内容を伝える1枚」

例えば「業種に合うイラストが見つからない」「フリー素材だとイメージが合わない」という時に、AIを使用して希望するイラストを作成することができます。

プロンプト例

日本の清掃業のWEBサイト用のフラットアイコン風のイラスト画像を作成してください。
実際の作業風景をイメージした表現。
過度な演出は避け、プロフェッショナルで誠実な印象。
作業着を着た日本の現場、日本人スタッフが3名。
テキストやロゴ、文字など入れないでください。
背景は切り抜けるように透明または白にしてください。

1Gemini(Nano Banana 2)

Geminiで生成したイラスト

2ChatGPT

ChatGPTで生成したイラスト

また、場合によってはプロンプト内の文章が画像内に含まれて生成されることもあります。
テキストが「必要か・不要か」を明確に指定すると、より意図に近い画像が生成されやすくなります。

さらに、イラストの場合は「〇〇風」と指定する内容次第で、雰囲気を大きく変えることも可能です。

絵本の挿絵のような水彩画風

絵本の挿絵のような水彩画風

日本のアニメーション風

日本のアニメーション風

アメコミ風

アメコミ風

3. 背景・装飾用「文字を邪魔しないイメージ」

例えば「見出し背景やセクションの区切りに使いたい」「写真が主張しすぎるのは避けたい」という時に、AIを使用して背景などの装飾を作成することができます。

プロンプト例

WEBサイトの背景に使える抽象的なデザイン画像を作成してください。
淡いグラデーション、やさしい色合い。
主張しすぎず、文字が読みやすい構図。
ビジネスサイト向け、シンプルで上品な印象。

1Gemini(Nano Banana 2)

Geminiで生成した背景画像

2ChatGPT

ChatGPTで生成した背景画像

いかがでしょうか。
同じプロンプトでも、生成するAIによって仕上がる画像は異なりますので、ぜひいろいろと試してみてください。

画像生成で“絶対に入れたほうがいい指示”

画像生成を行った際によくある失敗としては「勝手に文字が入る」「構図が縦になる」「テイストがバラバラになる」「余計な装飾がつく」といったことがあげられます。そのため、そういった問題を防ぐために最低限以下の指定を入れることをおすすめします。
※プロンプトは足りないより、具体的なほうが成功率は高くなります。

プロンプトに入れたほうがいい指示

1)構図指定

  • 横長構図
  • 縦横比率16:9
  • キービジュアル用

2)不要要素の明示

  • ロゴやテキストは入れない
  • 人物はカメラ目線にしない

3)テイストの指定

  • フラットなイラスト
  • リアルな写真風
  • 過度な演出は避けたい

4)色味指定

  • 白と青を基調
  • 淡い色合い
  • グラデーション

【重要】商用利用について

AIで生成した画像の商用利用可否・クレジット表記・再配布可否は利用するAIや契約内容によって異なりますので、必ず利用規約をご確認ください。
※スタッフ写真や実績紹介などの事実性が求められる写真には使用せず、背景やイメージカットなど補助用途での活用がおすすめです。

作成した画像の生成AI別商用利用について

■ChatGPT(2026年3月現在)

無料、有料プランともに商用利用可能。

■Gemini(2026年3月現在)

有料プランであれば商用利用可能。

まとめ

生成AIを活用すれば、「写真が決まらない」「イメージが合わない」といったWEB制作時の悩みを、短時間かつ低コストで解決できる可能性が広がります。
ポイントは、用途を明確にし、プロンプトで「雰囲気・構図・不要な要素」を具体的に指定することです。

完璧を目指すのではなく、叩き台やイメージ補助として上手に取り入れることで、制作効率は大きく向上しますので、ぜひサイト制作に困った時には生成AIを取り入れてみてください。

  1. ホーム
  2. ant2お役立ち情報
  3. 困ったときの生成AI活用術!WEBサイト用の画像を効率よく作成する方法