Place Saverの旅行ランディングページデザインとプロンプト

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

Place Saverは判断の履歴を残しており、このランディングページを生んだブリーフは8,226文字。ページ自身の見出しは「The place for all your places」で、構図はその言葉をそのまま中心に組まれている。配色は白 #F4F4F4の下地、深いのブルー #0C0C0Eの文字に絞り、書体はPlayfair Display。納品物は単一のコンポーネントで、1480x1080で記録しているため、コードを書く前に枠が決まっている。モーションは0.9sのトランジション、cubic-bezier(0.16, 1, 0.3, 1)、ループする動画の下地で、コピーが主役のままになる程度に抑えている。初見用ではなく、作り直しに耐える旅行ブランドのランディングページのブリーフとして扱う。

対象

ランディングページの構造はまるごと借り、単一のコンポーネントに照らして行ごとにコピーを差し替えろ。
単一のコンポーネントから組み始めるなら、先に角丸48px、28px刻みの余白を取り出せ。グリッドが固まるまでは配色に触るな。
競合の旅行ランディングページを作り直すチームが、フレームワークを決める前に単一のコンポーネントを明示したい。

含まれる内容

既定値に頼らない構成. 寸法は1480x1080のレンダリングから読み取った（角丸48px、28px刻みの余白、0.9sのトランジション、cubic-bezier(0.16, 1, 0.3, 1)のイージング）。ブリーフは比率ではなく値を示すため、コピーの長さが変わっても構図の関係は保たれます。差し替えるのは書体かコピーで、スケールではありません。
大きくなるほど詰まる字間. このトーンを作っているのはブリーフのサイズ段階とトラッキングです。詰めたディスプレイサイズのPlayfair Displayがあり、そこから補助コピーへはっきり落とします。書体は固定サイズと組になっています。ディスプレイの行とインターフェースの文字が同じ体系に留まるのはそのためです。
全画面の動画、パネルなし. メディアは物語ではなく雰囲気を担う。1480x1080の5.6sループがすべての後ろに敷かれる。ループは5.6sと短く、目にはタイムラインではなくテクスチャとして映ります。書き出しは1480x1080以上にして、トリミングを正確に保ってください。
パネルに分割した内容. コピーの各ブロックは48pxの角丸を持つ独立したパネルに入ります。長い機能リストがファーストビューでまとまって見えるのはそのためです。角の処理はグリッド全体で揃えています（48px）。パネルが別々のコンポーネントに見えなくなるのはそのためです。

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

ループが環境演出を担う

背景の映像は5.6秒、1480x1080でミュートのままインライン再生され、無限にループする。読者の注意がコピーにある間もページは動き続ける。環境モーションは映像そのものだけなので、スクロールライブラリは要らない。映像が短いので切れ目なくループでき、解像度よりもその点が効く。

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

ホバー、押下、フォーカスはいずれも0.9sで解決する。インターフェースが即座に感じられるのはそのためだ。イージングは再生時間と一緒に指定されている（0.9s）ので、作り直しの際に別の感触へ黙って差し替わることはない。フィードバックの時間は正確に合わせる。

ランディングページを支える数値

作り直しがずれるとき、最初に崩れるのは余白だ。 Place Saverは構成と一緒に角丸48px、28px刻みの余白、0.9sのトランジション、cubic-bezier(0.16, 1, 0.3, 1)のイージングを公開することでそれを避けている。このランディングページに、初期値任せの部分はない。

ランディングページの再配置

デスクトップの構図は1480x1080を基準に解かれ、狭い幅のレイアウトは継承ではなく設計されている（モーションに低減モーションの分岐がある）。モーションには低減モーションの分岐があり、メディアにはポスターフレームがあるので、自動再生が使えない環境でもページは内容を伝える。詰め込みのほうが安く済むが、保たない。