このテンプレートについて
Cyber Roninは判断の履歴を残しており、このランディングページを生んだブリーフは10,993文字。「Cyber Ronin // Neural Edges」で始まり、その一行をカードに縮めず、フレームいっぱいに置いている。カラースキームはオレンジ #C45A18の下地、クリーム #FBDBAFの文字で、ページはInterで組む。実装は自己完結したHTMLファイル1つだ。中の寸法はすべて書き出してあるので、そのまま再利用できる。モーションは0.25sのトランジション、cubic-bezier(0.25,0.46,0.45,0.94)、ループする動画の下地に限っている。3D・ゲームのランディングページが、デザインを変えずにコピー変更へ耐える必要があるとき最も効く。
対象
- 自己完結したHTMLファイル1つを1920x1420の切り出しと一緒にエンジニアへ渡し、組み直しは任せろ。
- 3Dの案件を提案し、クライアントへの初回返信に360pxのブレイクポイントを載せる必要がある制作会社のためのものだ。
- このページは、自己完結したHTMLファイル1つで3D・ゲーム・エンタメブランドランディングページを組み直し、見た目の裏にある数値を探すフロントエンド開発者に応える。
含まれる内容
- 既定値に頼らない構成. レイアウトは比率ではなく絶対値で組む（100vhのセクション、28px刻みの余白、0.25sのトランジション、cubic-bezier(0.25,0.46,0.45,0.94)のイージング）。画幅の比率も寸法と一緒に記録してあり、再現時に縦横比も合う。
- 効いてくるポスターフレーム. ファーストビューは1920x1420のクリップ1本で、ほかの要素はすべてその上に配置されます。ループは6sと短く、目にはタイムラインではなくテクスチャとして映ります。
- 書体が決める階層. 大見出しはInterで、ブリーフが定めたサイズで組む。見出しは段落ではなく構図の要素になる。数字はUI書体を共有し、統計もラベルも同じシステムに属する。
- 表ではなく統計の一行. 小さな数値の帯が、本来なら段落が要る主張を引き受けます。ランディングページが機能リストに変わるのを防ぐためです。数字は1つの字重で組み、行の中で統計に序列を付けない。数字を枠で囲まない。この参考は1920x1420で収録しました。
モーションとインタラクション
タイムラインではなくループ
環境の動きはスクロール演出ではなく6秒の1920x1420ループから生まれる。だからページは落ち着き、文字は読める。ループはcoverで切り出しており、構図は特定のフレームサイズに依存しない。1920x1420以上で撮影または書き出す。
文字が分割して現れる
入場のモーションは一つの要素に絞る（見出しが一語ずつ現れる）。ほかの要素は読み込み時点で配置が済んでいる。アニメーションライブラリではなく少数のトランジションで済ませているので、移植の負担が小さい。狙いを写し取り、正確なカーブは真似なくてよい。要点は現れる順序にある。この参考は1920x1420で収録しました。
ランディングページを支える数値
ブリーフは仕様書であって、雰囲気の覚書ではない。100vhのセクション、28px刻みの余白、0.25sのトランジション、cubic-bezier(0.25,0.46,0.45,0.94)のイージング、360pxのブレイクポイントを明記し、周りを設計する前に1920x1420のメディア枠を決めている。このランディングページに、初期値任せの部分はない。
ランディングページの再配置
別に保守するモバイル用デザインは存在しない。スケールは段階式ではなく可変、レイアウトは360pxで切り替わる、セクションは100vhに固定。同じ階層が幅をまたいでそのまま通るので、二重管理にならない。狭い幅のレイアウトは縮小ではなく判断であり、階層もそのまま保たれます。
Cyber Roninの最初の読みの順序
機能訴求型のレイアウトは製品の機能を並べる。これは読み手を1つの判断へ導く。その経路は数値の行、カードグリッド、機能リストと、100vhのセクション、28px刻みの余白の取り方に表れる。3Dの読み手は、選択肢より先に訴求を受け取る。
よくある質問（FAQ）
Cyber Roninを作り直すのに自己完結したHTMLファイル1つは必要ですか？
Cyber Roninは自己完結したHTMLファイル1つで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Cyber Roninのブリーフをコピーすると何が手に入りますか？
収録されたブリーフは10,993文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
Cyber Roninのトランジションを残したまま、時間だけ変えることはできますか？
モーションはレイアウトと同じ粒度で指定されています。状態変化は0.25sの範囲で収束します、cubic-bezier(0.25,0.46,0.45,0.94)で。先に構成を移植し、タイミングは後から合わせると、レイアウトが固まっている分だけ合わせやすくなります。
