Audio Showcaseのライフスタイルヒーローセクションデザインとプロンプト

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

Audio Showcaseはライフスタイルブランドに、完成したファーストビューと、それを生んだ数値を渡す。見出しは「Press 04. Vernal woods」で、ヒーローセクションの残りはその周りに配置されている。カラースキームはブルー #216CD1の下地、グレー #C7D5D5の文字で、ページはHelvetica, Arialで組む。納品物はReactとTailwind CSS。1ページで、プラグインも、デザインとの間に挟まるビルドツールもない。モーションの予算は0.7sのトランジション、cubic-bezier(0.22, 1, 0.36, 1)。最初の画面で意図が伝わる必要があるライフスタイルブランドのヒーローセクションには、この参考が適している。

対象

AIビルダーを使う人で、モデルに任せるのではなく640x474のフレームが最初から入った仕様を求めている。
ヒーローセクションをモデルに指示する人は、6,927文字のプロンプトを出発点に使う。
見出しをAudio Showcaseと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。

含まれる内容

意図的に細いナビゲーション. 短いリンク列と1つの操作がヒーローセクションの上に載り、寸法は20px刻みの余白、0.7sのトランジションで抑えてある。背後の構図と競合しないためだ。バーは独自の背景を持たずに640x474の構図の上に載るため、その下のメディアは端から端まで届きます。
ファーストビュー上部のバッジ. バッジは1つ、メッセージも1つ。ピルは見出しの上にHelvetica, Arialの最小段階で置き、その位置を争う要素はほかにありません。お知らせは1件だけです。バッジがニュースらしく見えるのはそのためです。見出しの上に置き、横には決して置かないでください。
明記された寸法. レイアウトは固定値（20px刻みの余白、0.7sのトランジション、cubic-bezier(0.22, 1, 0.36, 1)のイージング）を基準に決めているため、どの幅でもファーストビューの構図が保たれます。書体とレイアウトが同じ段階を共有しているため、どちらかを差し替えてもずれません。
ファーストビューに置く根拠. 小さな数値の帯が、本来なら段落が要る主張を引き受けます。ヒーローセクションが機能リストに変わるのを防ぐためです。ラベルの刻みはブリーフに明記してあり、差し替えても数字より小さいままになる。この参考は640x474で収録しました。

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

意図を感じる速さ

時間は短く揃っている（0.7s、cubic-bezier(0.22, 1, 0.36, 1)を使い）。だからホバーと押下の状態は別々の効果の寄せ集めではなく、一つの仕組みとして読める。イージングは再生時間と一緒に指定されている（0.7s）ので、作り直しの際に別の感触へ黙って差し替わることはない。

中央にリアルタイムのキャンバス

最初の画面は画像として送らず、ブラウザに組み立てさせる。 WebGLのキャンバス。情景は画像として背後に敷かれるのではなく、ビューポートに反応する。この参考は640x474で収録しました。

このヒーローセクションが立てる主張

このページの約束は1つだけで、それを支えているのが20px刻みの余白、0.7sのトランジション。「Press 04. Vernal woods」が最初のフレームからその役割を担っている。折り返しより下の要素には、同じ訴求を二度背負わせていない。 Audio Showcaseは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。

Audio Showcaseの最初の読みの順序

注意は偶然に任せず、導いている。「Press 04. Vernal woods」が最初のフレームからその役割を担っている。順序はナビゲーション、見出し、お知らせのピル、数値の行、カードグリッドと進み、各停留点は20px刻みの余白、0.7sのトランジションに合わせて寸法を取るので、順番が崩れることはない。ライフスタイルの読み手は、選択肢より先に訴求を受け取る。