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

RIVRはヒーローセクションの仕様書として読める。値はページを組む前に書き出されていた。ページ自身の見出しは「Fluid Asset Streams」で、構図はその言葉をそのまま中心に組まれている。配色はグレー #969BA2の下地で、書体はHelvetica。納品物はReactとTailwind CSSで、800x599で記録しているため、コードを書く前に枠が決まっている。初見用ではなく、作り直しに耐えるフィンテックプロダクトのヒーローセクションのブリーフとして扱う。以下に引用する値はすべてこのブリーフのもので、800x599の枠から最小の余白ステップまで含む。収録したプロンプトは800x599で記録したので、このページで引用する値はすべてそこにたどれる。

対象

• まず数値が要るデザイナー。12px〜80pxの可変型サイズ、14px刻みの余白、すべて仕様からの引用である。
• フィンテックプロダクトヒーローセクションを1つ出す個人創業者で、背中にデザインシステムがない人のために作った。
• 見出しをRIVRと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。

含まれる内容

• ドロワーを持たない一行. バーは1行のテキストと1つの操作だけで、12px〜80pxの可変型サイズ、14px刻みの余白として測ってある。太い帯ではなく細い一行として読ませるためだ。バーは独自の背景を持たずに800x599の構図の上に載るため、その下のメディアは端から端まで届きます。バーの要素はわずか数個なので、コンポーネントライブラリなしで組み直せます。
• 数字の下に置くラベル. 数値の行が根拠になります。1行に3〜4つの数字、その下に小さなラベル、インターフェースと同じHelveticaで組むため、装飾ではなくデータとして読めます。数字は文字なので、独自に拡縮せずページのレスポンシブ挙動を引き継ぐ。
• ビューポート基準の計測. ブリーフは数値を名指ししています（12px〜80pxの可変型サイズ、14px刻みの余白）。書体とフレームの間に勝手な余白の段階がないからこそ、構図はまとまります。すべての値は収録時のプロンプトと突き合わせて確認できます。再現が近似ではなく検証可能になるのはそのためです。
• トーンを担うタイポグラフィ. 書体には混ぜるのではなく役割を割り当てています。 Helveticaがディスプレイとインターフェースの両方を担います。サイズが大きくなるほど字間を詰めるため、12–80pxの範囲でディスプレイの行がまとまります。刻みは残し、書体だけ差し替える。

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

よくある質問（FAQ）