このテンプレートについて
Cybersecurity Heroは、AI・SaaSプロダクトがヒーローセクションで抱える課題を記録済みのブリーフ1本で解く。カラースキームは#0A0A0Fの下地、ティント #B04090のアクセントで、ページはInterで組む。この項目は、ページを生んだ技術スタック（ReactとTailwind CSS）を隠さずに書いている。ブリーフはモーションの予算を300msのトランジション、cubic-bezier(0.4, 0, 0.2, 1)に使う。書いている間は開いておく。11,920文字のブリーフが、自社ページにそのまま持ち込める部分。
対象
- 制作の仕様を書き、批判的に検討する材料として440pxのブレイクポイントを探しているStudioのチーム。
- 引き継ぎメモに640x472のフレームを書け。次のビルドがページから導き直さずに済む。
- 見出しをCybersecurity Heroと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。
含まれる内容
- 意図的に細いナビゲーション. バーに載るのはワードマーク、セクションのリンク、#B04090のボタン1つだけです。12px刻みの余白、300msのトランジションで測られているため、第二のヘッダーに膨らむことはありません。ラベルは440pxで1行に収まる長さで、現在の項目はピルではなくウェイトで示します。
- 1つずつ役割を持つ書体. ここではタイポグラフィがスタイルの仕組みです。ディスプレイサイズのInter、インターフェース全体で同じ書体、そして仕事を引き受ける第二のアクセントカラーはありません。キャプションの刻みは、図の下に置いてもページのリズムを変えない大きさだ。
- 主張ではなくクライアントの行. クライアントのマークは下端に沿って低いコントラストで、ブリーフ最小の段階で並びます。ヒーローセクションのテクスチャとして読め、見出しと競うことはありません。マークは低いコントラストで置くため、主張ではなくテクスチャとして読めます。低コントラスト、小さめのサイズ、見出しなし。この参考は640x472で収録しました。
- 刻みを名指しするブリーフ. ブリーフは角丸20px、12px刻みの余白、300msのトランジション、cubic-bezier(0.4, 0, 0.2, 1)のイージングを固定し、残りは配置に任せる。ひとりでに段数が増えるスケールとは逆の発想だ。ブリーフは比率ではなく値を示すため、コピーの長さが変わっても構図の関係は保たれます。ページを持ち込むときも、名指しされた値はそのまま使ってください。
モーションとインタラクション
コントロールは共通の時間
仕様では状態変化ごとに時間が指定されている。トランジションは300ms、cubic-bezier(0.4, 0, 0.2, 1)を使い前後に落ち着く。ブラウザの初期値のままの箇所はなく、だからこそページは動かされているのではなく設計されているように感じられる。フォーカス状態もホバーと同じ値で時間を指定するので、キーボードとポインターの反応が一致する。
ホバーは意味のある場所だけに
ここでのインタラクションは各コントロールの内側で完結する（すべてのカードではなくボタンとリンクのホバー状態）。ページのほかの部分が巻き添えで動くことはない。操作できそうに見えるコントロールは実際に反応するので、偽のアフォーダンスがない。この参考は640x472で収録しました。
このヒーローセクションが立てる主張
このデザインは1画面で主張を完結させる。メディアは640x472の静止画だ。雰囲気はメディアが、訴求はコピーが担い、両者を分けているのが角丸20px、12px刻みの余白。 Cybersecurity Heroは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。
Cybersecurity Heroの最初の読みの順序
このページには意図された順番がある。ナビゲーションはプロダクトを提示し、再訪した読者に見慣れた導線を与える。見出しが表示サイズを取り、支える一行が提供内容を説明し、ティント #B04090のアクセントが主操作を示すので、次の一手が分からなくなることはない。ほかに競合するものはない。最初の判断より前にカードのグリッドは置かれず、それによってSaaSの案件でもヒーローセクションが重く感じられない。 SaaSの読み手は、選択肢より先に訴求を受け取る。
ヒーローセクションを支えるタイミング
タイミングは最初から明示されている。300msのトランジション、ホバー状態と押下状態。すべてが勘ではなく、ブリーフに数値として書き込まれている。このヒーローセクションで、動くために動く要素はない。
よくある質問（FAQ）
Cybersecurity Heroの土台になっているプロンプトはどれくらいの長さですか？
収録されたブリーフは11,920文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
この項目にReactとTailwind CSSが書かれているのはなぜですか？
Cybersecurity HeroはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Cybersecurity Heroのトランジションを残したまま、時間だけ変えることはできますか？
登場の動きと状態変化は300msの範囲に収まります、cubic-bezier(0.4, 0, 0.2, 1)を使い。スクロールライブラリではなく状態変化を起点に動き、コピーを待たせることもありません。
