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

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

Autonomous OpsはAI・SaaSプロダクトに、完成したファーストビューと、それを生んだ数値を渡す。見出しは「Falcon AI operations overview」で、ランディングページの残りはその周りに配置されている。配色は#F0F0F0の下地、#282828の文字、オレンジ #FF6900のアクセントで、書体はSegoe UI, Arial, Helvetica。納品形式は自己完結したHTMLファイル1つなので、ランディングページ全体をデザインの引き継ぎなしにプロジェクトへ持ち込める。ページはモーションを3000msのトランジション、cubic-bezier(.16,1.3,1)、ループする動画の下地にとどめる。書いている間は開いておく。18,222文字のブリーフが、自社ページにそのまま持ち込める部分。

対象

このランディングページからは、他の何よりも先に2028x1080の画角と100vhのセクション、3カラムのグリッドを持っていけ。
SaaSの案件を提案し、クライアントへの初回返信に自己完結したHTMLファイル1つを載せる必要がある制作会社のためのものだ。
競合のSaaSランディングページを作り直すチームが、フレームワークを決める前に自己完結したHTMLファイル1つを明示したい。

含まれる内容

操作より前に置くリンク. バーは構図の中で最も静かな部分です。ワードマーク、短いリンク列、#FF6900の操作1つを、ブリーフで最小のタイプ段階に収めています。リンクはワードマークより小さいサイズで組み、#FF6900の操作だけがバーの中で重みを持つ要素です。自社のページにセクションが多い場合は、バーを広げるのではなくまとめてください。
明記された寸法. ブリーフは100vhのセクション、3カラムのグリッド、角丸1.59cqw、3000msのトランジションを固定し、残りは配置に任せる。ひとりでに段数が増えるスケールとは逆の発想だ。書体とレイアウトが同じ段階を共有しているため、どちらかを差し替えてもずれません。変えるのは題材で、刻みではない。
最下層に置く動画. 2028x1080の動画がコピーの背後で9.7sのループ再生を行います。ミュートかつインラインで、両者の間に色のレイヤーはありません。ループは9.7sと短く、目にはタイムラインではなくテクスチャとして映ります。
規律をもって使う1書体. ここではタイポグラフィがスタイルの仕組みです。ディスプレイサイズのSegoe UI, Arial, Helvetica、インターフェース全体で同じ書体、そして仕事を引き受ける第二のアクセントカラーはありません。 UIテキストは1つの書体に固定し、同じサイズで2つの声が混ざらない。

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

アニメーションの予算はこれで全部

時間は短く揃っている（3000ms、cubic-bezier(.16,1.3,1)を使い）。だからホバーと押下の状態は別々の効果の寄せ集めではなく、一つの仕組みとして読める。スクロール位置を待つものはないので、触れた瞬間にページが反応する。

キャンバスがビジュアルそのもの

ビジュアルを担っているのはライブのキャンバスだ（WebGLのキャンバス）。仕様はキャンバスの周りのインターフェースを素朴に保ち、情景だけを見せ場にしている。レンダリング前の状態を先に設計する。この参考は2028x1080で収録しました。

Autonomous Opsで最初に変えるもの

白紙から始める場合と比べる。ここでは枠（2028x1080）と100vhのセクション、3カラムのグリッドがすでに決まっているので、作業は構成ではなく差し替えになる。色に触る前に、見出しの一行を書き換える。

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

機能訴求型のレイアウトは製品の機能を並べる。これは読み手を1つの判断へ導く。その経路はナビゲーション、見出し、お知らせのピル、数値の行、カードグリッドと、100vhのセクション、3カラムのグリッドの取り方に表れる。 SaaSの読み手は、選択肢より先に訴求を受け取る。

Autonomous Opsで動くもの

ここのトランジションにはすべて数値が付いている。3000msのトランジション、9.7sのメディアループ、行ごとのマスク表示を勘で調整し直すのではなく、値ごと移植できるのはそのため。このランディングページで、動くために動く要素はない。

よくある質問（FAQ）

Autonomous Opsは自己完結したHTMLファイル1つにどこまで依存していますか？

Autonomous Opsは自己完結したHTMLファイル1つで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。

Autonomous Opsのプロンプトは完成した仕様書ですか、それとも出発点ですか？

気分を書いた説明ではなく、制作のための仕様です。2028x1080のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。

Autonomous Opsから作り直したページを、クレジット表記なしで公開してもよいですか？

ブリーフは構成の説明であって、第三者の素材を再配布してよいという許諾ではありません。構造と数値は残し、素材とブランド表記は差し替え、クライアントにレイアウトの出典を聞かれたら収集元を伝えてください。この参考は2028x1080で収録しました。