このテンプレートについて
Stillmindは、ヘルスケア・ウェルビーイングプロダクトがヒーローセクションで抱える課題を記録済みのブリーフ1本で解く。色は深いの赤 #48292Fの下地、深いのブルー #182C41のアクセントに限り、Instrument Serifで組んでいる。納品物はReactとTailwind CSSで、1472x1080で記録しているため、コードを書く前に枠が決まっている。モーションの予算は1000msのトランジション、cubic-bezier(0.4,0,0.2,1)、ループする動画の下地。ヘルスケア・ウェルビーイングプロダクトのヒーローセクションを作るときに、出発点ではなく完成した構図が欲しいなら、これを参考にする。以下に引用する値はすべてこのブリーフのもので、1472x1080の枠から最小の余白ステップまで含む。
対象
- このヒーローセクションは、ヘルスケアのコピーが6.2sのループ映像を支えられる証拠を1画面分必要とする創業者に応える。
- ヒーローセクションをモデルに指示する人は、6,025文字のプロンプトを出発点に使う。
- 見出しをStillmindと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。
含まれる内容
- ドロワーを持たない一行. ワードマーク、リンク、#182C41の操作が同じベースラインを共有する。細い一行が偶然の産物に見えないのはそのためだ。リンクはワードマークより小さいサイズで組み、#182C41の操作だけがバーの中で重みを持つ要素です。
- ブリーフに直書きされたサイズ. ここでは文字と余白を同じ1つのリストから取る（1000msのトランジション、cubic-bezier(0.4,0,0.2,1)のイージング）。名指しされた値の間に勝手な中間値はありません。寸法の一覧がそのままシステム全体です。
- イラストではなくクリップ. 1472x1080の画幅は1本のループで埋まる。コピーの後ろで再生し、操作系を必要としない。自動再生が使えないときは1472x1080のポスター画像が構図を保つため、レイアウトが崩れることはありません。書き出しは1472x1080以上にして、トリミングを正確に保ってください。
- スタイルを決めるタイポグラフィ. タイポグラフィはInstrument Serifです。ブリーフは変化をつけるために混ぜるのではなく、書体に役割を与えています。ウェイト、トラッキング、サイズ段階がすべて指定されているため、差し替えても階層は保たれます。ウェイトは役割ごとに指定されているため、実装時に勘で階層を決めることはありません。
モーションとインタラクション
ポインター状態以外は何もしない
ここでのインタラクションは各コントロールの内側で完結する（すべてのカードではなくボタンとリンクのホバー状態）。ページのほかの部分が巻き添えで動くことはない。ホバーとフォーカスはまとめて指定されているので、ポインターとキーボードが同じ情報を受け取る。この参考は1472x1080で収録しました。
状態変化にも時間を与える
アニメーションの予算は小さく、明示されている。1000ms、cubic-bezier(0.4,0,0.2,1)を使い。適用先は入場ではなく状態変化だ。時間が短いので、フィードバックはアニメーションではなく応答として読める。
ヒーローセクションを支える数値
多くの参考例は結果だけを見せ、数値は伏せる。これは逆で、1000msのトランジション、cubic-bezier(0.4,0,0.2,1)のイージングをページと並べて公開する。結果を近似ではなく再現できるようにするためだ。このヒーローセクションに、初期値任せの部分はない。
Stillmindの最初の読みの順序
マーケティングページが折り返しの下に実績を積んで期待するのに対し、このヒーローセクションはナビゲーション、お知らせのピル、数値の行、機能リスト、背景のクリップを読み手の前に出し、残りは引いておく。ヘルスケアの読み手は、選択肢より先に訴求を受け取る。この参考は1472x1080で収録しました。
ヒーローセクションを支えるタイミング
短いモーション予算は、最初の画面の劇性を犠牲にする。代わりに可読性を買い、1000msのトランジション、6.2sのメディアループ、ホバー状態と押下状態をライブラリなしで移植できるようにする。このヒーローセクションで、動くために動く要素はない。
よくある質問（FAQ）
Stillmindの土台になっているプロンプトはどれくらいの長さですか？
気分を書いた説明ではなく、制作のための仕様です。1472x1080のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
Stillmindのヒーローセクションを別の技術スタックで作り直せますか？
StillmindはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Stillmindの素材はクライアント案件でどう扱えばよいですか？
ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は1472x1080で収録しました。
