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

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

Wellness Balanceは、ヘルスケア・ウェルビーイングプロダクトがヒーローセクションで抱える課題を記録済みのブリーフ1本で解く。見出しは「Discover our new plant-based supplements for daily balance and clean energy」で、ヒーローセクションの残りはその周りに配置されている。配色は白 #ECEDECの下地、白 #FEFDF9の文字に絞り、書体はDM Sans。この参考例はReactとTailwind CSSで組んであり、レイアウトの判断はそれとは独立に書かれている。結局、動きは0.8sのトランジション、cubic-bezier(0.16, 1, 0.3, 1)に尽きる。最初の画面で意図が伝わる必要があるヘルスケア・ウェルビーイングプロダクトのヒーローセクションには、この参考が適している。

対象

このヒーローセクションからは、他の何よりも先に640x472の画角と28px〜35pxの可変型サイズ、110px刻みの余白を持っていけ。
ヒーローセクションをモデルに指示する人は、7,840文字のプロンプトを出発点に使う。
見出しをWellness Balanceと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。

含まれる内容

一行に収めたナビゲーション. 短いリンク列と1つの操作がヒーローセクションの上に載り、寸法は28px〜35pxの可変型サイズ、110px刻みの余白で抑えてある。背後の構図と競合しないためだ。バーは独自の背景を持たずに640x472の構図の上に載るため、その下のメディアは端から端まで届きます。リンクは4〜5本に抑えてください。その本数に合わせて行のサイズが決まっています。
枠線のないカード. 読み順はグリッドが決めます。同じ重みのパネルが1つずつ考えを担い、小さめのDM Sansで組むことで構造が見えたままになります。グリッド内でアクセントが示すのは多くても1要素で、パネル同士が競合しない。パネル1枚につき1つの考え。
検証できる数値. リストは短く（28px〜35pxの可変型サイズ、110px刻みの余白、0.8sのトランジション、cubic-bezier(0.16, 1, 0.3, 1)のイージング）、システム全体を手作業で確認できる。各値は文字サイズの刻み、余白、角丸、トランジションのいずれか1つの役割に対応する。
役割ごとに指定した字重. タイポグラフィはDM Sansです。ブリーフは変化をつけるために混ぜるのではなく、書体に役割を与えています。ウェイト、トラッキング、サイズ段階がすべて指定されているため、差し替えても階層は保たれます。サイズが大きくなるほど字間を詰めるため、28–35pxの範囲でディスプレイの行がまとまります。

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

入場する要素は1つだけ

入場のモーションは一つの要素にだけ使う（見出しが一語ずつ現れる）。要素の多い最初の画面が煩くならないのはそのためだ。実装はいくつかのトランジションで、アニメーションライブラリは使っていない。この参考は640x472で収録しました。

インタラクションは局所に

インタラクティブな層は意図的に小さい（必要なときに内容を送るスライダー）。モーダルを開いたりスクロールを乗っ取ったりする要素はなく、インタラクションは要素の内側にとどまる。この参考は640x472で収録しました。

ヘルスケア・ウェルビーイングプロダクトがここで得るもの

メディアに色の膜をかぶせるのが簡単な解決だったはず。ブリーフはそれを外している。メディアは640x472の静止画だ。それでもコピーが保つのは、28px〜35pxの可変型サイズ、110px刻みの余白が画面を静かに保つから。ヘルスケアの読み手に、訴求へ至る最短の正直な道を示す。

Wellness Balanceで最初に変えるもの

色ではなくコピーから始める。「Discover our new plant-based supplements for daily balance and clean energy」を自社製品についての1文に書き換え、ブリーフのサイズでDM Sansに組む。構成より差し替えのほうが安い。それがこの参考例の狙いだ。