このテンプレートについて
DeepThinkはAI・SaaSプロダクト向けの実用的な参考だ。ランディングページはすでに配置され、寸法も測られ、いつでも作り直せる。配色は#0C0C0Cの下地、ティント #FAFAFAの文字に絞り、書体はInter。納品物は自己完結したHTMLファイル1つで、1280x1928で記録しているため、コードを書く前に枠が決まっている。モーションの予算は90msのトランジション、cubic-bezier(.22,1.36,1)。書いている間は開いておく。13,695文字のブリーフが、自社ページにそのまま持ち込める部分。収録したプロンプトは1280x1928で記録したので、このページで引用する値はすべてそこにたどれる。以下に引用する値はすべてこのブリーフのもので、1280x1928の枠から最小の余白ステップまで含む。
対象
- AI・SaaSプロダクトランディングページを制作するチームが、見積もりを出す前にcubic-bezier(.22,1.36,1)のイージングを記録に残したい。
- 参考がただの出発点なら、デザイナーは自己完結したHTMLファイル1つを残し、ランディングページの残りを組み直せる。
- まず数値が要るデザイナー。100vhのセクション、10px刻みの余白、すべて仕様からの引用である。
含まれる内容
- 背景を持たないナビゲーション. バーはランディングページを下に押さず、その上に重なる。構図はファーストビューの高さをそのまま保てる。バーは独自の背景を持たずに1280x1928の構図の上に載るため、その下のメディアは端から端まで届きます。
- 目分量ではなく実測. ブリーフは数値を名指ししています（100vhのセクション、10px刻みの余白、90msのトランジション、cubic-bezier(.22,1.36,1)のイージング）。書体とフレームの間に勝手な余白の段階がないからこそ、構図はまとまります。リストは短く、確認者は要素ごとに突き合わせられる。
- 順序を決めるグリッド. 構造はグリッドそのものだ。同じ大きさのパネルをInterで組み、視線が下ではなく横へ動くように並べる。パネル内の見出しは、ページ見出しの1段下ではなく、自分の本文の1段上に置く。
- スケールがスタイルになる. タイポグラフィはInterです。ブリーフは変化をつけるために混ぜるのではなく、書体に役割を与えています。ウェイト、トラッキング、サイズ段階がすべて指定されているため、差し替えても階層は保たれます。 UIテキストは1つの書体に固定し、同じサイズで2つの声が混ざらない。役割のないサイズは足さない。
モーションとインタラクション
ページがスクロールに応える
最初の画面はスクロール前から完成していて、セクションはビューポートに入るたびに現れるはそれを置き換えずに足す。ページはスケジュールではなく読者のペースで変わる。低減モーションを有効にして試す。この参考は1280x1928で収録しました。
短く、明記された時間
モーションはミリ秒単位で測る。90ms、cubic-bezier(.22,1.36,1)で。これがアニメーションの予算のすべてで、スクロールのタイムラインではなく状態変化に使う。イージングを変えるなら、時間も一緒に見直す必要がある。
AI・SaaSに効くところ
SaaSのページの多くは、ファーストビューが弱いとセクションを足す。これは逆に選択肢を削る。ナビゲーション、見出し、お知らせのピル、数値の行、カードグリッドをこの順に置き、訴求を繰り返すものは置かない。 SaaSの読み手に、訴求へ至る最短の正直な道を示す。この参考は1280x1928で収録しました。
DeepThinkで動くもの
既製のアニメーションパックを使えば早く出せたはず。ブリーフはあえて90msのトランジション、行ごとのマスク表示、スクロール連動の表示演出を指定しており、ページが演出ではなく設計として読めるのはそのため。このランディングページで、動くために動く要素はない。
DeepThinkを仕様として読む
2人で作り直すとき、構成を目分量で合わせることはできない。ブリーフは議論を消す。100vhのセクション、10px刻みの余白、90msのトランジション、cubic-bezier(.22,1.36,1)のイージングを一度だけ明記している。このランディングページに、初期値任せの部分はない。
よくある質問（FAQ）
DeepThinkは自己完結したHTMLファイル1つにどこまで依存していますか？
DeepThinkは自己完結したHTMLファイル1つで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
DeepThinkのプロンプトは完成した仕様書ですか、それとも出発点ですか？
気分を書いた説明ではなく、制作のための仕様です。1280x1928のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
DeepThinkはクライアント案件で使えますか？
ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は1280x1928で収録しました。
