このテンプレートについて
VEX Venturesは書き下ろされたブリーフ1本から組んだフィンテックのヒーローセクションで、このページはそのブリーフを記録している。見出しは「We back visionaries and craft ventures that define what comes next」で、ヒーローセクションの残りはその周りに配置されている。ページはInterで組み、サイズはブリーフで固定している。納品物はReactとTailwind CSSで、800x603で記録しているため、コードを書く前に枠が決まっている。モーションは1000msのトランジションに限っている。最初の画面で意図が伝わる必要があるフィンテックプロダクトのヒーローセクションには、この参考が適している。
対象
- 見出しをVEX Venturesと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。
- 書体がInterでないなら、フロントエンド開発者は見出しを再計測してから入場のタイミングを組み直せ。
- 公開が迫っているなら、800x603の画角と1000msの入場だけを持っていけ。残りの構成には触るな。
含まれる内容
- 余分を持たないバー. 細いバーをヒーローセクションの上に重ね、左にワードマーク、リンクはInterで組みます。そのため構図はコンテンツが先、装飾は後に読めます。バーは独自の背景を持たずに800x603の構図の上に載るため、その下のメディアは端から端まで届きます。
- 実装まで持ち込む数値. レイアウトに勘で決める部分はない。ブリーフが18px刻みの余白、1000msのトランジションを明記し、実装はその値に合わせる。これらの数値に合わせて再現すれば、追加調整なしで参考例に近づく。
- 大見出し級の数字. 小さな数値の帯が、本来なら段落が要る主張を引き受けます。ヒーローセクションが機能リストに変わるのを防ぐためです。数字は1つの字重で組み、行の中で統計に序列を付けない。この参考は800x603で収録しました。
- 同じ重みのパネル. 構造はグリッドそのものだ。同じ大きさのパネルをInterで組み、視線が下ではなく横へ動くように並べる。パネルはUI書体を同じサイズで共有し、グリッドが第2のレイアウトにならないようにする。
モーションとインタラクション
インタラクティブな範囲は狭く
フィードバックはすべてのカードではなくボタンとリンクのホバー状態に限られるので、レイアウトの残りは固定された構図になる。ホバーとフォーカスはまとめて指定されているので、ポインターとキーボードが同じ情報を受け取る。タッチ端末で状態を確認する。この参考は800x603で収録しました。
ミリ秒で書かれた時間
アニメーションの予算は小さく、明示されている。1000ms。適用先は入場ではなく状態変化だ。値は短く、アニメーションではなくフィードバックとして読める長さだ。
ヒーローセクションの再配置
ここでのレスポンシブは、尺度が変わり順序が変わらないこと。スケールは段階式ではなく可変。読み順はブリーフが置いた位置にとどまる。モバイル版は判断であり、代替ではない。この参考は800x603で収録しました。
VEX Venturesを仕様として読む
作り直しは普通、スクリーンショットと推測から始まる。ここでは5,051文字の仕様から始める。枠、余白、モーションはコードを1行書く前に書き出されている。このヒーローセクションに、初期値任せの部分はない。
ヒーローセクションを自社のものにする
テーマが部品を渡すのに対し、このブリーフは構成を渡す。18px刻みの余白、1000msのトランジションとメディア枠、そして主題は自社に委ねられる。自社のアクセントも、参考例のアクセントと同じコントラスト検証を通過する必要がある。
よくある質問（FAQ）
VEX Venturesの背後のブリーフには、実際に何が入っていますか？
気分を書いた説明ではなく、制作のための仕様です。800x603のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
VEX Venturesを作り直すのにReactとTailwind CSSは必要ですか？
VEX VenturesはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
VEX Venturesのデザインはどこから来たものですか？
ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は800x603で収録しました。
