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

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

Securify Data SecurityはAI・SaaSプロダクト向けの実用的な参考だ。ヒーローセクションはすでに配置され、寸法も測られ、いつでも作り直せる。色は深いのブルー #01090Eの下地、白 #FFFFFFの文字に限り、Readex Proで組んでいる。納品物はReactとTailwind CSSで、800x551で記録しているため、コードを書く前に枠が決まっている。 AI・SaaSのヒーローセクションが、デザインを変えずにコピー変更へ耐える必要があるとき最も効く。収録したプロンプトは800x551で記録したので、このページで引用する値はすべてそこにたどれる。以下に引用する値はすべてこのブリーフのもので、800x551の枠から最小の余白ステップまで含む。

対象

モーションを外さざるを得ないなら、このヒーローセクションは15pxで固定した表示サイズ、240px刻みの余白が階層を担ったまま読める。
見出しをSecurify Data Securityと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。
ヒーローセクションをモデルに指示する人は、3,822文字のプロンプトを出発点に使う。

含まれる内容

意図的に細いナビゲーション. 細いバーをヒーローセクションの上に重ね、左にワードマーク、リンクはReadex Proで組みます。そのため構図はコンテンツが先、装飾は後に読めます。バーは独自の背景を持たずに800x551の構図の上に載るため、その下のメディアは端から端まで届きます。
ブリーフに直書きされたサイズ. 値そのものが仕様です。15pxで固定した表示サイズ、240px刻みの余白は800x551での収録値で、スクリーンショットから推測したものではありません。余白は文字と同じ単位で書かれ、そのまま比較できる。差し替えるのは書体かコピーで、スケールではありません。
規律をもって使う1書体. 書体はサイズと一緒に書いてある（Readex Pro、15px）。タイポグラフィが別の実装にも持ち運べるのはそのためだ。サイズが大きくなるほど字間を詰めるため、15pxの範囲でディスプレイの行がまとまります。
お知らせのピル. バッジは1つ、メッセージも1つ。ピルは見出しの上にReadex Proの最小段階で置き、その位置を争う要素はほかにありません。お知らせは1件だけです。バッジがニュースらしく見えるのはそのためです。見出しの上に置き、横には決して置かないでください。

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

反応はコントロールに返す

ポインターまわりの処理は小さく、仕様に書かれている。すべてのカードではなくボタンとリンクのホバー状態を、もともと操作できそうに見える要素にだけ適用する。操作要素はタップできる大きさで、ポインターの扱いは全体で揃っている。タッチ端末で状態を確認する。この参考は800x551で収録しました。

静止も設計

仕様はアニメーションを省き、800x551のレイアウトにページを任せる。変わるのはホバーと押下の状態だけだ。構図は静止したままなので、ページを支えるのは階層であり、それは成立している。

ヒーローセクションを自社のものにする

テーマが部品を渡すのに対し、このブリーフは構成を渡す。15pxで固定した表示サイズ、240px刻みの余白とメディア枠、そして主題は自社に委ねられる。再利用できるのは構図のほうで、別のブランドでもそのまま成立します。

SaaSのブリーフが効く理由

引き算は、ファーストビューに実績を置く余地を削る。このブリーフはそのコストを受け入れ、最初の画面を訴求に使う。15pxで固定した表示サイズ、240px刻みの余白を固定してあるので、実績セクションは下に足しても作り直しにならない。 SaaSの読み手に、訴求へ至る最短の正直な道を示す。

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

ブリーフは3,822文字で、読み順を明示している。ナビゲーション、見出し、お知らせのピル、数値の行、背景のクリップをこの順に並べ、その間の距離を15pxで固定した表示サイズ、240px刻みの余白で決めている。順序を入れ替えれば、この距離も意味を失う。 SaaSの読み手は、選択肢より先に訴求を受け取る。