Wellness Companionのヘルスケアランディングページデザインとプロンプト

このテンプレートについて

Wellness Companionはヘルスケア・ウェルビーイングプロダクトに、完成したファーストビューと、それを生んだ数値を渡す。配色は深いのブルー #1A1A1Eの下地に絞り、書体はHelvetica, Arial。納品物はReactとTailwind CSSで、1440x1080で記録しているため、コードを書く前に枠が決まっている。モーションは0.5sのトランジション、cubic-bezier(0.22, 1, 0.36, 1)、ループする動画の下地に限っている。最初の画面で意図が伝わる必要があるヘルスケア・ウェルビーイングプロダクトのランディングページには、この参考が適している。収録したプロンプトは1440x1080で記録したので、このページで引用する値はすべてそこにたどれる。

対象

このランディングページは、ヘルスケアのコピーが5.9sのループ映像を支えられる証拠を1画面分必要とする創業者に応える。
ランディングページをモデルに指示する人は、4,095文字のプロンプトを出発点に使う。
見出しをWellness Companionと同じ長さに保ったままランディングページを書き換えるコンテンツ責任者のために作った。

含まれる内容

ブリーフに直書きされたサイズ. レイアウトに勘で決める部分はない。ブリーフが12px刻みの余白、0.5sのトランジション、cubic-bezier(0.22, 1, 0.36, 1)のイージングを明記し、実装はその値に合わせる。これらの数値に合わせて再現すれば、追加調整なしで参考例に近づく。ページを持ち込むときも、名指しされた値はそのまま使ってください。
文字の後ろのメディア. メディアは物語ではなく雰囲気を担う。1440x1080の5.9sループがすべての後ろに敷かれる。1440x1080以上で書き出せば、coverの切り抜きはそのまま機能する。
中盤を担うカードグリッド. 構造はグリッドそのものだ。同じ大きさのパネルをHelvetica, Arialで組み、視線が下ではなく横へ動くように並べる。パネル間の余白は1つの値で、密度の高いグリッドが窮屈に見えないのはそのためだ。
タイポグラフィとして扱う数値. 数値はカードではなく文字として組みます。ディスプレイサイズのHelvetica, Arialに、1段下のラベルを添えます。ラベルは1つのサイズで組み、長いラベルでも行の高さが変わらない。各数字には短いラベルを付ける。

モーションとインタラクション

インタラクティブな範囲は狭く

インタラクティブな層は意図的に小さい（必要なときに内容を送るスライダー）。インタラクティブな状態はレイアウトを動かさないので、ポインターの下で何かが跳ねることはない。この参考は1440x1080で収録しました。

ループが環境演出を担う

背景の映像は5.9秒、1440x1080でミュートのままインライン再生され、無限にループする。読者の注意がコピーにある間もページは動き続ける。環境モーションは映像そのものだけなので、スクロールライブラリは要らない。ほかに連続して動くものがないので、注意を引くのは映像だけだ。

Wellness Companionで動くもの

アニメーションの対象を数え上げると、一覧はすぐ終わる。0.5sのトランジション、5.9sのメディアループだけで、ほかに動く要素はない。入場演出もスクロール連動も、この一覧の外にはない。このランディングページで、動くために動く要素はない。

ランディングページを支える数値

このページの関係はすべて検証できる値になっている。12px刻みの余白、0.5sのトランジション、cubic-bezier(0.22, 1, 0.36, 1)のイージング。 Wellness Companionが単に再現できるだけでなく作り直せるのはそのため。このランディングページに、初期値任せの部分はない。