このテンプレートについて
これはCross-Borderのランディングページを、スクリーンショットとしてではなく、それを生んだブリーフとともに公開したもの。見出しは「Complete the form and our team will contact you soon」で、ランディングページの残りはその周りに配置されている。配色は明るいのイエロー #FFDA00の下地、黒 #1A1A1Aの文字、深いのティール #002A35のアクセントで、書体はHelvetica, Arial。納品物はReactとTailwind CSS。1ページで、プラグインも、デザインとの間に挟まるビルドツールもない。結局、動きは0.6sのトランジション、ループする動画の下地に尽きる。製造・産業のランディングページが、デザインを変えずにコピー変更へ耐える必要があるとき最も効く。
対象
- このランディングページからは、他の何よりも先に1440x1080の画角と12vhのセクション、20px刻みの余白を持っていけ。
- このランディングページは、製造業のコピーが5.8sのループ映像を支えられる証拠を1画面分必要とする創業者に応える。
- 製造・産業企業ランディングページを1つ出す個人創業者で、背中にデザインシステムがない人のために作った。
含まれる内容
- 背景を持たないナビゲーション. 上段に載るのはワードマーク、4〜5本のリンク、#002A35に染めた操作1つで、ページのほかの部分に対して静かに見えるサイズに抑えています。タブレットのブレイクポイントを下回ると、モバイル用のオーバーレイに切り替わります。リンクはワードマークより小さいサイズで組み、#002A35の操作だけがバーの中で重みを持つ要素です。
- 文字と画幅で1つの尺度. ここに目分量はありません。仕様が12vhのセクション、20px刻みの余白、0.6sのトランジションを固定し、残りのレイアウトはその値から導かれます。リストの最小値と最大値が、構図の可動範囲を決める。
- イラストではなくクリップ. 動画は1440x1080の構図の最下層にあり、文字はその上に配置され、間に何も挟まない。自動再生が使えないときは1440x1080のポスター画像が構図を保つため、レイアウトが崩れることはありません。
- 語るのは大見出しのサイズ. 大見出しはHelvetica, Arialで、ブリーフが定めたサイズで組む。見出しは段落ではなく構図の要素になる。サイズの刻みが固定値なので、書体を差し替えても同じ階層を保てる。
モーションとインタラクション
ループが環境演出を担う
背景の映像は5.8秒、1440x1080でミュートのままインライン再生され、無限にループする。読者の注意がコピーにある間もページは動き続ける。環境モーションは映像そのものだけなので、スクロールライブラリは要らない。ほかに連続して動くものがないので、注意を引くのは映像だけだ。
コントロールは共通の時間
コントロールは0.6sで変化し終えるので、触れられた時点でページが応答し、反応が遅れて見えることはない。イージングは再生時間と一緒に指定されている（0.6s）ので、作り直しの際に別の感触へ黙って差し替わることはない。
製造・産業企業がここで得るもの
製造業のページの多くは、セクションを増やし、グラデーションを増やし、主張を増やすことで失敗する。 Cross-Borderは逆を行く。「Complete the form and our team will contact you soon」が最初のフレームからその役割を担っている。構図は明るいのイエロー #FFDA00に留まり、操作にだけ深いのティール #002A35を使う。意図して組んだと見えるにはそれで足りる。製造業の読み手に、訴求へ至る最短の正直な道を示す。
ランディングページを支える数値
ムードボードがスケールを開いたままにするのに対し、このブリーフは12vhのセクション、20px刻みの余白で閉じる。周辺の値はその判断から導かれる。このランディングページに、初期値任せの部分はない。
ランディングページを支えるタイミング
仕様はすべてのトランジションを値に結びつけている（0.6sのトランジション、5.8sのメディアループ、ホバー状態と押下状態）。だからこそ、モーションのプリセットを上から載せたテンプレートには見えない。このランディングページで、動くために動く要素はない。
よくある質問（FAQ）
Cross-Borderの背後のブリーフには、実際に何が入っていますか？
収録されたブリーフは6,698文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
Cross-Borderのブリーフは、自分で書くプロンプトと同じものですか？
このページに引用している内容はすべて、収録された6,698文字のブリーフが出典で、後から書き足した解説ではありません。数値と文章が食い違わないのはそのためです。
Cross-Borderを作り直すのにReactとTailwind CSSは必要ですか？
Cross-BorderはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
