このテンプレートについて
Intelligence Layerは判断の履歴を残しており、このランディングページを生んだブリーフは11,825文字。配色はほぼ黒 #050505の下地、#FAFAFAの文字に絞り、書体はManrope。納品物は自己完結したHTMLファイル1つで、1462x1080で記録しているため、コードを書く前に枠が決まっている。ページはモーションを0.9sのトランジション、cubic-bezier(.22, 1.36, 1)、ループする動画の下地にとどめる。書いている間は開いておく。11,825文字のブリーフが、自社ページにそのまま持ち込める部分。
対象
- このランディングページを引き継ぐ外部チームには、最初のコミット前にcubic-bezier(.22, 1.36, 1)のイージングをリポジトリへ固定する必要がある。
- AI・SaaSプロダクトランディングページを制作するチームが、見積もりを出す前に自己完結したHTMLファイル1つを記録に残したい。
- 自社の見出しを書き、そのうえで計測値を変えずに自己完結したHTMLファイル1つでこのランディングページを組み直せ。
含まれる内容
- 上段はワードマーク、リンク、操作1つ. 細いバーをランディングページの上に重ね、左にワードマーク、リンクはManropeで組みます。そのため構図はコンテンツが先、装飾は後に読めます。バーは独自の背景を持たずに1462x1080の構図の上に載るため、その下のメディアは端から端まで届きます。
- 必要な箇所だけ可変. スケールの上端だけが可変（34px〜25pxのクランプ）で残りは固定のため、ビューポートが狭くなってもフレームの構図は保たれます。操作要素はタップできる大きさを保ち、コピーはどの幅でも読み順を変えません。
- 文字と画幅で1つの尺度. 値そのものが仕様です。100vhのセクション、25px刻みの余白、0.9sのトランジション、cubic-bezier(.22, 1.36, 1)のイージングは1462x1080での収録値で、スクリーンショットから推測したものではありません。余白は文字と同じ単位で書かれ、そのまま比較できる。
- 全画面の動画、パネルなし. ファーストビューは1462x1080のクリップ1本で、ほかの要素はすべてその上に配置されます。1462x1080以上で書き出せば、coverの切り抜きはそのまま機能する。
モーションとインタラクション
キャンバスがビジュアルそのもの
中心となる要素は画像ではなくライブで描画される（WebGLのキャンバス）。だから1462x1080の構図は背景に敷かれるのではなく、ビューポートに反応する。周囲のインターフェースは平坦なままで、奥行きは描画が担う。
アニメーションの予算はこれで全部
アニメーションの予算は小さく、明示されている。0.9s、cubic-bezier(.22, 1.36, 1)で。適用先は入場ではなく状態変化だ。イージングは再生時間と一緒に指定されている（0.9s）ので、作り直しの際に別の感触へ黙って差し替わることはない。
ランディングページの再配置
ブレイクポイントを、レイアウトを変えるためではなく収めるために選んでいるなら、この項目を読むとよい。隠す要素を並べる代わりに、スケールは段階式ではなく可変、セクションは100vhに固定、モーションに低減モーションの分岐がある。それがこの項目の内容だ。モバイル版は判断であり、代替ではない。
ランディングページを支える数値
スクリーンショットはページがどう見えるかを伝え、ブリーフはなぜそうなのかを伝える。100vhのセクション、25px刻みの余白、0.9sのトランジション、cubic-bezier(.22, 1.36, 1)のイージングがその間を埋める。このランディングページに、初期値任せの部分はない。
Intelligence Layerで最初に変えるもの
自社のメディアを入れるときは、トリミングとレイヤーの順序を守る。メディアは1462x1080の6.6sループ映像だ。コピーの可読性を保っているのはその配置だ。メディアのトリミングは守る。書体と同じだけ働いている。
よくある質問（FAQ）
Intelligence Layerを作り直すのに自己完結したHTMLファイル1つは必要ですか？
Intelligence Layerは自己完結したHTMLファイル1つで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Intelligence Layerの背後のブリーフには、実際に何が入っていますか？
収録されたブリーフは11,825文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
Intelligence Layerの0.9sのトランジションはどう動きますか？
トランジションはスクロールのタイムラインではなく、インターフェースの状態に紐づいており、0.9sの範囲で収束します、cubic-bezier(.22, 1.36, 1)で。値はブリーフに記録されているので、移植のたびに勘で合わせる必要はありません。
