このテンプレートについて
Halo Use Caseは、フィンテックプロダクトが機能紹介セクションで抱える課題を記録済みのブリーフ1本で解く。色は白 #E2E2E2の下地、くすんだのインディゴ #695D8Bのアクセントに限り、TT Norms Pro Regularで組んでいる。納品形式はReactとTailwind CSSなので、機能紹介セクション全体をデザインの引き継ぎなしにプロジェクトへ持ち込める。書いている間は開いておく。7,044文字のブリーフが、自社ページにそのまま持ち込める部分。収録したプロンプトは640x470で記録したので、このページで引用する値はすべてそこにたどれる。以下に引用する値はすべてこのブリーフのもので、640x470の枠から最小の余白ステップまで含む。
対象
- 1回ごとの精算で進め、初回の前に24px刻みの余白を合意しておきたい制作会社のために作った。
- フィンテックプロダクト機能紹介セクションを1つ出す個人創業者で、背中にデザインシステムがない人のために作った。
- この機能紹介セクションを1スプリントに収め、新しい素材も増やしたくないプロダクトマネージャーのために作った。
含まれる内容
- ブリーフで固定した寸法. サイズは継承ではなく明記されています（24px刻みの余白）。書体やコピーを差し替えても、この関係は保たれます。余白は文字と同じ単位で書かれ、そのまま比較できる。
- 番号付きの行が構造を担う. 機能はカードのグリッドではなくTT Norms Pro Regularのリストとして組むため、狭い画面でもページが密に、すばやく拾い読みできます。項目はサイズもマーカーも共通なので、長いリストでも拾い読みできます。可能な限り1項目1行で。
- アクセントは操作系のみ. 色は配分して使います。くすんだのインディゴ #695D8Bが現れるのは操作要素と小さな強調だけなので、次に押す場所が常に分かります。#695D8Bと白 #E2E2E2のコントラストが、小さいサイズでもアクセントを読ませる。
- 流し読みを前提にした構成. 読み順はグリッドが決めます。同じ重みのパネルが1つずつ考えを担い、小さめのTT Norms Pro Regularで組むことで構造が見えたままになります。パネルは罫線ではなく余白で区切るため、グリッドは静かに見えます。1パネルにつき1つの考えを守ってください。
モーションとインタラクション
インタラクションは局所に
ポインターに反応するのは操作要素だけ（すべてのカードではなくボタンとリンクのホバー状態）。すべての要素を的にせずに、ページは反応して感じられる。状態は仕様に明記されているので、ページはホバー効果のライブラリに依存しない。この参考は640x470で収録しました。
邪魔をしないモーション
これは640x470の静止した構図として届けられる。だから階層がモーションなしで成立する必要があり、実際に成立している。仕様にアニメーションライブラリはなく、作り直しは小さく済む。動きは操作要素にとどめる。
機能紹介セクションの背後にある順序
トレードオフは我慢を強いること。走査しやすいグリッドなら即座に渡す詳細を、このページは保留する。代わりに得るのは、カードグリッド、機能リスト、背景のクリップが読み違えられないファーストビュー。フィンテックの読み手は、選択肢より先に訴求を受け取る。この参考は640x470で収録しました。
Halo Use Caseで最初に変えるもの
トレードオフは見分けのつきやすさ。 Halo Use Caseを残しすぎると他人のページに見え、数値を残して中身を変えれば自社のページとして読める。変えるべきなのは主題の部分だ。この参考は640x470で収録しました。
機能紹介セクションの再配置
テンプレートが1カラムに畳んで成り行きに任せるのに対し、このブリーフは何が起きるかを明示し（スケールは段階式ではなく可変）、順序を保つ。狭い幅でも重要な要素は削られない。この参考は640x470で収録しました。
よくある質問（FAQ）
Halo Use Caseのブリーフをコピーすると何が手に入りますか？
気分を書いた説明ではなく、制作のための仕様です。640x470のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
Halo Use CaseはReactとTailwind CSSにどこまで依存していますか？
Halo Use CaseはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Halo Use Caseの素材はクライアント案件でどう扱えばよいですか？
ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は640x470で収録しました。
