Aetheris Voyageの旅行ヒーローセクションデザインとプロンプト

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

Aetheris Voyageは800x570で記録し、ギャラリー用の画像ではなく仕様として残した。ページ自身の見出しは「Venture Past Our Sky Across the Universe」で、構図はその言葉をそのまま中心に組まれている。配色は黒 #181719の下地、くすんだのオレンジ #ECD9C1の文字で、書体はInstrument Serif。納品物はReactとTailwind CSSで、800x570で記録しているため、コードを書く前に枠が決まっている。モーションは100msのトランジション、ループする動画の下地に限っている。旅行のヒーローセクションが、デザインを変えずにコピー変更へ耐える必要があるとき最も効く。収録したプロンプトは800x570で記録したので、このページで引用する値はすべてそこにたどれる。

対象

このヒーローセクションは、旅行のコピーが8.8sのループ映像を支えられる証拠を1画面分必要とする創業者に応える。
ヒーローセクションをモデルに指示する人は、10,190文字のプロンプトを出発点に使う。
見出しをAetheris Voyageと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。

含まれる内容

ドロワーを持たない一行. バーは1行のテキストと1つの操作だけで、10px刻みの余白、100msのトランジションとして測ってある。太い帯ではなく細い一行として読ませるためだ。バーは独自の背景を持たずに800x570の構図の上に載るため、その下のメディアは端から端まで届きます。
スタイルを決めるタイポグラフィ. 大見出しはInstrument Serifで、ブリーフが定めたサイズで組む。見出しは段落ではなく構図の要素になる。ブリーフが置いたサイズと字重を動かさなければ、書体の差し替えは安全だ。役割が明確な1ファミリーは、競い合う2つに勝ります。
実装まで持ち込む数値. 寸法は800x570のレンダリングから読み取った（10px刻みの余白、100msのトランジション）。すべての値は収録時のプロンプトと突き合わせて確認できます。再現が近似ではなく検証可能になるのはそのためです。
雰囲気を担うメディア1つ. ミュートしたループクリップ1本が800x570のフレームを覆い、8.8sで再生されます。 cover指定で配置し、コピーはその上に重なります。ブリーフは動画にオーバーレイを載せないため、色は曇りません。ループは8.8sと短く、目にはタイムラインではなくテクスチャとして映ります。

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

表示演出は移動に連動

読者が動かすとセクションはビューポートに入るたびに現れるが構図を変えるが、レイアウトの順序は固定されたまま。この効果は装飾なので、切っても階層は成立する。この参考は800x570で収録しました。

スクロールライブラリなしの環境モーション

環境の動きは8.8秒の映像1本を800x570で使うだけ。ポインターに反応させず、コピーの背後で静かにループさせる。ループはcoverで切り出しており、構図は特定のフレームサイズに依存しない。

Aetheris Voyageの最初の読みの順序

こうしたページは普通、機能グリッドの下にアクションを埋める。これはナビゲーション、見出し、お知らせのピル、数値の行、カードグリッドを固定の順序に置き、アクションを3画面分スクロールした先ではなくファーストビューの中に置く。旅行の読み手は、選択肢より先に訴求を受け取る。この参考は800x570で収録しました。

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

広い幅では構成は密度が高い。狭い幅ではスケールは段階式ではなく可変。どちらの状態も同じ1本のブリーフに書かれており、後から足したものではない。どちらの状態も同じブリーフに書かれている。この参考は800x570で収録しました。

Aetheris Voyageで最初に変えるもの

最初に配色を変えるのがよくある失敗。構成に触れないまま雰囲気だけが変わり、レイアウトを支えるのは結局10px刻みの余白、100msのトランジション。コピーとメディアを先に、配色は最後にする。フレームとスケールは保ち、変えるべきなのは題材のほうです。

よくある質問（FAQ）

Aetheris Voyageのブリーフをコピーすると何が手に入りますか？

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

Aetheris Voyageのヒーローセクションを別の技術スタックで作り直せますか？

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

Aetheris Voyageの素材はクライアント案件でどう扱えばよいですか？

ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は800x570で収録しました。