AI Trip Plannerの旅行料金セクションデザインとプロンプト

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

AI Trip Plannerは旅行ブランド向けの実用的な参考だ。料金セクションはすでに配置され、寸法も測られ、いつでも作り直せる。「Where will you go next?」で始まり、その一行をカードに縮めず、フレームいっぱいに置いている。配色は白 #FAFAFAの下地、黒 #0A0A0Aの文字に絞り、書体はGeist。納品形式はReactとTailwind CSSなので、料金セクション全体をデザインの引き継ぎなしにプロジェクトへ持ち込める。モーションの予算はループする動画の下地。新しいセクションを足す前に料金セクションの順序を決めたいときに使う。以下に引用する値はすべてこのブリーフのもので、1470x1080の枠から最小の余白ステップまで含む。

対象

料金セクションの構造はまるごと借り、760pxのブレイクポイントに照らして行ごとにコピーを差し替えろ。
この料金セクションを3人で編集するなら、コンテンツ責任者にはスクリーンショットではなく15px〜40pxの可変型サイズ、15px刻みの余白を渡せ。
複数案件を同時に進めるスタジオ責任者は、この料金セクションを他ページが踏襲する型として使う。

含まれる内容

意図的に細いナビゲーション. 細いバーを料金セクションの上に重ね、左にワードマーク、リンクはGeistで組みます。そのため構図はコンテンツが先、装飾は後に読めます。760px未満では、リンクが全画面オーバーレイに畳まれます。760px以下では、リンクは2行目に折り返さず折りたたむ。
最下層に置く動画. ブリーフは動画を1470x1080、ループを6sと指定し、すべてのテキスト要素はその画幅に合わせて置かれる。1470x1080以上で書き出せば、coverの切り抜きはそのまま機能する。書き出しは1470x1080以上にして、トリミングを正確に保ってください。
段階ではなくクランプで可変. スケールの上端だけが可変（15px〜40pxのクランプ）で残りは固定のため、ビューポートが狭くなってもフレームの構図は保たれます。操作要素はタップできる大きさを保ち、コピーはどの幅でも読み順を変えません。
刻みを名指しするブリーフ. ブリーフの寸法はすべて、測り直せる数値だ（15px〜40pxの可変型サイズ、15px刻みの余白、760pxのブレイクポイント）。余白は文字と同じ単位で書かれ、そのまま比較できる。

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

ホバーは控えめに

インタラクティブな要素はそれぞれ1つのことしかしない（すべてのカードではなくボタンとリンクのホバー状態）。状態が予測できるのはそのため。フィードバックは操作要素に限られるので、その周りの構図は静止したままだ。この参考は1470x1080で収録しました。

ループが環境演出を担う

環境の動きは6秒の映像1本を1470x1080で使うだけ。ポインターに反応させず、コピーの背後で静かにループさせる。自動再生が止められた場合はポスターフレームが代わりに立ち、動きは必須ではなく追加要素にとどまる。

AI Trip Plannerの最初の読みの順序

ここでは順序そのものがデザイン。訴求が実績より先に届くようナビゲーション、見出し、お知らせのピル、数値の行、カードグリッドを置き、両者の距離を15px〜40pxの可変型サイズ、15px刻みの余白が決める。旅行の読み手は、選択肢より先に訴求を受け取る。

旅行のブリーフが効く理由

いまのファーストビューが3つのことを説明しているなら、これは1つだけを説明する版。ナビゲーション、見出し、お知らせのピル、数値の行、カードグリッドを読み順に並べ、15px〜40pxの可変型サイズ、15px刻みの余白がリズムを決める。 AI Trip Plannerは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。