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

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

Scene AIは、AI・SaaSプロダクトがヒーローセクションで抱える課題を記録済みのブリーフ1本で解く。「Create awesome 3D scenes with AI」で始まり、その一行をカードに縮めず、フレームいっぱいに置いている。配色は黒 #000000の下地、白 #EBEAD0の文字で、書体はInter。納品形式はTailwind CSSなので、ヒーローセクション全体をデザインの引き継ぎなしにプロジェクトへ持ち込める。結局、動きはループする動画の下地に尽きる。初見用ではなく、作り直しに耐えるAI・SaaSプロダクトのヒーローセクションのブリーフとして扱う。収録したプロンプトは2056x1476で記録したので、このページで引用する値はすべてそこにたどれる。

対象

このヒーローセクションは、SaaSのコピーが8sのループ映像を支えられる証拠を1画面分必要とする創業者に応える。
ヒーローセクションをモデルに指示する人は、2,425文字のプロンプトを出発点に使う。
見出しをScene AIと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。

含まれる内容

意図的に細いナビゲーション. ワードマークが左端を押さえ、その右にリンクが並ぶ。すべてInterで組んであり、バーは別系統ではなく下のページに属して見える。バーは独自の背景を持たずに2056x1476の構図の上に載るため、その下のメディアは端から端まで届きます。
イラストではなくクリップ. クリップは2056x1476で8s再生し、継ぎ目が見えないままループする。映像ではなく表面として読める。ループは8sと短く、目にはタイムラインではなくテクスチャとして映ります。書き出しは2056x1476以上にして、トリミングを正確に保ってください。
語るのは大見出しのサイズ. 最上位の文字はInterで、補助コピーはそれよりずっと小さく落とす。階層は色に頼らず読める。大見出し用の書体は1つのサイズでのみ使い、それ自体と競合しない。
ファーストビューに置く根拠. 数値の行が根拠になります。1行に3〜4つの数字、その下に小さなラベル、インターフェースと同じInterで組むため、装飾ではなくデータとして読めます。ラベルは1つのサイズで組み、長いラベルでも行の高さが変わらない。数字を枠で囲まない。

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

反応するのは操作要素

ここでのインタラクションは各コントロールの内側で完結する（すべてのカードではなくボタンとリンクのホバー状態）。ページのほかの部分が巻き添えで動くことはない。各状態が変えるプロパティは1つなので、フィードバックが読み取りやすい。この参考は2056x1476で収録しました。

スクロールライブラリなしの環境モーション

環境の動きは8秒の映像1本を2056x1476で使うだけ。ポインターに反応させず、コピーの背後で静かにループさせる。ループはcoverで切り出しており、構図は特定のフレームサイズに依存しない。

Scene AIで最初に変えるもの

自社の配色が重いなら、決める前に枠に当てて検証する。ページを支えるのは黒 #000000なので、暗いアクセントには参考例より強いコントラストが要る。自社のアクセントも、参考例のアクセントと同じコントラスト検証を通過する必要がある。

Scene AIを仕様として読む

多くの参考例は結果だけを見せ、数値は伏せる。これは逆で、2056x1476のフレームをページと並べて公開する。結果を近似ではなく再現できるようにするためだ。このヒーローセクションに、初期値任せの部分はない。

このヒーローセクションが正しい理由

主張は見出しサイズで一度だけ出す。ページは「Create awesome 3D scenes with AI」と明言している。ヒーローセクションの残りはすべてその一行を軸に並ぶ。ナビゲーション、お知らせのピル、数値の行、背景のクリップ、フッターが続き、最初の読みで競合する第二の約束はない。 SaaSの読み手に、訴求へ至る最短の正直な道を示す。