このテンプレートについて
Guardnet Benefitsは機能紹介セクションの仕様書として読める。値はページを組む前に書き出されていた。ページ全体は黒 #0E0E0Fの下地、ブルー #1E3A8Aのアクセントでできている。この項目は、ページを生んだ技術スタック（ReactとTailwind CSS）を隠さずに書いている。初見用ではなく、作り直しに耐えるフィンテックプロダクトの機能紹介セクションのブリーフとして扱う。このページの残りは、機能紹介セクションをブロックごと、次にタイミングと値ごとに分解する。ブリーフにない主張は足さない。ブリーフが固定しているもの（フレーム、文字サイズ、タイミング、ブレイクポイント）は下記にすべて書き出してあるので、機能紹介セクションを作り直すときに背後の意図を推測せずに済む。
対象
- 制作の仕様を書き、批判的に検討する材料として640x466のフレームを探しているStudioのチーム。
- まず13px〜14pxの可変型サイズ、13px刻みの余白から決めろ。配色は後からついてくる。この機能紹介セクションを読ませているのは余白だ。
- 見出しをGuardnet Benefitsと同じ長さに保ったまま機能紹介セクションを書き換えるコンテンツ責任者のために作った。
含まれる内容
- 既定値に頼らない構成. ここでは文字と余白を同じ1つのリストから取る（13px〜14pxの可変型サイズ、13px刻みの余白）。リストは短く、確認者は要素ごとに突き合わせられる。
- 中盤を担うカードグリッド. 文章を流し込む場所にパネルを並べている。機能紹介セクションを見渡せるのはそのためだ。グリッド内でアクセントが示すのは多くても1要素で、パネル同士が競合しない。この参考は640x466で収録しました。
- タイポグラフィとしての数字. 小さな数値の帯が、本来なら段落が要る主張を引き受けます。機能紹介セクションが機能リストに変わるのを防ぐためです。数値だけが#1E3A8Aのアクセントを持ち、周囲は文字色に留まります。
- 残りを担うベース色. ページの操作はすべてアクセントが担います。ボタンとリンクはブルー #1E3A8A、その後ろのフレームは黒 #0E0E0Fです。ほかはすべて黒 #0E0E0Fの上にあり、彩度の高い配色でも読めるのはそのためです。アクセントは1色、操作にだけ使ってください。
モーションとインタラクション
インタラクティブ層はコントロール
ページが反応するのは操作できる場所だけ。すべてのカードではなくボタンとリンクのホバー状態。インタラクティブな状態はレイアウトを動かさないので、ポインターの下で何かが跳ねることはない。タッチ端末で状態を確認する。この参考は640x466で収録しました。
静止も設計
仕様はアニメーションを省き、640x466のレイアウトにページを任せる。変わるのはホバーと押下の状態だけだ。構図は静止したままなので、ページを支えるのは階層であり、それは成立している。
この機能紹介セクションが立てる主張
フィンテックのページの多くは、セクションを増やし、グラデーションを増やし、主張を増やすことで失敗する。 Guardnet Benefitsは逆を行く。構図は黒 #0E0E0Fに留まり、操作にだけブルー #1E3A8Aを使う。意図して組んだと見えるにはそれで足りる。フィンテックの読み手に、訴求へ至る最短の正直な道を示す。
機能紹介セクションを支える数値
ムードボードがスケールを開いたままにするのに対し、このブリーフは13px〜14pxの可変型サイズ、13px刻みの余白で閉じる。周辺の値はその判断から導かれる。この機能紹介セクションに、初期値任せの部分はない。
機能紹介セクションの背後にある順序
いまのページが機能を先頭に置いているなら、真似すべきはこの順序。数値の行、カードグリッド、背景のクリップを前に、補足を後ろに、距離は13px〜14pxの可変型サイズ、13px刻みの余白が決める。フィンテックの読み手は、選択肢より先に訴求を受け取る。
よくある質問（FAQ）
Guardnet Benefitsのブリーフをコピーすると何が手に入りますか？
収録されたブリーフは4,108文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
Guardnet Benefitsのブリーフは、自分で書くプロンプトと同じものですか？
このページに引用している内容はすべて、収録された4,108文字のブリーフが出典で、後から書き足した解説ではありません。数値と文章が食い違わないのはそのためです。
Guardnet Benefitsの機能紹介セクションを別の技術スタックで作り直せますか？
必要ありません。ブリーフは依存関係の一覧ではなく仕様です。ReactとTailwind CSS向けに書かれていますが、同じ構図は今お使いの技術スタックでも作り直せます。技術スタックを明記しているのは、参照デザインがどう作られたかを知るためです。
