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

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

Palomar LabsはAI・SaaSプロダクトに、完成したファーストビューと、それを生んだ数値を渡す。色は白 #F5F3EFの下地、深いのグリーン #2D3A2Eの文字に限り、Montserratで組んでいる。納品物はReactとTailwind CSSで、1920x1422で記録しているため、コードを書く前に枠が決まっている。モーションの予算は240msのトランジション、cubic-bezier(0.16, 1, 0.3, 1)、ループする動画の下地。書いている間は開いておく。7,574文字のブリーフが、自社ページにそのまま持ち込める部分。以下に引用する値はすべてこのブリーフのもので、1920x1422の枠から最小の余白ステップまで含む。収録したプロンプトは1920x1422で記録したので、このページで引用する値はすべてそこにたどれる。

対象

このランディングページは、SaaSのコピーが6.7sのループ映像を支えられる証拠を1画面分必要とする創業者に応える。
見出しをPalomar Labsと同じ長さに保ったままランディングページを書き換えるコンテンツ責任者のために作った。
最初のキーフレームを書く前に240msのタイミングとcubic-bezier(0.16, 1, 0.3, 1)の曲線を確定させたいフロントエンド開発者のために作った。

含まれる内容

操作1つだけの上段. 細いバーをランディングページの上に重ね、左にワードマーク、リンクはMontserratで組みます。そのため構図はコンテンツが先、装飾は後に読めます。タブレットのブレイクポイントを下回ると、モバイル用のオーバーレイに切り替わります。バーは独自の背景を持たずに1920x1422の構図の上に載るため、その下のメディアは端から端まで届きます。バーの要素はわずか数個なので、コンポーネントライブラリなしで組み直せます。
実装まで持ち込む数値. ブリーフの寸法はすべて、測り直せる数値だ（20px刻みの余白、240msのトランジション、cubic-bezier(0.16, 1, 0.3, 1)のイージング）。値は推測ではなく収録時のプロンプトからの引用で、再レンダリングでも変わらない。
文字の後ろのメディア. メディアは6.7sのクリップ1本で、1920x1422の画幅にcoverで切り抜く。どの幅でも黒帯が出ない。自動再生が使えないときは1920x1422のポスター画像が構図を保つため、レイアウトが崩れることはありません。
文字として組む機能リスト. 機能はカードの壁ではなくMontserratのリストとして組みます。コピーが許す限り、各行は1行に収めます。

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

ホバーは意味のある場所だけに

インタラクティブな層は小さく予測可能だ（すべてのカードではなくボタンとリンクのホバー状態）。ほかは静止したままで、構図への集中が保たれる。操作要素はタップできる大きさで、ポインターの扱いは全体で揃っている。長い効果のリストより、確実な状態をいくつか。この参考は1920x1422で収録しました。

意図を感じる速さ

状態変化は240msと指定されているので、コントロールの反応はブラウザの既定値ではなく設計された値になる。時間が短いので、フィードバックはアニメーションではなく応答として読める。

Palomar Labsを仕様として読む

具体的な数値は古びる。1920x1422に合う値が自社の枠に合うとは限らない。それでもブリーフが20px刻みの余白、240msのトランジションを書くのは、明示された値のほうが明示されていない値より変更しやすいから。このランディングページに、初期値任せの部分はない。

Palomar Labsで動くもの

モーションの移植は最後に回す。ブリーフが240msのトランジション、6.7sのメディアループ、ホバー状態と押下状態として固定しているので、レイアウトが決まってからのほうが合わせやすい。このランディングページで、動くために動く要素はない。

AI・SaaSに効くところ

1画面は読み手にとって1つの判断を意味し、それがこのレイアウトのコスト。残りはすべて折り返しの下へ移る。ブリーフが20px刻みの余白、240msのトランジション、cubic-bezier(0.16, 1, 0.3, 1)のイージングを明記しているので、下のセクションも同じリズムを保つ。 SaaSの読み手に、訴求へ至る最短の正直な道を示す。