EquilibriumのAI・SaaSヒーローセクションデザインとプロンプト

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

EquilibriumはAI・SaaSプロダクト向けのヒーローセクションの参考で、その背後のブリーフはムードボードではなく完全な構築仕様だ。配色は深いのブルー #0F1118の下地、くすんだのオレンジ #CDBAB2の文字で、書体はGeist。実装はReactとTailwind CSSだ。中の寸法はすべて書き出してあるので、そのまま再利用できる。記録されたブリーフから始め、ヒーローセクションをゼロから作り直すのではなく編集する。収録したプロンプトは640x472で記録したので、このページで引用する値はすべてそこにたどれる。以下に引用する値はすべてこのブリーフのもので、640x472の枠から最小の余白ステップまで含む。

対象

まず72px刻みの余白から決めろ。配色は後からついてくる。このヒーローセクションを読ませているのは余白だ。
ヒーローセクションをモデルに指示する人は、4,787文字のプロンプトを出発点に使う。
見出しをEquilibriumと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。

含まれる内容

背景を持たないナビゲーション. ワードマークが左端を押さえ、その右にリンクが並ぶ。すべてGeistで組んであり、バーは別系統ではなく下のページに属して見える。バーは独自の背景を持たずに640x472の構図の上に載るため、その下のメディアは端から端まで届きます。
既定値に頼らない構成. 寸法は640x472のレンダリングから読み取った（72px刻みの余白）。ブリーフは比率ではなく値を示すため、コピーの長さが変わっても構図の関係は保たれます。数値がデザインで、残りは配置にすぎません。
新しい1つだけを示すピル. バッジは1つ、メッセージも1つ。ピルは見出しの上にGeistの最小段階で置き、その位置を争う要素はほかにありません。お知らせは1件だけです。バッジがニュースらしく見えるのはそのためです。
役割ごとに指定した字重. Geistに仕事を任せ、見出しから補助コピーへサイズを大きく落とし、サイズが大きくなるほど字間を詰めています。階層を担うのは色ではなく文字です。キャプションの刻みは、図の下に置いてもページのリズムを変えない大きさだ。

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

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

インタラクティブな要素はそれぞれ1つのことしかしない（すべてのカードではなくボタンとリンクのホバー状態）。状態が予測できるのはそのため。インタラクティブな状態はレイアウトを動かさないので、ポインターの下で何かが跳ねることはない。この参考は640x472で収録しました。

モーションはほぼない

スクロールライブラリはない。640x472の構図は静止したままで、動くのは自分に反応する要素だけだ。モーションは装飾ではなくフィードバックとして扱う。動きは操作要素にとどめる。

ヒーローセクションの再配置

別に保守するモバイル用デザインは存在しない。ナビゲーションはモバイルメニューに畳まれる。同じ階層が幅をまたいでそのまま通るので、二重管理にならない。詰め込みのほうが安く済むが、保たない。この参考は640x472で収録しました。

Equilibriumで最初に変えるもの

作業時間が半日しかないとする。見出しとアクションのラベルを変え、72px刻みの余白には触れなければ、意図して組んだように見えるページになる。変えるべきなのは主題の部分だ。

Equilibriumの最初の読みの順序

ここでは順序そのものがデザイン。訴求が実績より先に届くようナビゲーション、お知らせのピル、数値の行、背景のクリップを置き、両者の距離を72px刻みの余白が決める。 SaaSの読み手は、選択肢より先に訴求を受け取る。

よくある質問（FAQ）

Equilibriumの土台になっているプロンプトはどれくらいの長さですか？

気分を書いた説明ではなく、制作のための仕様です。640x472のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。

この項目にReactとTailwind CSSが書かれているのはなぜですか？

EquilibriumはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。

Equilibriumの1秒未満のトランジションはどう動きますか？

トランジションはスクロールのタイムラインではなく、インターフェースの状態に紐づいており、1秒未満の範囲で収束します。値はブリーフに記録されているので、移植のたびに勘で合わせる必要はありません。この参考は640x472で収録しました。