このテンプレートについて
Wellbeing OSはヘルスケア・ウェルビーイングプロダクト向けのヒーローセクションの参考で、その背後のブリーフはムードボードではなく完全な構築仕様だ。カラースキームは深いのオレンジ #2C221Cの下地、オレンジ #BF9423のアクセントで、ページはHelvetica, Segoe UI, Robotoで組む。納品物はReactとTailwind CSSで、1460x1080で記録しているため、コードを書く前に枠が決まっている。ブリーフはモーションの予算を400msのトランジション、cubic-bezier(0.16,1,0.3,1)、ループする動画の下地に使う。この参考例は、作り始める前にファーストビューを固めたいヘルスケア・ウェルビーイングプロダクト向け。
対象
- プロダクトマーケターで、コピーの背後に5.8sのループ映像があってもヒーローセクションが読める状態を保ちたい。
- ヒーローセクションをモデルに指示する人は、5,051文字のプロンプトを出発点に使う。
- 見出しをWellbeing OSと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。
含まれる内容
- 操作1つだけの上段. バーに載るのはワードマーク、セクションのリンク、#BF9423のボタン1つだけです。160px刻みの余白、400msのトランジションで測られているため、第二のヘッダーに膨らむことはありません。リンクはワードマークより小さいサイズで組み、#BF9423の操作だけがバーの中で重みを持つ要素です。
- 効いてくるポスターフレーム. クリップは1460x1080で5.8s再生し、継ぎ目が見えないままループする。映像ではなく表面として読める。ループは5.8sと短く、目にはタイムラインではなくテクスチャとして映ります。
- スケールがスタイルになる. このトーンを作っているのはブリーフのサイズ段階とトラッキングです。詰めたディスプレイサイズのHelvetica, Segoe UI, Robotoがあり、そこから補助コピーへはっきり落とします。字間はサイズごとに設定し、大見出しとキャプションで同じ値を共有しない。
- 刻みを名指しするブリーフ. レイアウトに勘で決める部分はない。ブリーフが160px刻みの余白、400msのトランジション、cubic-bezier(0.16,1,0.3,1)のイージングを明記し、実装はその値に合わせる。各値は文字サイズの刻み、余白、角丸、トランジションのいずれか1つの役割に対応する。
モーションとインタラクション
ループが環境演出を担う
背景の映像は5.8秒、1460x1080でミュートのままインライン再生され、無限にループする。読者の注意がコピーにある間もページは動き続ける。環境モーションは映像そのものだけなので、スクロールライブラリは要らない。自動再生が止められた場合はポスターフレームが代わりに立ち、動きは必須ではなく追加要素にとどまる。
状態変化にも時間を与える
コントロールの動きは短く、繰り返しに耐える。状態が変わるたびに400ms。フォーカス状態もホバーと同じ値で時間を指定するので、キーボードとポインターの反応が一致する。状態変化は速く、スクロールのタイムラインは持たない。
Wellbeing OSの最初の読みの順序
順番どおりに読んでみる。ナビゲーション、数値の行、背景のクリップ、フッター。各要素は役割を一つだけ持ち、オレンジ #BF9423のアクセントは押してほしい要素にしか使われていない。ヘルスケアの読み手は、選択肢より先に訴求を受け取る。
ヒーローセクションを支えるタイミング
短いモーション予算は、最初の画面の劇性を犠牲にする。代わりに可読性を買い、400msのトランジション、5.8sのメディアループ、ホバー状態と押下状態をライブラリなしで移植できるようにする。このヒーローセクションで、動くために動く要素はない。
ヒーローセクションを自社のものにする
自社のメディアを入れるときは、トリミングとレイヤーの順序を守る。メディアは1460x1080の5.8sループ映像だ。コピーの可読性を保っているのはその配置だ。メディアのトリミングは守る。書体と同じだけ働いている。
よくある質問（FAQ）
Wellbeing OSのプロンプトは完成した仕様書ですか、それとも出発点ですか？
収録されたブリーフは5,051文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
Wellbeing OSはReactとTailwind CSSにどこまで依存していますか？
Wellbeing OSはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Wellbeing OSから作り直したページを、クレジット表記なしで公開してもよいですか？
ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は1460x1080で収録しました。
