Web サイトのヒーロー画像を AI で作る 5 ステップ

LP やコーポレートサイトのファーストビューに使うヒーロー画像を、ストックフォトに頼らず AI で作る流れです。デザインカンプにはめても違和感が出ないよう、「レイアウトから逆算する」のがコツです。

Step 1. レイアウトを先に決める

テキストを左に置くのか、中央に重ねるのか。先にワイヤーを引いて、画像に必要な「余白の位置」と「アスペクト比」を決めます。

Step 2. トーン＆マナーを言語化

ブランドカラーと質感を 3 語で表します。例: warm beige, matte, editorial。この 3 語を全てのプロンプトに入れると、ページ全体の統一感が出ます。

Step 3. プロンプトを書く

editorial photo of a minimalist workspace by a large window, morning light,
warm beige tones, matte textures, lots of negative space on the left,
wide composition, soft focus background --ar 16:9 --style raw

lots of negative space on the left のように余白の位置を明示すると、テキストを載せたときにきれいに収まります。

Step 4. バリエーションを 4 枚作って比較

同じプロンプトでシード違いを 4 枚。実際にカンプにはめて「視線がテキストに向くか」で選びます。

Step 5. アップスケールと書き出し

• 横幅 2400px 以上にアップスケール
• WebP（品質 80）で書き出し、200KB 前後を目安に
• SP 用に 4:5 でトリミングした版も用意