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

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

Organic OdysseyはAI・SaaSプロダクト向けのヒーローセクションの参考で、その背後のブリーフはムードボードではなく完全な構築仕様だ。ページ自身の見出しは「An odyssey through delicate living forms」で、構図はその言葉をそのまま中心に組まれている。配色は黒 #000000の下地に絞り、書体はGeist。この参考例はReactとTailwind CSSで組んであり、レイアウトの判断はそれとは独立に書かれている。ページはモーションを300msのトランジションにとどめる。書いている間は開いておく。4,802文字のブリーフが、自社ページにそのまま持ち込める部分。

対象

制作会社に発注する創業者は、1回目の受け入れ判定に640x470の画角を使う。
見出しをOrganic Odysseyと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。
公開が迫っているなら、640x470の画角と300msの入場だけを持っていけ。残りの構成には触るな。

含まれる内容

余分を持たないバー. ナビゲーションは1行だけで、下に第2階層を持たない。タブレットのブレイクポイントを下回ると、モバイル用のオーバーレイに切り替わります。バーは独自の背景を持たずに640x470の構図の上に載るため、その下のメディアは端から端まで届きます。
書体が決める階層. 大見出しはGeistで、ブリーフが定めたサイズで組む。見出しは段落ではなく構図の要素になる。字間はサイズごとに設定し、大見出しとキャプションで同じ値を共有しない。
実装まで持ち込む数値. 寸法は640x470のレンダリングから読み取った（20px刻みの余白、300msのトランジション）。リストの最小値と最大値が、構図の可動範囲を決める。再現は同じ数値で検証する。
タイポグラフィとして扱う数値. 数字はGeistで、本文よりも見出しに近いサイズで組む。数字は1つの字重で組み、行の中で統計に序列を付けない。

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

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

見出しは一括でフェードインしない。見出しは一括のフェードではなく文字単位で時間が割り当てられている。文字が現れる順序そのものが語りを担うため、静止画との差はここで生まれる。タイミングは1つの値から導かれるので、行が長ければ手で調整しなくても長くなる。この参考は640x470で収録しました。

時間も仕様に書く

時間は短く揃っている（300ms）。だからホバーと押下の状態は別々の効果の寄せ集めではなく、一つの仕組みとして読める。コントロール間で同じ値を再利用するので、時間がばらけようがない。挙動1つにつき時間1つ。

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

広い幅では構成は密度が高い。狭い幅ではナビゲーションはモバイルメニューに畳まれる。どちらの状態も同じ1本のブリーフに書かれており、後から足したものではない。最後まで変えないのは順序。この参考は640x470で収録しました。

ヒーローセクションの背後にある順序

最初の判断と競合するものはここにはない。ページは「An odyssey through delicate living forms」と明言している。補助情報は折り返しの下で待たせ、ページ上部はナビゲーション、見出し、数値の行、背景のクリップだけで担う。視線を横へ散らす要素は置いていない。 SaaSの読み手は、選択肢より先に訴求を受け取る。