MidjourneyでWebサイト用のヒーロー画像を作るときの考え方

Webサイト用のヒーロー画像は、単体で目を引けば完成ではありません。見出しとCTAを重ねた状態で主題が伝わり、PCとスマートフォンの表示幅で切り抜いても重要部分が残ることが必要です。先にHeroのlayoutとcopy位置を決め、その条件をMidjourneyの構図・余白・比率へ落とします。

たとえば左側に見出しとボタンを置くなら、主役を右寄せにした横長素材を試します。「右側に人物、左側は文字を置ける落ち着いた空間、背景の細部は少なめ」のように、画像を配置するUIまでpromptに含めるのが出発点です。生成画像に見出しを焼き込まず、HTML上の文字と分けて扱います。

画像より先にHeroの役割を決める

Heroに必要なのは、ページのテーマを補い、見出しを読みやすくし、次の行動を邪魔しない視覚素材です。画像の制作前に次をメモしてください。

• desktopの画像領域とmobileの高さ

• copyの位置、行数、CTAの位置

• 画像内で主役にするもの

• 文字と主役の重なりを許容できる範囲

• 最小画面幅で残したい要素

• 背景色と文字色のコントラスト条件

この情報がないと、完成後に画像を選ぶのかlayoutを変えるのか判断できません。Heroが記事の雰囲気を伝えるだけなのか、商品を見せるのか、サービスの利用場面を説明するのかも区別します。販売ページの素材なら商品そのものの形や色、ブランドの正確性を生成結果だけに任せないでください。

layoutから構図を作る

まず一案だけlayoutを選びます。左copy＋右visualなら主役を右へ寄せ、中央配置なら周囲に均等な余白を作ります。背景全面に画像を置く場合は、文字の後ろに細部が集まらないよう、画像の明暗や色の密度を意識します。

promptの骨組みは次の通りです。

> [Webページの役割]、[主役]、[主役の位置]、[文字用の空間]、[背景の情報量]、[光と色]、[使う画面比率]

例：「新しいノートアプリの紹介ページ、机の上のノートPCと手帳、主役は画面右側、左半分はcopy用に明るく落ち着いた余白、自然な窓光、低彩度、横長のWeb Hero」。ここでは装飾語より、配置・余白・背景密度が中心です。出力後にコピーを重ねるため、空白が単なる空白でなく文字を読める場所になっているかを確認します。

画面上で守る領域を決める

生成した画像をそのままbackgroundに設定すると、端がresponsive cropで切れます。主役、商品、顔、文字を入れたい領域を分け、各画面サイズでどこが残る必要があるか決めます。重要要素は端ぎりぎりに置かず、中央寄りのsafe areaに収めます。背景に余白があるだけでは、スマートフォンでも同じ余白が残るとは限りません。

表は横にスクロールできます

layout	desktopでの条件	mobileでの条件
左copy＋右visual	主役を右側、copy側の情報量を抑える	crop後も顔や商品が中央のsafe areaに残る
中央copy	copyの背後を低コントラストにする	copyが増えても主役と重ならない
全面background	暗幕やgradientを含め可読性を見る	高さとcrop位置を別設定できるか確認
商品中心	商品の輪郭・色を見せる	商品が小さくならず切れない

素材の比率はページの実表示領域と合わせてください。正方形を横長Heroに無理に切り抜くと、主役の位置を調整する範囲が少なくなります。1枚でdesktopとmobileの両方を満たせない場合は、複数cropやdevice別画像を用意する設計も検討します。これは生成モデルの設定だけで解決する問題ではなく、Web実装側の選択です。

Image PromptとStyle Referenceの役割

MidjourneyのImage Promptは、参考画像を新しい生成の手がかりにする機能です。手描きwireframeや既存の構図を参考にしたい場合に候補ですが、元画像と同じlayoutや内容を正確に複製する保証ではありません。Style Referenceは色、medium、texture、lightingなどの雰囲気を揃える用途です。レイアウト参照とブランドトーン参照を一つの画像に任せない方が、意図を整理できます。

参照画像を使う際は、利用権限と機密性も確認します。顧客の画面、社外秘のwireframe、許諾のない人物写真をreferenceとしてアップロードしないでください。既存素材を使う理由がstyleだけなら、必要部分だけを切り出すか、権利処理済みの資料を使います。model・機能の互換性は更新されるので、制作時点のMidjourney公式Docsで確認します。

まずは使ってみる

