このテンプレートについて
Wellness Devicexは書き下ろされたブリーフ1本から組んだヘルスケアのランディングページで、このページはそのブリーフを記録している。カラースキームは黒 #0A0A0Aの下地、くすんだのブルー #64748Bのアクセントで、ページはInterで組む。実装はReactとTailwind CSSだ。中の寸法はすべて書き出してあるので、そのまま再利用できる。動きは60msのトランジション、cubic-bezier(0.77, 0, 0.18, 1)、ループする動画の下地だけで完結する。ヘルスケアのランディングページを発注するなら、この構成から始めて主題だけ差し替える。以下に引用する値はすべてこのブリーフのもので、1460x1080の枠から最小の余白ステップまで含む。
対象
- まず100vhのセクション、24px刻みの余白から決めろ。配色は後からついてくる。このランディングページを読ませているのは余白だ。
- このランディングページは、ヘルスケアのコピーが4.4sのループ映像を支えられる証拠を1画面分必要とする創業者に応える。
- ランディングページをモデルに指示する人は、6,903文字のプロンプトを出発点に使う。
含まれる内容
- 上段はワードマーク、リンク、操作1つ. ナビゲーションは帯ではなく細いストリップです。ワードマークは左、リンクは中央やや右、操作は#64748Bの1つだけ。いずれも独自の背景を持たずにランディングページの上に載ります。リンクはワードマークより小さいサイズで組み、#64748Bの操作だけがバーの中で重みを持つ要素です。
- 文字と画幅で1つの尺度. ここでは文字と余白を同じ1つのリストから取る（100vhのセクション、24px刻みの余白、60msのトランジション、cubic-bezier(0.77, 0, 0.18, 1)のイージング）。余白は文字と同じ単位で書かれ、そのまま比較できる。
- ループが背景になる. ブリーフは動画を1460x1080、ループを4.4sと指定し、すべてのテキスト要素はその画幅に合わせて置かれる。自動再生が使えないときは1460x1080のポスター画像が構図を保つため、レイアウトが崩れることはありません。書き出しは1460x1080以上にして、トリミングを正確に保ってください。
- トーンを担うタイポグラフィ. 書体には混ぜるのではなく役割を割り当てています。 Interがディスプレイとインターフェースの両方を担います。書体の差し替えは可能ですが、比率がその差し替えに耐える必要があります。書体を変えてもサイズ段階はそのまま残してください。
モーションとインタラクション
アニメーションの予算はこれで全部
トランジションの指定は60ms、cubic-bezier(0.77, 0, 0.18, 1)で。コントロールはこの時間に縛られる。状態変化ごとに値が書かれているので、ブラウザの初期値が使われることはない。フィードバックの時間は正確に合わせる。
スクロールが順序を進める
読者が動かすと背景のレイヤーが前景と違う速度で動くが構図を変えるが、レイアウトの順序は固定されたまま。動きの軽減設定では効果が外れるだけで、構図の最終状態は変わらない。2つ目のスクロール効果を重ねない。この参考は1460x1080で収録しました。
ランディングページの再配置
狭い幅のレイアウトは継承ではなく設計している。セクションは100vhに固定、ナビゲーションはモバイルメニューに畳まれる。幅ごとに決まっているので、階層は再配置を越えて残る。自動再生とモーションは誠実に扱われているので、それらが使えない環境でもページは内容を伝えます。
Wellness Devicexで最初に変えるもの
再利用できるのは構成で、主題は自社のもの。100vhのセクション、24px刻みの余白を残し、言葉、メディア、ブランドマークを差し替える。構成より差し替えのほうが安い。それがこの参考例の狙いだ。
Wellness Devicexの最初の読みの順序
注意は偶然に任せず、導いている。順序はナビゲーション、お知らせのピル、数値の行、機能リスト、背景のクリップと進み、各停留点は100vhのセクション、24px刻みの余白に合わせて寸法を取るので、順番が崩れることはない。ヘルスケアの読み手は、選択肢より先に訴求を受け取る。
よくある質問（FAQ）
Wellness Devicexの背後のブリーフには、実際に何が入っていますか？
収録されたブリーフは6,903文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
Wellness DevicexはReactとTailwind CSSにどこまで依存していますか？
Wellness DevicexはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Wellness Devicexの60msのトランジションはどう動きますか？
モーションはレイアウトと同じ粒度で指定されています。状態変化は60msの範囲で収束します、cubic-bezier(0.77, 0, 0.18, 1)で。先に構成を移植し、タイミングは後から合わせると、レイアウトが固まっている分だけ合わせやすくなります。
