AlertixのAI・SaaSヒーローセクションデザインとプロンプト

このテンプレートについて

Alertixは1932x1400で記録し、ギャラリー用の画像ではなく仕様として残した。見出しは「Stay Ahead With *Cutting-Edge*」で、ヒーローセクションの残りはその周りに配置されている。配色は深いのブルー #0A0F14の下地、くすんだのティール #C3DFE8の文字、ブルー #1D1D6Dのアクセント。納品物はReactとTailwind CSSで、1932x1400で記録しているため、コードを書く前に枠が決まっている。ブリーフはモーションの予算をループする動画の下地に使う。最初の画面で意図が伝わる必要があるAI・SaaSプロダクトのヒーローセクションには、この参考が適している。以下に引用する値はすべてこのブリーフのもので、1932x1400の枠から最小の余白ステップまで含む。

対象

AI・SaaSプロダクトのヒーローセクションを作るチームで、スクリーンショットを写すのではなく実測値（120px刻みの余白）を求めている。
プロダクトマーケターで、コピーの背後に7.9sのループ映像があってもヒーローセクションが読める状態を保ちたい。
ヒーローセクションをモデルに指示する人は、3,245文字のプロンプトを出発点に使う。

含まれる内容

邪魔にならないナビゲーションバー. 上段に載るのはワードマーク、4〜5本のリンク、#1D1D6Dに染めた操作1つで、ページのほかの部分に対して静かに見えるサイズに抑えています。タブレットのブレイクポイントを下回ると、モバイル用のオーバーレイに切り替わります。リンクはワードマークより小さいサイズで組み、#1D1D6Dの操作だけがバーの中で重みを持つ要素です。
ビューポート基準の計測. 寸法は1932x1400のレンダリングから読み取った（120px刻みの余白）。値が固定されているので、差し替えてもリズムは変わらず見た目だけが変わる。
最下層に置く動画. 1932x1400の画幅は1本のループで埋まる。コピーの後ろで再生し、操作系を必要としない。自動再生が使えないときは1932x1400のポスター画像が構図を保つため、レイアウトが崩れることはありません。書き出しは1932x1400以上にして、トリミングを正確に保ってください。
装飾のための色は置かない. アクセントはブルー #1D1D6Dの1色だけで、深いのブルー #0A0F14と対になります。残りの仕事は第二の色ではなく文字が担います。ほかはすべて深いのブルー #0A0F14の上にあり、彩度の高い配色でも読めるのはそのためです。

モーションとインタラクション

ループが環境演出を担う

7.9秒の映像1本が環境レイヤーのすべてで、コピーの背後で再生され、切れ目なくループし、ポインターには反応しない。ループはcoverで切り出しており、構図は特定のフレームサイズに依存しない。この参考は1932x1400で収録しました。

ポインター状態以外は何もしない

インタラクティブな層は意図的に小さい（すべてのカードではなくボタンとリンクのホバー状態）。状態の色はコンポーネントの既定値ではなく、ページ自身の配色から取る。この参考は1932x1400で収録しました。

Alertixで最初に変えるもの

新しいコピーは、ブリーフが指定する見出しサイズ（120px刻みの余白）で組む。残りのスケールはデザインを変えずに追随する。構成より差し替えのほうが安い。それがこの参考例の狙いだ。

ヒーローセクションの再配置

ここでのレスポンシブは、尺度が変わり順序が変わらないこと。ナビゲーションはモバイルメニューに畳まれる。読み順はブリーフが置いた位置にとどまる。操作部はタップできる大きさを保ち、コピーはどの幅でも読む順番を維持します。この参考は1932x1400で収録しました。

Alertixの最初の読みの順序

マーケティングページが折り返しの下に実績を積んで期待するのに対し、このヒーローセクションはナビゲーション、背景のクリップを読み手の前に出し、残りは引いておく。 SaaSの読み手は、選択肢より先に訴求を受け取る。この参考は1932x1400で収録しました。

よくある質問（FAQ）

Alertixの土台になっているプロンプトはどれくらいの長さですか？

気分を書いた説明ではなく、制作のための仕様です。1932x1400のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。

Alertixを作り直すのにReactとTailwind CSSは必要ですか？

AlertixはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。

Alertixの素材はクライアント案件でどう扱えばよいですか？

ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は1932x1400で収録しました。