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

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

Prosthetics Heroは、ヘルスケア・ウェルビーイングプロダクトがヒーローセクションで抱える課題を記録済みのブリーフ1本で解く。配色は白 #FDFCFCの下地。この項目は、ページを生んだ技術スタック（ReactとTailwind CSS）を隠さずに書いている。ブリーフはモーションの予算を200msのトランジションに使う。初見用ではなく、作り直しに耐えるヘルスケア・ウェルビーイングプロダクトのヒーローセクションのブリーフとして扱う。

対象

ヒーローセクションの構造はまるごと借り、640x464のフレームに照らして行ごとにコピーを差し替えろ。
ヘルスケア・ウェルビーイングプロダクトヒーローセクションを提案する制作会社が、12px〜14pxの可変型サイズ、13px刻みの余白を提案書に書き込みたい。キックオフの後も見積もりが崩れないようにするためだ。
ヒーローセクションをモデルに指示する人は、3,421文字のプロンプトを出発点に使う。

含まれる内容

邪魔にならないナビゲーションバー. バーはヒーローセクションを下に押さず、その上に重なる。構図はファーストビューの高さをそのまま保てる。バーは独自の背景を持たずに640x464の構図の上に載るため、その下のメディアは端から端まで届きます。
実装まで持ち込む数値. 寸法は640x464のレンダリングから読み取った（12px〜14pxの可変型サイズ、13px刻みの余白、200msのトランジション）。各値は文字サイズの刻み、余白、角丸、トランジションのいずれか1つの役割に対応する。
ファーストビュー上部のバッジ. 見出しの上に小さなピルを1つだけ置いて、1件のお知らせを伝えます。ページ上部を掲示板にせず、動きだけを知らせることが目的だからです。見出しが構図の中心を保つ位置に置きます。この参考は640x464で収録しました。
1画面に収まる構造. 640x464で構図は完成しています。コピー、メディア、操作要素はすべてブリーフで名指しされています。ページは640x464の1つの構図です。コピーが変わっても崩れないのはそのためです。

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

インタラクティブ層はコントロール

インタラクティブな層は意図的に小さい（すべてのカードではなくボタンとリンクのホバー状態）。状態は仕様に明記されているので、ページはホバー効果のライブラリに依存しない。この参考は640x464で収録しました。

短く、明記された時間

ブリーフはトランジションの値を200msに固定しているので、作り直すときに遅い既定値で代用できない。時間が短いので、フィードバックはアニメーションではなく応答として読める。

ヒーローセクションを支える数値

起点になる数値は12px〜14pxの可変型サイズ、13px刻みの余白。余白はそこから導かれ、ページの他のすべてはこの2つの値に対して位置を決める。このヒーローセクションに、初期値任せの部分はない。

ヘルスケアに効くところ

トレードオフは情報密度。このヒーローセクションは機能訴求型のレイアウトよりファーストビューで語らない。代わりに読み順を守り、長いページなら分散させる仕事をナビゲーション、見出し、お知らせのピル、背景のクリップが引き受ける。ヘルスケアの読み手に、訴求へ至る最短の正直な道を示す。この参考は640x464で収録しました。