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

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

SkyElite Private Jetsは旅行ブランドに、完成したファーストビューと、それを生んだ数値を渡す。「Your dedication deserves recognition」は、レイアウトが背負うために組まれた一行。カラースキームは深いのブルー #1A2229の下地で、ページはInterで組む。納品物はReactとTailwind CSS。1ページで、プラグインも、デザインとの間に挟まるビルドツールもない。旅行のヒーローセクションを発注するなら、この構成から始めて主題だけ差し替える。収録したプロンプトは1920x1455で記録したので、このページで引用する値はすべてそこにたどれる。以下に引用する値はすべてこのブリーフのもので、1920x1455の枠から最小の余白ステップまで含む。

対象

このヒーローセクションを引き継ぐマーケターは、100vhのセクション、12px刻みの余白で書き直しが尺度を保ったか確認する。
見出しをSkyElite Private Jetsと同じ長さに保ったままヒーローセクションを書き換えるコンテンツ責任者のために作った。
ヒーローセクションをモデルに指示する人は、2,285文字のプロンプトを出発点に使う。

含まれる内容

1つの幅で折りたたむリンク. 短いリンク列と1つの操作がヒーローセクションの上に載り、寸法は100vhのセクション、12px刻みの余白で抑えてある。背後の構図と競合しないためだ。バーは独自の背景を持たずに1920x1455の構図の上に載るため、その下のメディアは端から端まで届きます。
書体が決める階層. このトーンを作っているのはブリーフのサイズ段階とトラッキングです。詰めたディスプレイサイズのInterがあり、そこから補助コピーへはっきり落とします。数字はUI書体を共有し、統計もラベルも同じシステムに属する。
検証できる数値. ブリーフは100vhのセクション、12px刻みの余白を固定し、残りは配置に任せる。ひとりでに段数が増えるスケールとは逆の発想だ。各値は文字サイズの刻み、余白、角丸、トランジションのいずれか1つの役割に対応する。
コピーが先、装飾は後. 構図全体が1画面に収まり、ReactとTailwind CSSで作られています。コピー、メディア、操作要素はブリーフで名指しされています。ページは1920x1455の1つの構図です。コピーが変わっても崩れないのはそのためです。

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

反応はコントロールに返す

ポインターまわりの処理は小さく、仕様に書かれている。すべてのカードではなくボタンとリンクのホバー状態を、もともと操作できそうに見える要素にだけ適用する。状態が単純なので、どんなコンポーネント体系にも移植できる。長い効果のリストより、確実な状態をいくつか。この参考は1920x1455で収録しました。

モーションはほぼない

これは1920x1455の静止した構図として届けられる。だから階層がモーションなしで成立する必要があり、実際に成立している。動くのはポインターに反応する要素だけだ。スクロールのタイムラインは要らない。

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

このヒーローセクションを1920x1455とスマートフォン幅で見比べる。順序は同じまま保たれ、セクションは100vhに固定、ナビゲーションはモバイルメニューに畳まれる。変わるのは寸法だけだ。狭い幅のレイアウトは縮小ではなく判断であり、階層もそのまま保たれます。

ヒーローセクションを自社のものにする

変える順番はコピーとメディアが先、色が次、レイアウトが最後である。1920x1455のフレームとInterのスケールがページを支えているので、それらを貫くのではなく、その周りで差し替える。メディアのトリミングは守る。書体と同じだけ働いている。

SkyElite Private Jetsを仕様として読む

このヒーローセクションをブロックごとに分解しても、値はそれを説明し続ける。枠と、その下のリズムを決めているのが100vhのセクション、12px刻みの余白だ。このヒーローセクションに、初期値任せの部分はない。

よくある質問（FAQ）

SkyElite Private Jetsのプロンプトは完成した仕様書ですか、それとも出発点ですか？

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

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

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

SkyElite Private Jetsはクライアント案件で使えますか？

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