このテンプレートについて
これはCordexのランディングページを、スクリーンショットとしてではなく、それを生んだブリーフとともに公開したもの。ページ自身の見出しは「We protect transport safer across all industries」で、構図はその言葉をそのまま中心に組まれている。色は黒 #0A0A0Bの下地、#F7F7F8の文字、赤 #E23B32のアクセントに限り、Interで組んでいる。納品物は自己完結したHTMLファイル1つで、1920x1416で記録しているため、コードを書く前に枠が決まっている。モーションの予算は0.7sのトランジション、ループする動画の下地。最初の画面で意図が伝わる必要がある製造・産業企業のランディングページには、この参考が適している。
対象
- プロトタイプを作らずに480pxの挙動をクライアントへ説明する必要がある制作会社のために作った。
- このランディングページは、自己完結したHTMLファイル1つの実装をエンジニアへ渡し、モーションを文章で残したいデザイナーに応える。
- このページは、自己完結したHTMLファイル1つで製造・産業企業ランディングページを組み直し、見た目の裏にある数値を探すフロントエンド開発者に応える。
含まれる内容
- 1つの幅で折りたたむリンク. リンクは同じ文字サイズで1行に並び、#E23B32の操作が右端で行を締める。視線はナビゲーションの切れ目で止まる。480px以下では、リンクは2行目に折り返さず折りたたむ。主張の強いファーストビューでも耐えるナビゲーションが必要なときに、このパターンをそのまま使ってください。
- ループが背景になる. ミュートしたループクリップ1本が1920x1416のフレームを覆い、6.8sで再生されます。 cover指定で配置し、コピーはその上に重なります。ブリーフは動画にオーバーレイを載せないため、色は曇りません。自動再生が使えないときは1920x1416のポスター画像が構図を保つため、レイアウトが崩れることはありません。
- 幅ごとに定義された挙動. スケールの上端だけが可変（12px〜21pxのクランプ）で残りは固定のため、ビューポートが狭くなってもフレームの構図は保たれます。操作要素はタップできる大きさを保ち、コピーはどの幅でも読み順を変えません。
- 目分量ではなく実測. ブリーフは数値を名指ししています（12px〜21pxの可変型サイズ、100vhのセクション、14px刻みの余白、0.7sのトランジション）。書体とフレームの間に勝手な余白の段階がないからこそ、構図はまとまります。名指しされた値の間に勝手な中間値はありません。寸法の一覧がそのままシステム全体です。
モーションとインタラクション
ループが環境演出を担う
6.8秒の映像1本が環境レイヤーのすべてで、コピーの背後で再生され、切れ目なくループし、ポインターには反応しない。自動再生が止められた場合はポスターフレームが代わりに立ち、動きは必須ではなく追加要素にとどまる。この参考は1920x1416で収録しました。
短く揃えた時間
コントロールは0.7sで変化し終えるので、触れられた時点でページが応答し、反応が遅れて見えることはない。イージングは再生時間と一緒に指定されている（0.7s）ので、作り直しの際に別の感触へ黙って差し替わることはない。時間の値は実装にそのまま持ち込む。
Cordexの最初の読みの順序
ブリーフは29,696文字で、読み順を明示している。ナビゲーション、見出し、お知らせのピル、数値の行、カードグリッドをこの順に並べ、その間の距離を12px〜21pxの可変型サイズ、100vhのセクションで決めている。順序を入れ替えれば、この距離も意味を失う。製造業の読み手は、選択肢より先に訴求を受け取る。
ランディングページを支える数値
多くの参考例は結果だけを見せ、数値は伏せる。これは逆で、12px〜21pxの可変型サイズ、100vhのセクション、14px刻みの余白、0.7sのトランジションをページと並べて公開する。結果を近似ではなく再現できるようにするためだ。このランディングページに、初期値任せの部分はない。
ランディングページの再配置
ブレイクポイントを、レイアウトを変えるためではなく収めるために選んでいるなら、この項目を読むとよい。隠す要素を並べる代わりに、文字サイズは12px〜21pxで可変、レイアウトは480pxで切り替わる、セクションは100vhに固定。それがこの項目の内容だ。再配置を越えて残るのは階層だ。
よくある質問（FAQ）
この項目に自己完結したHTMLファイル1つが書かれているのはなぜですか？
Cordexは自己完結したHTMLファイル1つで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
手に入れたCordexのブリーフで、何ができますか？
このページに引用している内容はすべて、収録された29,696文字のブリーフが出典で、後から書き足した解説ではありません。数値と文章が食い違わないのはそのためです。
Cordexのプロンプトは完成した仕様書ですか、それとも出発点ですか？
気分を書いた説明ではなく、制作のための仕様です。1920x1416のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
