このテンプレートについて
Cyber LayerはAI・SaaSプロダクト向けの実用的な参考だ。ランディングページはすでに配置され、寸法も測られ、いつでも作り直せる。配色は赤 #B01617の下地、ティント #E6E6E6の文字で、書体はSpace Grotesk。納品物は自己完結したHTMLファイル1つで、1460x1080で記録しているため、コードを書く前に枠が決まっている。ページはモーションを1000msのトランジション、cubic-bezier(.16,1.3,1)、ループする動画の下地にとどめる。書いている間は開いておく。14,235文字のブリーフが、自社ページにそのまま持ち込める部分。収録したプロンプトは1460x1080で記録したので、このページで引用する値はすべてそこにたどれる。
対象
- AIビルダーを使う人で、モデルに任せるのではなくcubic-bezier(.16,1.3,1)のイージングが最初から入った仕様を求めている。
- 引き継ぎメモに自己完結したHTMLファイル1つを書け。次のビルドがページから導き直さずに済む。
- このランディングページは、自己完結したHTMLファイル1つをすでに理解し、599pxのブレイクポイントを文章にできれば足りるチームを対象にしている。
含まれる内容
- 余分を持たないバー. バーはランディングページを下に押さず、その上に重なる。構図はファーストビューの高さをそのまま保てる。ラベルは599pxで1行に収まる長さで、現在の項目はピルではなくウェイトで示します。
- 文字の後ろのメディア. メディアは物語ではなく雰囲気を担う。1460x1080の7sループがすべての後ろに敷かれる。自動再生が使えないときは1460x1080のポスター画像が構図を保つため、レイアウトが崩れることはありません。
- スタイルを決めるタイポグラフィ. 最上位の文字はSpace Groteskで、補助コピーはそれよりずっと小さく落とす。階層は色に頼らず読める。キャプションの刻みは、図の下に置いてもページのリズムを変えない大きさだ。役割が明確な1ファミリーは、競い合う2つに勝ります。
- 段階ではなくクランプで可変. スケールの上端だけが可変（25px〜82pxのクランプ）で残りは固定のため、ビューポートが狭くなってもフレームの構図は保たれます。スケールがクランプされているため、ディスプレイの行がブレイクポイント間で跳ねることはありません。
モーションとインタラクション
現れ方が記憶に残る
入場がページに到達の瞬間を与え、走り終わったあとの構図は変わらない。各行がoverflow-hiddenの窓からせり上がる。完成した状態は静止画と同じ構図なので、動きの完了に何かが依存しているわけではない。この参考は1460x1080で収録しました。
中央にリアルタイムのキャンバス
ページの見せ場はWebGLのキャンバスだけなので、インターフェースはそれと競わないように組んである。仕様はキャンバスの周りのインターフェースを素朴に保ち、情景だけを見せ場にしている。この参考は1460x1080で収録しました。
ランディングページの背後にある順序
ブロックを入れ替えてもページは表示される。ただし主張としては読めなくなる。ナビゲーション、見出し、数値の行、背景のクリップ、フッターは順序であり、100vhのセクション、82px刻みの余白はその順序でしか機能しない。 SaaSの読み手は、選択肢より先に訴求を受け取る。
ランディングページを自社のものにする
変える順番はコピーとメディアが先、色が次、レイアウトが最後である。1460x1080のフレームとSpace Groteskのスケールがページを支えているので、それらを貫くのではなく、その周りで差し替える。自社のアクセントも、参考例のアクセントと同じコントラスト検証を通過する必要がある。
Cyber Layerを仕様として読む
このランディングページは目分量ではなく寸法で決まっている。100vhのセクション、82px刻みの余白はブリーフから来ており、レイアウトはその段階に合わせて組み、勘で寄せていない。このランディングページに、初期値任せの部分はない。
よくある質問（FAQ）
Cyber Layerは自己完結したHTMLファイル1つにどこまで依存していますか？
Cyber Layerは自己完結したHTMLファイル1つで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Cyber Layerの背後のブリーフには、実際に何が入っていますか？
気分を書いた説明ではなく、制作のための仕様です。1460x1080のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
Cyber Layerのモーションは何をきっかけに動きますか？
トランジションはスクロールのタイムラインではなく、インターフェースの状態に紐づいており、1000msの範囲で収束します、cubic-bezier(.16,1.3,1)で。値はブリーフに記録されているので、移植のたびに勘で合わせる必要はありません。
