このテンプレートについて
Intelligent Operationsは書き下ろされたブリーフ1本から組んだSaaSのランディングページで、このページはそのブリーフを記録している。配色はグレー #BCCCD4の下地、黒 #0A0A0Aの文字に絞り、書体はInter。納品物はReactとTailwind CSSで、1476x1080で記録しているため、コードを書く前に枠が決まっている。動きは700msのトランジション、ループする動画の下地だけで完結する。最初の画面で意図が伝わる必要があるAI・SaaSプロダクトのランディングページには、この参考が適している。収録したプロンプトは1476x1080で記録したので、このページで引用する値はすべてそこにたどれる。以下に引用する値はすべてこのブリーフのもので、1476x1080の枠から最小の余白ステップまで含む。
対象
- まず100vhのセクション、10px刻みの余白から決めろ。配色は後からついてくる。このランディングページを読ませているのは余白だ。
- このランディングページは、SaaSのコピーが7.9sのループ映像を支えられる証拠を1画面分必要とする創業者に応える。
- ランディングページをモデルに指示する人は、10,447文字のプロンプトを出発点に使う。
含まれる内容
- 上段はワードマーク、リンク、操作1つ. ワードマークが左端を押さえ、その右にリンクが並ぶ。すべてInterで組んであり、バーは別系統ではなく下のページに属して見える。バーは独自の背景を持たずに1476x1080の構図の上に載るため、その下のメディアは端から端まで届きます。バー1つにつき操作は1つ。
- 実装まで持ち込む数値. レイアウトは固定値（100vhのセクション、10px刻みの余白、700msのトランジション）を基準に決めているため、どの幅でもファーストビューの構図が保たれます。ブリーフは比率ではなく値を示すため、コピーの長さが変わっても構図の関係は保たれます。再現は同じ数値で検証する。
- 文字の後ろのメディア. クリップは1476x1080で7.9s再生し、継ぎ目が見えないままループする。映像ではなく表面として読める。1476x1080以上で書き出せば、coverの切り抜きはそのまま機能する。
- 段差の大きいスケール. タイポグラフィはInterです。ブリーフは変化をつけるために混ぜるのではなく、書体に役割を与えています。ウェイト、トラッキング、サイズ段階がすべて指定されているため、差し替えても階層は保たれます。 UIテキストは1つの書体に固定し、同じサイズで2つの声が混ざらない。
モーションとインタラクション
時間はブリーフ由来
仕様では状態変化ごとに時間が指定されている。トランジションは700ms前後に落ち着く。ブラウザの初期値のままの箇所はなく、だからこそページは動かされているのではなく設計されているように感じられる。状態変化ごとに値が書かれているので、ブラウザの初期値が使われることはない。
動くのはコピーだけ
入場の動きはページを囲む枠ではなく、ページ自身のメッセージに使う。セクションはビューポートに入るたびに現れる。実装はいくつかのトランジションで、アニメーションライブラリは使っていない。この参考は1476x1080で収録しました。
Intelligent Operationsを仕様として読む
このランディングページは目分量ではなく寸法で決まっている。100vhのセクション、10px刻みの余白はブリーフから来ており、レイアウトはその段階に合わせて組み、勘で寄せていない。このランディングページに、初期値任せの部分はない。
ランディングページを支えるタイミング
この構成に既製のライブラリを載せれば、良くなるどころか騒がしくなる。ブリーフは700msのトランジション、7.9sのメディアループ、スクロール連動の表示演出にとどめ、予算をそこに使う。このランディングページで、動くために動く要素はない。
ランディングページの再配置
テンプレートが1カラムに畳んで成り行きに任せるのに対し、このブリーフは何が起きるかを明示し（セクションは100vhに固定）、順序を保つ。再配置を越えて残るのは階層だ。
よくある質問（FAQ）
Intelligent Operationsのプロンプトは完成した仕様書ですか、それとも出発点ですか？
気分を書いた説明ではなく、制作のための仕様です。1476x1080のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
Intelligent Operationsのランディングページを別の技術スタックで作り直せますか？
Intelligent OperationsはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Intelligent Operationsはクライアント案件で使えますか？
ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は1476x1080で収録しました。
