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

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

Health Portalはランディングページの仕様書として読める。値はページを組む前に書き出されていた。「Trusted Dentist in West New York」は、レイアウトが背負うために組まれた一行。ページ全体は白 #F9F8F9の下地、深いのオレンジ #1D110Cの文字、赤 #990A09のアクセントでできている。納品物はReactとTailwind CSS。1ページで、プラグインも、デザインとの間に挟まるビルドツールもない。動きは2000msのトランジション、cubic-bezier(0.16,1,0.3,1)だけで完結する。ヘルスケアのランディングページが、デザインを変えずにコピー変更へ耐える必要があるとき最も効く。

対象

制作の仕様を書き、批判的に検討する材料として767pxのブレイクポイントを探しているStudioのチーム。
このランディングページは、640x472の画角をクライアントの3回の修正に耐えさせたい制作会社のために作った。
ランディングページをモデルに指示する人は、16,908文字のプロンプトを出発点に使う。

含まれる内容

ドロワーを持たない一行. ナビゲーションは帯ではなく細いストリップです。ワードマークは左、リンクは中央やや右、操作は#990A09の1つだけ。いずれも独自の背景を持たずにランディングページの上に載ります。ラベルは767pxで1行に収まる長さで、現在の項目はピルではなくウェイトで示します。
流し読みを前提にした構成. 文章を流し込む場所にパネルを並べている。ランディングページを見渡せるのはそのためだ。パネルは罫線ではなく余白で区切るため、グリッドは静かに見えます。この参考は640x472で収録しました。
段階ではなくクランプで可変. ブリーフは見出しに180px〜200pxのクランプを使っています。長い行が不格好に折れないのはそのためです。ビューポートが狭くなっても、文字はサイズが変わるだけで役割は変わりません。狭いレイアウトは設計してください。潰して縮めないでください。
実装まで持ち込む数値. リストは短く（200px刻みの余白、2000msのトランジション、cubic-bezier(0.16,1,0.3,1)のイージング、767pxのブレイクポイント）、システム全体を手作業で確認できる。値が固定されているので、差し替えてもリズムは変わらず見た目だけが変わる。

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

短く、明記された時間

ホバー、押下、フォーカスはいずれも2000msで解決する。インターフェースが即座に感じられるのはそのためだ。示された時間が覆うのは状態変化だけなので、動きのうち仕様に書かれているのはフィードバックの部分になる。フィードバックの時間は正確に合わせる。

見せ場は到達の順序

入場のモーションは一つの要素に絞る（セクションはビューポートに入るたびに現れる）。ほかの要素は読み込み時点で配置が済んでいる。タイミングは1つの値から導かれるので、行が長ければ手で調整しなくても長くなる。タイミングの合った入場が一つあれば、スクロール演出を並べたページより強い。この参考は640x472で収録しました。

ランディングページを支える数値

余白を好みと呼ぶテンプレートと比べる。ここでは同じ値に名前が付いている（200px刻みの余白、2000msのトランジション、cubic-bezier(0.16,1,0.3,1)のイージング、767pxのブレイクポイント）ので、編集はそれを守るか、構成を目に見えて壊すかのどちらかになる。このランディングページに、初期値任せの部分はない。

Health Portalの最初の読みの順序

順番どおりに読んでみる。ナビゲーション、見出し、お知らせのピル、数値の行、カードグリッド。各要素は役割を一つだけ持ち、赤 #990A09のアクセントは押してほしい要素にしか使われていない。ヘルスケアの読み手は、選択肢より先に訴求を受け取る。

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

ヘルスケアのページの多くは、セクションを増やし、グラデーションを増やし、主張を増やすことで失敗する。 Health Portalは逆を行く。「Trusted Dentist in West New York」が最初のフレームからその役割を担っている。構図は白 #F9F8F9に留まり、操作にだけ赤 #990A09を使う。意図して組んだと見えるにはそれで足りる。ヘルスケアの読み手に、訴求へ至る最短の正直な道を示す。