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

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

Data Signalは1482x1080で記録し、ギャラリー用の画像ではなく仕様として残した。ページ自身の見出しは「Abstract red and blue smoke」で、構図はその言葉をそのまま中心に組まれている。カラースキームは深いのティール #050606の下地、白 #EDEDEDの文字で、ページはInterで組む。納品物は自己完結したHTMLファイル1つで、1482x1080で記録しているため、コードを書く前に枠が決まっている。モーションの予算は520msのトランジション、cubic-bezier(.16,1.3,1)、ループする動画の下地。書いている間は開いておく。12,007文字のブリーフが、自社ページにそのまま持ち込める部分。以下に引用する値はすべてこのブリーフのもので、1482x1080の枠から最小の余白ステップまで含む。

対象

工数を見積もるプロダクトマネージャーは、cubic-bezier(.16,1.3,1)のイージングを作業範囲として読む。
自己完結したHTMLファイル1つから組み始めるなら、先に16pxで固定した表示サイズ、19vhのセクションを取り出せ。グリッドが固まるまでは配色に触るな。
このランディングページは、SaaSのコピーが5.9sのループ映像を支えられる証拠を1画面分必要とする創業者に応える。

含まれる内容

ページのグリッドに乗るバー. 短いリンク列と1つの操作がランディングページの上に載り、寸法は16pxで固定した表示サイズ、19vhのセクションで抑えてある。背後の構図と競合しないためだ。619px以下では、リンクは2行目に折り返さず折りたたむ。背景を付ける前に、自社の素材の上でバーを試す。
イラストではなくクリップ. メディアは物語ではなく雰囲気を担う。1482x1080の5.9sループがすべての後ろに敷かれる。1482x1080以上で書き出せば、coverの切り抜きはそのまま機能する。
ファーストビュー上部のバッジ. バッジは1つ、メッセージも1つ。ピルは見出しの上にInterの最小段階で置き、その位置を争う要素はほかにありません。ピルはブリーフ最小の段階に置くため、第二のタイトルではなくラベルとして読めます。見出しの上に置き、横には決して置かないでください。
実装まで持ち込む数値. ここでは文字と余白を同じ1つのリストから取る（16pxで固定した表示サイズ、19vhのセクション、角丸7px、36px刻みの余白）。名指しされた値の間に勝手な中間値はありません。寸法の一覧がそのままシステム全体です。再現は同じ数値で検証する。

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

タイムラインではなくループ

5.9秒の映像1本が環境レイヤーのすべてで、コピーの背後で再生され、切れ目なくループし、ポインターには反応しない。映像が短いので切れ目なくループでき、解像度よりもその点が効く。この参考は1482x1080で収録しました。

インタラクティブ層はコントロール

フィードバックはすべてのカードではなくボタンとリンクのホバー状態に限る。密度の高い最初の画面が煩くならないのはそのためだ。操作要素はタップできる大きさで、ポインターの扱いは全体で揃っている。この参考は1482x1080で収録しました。

Data Signalで最初に変えるもの

変える順番はコピーとメディアが先、色が次、レイアウトが最後である。1482x1080のフレームとInterのスケールがページを支えているので、それらを貫くのではなく、その周りで差し替える。新しいコピーも同じ表示サイズで組み、何かを足す前にコントラストを確認し直します。

AI・SaaSに効くところ

いまのファーストビューが3つのことを説明しているなら、これは1つだけを説明する版。ナビゲーション、見出し、お知らせのピル、数値の行、カードグリッドを読み順に並べ、16pxで固定した表示サイズ、19vhのセクションがリズムを決める。 Data Signalは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。