このテンプレートについて
Scaling Platformはランディングページの仕様書として読める。値はページを組む前に書き出されていた。色は白 #F2F1F0の下地、黒 #3A3A3Aの文字、明るいのティール #15BCDFのアクセントに限り、Quanticoで組んでいる。納品形式は単一のコンポーネントなので、ランディングページ全体をデザインの引き継ぎなしにプロジェクトへ持ち込める。モーションは1sのトランジション、ループする動画の下地で、コピーが主役のままになる程度に抑えている。初見用ではなく、作り直しに耐えるAI・SaaSプロダクトのランディングページのブリーフとして扱う。以下に引用する値はすべてこのブリーフのもので、1916x1080の枠から最小の余白ステップまで含む。
対象
- 制作の仕様を書き、批判的に検討する材料として単一のコンポーネントを探しているStudioのチーム。
- 自社の見出しを書き、そのうえで計測値を変えずに単一のコンポーネントでこのランディングページを組み直せ。
- 単一のコンポーネントから組み始めるなら、先に100vhのセクション、20px刻みの余白を取り出せ。グリッドが固まるまでは配色に触るな。
含まれる内容
- 背景を持たないナビゲーション. この行はコントラストを#15BCDFの操作1か所だけに使い、ワードマークとリンクは文字色に退く。タブレットのブレイクポイントを下回ると、モバイル用のオーバーレイに切り替わります。リンクはワードマークより小さいサイズで組み、#15BCDFの操作だけがバーの中で重みを持つ要素です。
- 検証できる数値. レイアウトは比率ではなく絶対値で組む（100vhのセクション、20px刻みの余白、1sのトランジション）。値が固定されているので、差し替えてもリズムは変わらず見た目だけが変わる。
- 段差の大きいスケール. 書体には混ぜるのではなく役割を割り当てています。 Quanticoがディスプレイとインターフェースの両方を担います。書体の差し替えは可能ですが、比率がその差し替えに耐える必要があります。書体は1つ、役割は明確に。
- コピーが先、装飾は後. ファーストビュー内の要素は、どれも置かれるべき理由があります。ブリーフはコピー、1916x1080のフレーム、文字サイズを名指しし、それらと競う装飾は残していません。ページは1916x1080の1つの構図です。コピーが変わっても崩れないのはそのためです。
モーションとインタラクション
アニメーションの予算はこれで全部
1つの時間がすべてのインタラクションを覆う（1s）。ホバーと押下が同じ体系に読めるのはそのため。イージングは再生時間と一緒に指定されている（1s）ので、作り直しの際に別の感触へ黙って差し替わることはない。フィードバックの時間は正確に合わせる。
見出しが自ら組み上がる
入場がページに到達の瞬間を与え、走り終わったあとの構図は変わらない。各行がoverflow-hiddenの窓からせり上がる。低減モーションでは要素がそのまま現れるだけで、レイアウトは変わらない。静止画の状態だけで成立するか確かめる。この参考は1916x1080で収録しました。
ランディングページを支えるタイミング
ページが落ち着かないときの原因は、たいてい登場演出の多さにある。これはその一覧を短く保ち、1sのトランジション、5.1sのメディアループ、行ごとのマスク表示で打ち止めにしている。このランディングページで、動くために動く要素はない。
ランディングページの背後にある順序
1画面、1つのアクション、その間にナビゲーション、見出し、数値の行、背景のクリップ、フッター。ブリーフはファーストビューをセクションの積み重ねに任せず、この順序を本文で固定している。 SaaSの読み手は、選択肢より先に訴求を受け取る。この参考は1916x1080で収録しました。
Scaling Platformで最初に変えるもの
テンプレートはレイアウトを受け入れさせる。この参考例はレイアウトを残し、中身をすべて変えさせる。違いは、主題が動いても100vhのセクション、20px刻みの余白、1sのトランジションが固定されていること。別のブランドでも枠ごと再利用できる。
よくある質問（FAQ）
Scaling Platformのブリーフをコピーすると何が手に入りますか？
収録されたブリーフは5,231文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
Scaling Platformのランディングページを別の技術スタックで作り直せますか？
Scaling Platformは単一のコンポーネントで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Scaling Platformのブリーフは、自分で書くプロンプトと同じものですか？
このページに引用している内容はすべて、収録された5,231文字のブリーフが出典で、後から書き足した解説ではありません。数値と文章が食い違わないのはそのためです。
