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

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

Visual HeroはAI・SaaSプロダクト向けの実用的な参考だ。ヒーローセクションはすでに配置され、寸法も測られ、いつでも作り直せる。ページ自身の見出しは「Forma's AI understands context, composition, and style like a creative director would」で、構図はその言葉をそのまま中心に組まれている。タイポグラフィはInstrument Serifで、文字サイズはスケールに委ねずブリーフが固定している。納品物はReactとTailwind CSSで、996x720で記録しているため、コードを書く前に枠が決まっている。結局、動きはループする動画の下地に尽きる。書いている間は開いておく。8,275文字のブリーフが、自社ページにそのまま持ち込める部分。

対象

モーションを外さざるを得ないなら、このヒーローセクションは50px刻みの余白が階層を担ったまま読める。
このヒーローセクションは、SaaSのコピーが6.9sのループ映像を支えられる証拠を1画面分必要とする創業者に応える。
見出しをVisual Heroと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。

含まれる内容

一行に収めたナビゲーション. ナビゲーションは1行だけで、下に第2階層を持たない。バーは独自の背景を持たずに996x720の構図の上に載るため、その下のメディアは端から端まで届きます。リンクは4〜5本に抑えてください。その本数に合わせて行のサイズが決まっています。
文字と画幅で1つの尺度. ブリーフは数値を名指ししています（50px刻みの余白）。書体とフレームの間に勝手な余白の段階がないからこそ、構図はまとまります。リストは短く、確認者は要素ごとに突き合わせられる。数値がデザインで、残りは配置にすぎません。
1つずつ役割を持つ書体. 最上位の文字はInstrument Serifで、補助コピーはそれよりずっと小さく落とす。階層は色に頼らず読める。 UIテキストは1つの書体に固定し、同じサイズで2つの声が混ざらない。
ループが背景になる. ブリーフは動画を996x720、ループを6.9sと指定し、すべてのテキスト要素はその画幅に合わせて置かれる。ループは6.9sと短く、目にはタイムラインではなくテクスチャとして映ります。

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

基準はタイマーではなく位置

効果は完成したレイアウトの上に乗るだけで、レイアウトを生成はしない。だから背景のレイヤーが前景と違う速度で動くを切ってもページは読める。位置に紐づいているので、どの訪問でも同じ結果になる。この参考は996x720で収録しました。

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

環境の動きは6.9秒の映像1本を996x720で使うだけ。ポインターに反応させず、コピーの背後で静かにループさせる。映像が短いので切れ目なくループでき、解像度よりもその点が効く。

Visual Heroを仕様として読む

余白を好みと呼ぶテンプレートと比べる。ここでは同じ値に名前が付いている（50px刻みの余白）ので、編集はそれを守るか、構成を目に見えて壊すかのどちらかになる。このヒーローセクションに、初期値任せの部分はない。

ヒーローセクションの背後にある順序

厳密な順序は、後から自由度を奪う。ファーストビューにセクションを足すなら50px刻みの余白を切り直す必要がある。順序が装飾ではなく構造を支えているからだ。 SaaSの読み手は、選択肢より先に訴求を受け取る。

AI・SaaSプロダクトがここで得るもの

テンプレートがファーストビューをモジュールで埋めるのに対し、このヒーローセクションはナビゲーション、お知らせのピル、数値の行、背景のクリップで止める。差は50px刻みの余白に出る。空白を埋めるための余白はない。 Visual Heroは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。