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

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

AI・SaaSプロダクト向けにランディングページを作り直す前にFastshotを読むと、構成とそれを支える仕様がここに揃っていることが分かる。「Describe an app. We'll build it」で始まり、その一行をカードに縮めず、フレームいっぱいに置いている。カラースキームは深いのブルー #0A0D12の下地、くすんだのインディゴ #9C86CEのアクセントで、ページはInterで組む。納品物は自己完結したHTMLファイル1つで、1920x1406で記録しているため、コードを書く前に枠が決まっている。ブリーフはモーションの予算を1.00sのトランジション、cubic-bezier(.4,0.2,1)、ループする動画の下地に使う。書いている間は開いておく。15,844文字のブリーフが、自社ページにそのまま持ち込める部分。

対象

このランディングページを引き継ぐ外部チームには、最初のコミット前にcubic-bezier(.4,0.2,1)のイージングをリポジトリへ固定する必要がある。
このランディングページは、自己完結したHTMLファイル1つをすでに理解し、自己完結したHTMLファイル1つを文章にできれば足りるチームを対象にしている。
引き継ぎメモに599pxのブレイクポイントを書け。次のビルドがページから導き直さずに済む。

含まれる内容

ドロワーを持たない一行. バーは構図の中で最も静かな部分です。ワードマーク、短いリンク列、#9C86CEの操作1つを、ブリーフで最小のタイプ段階に収めています。ラベルは599pxで1行に収まる長さで、現在の項目はピルではなくウェイトで示します。
パネルではなく背景の動画. 1920x1406の動画がコピーの背後で7.5sのループ再生を行います。ミュートかつインラインで、両者の間に色のレイヤーはありません。ループは7.5sと短く、目にはタイムラインではなくテクスチャとして映ります。
スケールがスタイルになる. このトーンを作っているのはブリーフのサイズ段階とトラッキングです。詰めたディスプレイサイズのInterがあり、そこから補助コピーへはっきり落とします。 UIテキストは1つの書体に固定し、同じサイズで2つの声が混ざらない。
ビューポート基準の計測. サイズは継承ではなく明記されています（100vhのセクション、角丸4px、18px刻みの余白、1.00sのトランジション）。書体やコピーを差し替えても、この関係は保たれます。画幅の比率も寸法と一緒に記録してあり、再現時に縦横比も合う。

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

時間はブリーフ由来

1つの時間がすべてのインタラクションを覆う（1.00s、cubic-bezier(.4,0.2,1)で）。ホバーと押下が同じ体系に読めるのはそのため。イージングは再生時間と一緒に指定されている（1.00s）ので、作り直しの際に別の感触へ黙って差し替わることはない。挙動1つにつき時間1つ。

スクロールライブラリなしの環境モーション

環境の動きはスクロール演出ではなく7.5秒の1920x1406ループから生まれる。だからページは落ち着き、文字は読める。映像はミュートかつインラインなので、操作なしで最初のフレームが出る。

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

ここでのレスポンシブは尺度が変わるという意味であり、階層は変わらない（スケールは段階式ではなく可変、レイアウトは599pxで切り替わる、セクションは100vhに固定）。テキストはファーストビュー内に残り、操作部はタップできる大きさを保ち、低減モーションも尊重されている。自動再生とモーションは誠実に扱われているので、それらが使えない環境でもページは内容を伝えます。

SaaSのブリーフが効く理由

引き算は、ファーストビューに実績を置く余地を削る。このブリーフはそのコストを受け入れ、最初の画面を訴求に使う。100vhのセクション、角丸4pxを固定してあるので、実績セクションは下に足しても作り直しにならない。 Fastshotは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。