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

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

GlobalBankは、AI・SaaSプロダクトがヒーローセクションで抱える課題を記録済みのブリーフ1本で解く。見出しは「Think Ahead. Move Fast. Exceed Expectations」で、ヒーローセクションの残りはその周りに配置されている。色は白 #FFFFFFの下地、深いのグリーン #1A2E24の文字、グリーン #22C55Eのアクセントに限り、Interで組んでいる。納品物は自己完結したHTMLファイル1つで、1468x1080で記録しているため、コードを書く前に枠が決まっている。モーションは4.1sのトランジション、ループする動画の下地に限っている。書いている間は開いておく。31,093文字のブリーフが、自社ページにそのまま持ち込める部分。

対象

このヒーローセクションを引き継ぐ外部チームには、最初のコミット前に自己完結したHTMLファイル1つをリポジトリへ固定する必要がある。
このヒーローセクションにブロックを足していく社内チームには、14px〜46pxの可変型サイズ、14px刻みの余白を変えずに新しいブロックへ引き継ぐ必要がある。
このページは、自己完結したHTMLファイル1つでAI・SaaSプロダクトヒーローセクションを組み直し、見た目の裏にある数値を探すフロントエンド開発者に応える。

含まれる内容

意図的に細いナビゲーション. ワードマーク、リンク、#22C55Eの操作が同じベースラインを共有する。細い一行が偶然の産物に見えないのはそのためだ。リンクはワードマークより小さいサイズで組み、#22C55Eの操作だけがバーの中で重みを持つ要素です。ワードマークには文字が必要とする以上の幅を与えない。
実装まで持ち込む数値. ブリーフは14px〜46pxの可変型サイズ、14px刻みの余白、4.1sのトランジションを固定し、残りは配置に任せる。ひとりでに段数が増えるスケールとは逆の発想だ。各値は文字サイズの刻み、余白、角丸、トランジションのいずれか1つの役割に対応する。
雰囲気を担うメディア1つ. 雰囲気を作るのは1468x1080の4.9sクリップです。ブリーフはトリミングを固定し、その上の文字には手を加えていません。1468x1080以上で書き出せば、coverの切り抜きはそのまま機能する。
1書体、2つの役割. 書体はサイズと一緒に書いてある（Inter、14–46px）。タイポグラフィが別の実装にも持ち運べるのはそのためだ。サイズが大きくなるほど字間を詰めるため、14–46pxの範囲でディスプレイの行がまとまります。

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

時間はブリーフ由来

ブリーフはトランジションの値を4.1sに固定しているので、作り直すときに遅い既定値で代用できない。イージングは再生時間と一緒に指定されている（4.1s）ので、作り直しの際に別の感触へ黙って差し替わることはない。

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

環境の動きは4.9秒の映像1本を1468x1080で使うだけ。ポインターに反応させず、コピーの背後で静かにループさせる。映像はミュートかつインラインなので、操作なしで最初のフレームが出る。

ヒーローセクションを支えるタイミング

値ではなくパターンを真似たい。4.1sのトランジション、4.9sのメディアループ、一語ずつ現れる見出しの組み立ては保ち、持続時間だけ自社ブランドの数値に置き換える。このヒーローセクションで、動くために動く要素はない。

GlobalBankの最初の読みの順序

注意は散らばらず、導かれる。「Think Ahead. Move Fast. Exceed Expectations」が最初のフレームからその役割を担っている。視線はまず表示サイズの一行に落ち、次に支えるコピー、最後に操作へ向かう。その順番が設計そのものである。 SaaSの読み手は、選択肢より先に訴求を受け取る。