Healcureのヘルスケアヒーローセクションデザインとプロンプト

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

Healcureは判断の履歴を残しており、このヒーローセクションを生んだブリーフは3,021文字。「Healthcare for Good. Today. Tomorrow. Always.」で始まり、その一行をカードに縮めず、フレームいっぱいに置いている。ページ全体はくすんだのブルー #374251の下地でできている。この参考例はTailwind CSSで組んであり、レイアウトの判断はそれとは独立に書かれている。モーションの予算はループする動画の下地。ヘルスケアのヒーローセクションを発注するなら、この構成から始めて主題だけ差し替える。このページの残りは、ヒーローセクションをブロックごと、次にタイミングと値ごとに分解する。ブリーフにない主張は足さない。

対象

このヒーローセクションは、キックオフに同席していない相手へ1466x1080のフレームを説明する必要があるチームに応える。
このヒーローセクションを3人で編集するなら、コンテンツ責任者にはスクリーンショットではなく14px刻みの余白を渡せ。
制作会社に発注する創業者は、1回目の受け入れ判定に1466x1080の画角を使う。

含まれる内容

1つの幅で折りたたむリンク. ナビゲーションは1行だけで、下に第2階層を持たない。バーは独自の背景を持たずに1466x1080の構図の上に載るため、その下のメディアは端から端まで届きます。行は1行に保つ。
明記された余白の刻み. ブリーフは数値を名指ししています（14px刻みの余白）。書体とフレームの間に勝手な余白の段階がないからこそ、構図はまとまります。これらの数値に合わせて再現すれば、追加調整なしで参考例に近づく。
オーバーレイなしのメディア. 背景は1466x1080の5.4sループ1本だけで、coverでトリミングし、色は一切載せていません。ほかの要素はすべて上のレイヤーに浮かびます。ループは5.4sと短く、目にはタイムラインではなくテクスチャとして映ります。書き出しは1466x1080以上にして、トリミングを正確に保ってください。
タイポグラフィとして扱う数値. 小さな数値の帯が、本来なら段落が要る主張を引き受けます。ヒーローセクションが機能リストに変わるのを防ぐためです。この行は上の見出しと同じマージンに揃える。この参考は1466x1080で収録しました。

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

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

環境の動きはスクロール演出ではなく5.4秒の1466x1080ループから生まれる。だからページは落ち着き、文字は読める。映像が短いので切れ目なくループでき、解像度よりもその点が効く。1466x1080以上で撮影または書き出す。

読み込み時にページが組み上がる

一語ずつの入場が最初の画面を担う。その下の構図は静止したままなので、動きは装飾ではなくページが組み上がっていく過程として読める。この手法を外しても内容は残り、レイアウトもずれない。2つ目の入場は足さない。この参考は1466x1080で収録しました。

ヒーローセクションを自社のものにする

先に中身を変え、枠は後から確認する。コピーを差し替えている間、壊してはいけない値が14px刻みの余白だ。ここを動かすと、あとで枠ごと組み直すことになる。新しい要素が提供内容や次の操作の説明に寄与しないなら、ファーストビューの下に置くのが正解です。

Healcureの最初の読みの順序

最初の判断と競合するものはここにはない。「Healthcare for Good. Today. Tomorrow. Always.」が最初のフレームからその役割を担っている。補助情報は折り返しの下で待たせ、ページ上部はナビゲーション、お知らせのピル、数値の行だけで担う。視線を横へ散らす要素は置いていない。ヘルスケアの読み手は、選択肢より先に訴求を受け取る。