このテンプレートについて
Intelligent PerformanceはAI・SaaSプロダクト向けのランディングページの参考で、その背後のブリーフはムードボードではなく完全な構築仕様だ。見出しは「Built for Intelligent Performance」で、ランディングページの残りはその周りに配置されている。配色はニュートラル #ECECEBの下地、#222222の文字、赤 #FF6796のアクセントで、書体はInter。納品物は自己完結したHTMLファイル1つで、1920x1418で記録しているため、コードを書く前に枠が決まっている。ページはモーションを08sのトランジション、cubic-bezier(.16,1.3,1)、ループする動画の下地にとどめる。書いている間は開いておく。26,839文字のブリーフが、自社ページにそのまま持ち込める部分。
対象
- モデルに指示を出すなら、ランディングページから始めてcubic-bezier(.16,1.3,1)のイージングをプロンプトに保持させろ。
- ランディングページの構造はまるごと借り、自己完結したHTMLファイル1つに照らして行ごとにコピーを差し替えろ。
- プロトタイプを作らずに767pxの挙動をクライアントへ説明する必要がある制作会社のために作った。
含まれる内容
- 一行に収めたナビゲーション. バーは構図の中で最も静かな部分です。ワードマーク、短いリンク列、#FF6796の操作1つを、ブリーフで最小のタイプ段階に収めています。767px以下では、リンクは2行目に折り返さず折りたたむ。
- 効いてくるポスターフレーム. クリップは1920x1418で3.5s再生し、継ぎ目が見えないままループする。映像ではなく表面として読める。ループは3.5sと短く、目にはタイムラインではなくテクスチャとして映ります。
- 構造を作るのはカード. 読み順はグリッドが決めます。同じ重みのパネルが1つずつ考えを担い、小さめのInterで組むことで構造が見えたままになります。グリッド内でアクセントが示すのは多くても1要素で、パネル同士が競合しない。
- 幅ごとに定義された挙動. 文字サイズは固定の段階ではなく16px〜14pxのクランプで指定するため、ディスプレイの行はブレイクポイント間で飛ばずに比例を保ちます。スケールがクランプされているため、ディスプレイの行がブレイクポイント間で跳ねることはありません。
モーションとインタラクション
入場の動きが決め手
最初のフレームは意図的に未完成で、各行がoverflow-hiddenの窓からせり上がる。残りの構図はその下ですでに整っている。低減モーションでは要素がそのまま現れるだけで、レイアウトは変わらない。この参考は1920x1418で収録しました。
ミリ秒で書かれた時間
モーションはミリ秒単位で測る。08s、cubic-bezier(.16,1.3,1)を使い。これがアニメーションの予算のすべてで、スクロールのタイムラインではなく状態変化に使う。イージングは再生時間と一緒に指定されている（08s）ので、作り直しの際に別の感触へ黙って差し替わることはない。
ランディングページの背後にある順序
1画面、1つのアクション、その間にナビゲーション、見出し、数値の行、カードグリッド、機能リスト。ブリーフはファーストビューをセクションの積み重ねに任せず、この順序を本文で固定している。 SaaSの読み手は、選択肢より先に訴求を受け取る。この参考は1920x1418で収録しました。
ランディングページの再配置
設計された狭い幅のレイアウトは、詰め込みより多くの判断を要する。ブリーフはその分を先に払っている。スケールは段階式ではなく可変、レイアウトは767pxで切り替わる、セクションは100vhに固定。実装時に発見するのではなく、明示されている。幅が変えるのは寸法で、読みの経路ではない。
ランディングページを支えるタイミング
モーションの移植は最後に回す。ブリーフが08sのトランジション、3.5sのメディアループ、行ごとのマスク表示として固定しているので、レイアウトが決まってからのほうが合わせやすい。このランディングページで、動くために動く要素はない。
よくある質問（FAQ）
Intelligent Performanceのランディングページを別の技術スタックで作り直せますか？
Intelligent Performanceは自己完結したHTMLファイル1つで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Intelligent Performanceのプロンプトは完成した仕様書ですか、それとも出発点ですか？
気分を書いた説明ではなく、制作のための仕様です。1920x1418のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
Intelligent Performanceの素材はクライアント案件でどう扱えばよいですか？
ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は1920x1418で収録しました。
