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

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

Signal IDはAI・SaaSプロダクトに、完成したファーストビューと、それを生んだ数値を渡す。「YOUR VOICE ID TO THE E NETWORK」で始まり、その一行をカードに縮めず、フレームいっぱいに置いている。配色は深いのブルー #000003の下地、#FFFFFFの文字で、書体はSora。納品物はReactとTailwind CSSで、1686x1080で記録しているため、コードを書く前に枠が決まっている。結局、動きは70msのトランジション、cubic-bezier(0.16, 1, 0.3, 1)、ループする動画の下地に尽きる。書いている間は開いておく。11,588文字のブリーフが、自社ページにそのまま持ち込める部分。収録したプロンプトは1686x1080で記録したので、このページで引用する値はすべてそこにたどれる。

対象

モーションを外さざるを得ないなら、このランディングページは100vhのセクション、20px刻みの余白が階層を担ったまま読める。
プロダクトマーケターで、コピーの背後に7sのループ映像があってもランディングページが読める状態を保ちたい。
見出しをSignal IDと同じ長さに保ったままランディングページを書き換えるコンテンツ責任者のために作った。

含まれる内容

背景を持たないナビゲーション. 短いリンク列と1つの操作がランディングページの上に載り、寸法は100vhのセクション、20px刻みの余白で抑えてある。背後の構図と競合しないためだ。バーは独自の背景を持たずに1686x1080の構図の上に載るため、その下のメディアは端から端まで届きます。
役割ごとに指定した字重. タイポグラフィはSoraです。ブリーフは変化をつけるために混ぜるのではなく、書体に役割を与えています。ウェイト、トラッキング、サイズ段階がすべて指定されているため、差し替えても階層は保たれます。書体は固定サイズと組になっています。ディスプレイの行とインターフェースの文字が同じ体系に留まるのはそのためです。
既定値に頼らない構成. リストは短く（100vhのセクション、20px刻みの余白、70msのトランジション、cubic-bezier(0.16, 1, 0.3, 1)のイージング）、システム全体を手作業で確認できる。値は推測ではなく収録時のプロンプトからの引用で、再レンダリングでも変わらない。
1本のクリップが担う. 背景は1686x1080の7sループ1本だけで、coverでトリミングし、色は一切載せていません。ほかの要素はすべて上のレイヤーに浮かびます。自動再生が使えないときは1686x1080のポスター画像が構図を保つため、レイアウトが崩れることはありません。

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

見出しが自ら組み上がる

ページの入場は行ごとのマスク表示だけなので、維持すべき動きのアイデアは1つで済む。完成した状態は静止画と同じ構図なので、動きの完了に何かが依存しているわけではない。この参考は1686x1080で収録しました。

インタラクションは局所に

ページが反応するのは操作できる場所だけ。すべてのカードではなくボタンとリンクのホバー状態。状態が単純なので、どんなコンポーネント体系にも移植できる。タッチ端末で状態を確認する。この参考は1686x1080で収録しました。

ランディングページを自社のものにする

一行、1書体、1アクセント。この3つの差し替えがデザインを最も変える。動かさないほうがよい値は100vhのセクション、20px刻みの余白、70msのトランジション、cubic-bezier(0.16, 1, 0.3, 1)のイージング。自社のアクセントも、参考例のアクセントと同じコントラスト検証を通過する必要がある。

ランディングページを支える数値

この参考が再利用できる理由はここにある。100vhのセクション、20px刻みの余白、70msのトランジション、cubic-bezier(0.16, 1, 0.3, 1)のイージング。どこも初期値に委ねられていないので、これらの数値を保つ差し替えなら構図もそのまま残る。このランディングページに、初期値任せの部分はない。