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

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

Gulfseliteは旅行ブランド向けのヒーローセクションの参考で、その背後のブリーフはムードボードではなく完全な構築仕様だ。配色はくすんだのオレンジ #69574Bの下地、白 #FEFEFEの文字で、書体はInter。この参考例はTailwindと素のJavaScriptで組んであり、レイアウトの判断はそれとは独立に書かれている。ブリーフはモーションの予算を120msのトランジション、ループする動画の下地に使う。最初の画面で意図が伝わる必要がある旅行ブランドのヒーローセクションには、この参考が適している。収録したプロンプトは1920x1448で記録したので、このページで引用する値はすべてそこにたどれる。以下に引用する値はすべてこのブリーフのもので、1920x1448の枠から最小の余白ステップまで含む。

対象

参考がただの出発点なら、デザイナーはTailwindと素のJavaScriptを残し、ヒーローセクションの残りを組み直せる。
この種のページを通常の工程で出すフロントエンド開発者は、Tailwindと素のJavaScriptを参照実装として使う。
Tailwindと素のJavaScriptでこのページを作り直すフロントエンド開発者で、トランジションを推測ではなく指定として受け取りたい。

含まれる内容

一行に収めたナビゲーション. バーは1行のテキストと1つの操作だけで、20px刻みの余白、120msのトランジションとして測ってある。太い帯ではなく細い一行として読ませるためだ。バーは独自の背景を持たずに1920x1448の構図の上に載るため、その下のメディアは端から端まで届きます。自社のページにセクションが多い場合は、バーを広げるのではなくまとめてください。
ファーストビュー上部のバッジ. バッジは1つ、メッセージも1つ。ピルは見出しの上にInterの最小段階で置き、その位置を争う要素はほかにありません。見出しが構図の中心を保つ位置に置きます。古くなったお知らせは外してください。
明記された寸法. ブリーフは20px刻みの余白、120msのトランジションを固定し、残りは配置に任せる。ひとりでに段数が増えるスケールとは逆の発想だ。書体とレイアウトが同じ段階を共有しているため、どちらかを差し替えてもずれません。
パネルではなく背景の動画. ミュートしたループクリップ1本が1920x1448のフレームを覆い、9.9sで再生されます。 cover指定で配置し、コピーはその上に重なります。ブリーフは動画にオーバーレイを載せないため、色は曇りません。自動再生が使えないときは1920x1448のポスター画像が構図を保つため、レイアウトが崩れることはありません。

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

状態変化にも時間を与える

ブリーフはトランジションの値を120msに固定しているので、作り直すときに遅い既定値で代用できない。ページが設計されているように読めるのは時間が短いからで、既定の遅い値ならこの構図は崩れる。

入場そのものが署名

一語ずつの入場だけで、ページ上のほかの要素は何も演じない。時間はコンテナではなく文字に割り当てられている。だから行は塊ではなく文として着地する。この参考は1920x1448で収録しました。

ヒーローセクションを支えるタイミング

欲張ったモーションは、たいていファーストビューの可読性を奪う。このブリーフは120msのトランジション、9.9sのメディアループ、一語ずつ現れる見出しを短く抑え、文字を待たせない。このヒーローセクションで、動くために動く要素はない。

Gulfseliteで最初に変えるもの

自社の配色が重いなら、決める前に枠に当てて検証する。ページを支えるのはくすんだのオレンジ #69574Bなので、暗いアクセントには参考例より強いコントラストが要る。触れずにおくのは枠とスケール。

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

ブレイクポイントを、レイアウトを変えるためではなく収めるために選んでいるなら、この項目を読むとよい。隠す要素を並べる代わりに、スケールは段階式ではなく可変。それがこの項目の内容だ。最後まで変えないのは順序。この参考は1920x1448で収録しました。

よくある質問（FAQ）

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

収録されたブリーフは2,498文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。

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

この参考例はたまたまTailwindと素のJavaScriptで作られているだけで、レイアウトのどの部分もその選択に依存していません。余白、書体、モーションの値は、すでに使っている環境へそのまま持ち込めます。

手に入れたGulfseliteのブリーフで、何ができますか？

このページに引用している内容はすべて、収録された2,498文字のブリーフが出典で、後から書き足した解説ではありません。数値と文章が食い違わないのはそのためです。