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

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

AI・SaaSプロダクト向けにランディングページを作り直す前にAI Runtimeを読むと、構成とそれを支える仕様がここに揃っていることが分かる。カラースキームはニュートラル #28282Aの下地、ティント #C8C8C8の文字で、ページはInterで組む。実装はReactだ。中の寸法はすべて書き出してあるので、そのまま再利用できる。ブリーフはモーションの予算を0.85sのトランジション、cubic-bezier(0.22, 1, 0.36, 1)、ループする動画の下地に使う。書いている間は開いておく。9,593文字のブリーフが、自社ページにそのまま持ち込める部分。

対象

低速回線でもこのランディングページを成立させたいエンジニアは、1472x1080とタイプスケールを重さの予算に使う。
AI・SaaSプロダクトのランディングページを作るチームで、スクリーンショットを写すのではなく実測値（100vhのセクション、28px刻みの余白）を求めている。
プロダクトマーケターで、コピーの背後に6.9sのループ映像があってもランディングページが読める状態を保ちたい。

含まれる内容

邪魔にならないナビゲーションバー. バーは1行のテキストと1つの操作だけで、100vhのセクション、28px刻みの余白として測ってある。太い帯ではなく細い一行として読ませるためだ。バーは独自の背景を持たずに1472x1080の構図の上に載るため、その下のメディアは端から端まで届きます。
カードの壁ではなくリスト. 機能はカードの壁ではなくInterのリストとして組みます。項目はサイズもマーカーも共通なので、長いリストでも拾い読みできます。
検証できる数値. 値そのものが仕様です。100vhのセクション、28px刻みの余白、0.85sのトランジション、cubic-bezier(0.22, 1, 0.36, 1)のイージングは1472x1080での収録値で、スクリーンショットから推測したものではありません。書体とレイアウトが同じ段階を共有しているため、どちらかを差し替えてもずれません。
雰囲気を担うメディア1つ. 6.9sの素材1つがファーストビュー全体を支え、同期させる2つ目のメディア要素はない。1472x1080以上で書き出せば、coverの切り抜きはそのまま機能する。

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

静かな分岐を用意する

低減モーションは後付けではなく仕様に書かれている。有効にすると入場とループが止まり、構図は最終状態を保つ。この分岐は後付けではなく仕様の一部だ。この参考は1472x1080で収録しました。

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

6.9秒の映像1本が環境レイヤーのすべてで、コピーの背後で再生され、切れ目なくループし、ポインターには反応しない。映像はミュートかつインラインなので、操作なしで最初のフレームが出る。1472x1080以上で撮影または書き出す。

ランディングページの再配置

狭い幅のレイアウトは継承ではなく設計している。スケールは段階式ではなく可変、セクションは100vhに固定、ナビゲーションはモバイルメニューに畳まれる。幅ごとに決まっているので、階層は再配置を越えて残る。再配置しても、どの幅でもアクションに届く。

AI Runtimeの最初の読みの順序

ファーストビューを一度流し読みすれば、訴求はもう伝わっている。ナビゲーション、見出し、お知らせのピル、数値の行、クライアントの行は順に現れ、装飾的な区切りではなく100vhのセクション、28px刻みの余白で隔てられる。 SaaSの読み手は、選択肢より先に訴求を受け取る。

このランディングページが正しい理由

トレードオフは情報密度。このランディングページは機能訴求型のレイアウトよりファーストビューで語らない。代わりに読み順を守り、長いページなら分散させる仕事をナビゲーション、見出し、お知らせのピル、数値の行、クライアントの行が引き受ける。 AI Runtimeは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。この参考は1472x1080で収録しました。