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

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

これはCelestial Renewalのランディングページを、スクリーンショットとしてではなく、それを生んだブリーフとともに公開したもの。ページ自身の見出しは「Expert beauty and holistic wellness, delivered with warmth and intention」で、構図はその言葉をそのまま中心に組まれている。配色は深いのブルー #010A17の下地、ブルー #0A4267のアクセントで、書体はInstrument Serif。この項目は、ページを生んだ技術スタック（ReactとTailwind CSS）を隠さずに書いている。モーションは75msのトランジション、cubic-bezier(0.22,1,0.36,1)、ループする動画の下地に限っている。書いている間は開いておく。7,343文字のブリーフが、自社ページにそのまま持ち込める部分。

対象

このランディングページは、1464x1080の画角をクライアントの3回の修正に耐えさせたい制作会社のために作った。
このランディングページを3人で編集するなら、コンテンツ責任者にはスクリーンショットではなく36px〜110pxの可変型サイズ、40px刻みの余白を渡せ。
見出しをCelestial Renewalと同じ長さに保ったままランディングページを書き換えるコンテンツ責任者のために作った。

含まれる内容

ドロワーを持たない一行. この行はコントラストを#0A4267の操作1か所だけに使い、ワードマークとリンクは文字色に退く。タブレットのブレイクポイントを下回ると、モバイル用のオーバーレイに切り替わります。リンクはワードマークより小さいサイズで組み、#0A4267の操作だけがバーの中で重みを持つ要素です。6本目のリンクを足す前に、折りたたみ状態を設計する。
ブリーフで固定した寸法. ここでは文字と余白を同じ1つのリストから取る（36px〜110pxの可変型サイズ、40px刻みの余白、75msのトランジション、cubic-bezier(0.22,1,0.36,1)のイージング）。リストの最小値と最大値が、構図の可動範囲を決める。
オーバーレイなしのメディア. ブリーフは動画を1464x1080、ループを5.9sと指定し、すべてのテキスト要素はその画幅に合わせて置かれる。ループは5.9sと短く、目にはタイムラインではなくテクスチャとして映ります。
文字として組む機能リスト. 各項目は#0A4267のマーカーが付いた1行のテキストで、リストはマーケティング用のパネルではなく仕様書として読めます。行間の余白がグループ分けを担うため、枠は不要です。

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

短く揃えた時間

コントロールの動きは短く、繰り返しに耐える。状態が変わるたびに75ms。状態変化ごとに値が書かれているので、ブラウザの初期値が使われることはない。

最初の画面に生きている情景

WebGLのキャンバスがページに奥行きを与え、周囲のレイアウトは平坦なままなので、注意を引くのは描画だけだ。その空間をほかに埋めるものがないので、構図はレンダリングが失敗しても成立する必要がある。この参考は1464x1080で収録しました。

ヘルスケアのブリーフが効く理由

メディアがコピーより雄弁だとする。この構成はまさにその場合のためにある。メディアは1464x1080の5.9sループ映像だ。枠は静かなままで、36px〜110pxの可変型サイズ、40px刻みの余白が読み手を文字につなぎとめる。ヘルスケアの読み手に、訴求へ至る最短の正直な道を示す。

Celestial Renewalの最初の読みの順序

このページには意図された順番がある。ナビゲーションはプロダクトを提示し、再訪した読者に見慣れた導線を与える。見出しが表示サイズを取り、支える一行が提供内容を説明し、ブルー #0A4267のアクセントが主操作を示すので、次の一手が分からなくなることはない。ほかに競合するものはない。最初の判断より前にカードのグリッドは置かれず、それによってヘルスケアの案件でもランディングページが重く感じられない。ヘルスケアの読み手は、選択肢より先に訴求を受け取る。