Mind-Body Healingのヘルスケアランディングページデザインとプロンプト

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

これはMind-Body Healingのランディングページを、スクリーンショットとしてではなく、それを生んだブリーフとともに公開したもの。「Holistic wellness. Transformative results」で始まり、その一行をカードに縮めず、フレームいっぱいに置いている。配色はくすんだのインディゴ #D1C4E9の下地、マゼンタ #AD4A80のアクセントで、書体はInter。この項目は、ページを生んだ技術スタック（ReactとTailwind CSS）を隠さずに書いている。モーションは500msのトランジション、ループする動画の下地に限っている。記録されたブリーフから始め、ランディングページをゼロから作り直すのではなく編集する。

対象

制作会社に発注する創業者は、1回目の受け入れ判定に1468x1080の画角を使う。
このランディングページは、ヘルスケアのコピーが6.8sのループ映像を支えられる証拠を1画面分必要とする創業者に応える。
ヘルスケア・ウェルビーイングプロダクトランディングページを1つ出す個人創業者で、背中にデザインシステムがない人のために作った。

含まれる内容

ドロワーを持たない一行. リンクは同じ文字サイズで1行に並び、#AD4A80の操作が右端で行を締める。視線はナビゲーションの切れ目で止まる。リンクはワードマークより小さいサイズで組み、#AD4A80の操作だけがバーの中で重みを持つ要素です。6本目のリンクを足す前に、折りたたみ状態を設計する。
明記された余白の刻み. ここでは文字と余白を同じ1つのリストから取る（100vhのセクション、500msのトランジション）。リストは短く、確認者は要素ごとに突き合わせられる。
パネルではなく背景の動画. 6.8sの素材1つがファーストビュー全体を支え、同期させる2つ目のメディア要素はない。自動再生が使えないときは1468x1080のポスター画像が構図を保つため、レイアウトが崩れることはありません。
役割ごとに指定した字重. ここではタイポグラフィがスタイルの仕組みです。ディスプレイサイズのInter、インターフェース全体で同じ書体、そして仕事を引き受ける第二のアクセントカラーはありません。数字はUI書体を共有し、統計もラベルも同じシステムに属する。

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

スクロールライブラリなしの環境モーション

6.8秒の映像1本が環境レイヤーのすべてで、コピーの背後で再生され、切れ目なくループし、ポインターには反応しない。ループはcoverで切り出しており、構図は特定のフレームサイズに依存しない。1468x1080以上で撮影または書き出す。

コントロールは共通の時間

トランジションの指定は500ms。コントロールはこの時間に縛られる。示された時間が覆うのは状態変化だけなので、動きのうち仕様に書かれているのはフィードバックの部分になる。

ランディングページの再配置

仕様は各幅で何が変わるかを記述している（セクションは100vhに固定、ナビゲーションはモバイルメニューに畳まれる）。つまりモバイル版は判断であり、縮小ではない。コントラストはメディア上の#AD4A80のアクセントで保たれ、動画はミュートのインライン再生である。再配置を越えて残るのは階層だ。

この構図がヘルスケアで効く理由

ヘルスケア・ウェルビーイングプロダクトに対してこれが機能するのは、読み手に情報を組み立てさせないからである。「Holistic wellness. Transformative results」が最初のフレームからその役割を担っている。レイアウトも書体も色も決まっており（くすんだのインディゴ #D1C4E9とマゼンタ #AD4A80、Inter）、最初の画面は部品の寄せ集めではなく、結論の出た主張として読める。ヘルスケアの読み手に、訴求へ至る最短の正直な道を示す。