Velorahの制作会社・スタジオヒーローセクションデザインとプロンプト

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

Velorahは、制作会社・スタジオがヒーローセクションで抱える課題を記録済みのブリーフ1本で解く。「Where dreams rise through the silence」で始まり、その一行をカードに縮めず、フレームいっぱいに置いている。色はティール #01405Fの下地、イエロー #D9BF63の文字に限り、Interで組んでいる。この参考例はReactとTailwind CSSで組んであり、レイアウトの判断はそれとは独立に書かれている。ブリーフはモーションの予算を0.8sのトランジションに使う。書いている間は開いておく。3,788文字のブリーフが、自社ページにそのまま持ち込める部分。

対象

工数を見積もるプロダクトマネージャーは、800x589のフレームを作業範囲として読む。
見出しをVelorahと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。
Interを導入済みで、800x589の書き出しを用意し、今週ビルド枠が取れるチームのために作った。

含まれる内容

操作より前に置くリンク. バーはヒーローセクションを下に押さず、その上に重なる。構図はファーストビューの高さをそのまま保てる。バーは独自の背景を持たずに800x589の構図の上に載るため、その下のメディアは端から端まで届きます。
スタイルを決めるタイポグラフィ. Interに仕事を任せ、見出しから補助コピーへサイズを大きく落とし、サイズが大きくなるほど字間を詰めています。階層を担うのは色ではなく文字です。書体は固定サイズと組になっています。ディスプレイの行とインターフェースの文字が同じ体系に留まるのはそのためです。刻みは残し、書体だけ差し替える。
ビューポート基準の計測. 寸法は800x589のレンダリングから読み取った（90px刻みの余白、0.8sのトランジション）。ブリーフは比率ではなく値を示すため、コピーの長さが変わっても構図の関係は保たれます。
ベースラインに乗る数字. 数値の行が根拠になります。1行に3〜4つの数字、その下に小さなラベル、インターフェースと同じInterで組むため、装飾ではなくデータとして読めます。数値はインターフェースと同じ書体を使うため、ページを中断させるのではなく、ページの一部になります。1つの数値に段落が要るなら、それは数値ではありません。

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

効く場所だけポインター

ここでのインタラクションは各コントロールの内側で完結する（すべてのカードではなくボタンとリンクのホバー状態）。ページのほかの部分が巻き添えで動くことはない。各状態が変えるプロパティは1つなので、フィードバックが読み取りやすい。この参考は800x589で収録しました。

時間も仕様に書く

ブリーフはトランジションの値を0.8sに固定しているので、作り直すときに遅い既定値で代用できない。イージングは再生時間と一緒に指定されている（0.8s）ので、作り直しの際に別の感触へ黙って差し替わることはない。

Velorahを仕様として読む

多くの参考例は結果だけを見せ、数値は伏せる。これは逆で、90px刻みの余白、0.8sのトランジションをページと並べて公開する。結果を近似ではなく再現できるようにするためだ。このヒーローセクションに、初期値任せの部分はない。

Velorahの最初の読みの順序

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