このテンプレートについて
これはVaultShieldのヒーローセクションを、スクリーンショットとしてではなく、それを生んだブリーフとともに公開したもの。色はグレー #CFC8C5の下地、シェード #192837の文字、シェード #7342E2のアクセントに限り、Helvetica Now Displayで組んでいる。この項目は、ページを生んだ技術スタック（ReactとTailwind CSS）を隠さずに書いている。ブリーフはモーションの予算を0.45sのトランジションに使う。書いている間は開いておく。4,734文字のブリーフが、自社ページにそのまま持ち込める部分。
対象
- フィンテックプロダクトヒーローセクションの外観を差し替えるグロース担当は、訴求コピーを変えても640x468の画角を保ちたい。
- 1回ごとの精算で進め、初回の前に100vhのセクション、24px刻みの余白を合意しておきたい制作会社のために作った。
- 見出しをVaultShieldと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。
含まれる内容
- 操作1つだけの上段. バーは構図の中で最も静かな部分です。ワードマーク、短いリンク列、#7342E2の操作1つを、ブリーフで最小のタイプ段階に収めています。560px以下では、リンクは2行目に折り返さず折りたたむ。
- 幅ごとに定義された挙動. 幅の変化は文字自体で処理します。72px〜24pxのクランプが見出しをスマートフォンからデスクトップまで運び、モバイル専用の構図を必要としません。ビューポートが狭くなっても、文字はサイズが変わるだけで役割は変わりません。階層は保ち、スケールを変えてください。
- 役割が明確な2書体. このトーンを作っているのはブリーフのサイズ段階とトラッキングです。詰めたディスプレイサイズのHelvetica Now Displayがあり、そこから補助コピーへはっきり落とします。大見出し用の書体は1つのサイズでのみ使い、それ自体と競合しない。スケールは明記されています。それを使ってください。
- 明記された余白の刻み. レイアウトは固定値（100vhのセクション、24px刻みの余白、0.45sのトランジション、560pxのブレイクポイント）を基準に決めているため、どの幅でもファーストビューの構図が保たれます。ブリーフは比率ではなく値を示すため、コピーの長さが変わっても構図の関係は保たれます。
モーションとインタラクション
短く揃えた時間
モーションはミリ秒単位で測る。0.45s。これがアニメーションの予算のすべてで、スクロールのタイムラインではなく状態変化に使う。イージングは再生時間と一緒に指定されている（0.45s）ので、作り直しの際に別の感触へ黙って差し替わることはない。
反応するのは操作要素
インタラクティブな層は小さく予測可能だ（すべてのカードではなくボタンとリンクのホバー状態）。ほかは静止したままで、構図への集中が保たれる。インタラクティブな状態はレイアウトを動かさないので、ポインターの下で何かが跳ねることはない。この参考は640x468で収録しました。
ヒーローセクションを自社のものにする
多くの人はアクセントカラーから始める。代わりに訴求から始める。見出しの一行を書き換え、シェード #7342E2を自社のメディアで検証し直す。メディアのトリミングは守る。書体と同じだけ働いている。
VaultShieldを仕様として読む
開発者に渡すなら、役に立つ成果物はブリーフだ。100vhのセクション、24px刻みの余白、0.45sのトランジション、560pxのブレイクポイントを明記しており、2人の間で解釈する余地を残さない。このヒーローセクションに、初期値任せの部分はない。
VaultShieldの最初の読みの順序
ブリーフは4,734文字で、読み順を明示している。ナビゲーション、数値の行、機能リスト、背景のクリップをこの順に並べ、その間の距離を100vhのセクション、24px刻みの余白で決めている。順序を入れ替えれば、この距離も意味を失う。フィンテックの読み手は、選択肢より先に訴求を受け取る。
よくある質問（FAQ）
VaultShieldの背後のブリーフには、実際に何が入っていますか？
収録されたブリーフは4,734文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
VaultShieldを作り直すのにReactとTailwind CSSは必要ですか？
VaultShieldはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
VaultShieldのトランジションを残したまま、時間だけ変えることはできますか？
モーションはレイアウトと同じ粒度で指定されています。状態変化は0.45sの範囲で収束します。先に構成を移植し、タイミングは後から合わせると、レイアウトが固まっている分だけ合わせやすくなります。
