このテンプレートについて
これはAgent Groveのランディングページを、スクリーンショットとしてではなく、それを生んだブリーフとともに公開したもの。配色は黒 #2B2B2Bの下地に絞り、書体はGeist。納品物はReactとTailwind CSSで、1484x1080で記録しているため、コードを書く前に枠が決まっている。結局、動きは300msのトランジション、cubic-bezier(0.16,1,0.3,1)、ループする動画の下地に尽きる。 AI・SaaSのランディングページが、デザインを変えずにコピー変更へ耐える必要があるとき最も効く。収録したプロンプトは1484x1080で記録したので、このページで引用する値はすべてそこにたどれる。以下に引用する値はすべてこのブリーフのもので、1484x1080の枠から最小の余白ステップまで含む。
対象
- プロダクトマーケターで、コピーの背後に5.4sのループ映像があってもランディングページが読める状態を保ちたい。
- ランディングページをモデルに指示する人は、7,959文字のプロンプトを出発点に使う。
- 見出しをAgent Groveと同じ長さに保ったままランディングページを書き換えるコンテンツ責任者のために作った。
含まれる内容
- ドロワーを持たない一行. バーはランディングページを下に押さず、その上に重なる。構図はファーストビューの高さをそのまま保てる。バーは独自の背景を持たずに1484x1080の構図の上に載るため、その下のメディアは端から端まで届きます。
- 刻みを名指しするブリーフ. ここに目分量はありません。仕様が24px刻みの余白、300msのトランジション、cubic-bezier(0.16,1,0.3,1)のイージングを固定し、残りのレイアウトはその値から導かれます。リストの最小値と最大値が、構図の可動範囲を決める。
- 1行にまとめた根拠. 数値はカードではなく文字として組みます。ディスプレイサイズのGeistに、1段下のラベルを添えます。この行は独立した帯ではなくファーストビューに属し、根拠が主張の近くに留まります。ラベルを小さくする前に、数字を1つ削る。
- 全画面の動画、パネルなし. 雰囲気を作るのは1484x1080の5.4sクリップです。ブリーフはトリミングを固定し、その上の文字には手を加えていません。自動再生が使えないときは1484x1080のポスター画像が構図を保つため、レイアウトが崩れることはありません。
モーションとインタラクション
短く、明記された時間
状態変化は300msと指定されているので、コントロールの反応はブラウザの既定値ではなく設計された値になる。イージングを変えるなら、時間も一緒に見直す必要がある。時間は仕上げではなくデザインの一部だ。
ループが環境演出を担う
5.4秒の映像1本が環境レイヤーのすべてで、コピーの背後で再生され、切れ目なくループし、ポインターには反応しない。ループはcoverで切り出しており、構図は特定のフレームサイズに依存しない。1484x1080以上で撮影または書き出す。
Agent Groveの最初の読みの順序
こうしたページは普通、機能グリッドの下にアクションを埋める。これはナビゲーション、見出し、お知らせのピル、数値の行、カードグリッドを固定の順序に置き、アクションを3画面分スクロールした先ではなくファーストビューの中に置く。 SaaSの読み手は、選択肢より先に訴求を受け取る。この参考は1484x1080で収録しました。
ランディングページを支える数値
2人で作り直すとき、構成を目分量で合わせることはできない。ブリーフは議論を消す。24px刻みの余白、300msのトランジション、cubic-bezier(0.16,1,0.3,1)のイージングを一度だけ明記している。このランディングページに、初期値任せの部分はない。
Agent Groveで動くもの
ここまで動きを抑えると、ページは書体と枠に頼ることになる。300msのトランジション、5.4sのメディアループ、ホバー状態と押下状態を完全に外しても構成は成り立つ。このランディングページで、動くために動く要素はない。
よくある質問（FAQ）
Agent Groveの土台になっているプロンプトはどれくらいの長さですか？
収録されたブリーフは7,959文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
Agent Groveのランディングページを別の技術スタックで作り直せますか？
Agent GroveはReactとTailwind CSSで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Agent Groveの素材はクライアント案件でどう扱えばよいですか？
ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は1484x1080で収録しました。
