Impact Venturesのフィンテックヒーローセクションデザインとプロンプト

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

Impact Venturesは判断の履歴を残しており、このヒーローセクションを生んだブリーフは4,400文字。「We shape digital products that define brands」で始まり、その一行をカードに縮めず、フレームいっぱいに置いている。色はブルー #2D64B0の下地、白 #C5D5DEの文字に限り、Instrument Serifで組んでいる。この項目は、ページを生んだ技術スタック（ReactとTailwind CSS）を隠さずに書いている。モーションは700msのトランジション、cubic-bezier(0.76,0,0.24,1)で、コピーが主役のままになる程度に抑えている。フィンテックのヒーローセクションが、デザインを変えずにコピー変更へ耐える必要があるとき最も効く。

対象

このヒーローセクションは、640x472の画角をクライアントの3回の修正に耐えさせたい制作会社のために作った。
見出しをImpact Venturesと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。
最初のキーフレームを書く前に700msのタイミングとcubic-bezier(0.76,0,0.24,1)の曲線を確定させたいフロントエンド開発者のために作った。

含まれる内容

操作より前に置くリンク. 細いバーをヒーローセクションの上に重ね、左にワードマーク、リンクはInstrument Serifで組みます。そのため構図はコンテンツが先、装飾は後に読めます。タブレットのブレイクポイントを下回ると、モバイル用のオーバーレイに切り替わります。バーは独自の背景を持たずに640x472の構図の上に載るため、その下のメディアは端から端まで届きます。
既定値に頼らない構成. ブリーフは数値を名指ししています（700msのトランジション、cubic-bezier(0.76,0,0.24,1)のイージング）。書体とフレームの間に勝手な余白の段階がないからこそ、構図はまとまります。値は推測ではなく収録時のプロンプトからの引用で、再レンダリングでも変わらない。
トーンを担うタイポグラフィ. 最上位の文字はInstrument Serifで、補助コピーはそれよりずっと小さく落とす。階層は色に頼らず読める。書体は固定サイズと組になっています。ディスプレイの行とインターフェースの文字が同じ体系に留まるのはそのためです。役割が明確な1ファミリーは、競い合う2つに勝ります。
タイポグラフィとしての数字. 数字はInstrument Serifで、本文よりも見出しに近いサイズで組む。ラベルは1つのサイズで組み、長いラベルでも行の高さが変わらない。数値は1行に収めてください。

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

反応するのは操作要素

ページが反応するのは操作できる場所だけ。すべてのカードではなくボタンとリンクのホバー状態。各状態が変えるプロパティは1つなので、フィードバックが読み取りやすい。この参考は640x472で収録しました。

ミリ秒で書かれた時間

時間は短く揃っている（700ms、cubic-bezier(0.76,0,0.24,1)で）。だからホバーと押下の状態は別々の効果の寄せ集めではなく、一つの仕組みとして読める。値は短く、アニメーションではなくフィードバックとして読める長さだ。ブラウザの既定値のまま出さない。

この構図がフィンテックで効く理由

フィンテックのページの多くは、ファーストビューが弱いとセクションを足す。これは逆に選択肢を削る。ナビゲーション、数値の行、機能リスト、背景のクリップ、フッターをこの順に置き、訴求を繰り返すものは置かない。フィンテックの読み手に、訴求へ至る最短の正直な道を示す。この参考は640x472で収録しました。

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

ファーストビューを一度流し読みすれば、訴求はもう伝わっている。ナビゲーション、数値の行、機能リスト、背景のクリップ、フッターは順に現れ、装飾的な区切りではなく700msのトランジション、cubic-bezier(0.76,0,0.24,1)のイージングで隔てられる。フィンテックの読み手は、選択肢より先に訴求を受け取る。