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

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

AI・SaaSプロダクト向けにランディングページを作り直す前にForecast Centerを読むと、構成とそれを支える仕様がここに揃っていることが分かる。カラースキームは深いのブルー #04121Bの下地、#FFFFFFの文字で、ページはInterで組む。納品物は自己完結したHTMLファイル1つで、1466x1080で記録しているため、コードを書く前に枠が決まっている。モーションの予算は2.55sのトランジション、cubic-bezier(.16,1.3,1)、ループする動画の下地。書いている間は開いておく。11,253文字のブリーフが、自社ページにそのまま持ち込める部分。

対象

制作の仕様を書き、批判的に検討する材料としてcubic-bezier(.16,1.3,1)のイージングを探しているStudioのチーム。
このランディングページは、キックオフに同席していない相手へ自己完結したHTMLファイル1つを説明する必要があるチームに応える。
自己完結したHTMLファイル1つから組み始めるなら、先に100vhのセクション、14px刻みの余白を取り出せ。グリッドが固まるまでは配色に触るな。

含まれる内容

背景を持たないナビゲーション. ワードマークが左端を押さえ、その右にリンクが並ぶ。すべてInterで組んであり、バーは別系統ではなく下のページに属して見える。バーは独自の背景を持たずに1466x1080の構図の上に載るため、その下のメディアは端から端まで届きます。
文字と画幅で1つの尺度. ここに目分量はありません。仕様が100vhのセクション、14px刻みの余白、2.55sのトランジション、cubic-bezier(.16,1.3,1)のイージングを固定し、残りのレイアウトはその値から導かれます。値が固定されているので、差し替えてもリズムは変わらず見た目だけが変わる。
オーバーレイなしのメディア. 構図は1466x1080のクリップの上に組み立て、横には並べない。メディアにパネルも枠も付かない。ループは5.3sと短く、目にはタイムラインではなくテクスチャとして映ります。書き出しは1466x1080以上にして、トリミングを正確に保ってください。
同じ重みのパネル. 読み順はグリッドが決めます。同じ重みのパネルが1つずつ考えを担い、小さめのInterで組むことで構造が見えたままになります。グリッドは1列に畳んでもパネルの順序を変えない。

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

タイムラインではなくループ

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

低減モーションに対応する

モーション層にはオフスイッチがある。 prefers-reduced-motionでは入場とループを外し、ほかはその場にとどめる。モーションを切ってもレイアウトは同一なので、アニメーションに何も依存していない。ページを移植するときも低減モーションの分岐は残す。この参考は1466x1080で収録しました。

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

自社のコピーをこのランディングページに入れても順序は保たれる。要素が交換可能ではないからだ。ナビゲーション、見出し、お知らせのピル、数値の行、カードグリッドはそれぞれ1つの役割を担う。 SaaSの読み手は、選択肢より先に訴求を受け取る。この参考は1466x1080で収録しました。

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

別に保守するモバイル用デザインは存在しない。セクションは100vhに固定、モーションに低減モーションの分岐がある。同じ階層が幅をまたいでそのまま通るので、二重管理にならない。操作部はタップできる大きさを保ち、コピーはどの幅でも読む順番を維持します。

Forecast Centerを仕様として読む

作り直しがずれるとき、最初に崩れるのは余白だ。 Forecast Centerは構成と一緒に100vhのセクション、14px刻みの余白、2.55sのトランジション、cubic-bezier(.16,1.3,1)のイージングを公開することでそれを避けている。このランディングページに、初期値任せの部分はない。