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

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

Sentinel AIはAI・SaaSプロダクト向けのヒーローセクションの作り方を一つ示し、それを生んだ手順も公開している。見出しは「We implement security correctly」で、ヒーローセクションの残りはその周りに配置されている。カラースキームは黒 #000000の下地、くすんだのグリーン #8EB992のアクセントで、ページはSoraで組む。納品物はReactとTailwind CSSで、800x594で記録しているため、コードを書く前に枠が決まっている。モーションの予算は0.7sのトランジション、cubic-bezier(0.16, 1, 0.3, 1)。書いている間は開いておく。5,940文字のブリーフが、自社ページにそのまま持ち込める部分。

対象

見出しをSentinel AIと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。
ブランドの色が2色あるなら、マーケターはどちらが#8EB992の役割を担い、どちらが#000000の役割を担うかを決めろ。
チームがすでにデザインシステムを運用しているなら、このヒーローセクションは唯一の高彩度色を#8EB992に使うべき根拠になる。

含まれる内容

ドロワーを持たない一行. この行はコントラストを#8EB992の操作1か所だけに使い、ワードマークとリンクは文字色に退く。タブレットのブレイクポイントを下回ると、モバイル用のオーバーレイに切り替わります。リンクはワードマークより小さいサイズで組み、#8EB992の操作だけがバーの中で重みを持つ要素です。
明記された余白の刻み. 寸法は800x594のレンダリングから読み取った（20px刻みの余白、0.7sのトランジション、cubic-bezier(0.16, 1, 0.3, 1)のイージング）。リストは短く、確認者は要素ごとに突き合わせられる。レイアウトと一緒に数値も持っていく。
書体が決める階層. Soraに仕事を任せ、見出しから補助コピーへサイズを大きく落とし、サイズが大きくなるほど字間を詰めています。階層を担うのは色ではなく文字です。書体は固定サイズと組になっています。ディスプレイの行とインターフェースの文字が同じ体系に留まるのはそのためです。
カードの壁ではなくリスト. 各項目は#8EB992のマーカーが付いた1行のテキストで、リストはマーケティング用のパネルではなく仕様書として読めます。コピーが許す限り、各行は1行に収めます。

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

時間も仕様に書く

コントロールは0.7sで変化し終えるので、触れられた時点でページが応答し、反応が遅れて見えることはない。イージングは再生時間と一緒に指定されている（0.7s）ので、作り直しの際に別の感触へ黙って差し替わることはない。

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

ポインターまわりの処理は小さく、仕様に書かれている。すべてのカードではなくボタンとリンクのホバー状態を、もともと操作できそうに見える要素にだけ適用する。押下状態もホバーと同様に指定されているので、タップでもクリックと同じ確認が返る。ポインターの効果はコントロールに留める。この参考は800x594で収録しました。

Sentinel AIを仕様として読む

このヒーローセクションは目分量ではなく寸法で決まっている。20px刻みの余白、0.7sのトランジションはブリーフから来ており、レイアウトはその段階に合わせて組み、勘で寄せていない。このヒーローセクションに、初期値任せの部分はない。

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

自社のコピーをこのヒーローセクションに入れても順序は保たれる。要素が交換可能ではないからだ。ナビゲーション、数値の行、機能リストはそれぞれ1つの役割を担う。 SaaSの読み手は、選択肢より先に訴求を受け取る。この参考は800x594で収録しました。

このヒーローセクションが立てる主張

テンプレートのヒーローと比べると、違いは引かれているものにある。カードグリッドもカルーセルも第二のCTAもなく、ナビゲーション、数値の行、機能リストだけが20px刻みの余白、0.7sのトランジションに合わせて寸法を取る。 Sentinel AIは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。