このテンプレートについて
Growth Decisionsはランディングページの仕様書として読める。値はページを組む前に書き出されていた。カラースキームは#FFFFFFの下地、#0A0A0Aの文字、ブルー #006CD2のアクセントで、ページはInterで組む。納品物は単一のコンポーネントで、1468x1080で記録しているため、コードを書く前に枠が決まっている。モーションは0.16sのトランジション、cubic-bezier(0.16, 1, 0.3, 1)、ループする動画の下地で、コピーが主役のままになる程度に抑えている。書いている間は開いておく。11,164文字のブリーフが、自社ページにそのまま持ち込める部分。
対象
- AIビルダーを使う人で、モデルに任せるのではなく単一のコンポーネントが最初から入った仕様を求めている。
- 引き継ぎメモに821pxのブレイクポイントを書け。次のビルドがページから導き直さずに済む。
- このランディングページは、単一のコンポーネントの実装をエンジニアへ渡し、モーションを文章で残したいデザイナーに応える。
含まれる内容
- 邪魔にならないナビゲーションバー. バーは構図の中で最も静かな部分です。ワードマーク、短いリンク列、#006CD2の操作1つを、ブリーフで最小のタイプ段階に収めています。821px以下では、リンクは2行目に折り返さず折りたたむ。6本目のリンクを足す前に、折りたたみ状態を設計する。
- パネルではなく背景の動画. 構図は1468x1080のクリップの上に組み立て、横には並べない。メディアにパネルも枠も付かない。自動再生が使えないときは1468x1080のポスター画像が構図を保つため、レイアウトが崩れることはありません。
- 段差の大きいスケール. ここではタイポグラフィがスタイルの仕組みです。ディスプレイサイズのInter、インターフェース全体で同じ書体、そして仕事を引き受ける第二のアクセントカラーはありません。ウェイトは役割ごとに指定されているため、実装時に勘で階層を決めることはありません。書体を変えてもサイズ段階はそのまま残してください。
- 幅ごとに定義された挙動. 幅の変化は文字自体で処理します。28px〜18pxのクランプが見出しをスマートフォンからデスクトップまで運び、モバイル専用の構図を必要としません。モバイルメニューも同じブリーフに含まれているため、畳んだ状態も設計済みです。
モーションとインタラクション
時間はブリーフ由来
コントロールの動きは短く、繰り返しに耐える。状態が変わるたびに0.16s。イージングは再生時間と一緒に指定されている（0.16s）ので、作り直しの際に別の感触へ黙って差し替わることはない。
読み込み時にページが組み上がる
行ごとのマスク表示が最初の画面を担う。その下の構図は静止したままなので、動きは装飾ではなくページが組み上がっていく過程として読める。アニメーションは読み込み時に一度だけ実行され、スクロールのたびには走らない。読んでいる途中でページが再演することはない。この参考は1468x1080で収録しました。
この構図がSaaSで効く理由
トレードオフは情報密度。このランディングページは機能訴求型のレイアウトよりファーストビューで語らない。代わりに読み順を守り、長いページなら分散させる仕事をナビゲーション、見出し、お知らせのピル、数値の行、背景のクリップが引き受ける。 Growth Decisionsは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。この参考は1468x1080で収録しました。
ランディングページの背後にある順序
ブロックを入れ替えてもページは表示される。ただし主張としては読めなくなる。ナビゲーション、見出し、お知らせのピル、数値の行、背景のクリップは順序であり、100vhのセクション、18px刻みの余白はその順序でしか機能しない。 SaaSの読み手は、選択肢より先に訴求を受け取る。
ランディングページの再配置
多くのレスポンシブ対応は要素を隠して終わる。ここではレイアウトの形が変わる。スケールは段階式ではなく可変、レイアウトは821pxで切り替わる、セクションは100vhに固定。折り返しに収めるために重要な要素は削っていない。狭い幅でも重要な要素は削られない。
よくある質問（FAQ）
Growth Decisionsは単一のコンポーネントにどこまで依存していますか？
Growth Decisionsは単一のコンポーネントで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Growth Decisionsのプロンプトは完成した仕様書ですか、それとも出発点ですか？
収録されたブリーフは11,164文字で、キャンバス、タイプスケール、配色、トランジションまでを項目ごとに書き分けています。コピーすればそのテキストがそのまま手に入り、Studioに送ればページの説明が入った状態で同じ依頼が用意されます。
Growth Decisionsのモーションは何をきっかけに動きますか？
登場の動きと状態変化は0.16sの範囲に収まります、cubic-bezier(0.16, 1, 0.3, 1)で、低減モーションの分岐もブリーフにあります。スクロールライブラリではなく状態変化を起点に動き、コピーを待たせることもありません。
