このテンプレートについて
Wellness Heroはヘルスケア・ウェルビーイングプロダクト向けのヒーローセクションの作り方を一つ示し、それを生んだ手順も公開している。タイポグラフィはInterで、文字サイズはスケールに委ねずブリーフが固定している。実装はReactとTailwind CSSだ。中の寸法はすべて書き出してあるので、そのまま再利用できる。ヘルスケアのヒーローセクションが、デザインを変えずにコピー変更へ耐える必要があるとき最も効く。収録したプロンプトは640x468で記録したので、このページで引用する値はすべてそこにたどれる。以下に引用する値はすべてこのブリーフのもので、640x468の枠から最小の余白ステップまで含む。以降のセクションはブリーフを分解する。レイアウトが何でできているか、どう動くか、どの配色、書体、余白の値が構成を支えているかを見ていく。
対象
- ヒーローセクションをモデルに指示する人は、4,719文字のプロンプトを出発点に使う。
- 見出しをWellness Heroと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。
- ヘルスケア・ウェルビーイングプロダクトヒーローセクションを1つ出す個人創業者で、背中にデザインシステムがない人のために作った。
含まれる内容
- ページのグリッドに乗るバー. 細いバーをヒーローセクションの上に重ね、左にワードマーク、リンクはInterで組みます。そのため構図はコンテンツが先、装飾は後に読めます。タブレットのブレイクポイントを下回ると、モバイル用のオーバーレイに切り替わります。バーは独自の背景を持たずに640x468の構図の上に載るため、その下のメディアは端から端まで届きます。リンクは4〜5本に抑えてください。その本数に合わせて行のサイズが決まっています。
- スタイルを決めるタイポグラフィ. 書体には混ぜるのではなく役割を割り当てています。 Interがディスプレイとインターフェースの両方を担います。サイズの刻みが固定値なので、書体を差し替えても同じ階層を保てる。
- お知らせのピル. バッジは1つ、メッセージも1つ。ピルは見出しの上にInterの最小段階で置き、その位置を争う要素はほかにありません。見出しが構図の中心を保つ位置に置きます。見出しの上に置き、横には決して置かないでください。
- 表ではなく統計の一行. 数値はカードではなく文字として組みます。ディスプレイサイズのInterに、1段下のラベルを添えます。アクセントは主張を担う数字だけに使い、行全体には使わない。
モーションとインタラクション
モーションはほぼない
仕様はアニメーションを省き、640x468のレイアウトにページを任せる。変わるのはホバーと押下の状態だけだ。動くのはポインターに反応する要素だけだ。
邪魔をしないモーション
仕様はアニメーションを省き、640x468のレイアウトにページを任せる。変わるのはホバーと押下の状態だけだ。動くのはポインターに反応する要素だけだ。静止も有効な選択だ。
Wellness Heroを仕様として読む
起点になる数値は640x468のフレーム。余白はそこから導かれ、ページの他のすべてはこの2つの値に対して位置を決める。このヒーローセクションに、初期値任せの部分はない。
Wellness Heroの最初の読みの順序
厳密な順序は、後から自由度を奪う。ファーストビューにセクションを足すなら640x468のフレームを切り直す必要がある。順序が装飾ではなく構造を支えているからだ。ヘルスケアの読み手は、選択肢より先に訴求を受け取る。
ヒーローセクションを自社のものにする
テンプレートはレイアウトを受け入れさせる。この参考例はレイアウトを残し、中身をすべて変えさせる。違いは、主題が動いても640x468のフレームが固定されていること。フレームとスケールは保ち、変えるべきなのは題材のほうです。
よくある質問（FAQ）
Wellness Heroのプロンプトは完成した仕様書ですか、それとも出発点ですか？
収録されたブリーフは4,719文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
この項目にReactとTailwind CSSが書かれているのはなぜですか？
この参考例はたまたまReactとTailwind CSSで作られているだけで、レイアウトのどの部分もその選択に依存していません。余白、書体、モーションの値は、すでに使っている環境へそのまま持ち込めます。
Wellness Heroのデザインはどこから来たものですか？
ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は640x468で収録しました。
