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

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

LTX Videoは、AI・SaaSプロダクトがランディングページで抱える課題を記録済みのブリーフ1本で解く。見出しは「The world model」で、ランディングページの残りはその周りに配置されている。配色はくすんだの赤 #FFD7E6の下地、深いのブルー #0B1A26の文字、ティール #7FE3FFのアクセントに絞り、書体はManrope。納品物は自己完結したHTMLファイル1つで、1920x1400で記録しているため、コードを書く前に枠が決まっている。モーションの予算は420msのトランジション、cubic-bezier(0.22, 1, 0.36, 1)、ループする動画の下地。書いている間は開いておく。21,298文字のブリーフが、自社ページにそのまま持ち込める部分。

対象

まず18px〜23pxの可変型サイズ、100vhのセクションから決めろ。配色は後からついてくる。このランディングページを読ませているのは余白だ。
このページは、自己完結したHTMLファイル1つでAI・SaaSプロダクトランディングページを組み直し、見た目の裏にある数値を探すフロントエンド開発者に応える。
このランディングページは、SaaSのコピーが7.8sのループ映像を支えられる証拠を1画面分必要とする創業者に応える。

含まれる内容

邪魔にならないナビゲーションバー. バーに載るのはワードマーク、セクションのリンク、#7FE3FFのボタン1つだけです。18px〜23pxの可変型サイズ、100vhのセクションで測られているため、第二のヘッダーに膨らむことはありません。700px以下では、リンクは2行目に折り返さず折りたたむ。
最下層に置く動画. 背景は1920x1400の7.8sループ1本だけで、coverでトリミングし、色は一切載せていません。ほかの要素はすべて上のレイヤーに浮かびます。自動再生が使えないときは1920x1400のポスター画像が構図を保つため、レイアウトが崩れることはありません。
目分量ではなく実測. レイアウトに勘で決める部分はない。ブリーフが18px〜23pxの可変型サイズ、100vhのセクション、5カラムのグリッド、48px刻みの余白を明記し、実装はその値に合わせる。値は推測ではなく収録時のプロンプトからの引用で、再レンダリングでも変わらない。
段差の大きいスケール. 最上位の文字はManropeで、補助コピーはそれよりずっと小さく落とす。階層は色に頼らず読める。サイズが大きくなるほど字間を詰めるため、18–23pxの範囲でディスプレイの行がまとまります。書体は1つ、役割は明確に。

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

静かな分岐を用意する

モーション層にはオフスイッチがある。 prefers-reduced-motionでは入場とループを外し、ほかはその場にとどめる。低減モーションを有効にすると、構図は遷移の途中で切り替わるのではなく最終状態を保つ。レイアウトはアニメーションなしでも成立させる。この参考は1920x1400で収録しました。

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

環境の動きは7.8秒の映像1本を1920x1400で使うだけ。ポインターに反応させず、コピーの背後で静かにループさせる。ほかに連続して動くものがないので、注意を引くのは映像だけだ。

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

最初の判断と競合するものはここにはない。「The world model」が最初のフレームからその役割を担っている。補助情報は折り返しの下で待たせ、ページ上部はナビゲーション、数値の行、機能リスト、カウントダウン、背景のクリップだけで担う。視線を横へ散らす要素は置いていない。 SaaSの読み手は、選択肢より先に訴求を受け取る。

この構図がSaaSで効く理由

既製のヒーローとこのランディングページは同じ部品を使う。違うのは、ナビゲーション、数値の行、機能リスト、カウントダウン、背景のクリップで順序づけ、18px〜23pxの可変型サイズ、100vhのセクション、5カラムのグリッド、48px刻みの余白で測っている点。だから画面は入れ物ではなく順序として読める。 LTX Videoは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。