記事の文脈に合うToolへ進めます。報酬の有無で見た目は変えていません。

• 

  Midjourney

  公式サイトを見るTool詳細を見る

出力は仮配置してから選ぶ

複数の候補を画像単体で並べるだけでなく、実際の見出し、説明文、ボタンを仮配置します。文字の可読性を確認し、copyが画像の主役を隠していないか、画像がCTAより目立っていないかを見ます。ブランドカラーを使う場合は、画像の色がボタンやロゴと衝突しないかも確認します。

desktopで選んだ一枚をmobileへ縮めるだけで済ませず、幅390px程度のviewportで実際のcropを見ます。そこで顔が切れる、商品の輪郭が消える、文字の背後が複雑になる場合は、CSSのobject-positionやbackground-positionを調整できる余白があるか確認します。素材の構図を直す必要がある場合はpromptを戻します。

よくある失敗と切り分け

• 文字を置く場所があっても読めない：空間の色や明暗が文字色と近い場合があります。空白の大きさだけでなくコントラストを確かめます。

• 主役がCTAへ視線を向けない：主役の位置・視線とcopyの配置を見直します。ただし視線誘導の効果を実測していないなら、成果を断定しません。

• desktopはよいがmobileで切れる：画像比率、主役位置、crop設定のいずれが原因か分けて確認します。

• 画像がコピーより強い：背景のコントラスト、色数、detail、overlayを調整します。

• 生成画像に文字やロゴ風の形がある：そのまま採用せず、生成し直すか画像編集で処理し、商標やブランド表現の正確性は正規素材と照合します。

• 何を変えればよいか分からない：layout・prompt・cropを一度に変えず、表示上の問題を一つ決めて修正します。

公開前の受け入れチェック

以下を実際のページに重ねて確認します。画像単体の美しさでは合格にしません。

1. H1を画像上または隣に置いても読める

2. CTAの周囲に十分な視認性がある

3. desktopとmobileの両方で主役が残る

4. 画像内に重要なコピーや価格を埋め込んでいない

5. 商品・人物・ブランドの事実を誤って表現していない

6. alt textが画像の役割を説明し、装飾画像なら適切に扱われる

7. 画像のサイズと形式がページ表示を過度に遅くしない

8. copyやlayout変更後も同じ画像を使えるか再確認した

アクセシビリティとSEO上の代替テキストは、画像の役割に合わせて編集者が作ります。画像生成promptをそのままaltにする必要はありません。背景画像が情報を伝えない装飾なら、本文の意味を重複させない扱いを検討します。

デザイン担当へ渡す素材メモ

画像だけを渡すと、配置の意図が失われ、別の画面幅で主役や余白がずれることがあります。納品フォルダには、採用画像、元の高解像度ファイル、用途と推奨crop、文字を置く範囲、注意点を添えてください。promptを共有する場合も、機密情報や権利処理されていないreference URLが含まれていないか確認します。

仕様メモの例：

• 用途：サービス紹介ページのdesktop Hero

• 主役：画面右側のノートPCと手帳

• copy領域：左側。見出し2行とCTAを置く

• mobile：中央寄りにcropし、PCの画面が切れない

• 禁止事項：画像内の文字、ロゴ、実在製品の不正確な表示

• 検査：1440pxと390pxで仮配置後に確認

この記録があれば、画像が合わないときにpromptだけを責めず、ページlayoutやcropの条件も見直せます。

読み上げや文字情報が画像にしか含まれない状態も避けます。見出し、価格、CTA、注意書きは実際のページ上のテキストとして配置し、画像はその内容を補助する役割にします。コピーが長くなった場合は画像を無理に縮めず、Heroの高さやレイアウトを見直します。背景と文字のコントラストは、最小幅だけでなく文字サイズを変えた状態でも確認してください。

AIものさしの判断

Web用Hero画像は、生成段階だけで完成を決めず、実際のUIへ置いた後に判断します。画像を作る前にcopy位置とresponsive cropを定義し、必要ならdesktop / mobile別に素材を分ける。文字はHTMLとして保持し、商品の正確性や権利は別の確認工程に残す。この順序が、画像をページの目的へ合わせるための実務的な方法です。

次の行動は、ページのwireframeへ仮の見出しとCTAを載せ、空間・主役・cropの条件を短く書き出すことです。その条件でpromptを作れば、生成結果を「好きか」だけでなく「このページの役割を果たすか」で選べます。