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

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

Quantum Lucidは、AI・SaaSプロダクトがランディングページで抱える課題を記録済みのブリーフ1本で解く。配色はニュートラル #F2F2F2の下地、ほぼ黒 #000000の文字、シェード #38C6ECのアクセントで、書体はFigtree。納品物は自己完結したHTMLファイル1つで、1920x1412で記録しているため、コードを書く前に枠が決まっている。モーションは1200msのトランジション、cubic-bezier(.22, 1.36, 1)、ループする動画の下地で、コピーが主役のままになる程度に抑えている。書いている間は開いておく。20,249文字のブリーフが、自社ページにそのまま持ち込める部分。以下に引用する値はすべてこのブリーフのもので、1920x1412の枠から最小の余白ステップまで含む。

対象

工数を見積もるプロダクトマネージャーは、cubic-bezier(.22, 1.36, 1)のイージングを作業範囲として読む。
プロトタイプを作らずに216pxの挙動をクライアントへ説明する必要がある制作会社のために作った。
プロダクトマーケターで、コピーの背後に6.7sのループ映像があってもランディングページが読める状態を保ちたい。

含まれる内容

一行に収めたナビゲーション. ナビゲーションは帯ではなく細いストリップです。ワードマークは左、リンクは中央やや右、操作は#38C6ECの1つだけ。いずれも独自の背景を持たずにランディングページの上に載ります。ラベルは216pxで1行に収まる長さで、現在の項目はピルではなくウェイトで示します。
イラストではなくクリップ. 6.7sの素材1つがファーストビュー全体を支え、同期させる2つ目のメディア要素はない。ループは6.7sと短く、目にはタイムラインではなくテクスチャとして映ります。
段差の大きいスケール. 大見出しはFigtreeで、ブリーフが定めたサイズで組む。見出しは段落ではなく構図の要素になる。字間はサイズごとに設定し、大見出しとキャプションで同じ値を共有しない。
検証できる数値. 寸法は1920x1412のレンダリングから読み取った（100vhのセクション、角丸26px、14px刻みの余白、1200msのトランジション）。これらの数値に合わせて再現すれば、追加調整なしで参考例に近づく。

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

時間はブリーフ由来

アニメーションの予算は小さく、明示されている。1200ms、cubic-bezier(.22, 1.36, 1)で。適用先は入場ではなく状態変化だ。時間が短いので、フィードバックはアニメーションではなく応答として読める。

動くのはコピーだけ

ページの入場は行ごとのマスク表示だけなので、維持すべき動きのアイデアは1つで済む。時間はコンテナではなく文字に割り当てられている。だから行は塊ではなく文として着地する。この参考は1920x1412で収録しました。

この構図がSaaSで効く理由

主張は見出しサイズで一度だけ出す。ランディングページの残りはすべてその一行を軸に並ぶ。ナビゲーション、見出し、お知らせのピル、数値の行、カードグリッドが続き、最初の読みで競合する第二の約束はない。 SaaSの読み手に、訴求へ至る最短の正直な道を示す。この参考は1920x1412で収録しました。

ランディングページの背後にある順序

トレードオフは我慢を強いること。走査しやすいグリッドなら即座に渡す詳細を、このページは保留する。代わりに得るのは、ナビゲーション、見出し、お知らせのピル、数値の行、カードグリッドが読み違えられないファーストビュー。 SaaSの読み手は、選択肢より先に訴求を受け取る。この参考は1920x1412で収録しました。

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

テンプレートはレイアウトを受け入れさせる。この参考例はレイアウトを残し、中身をすべて変えさせる。違いは、主題が動いても100vhのセクション、角丸26px、14px刻みの余白、1200msのトランジション、cubic-bezier(.22, 1.36, 1)のイージングが固定されていること。メディアのトリミングは守る。書体と同じだけ働いている。