Agent WaveのAI・SaaSランディングページデザインとプロンプト

このテンプレートについて

Agent WaveはAI・SaaSプロダクト向けのランディングページの参考で、その背後のブリーフはムードボードではなく完全な構築仕様だ。配色は#000000の下地、#FFFFFFの文字に絞り、書体はInter。納品物は単一のコンポーネントで、1478x1080で記録しているため、コードを書く前に枠が決まっている。結局、動きは0.28sのトランジション、cubic-bezier(0.16, 1, 0.3, 1)、ループする動画の下地に尽きる。書いている間は開いておく。16,675文字のブリーフが、自社ページにそのまま持ち込める部分。収録したプロンプトは1478x1080で記録したので、このページで引用する値はすべてそこにたどれる。以下に引用する値はすべてこのブリーフのもので、1478x1080の枠から最小の余白ステップまで含む。

対象

SaaSの案件を提案し、クライアントへの初回返信に単一のコンポーネントを載せる必要がある制作会社のためのものだ。
このランディングページを引き継ぐ外部チームには、最初のコミット前に901pxのブレイクポイントをリポジトリへ固定する必要がある。
競合のSaaSランディングページを作り直すチームが、フレームワークを決める前に単一のコンポーネントを明示したい。

含まれる内容

ドロワーを持たない一行. 細いバーをランディングページの上に重ね、左にワードマーク、リンクはInterで組みます。そのため構図はコンテンツが先、装飾は後に読めます。901px未満では、リンクが全画面オーバーレイに畳まれます。901px以下では、リンクは2行目に折り返さず折りたたむ。自社のページにセクションが多い場合は、バーを広げるのではなくまとめてください。
全画面の動画、パネルなし. 1478x1080の画幅は1本のループで埋まる。コピーの後ろで再生し、操作系を必要としない。ループは6.9sと短く、目にはタイムラインではなくテクスチャとして映ります。
目分量ではなく実測. レイアウトに勘で決める部分はない。ブリーフが19pxで固定した表示サイズ、100vhのセクション、角丸7px、22px刻みの余白を明記し、実装はその値に合わせる。余白は文字と同じ単位で書かれ、そのまま比較できる。調整の前に測る。
書体が決める階層. タイポグラフィはInterです。ブリーフは変化をつけるために混ぜるのではなく、書体に役割を与えています。ウェイト、トラッキング、サイズ段階がすべて指定されているため、差し替えても階層は保たれます。サイズが大きくなるほど字間を詰めるため、19pxの範囲でディスプレイの行がまとまります。スケールはグレースケールで確認する。

モーションとインタラクション

ループが環境演出を担う

環境の動きは6.9秒の映像1本を1478x1080で使うだけ。ポインターに反応させず、コピーの背後で静かにループさせる。ループはcoverで切り出しており、構図は特定のフレームサイズに依存しない。1478x1080以上で撮影または書き出す。

読み込み時にページが組み上がる

入場のモーションは一つの要素に絞る（各行がoverflow-hiddenの窓からせり上がる）。ほかの要素は読み込み時点で配置が済んでいる。アニメーションは読み込み時に一度だけ実行され、スクロールのたびには走らない。読んでいる途中でページが再演することはない。この参考は1478x1080で収録しました。

ランディングページを支える数値

ブリーフは仕様書であって、雰囲気の覚書ではない。19pxで固定した表示サイズ、100vhのセクション、角丸7px、22px刻みの余白、0.28sのトランジションを明記し、周りを設計する前に1478x1080のメディア枠を決めている。このランディングページに、初期値任せの部分はない。

この構図がSaaSで効く理由

メディアがコピーより雄弁だとする。この構成はまさにその場合のためにある。メディアは1478x1080の6.9sループ映像だ。枠は静かなままで、19pxで固定した表示サイズ、100vhのセクションが読み手を文字につなぎとめる。 SaaSの読み手に、訴求へ至る最短の正直な道を示す。

ランディングページの再配置

コピーが長いと、先に崩れるのは狭い幅のレイアウト。ここでは24px〜22pxのクランプが変化を吸収し、レイアウトは901pxで切り替わる、セクションは100vhに固定、モーションに低減モーションの分岐がある。ビューポートに応じて変わるのは尺度で、順番は変わりません。

よくある質問（FAQ）

この項目に単一のコンポーネントが書かれているのはなぜですか？

Agent Waveは単一のコンポーネントで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。

Agent Waveの土台になっているプロンプトはどれくらいの長さですか？

気分を書いた説明ではなく、制作のための仕様です。1478x1080のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。

Agent Waveから作り直したページを、クレジット表記なしで公開してもよいですか？

ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は1478x1080で収録しました。