このテンプレートについて
ヘルスケア・ウェルビーイングプロダクト向けにランディングページを作り直す前にPet Diagnosticsを読むと、構成とそれを支える仕様がここに揃っていることが分かる。配色は#101010の下地、クリーム #EEF0D0の文字で、書体はInter。納品物は自己完結したHTMLファイル1つで、2336x1080で記録しているため、コードを書く前に枠が決まっている。結局、動きはループする動画の下地に尽きる。ヘルスケア・ウェルビーイングプロダクトのランディングページを作るときに、出発点ではなく完成した構図が欲しいなら、これを参考にする。以下に引用する値はすべてこのブリーフのもので、2336x1080の枠から最小の余白ステップまで含む。収録したプロンプトは2336x1080で記録したので、このページで引用する値はすべてそこにたどれる。
対象
- モデルに指示を出すなら、ランディングページから始めて自己完結したHTMLファイル1つをプロンプトに保持させろ。
- 工数を見積もるプロダクトマネージャーは、820pxのブレイクポイントを作業範囲として読む。
- このページは、自己完結したHTMLファイル1つでヘルスケア・ウェルビーイングプロダクトランディングページを組み直し、見た目の裏にある数値を探すフロントエンド開発者に応える。
含まれる内容
- 操作1つだけの上段. 短いリンク列と1つの操作がランディングページの上に載り、寸法は12px〜16pxの可変型サイズ、92vhのセクションで抑えてある。背後の構図と競合しないためだ。ラベルは820pxで1行に収まる長さで、現在の項目はピルではなくウェイトで示します。
- 文字の背後に全面配置したクリップ. 雰囲気を作るのは2336x1080の7.1sクリップです。ブリーフはトリミングを固定し、その上の文字には手を加えていません。ループは7.1sと短く、目にはタイムラインではなくテクスチャとして映ります。
- カードの壁ではなくリスト. 機能はカードの壁ではなくInterのリストとして組みます。行間の余白がグループ分けを担うため、枠は不要です。
- 文字と画幅で1つの尺度. レイアウトは固定値（12px〜16pxの可変型サイズ、92vhのセクション、角丸999px、18px刻みの余白）を基準に決めているため、どの幅でもファーストビューの構図が保たれます。すべての値は収録時のプロンプトと突き合わせて確認できます。再現が近似ではなく検証可能になるのはそのためです。
モーションとインタラクション
タイムラインではなくループ
環境の動きはスクロール演出ではなく7.1秒の2336x1080ループから生まれる。だからページは落ち着き、文字は読める。ミュートなので、音やフォーカスを奪わずにコピーの背後で回せる。
効く場所だけポインター
状態はグローバルなアニメーション層ではなく、コンポーネントごとに処理する（すべてのカードではなくボタンとリンクのホバー状態）。各状態が変えるプロパティは1つなので、フィードバックが読み取りやすい。この参考は2336x1080で収録しました。
ランディングページを自社のものにする
素直な差し替えには限界がある。製品が別の階層を必要とするなら、12px〜16pxの可変型サイズ、92vhのセクションが邪魔になる。その場合は順序を先に、値を後に変える。新しいコピーも同じ表示サイズで組み、何かを足す前にコントラストを確認し直します。
ヘルスケアに効くところ
このデザインは1画面で主張を完結させる。メディアは2336x1080の7.1sループ映像だ。雰囲気はメディアが、訴求はコピーが担い、両者を分けているのが12px〜16pxの可変型サイズ、92vhのセクション。ヘルスケアの読み手に、訴求へ至る最短の正直な道を示す。
Pet Diagnosticsで動くもの
タイミングは最初から明示されている。ホバー状態と押下状態、7.1sのメディアループ。すべてが勘ではなく、ブリーフに数値として書き込まれている。このランディングページで、動くために動く要素はない。
よくある質問（FAQ）
Pet Diagnosticsを作り直すのに自己完結したHTMLファイル1つは必要ですか？
Pet Diagnosticsは自己完結したHTMLファイル1つで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Pet Diagnosticsのプロンプトはなぜここに掲載されていないのですか？
このページに引用している内容はすべて、収録された18,711文字のブリーフが出典で、後から書き足した解説ではありません。数値と文章が食い違わないのはそのためです。
Pet Diagnosticsのプロンプトは完成した仕様書ですか、それとも出発点ですか？
気分を書いた説明ではなく、制作のための仕様です。2336x1080のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
