Aesthetic OnboardingのAI・SaaSログインフローデザインとプロンプト

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

これはAesthetic Onboardingのログイン画面を、スクリーンショットとしてではなく、それを生んだブリーフとともに公開したもの。ページ自身の見出しは「Welcome back」で、構図はその言葉をそのまま中心に組まれている。配色は明るいのオレンジ #F09819の下地、深いのブルー #0C0C0Eの文字、明るいのティール #00C6FFのアクセント。納品形式はReactとTailwind CSSなので、ログイン画面全体をデザインの引き継ぎなしにプロジェクトへ持ち込める。動きはループする動画の下地だけで完結する。この参考例は、作り始める前にファーストビューを固めたいAI・SaaSプロダクト向け。収録したプロンプトは1894x1378で記録したので、このページで引用する値はすべてそこにたどれる。

対象

モーションを外さざるを得ないなら、このログイン画面は80px刻みの余白が階層を担ったまま読める。
このログインフローは、SaaSのコピーが5.4sのループ映像を支えられる証拠を1画面分必要とする創業者に応える。
AI・SaaSプロダクトログイン画面を1つ出す個人創業者で、背中にデザインシステムがない人のために作った。

含まれる内容

目分量ではなく実測. レイアウトは比率ではなく絶対値で組む（80px刻みの余白）。値は推測ではなく収録時のプロンプトからの引用で、再レンダリングでも変わらない。調整の前に測る。
効いてくるポスターフレーム. 構図は1894x1378のクリップの上に組み立て、横には並べない。メディアにパネルも枠も付かない。ループは5.4sと短く、目にはタイムラインではなくテクスチャとして映ります。
数字の下に置くラベル. 統計はタイポグラフィとして扱います。数値はディスプレイサイズ、ラベルはブリーフ最小の段階、色付きのカードではなく#00C6FFか文字色の上に置きます。数値だけが#00C6FFのアクセントを持ち、周囲は文字色に留まります。ラベルを小さくする前に、数字を1つ削る。
控えめに使う1色のアクセント. #00C6FFは操作系だけに使い、他では使わない。彩度の高い色が明るいのオレンジ #F09819の上に載っても主張しすぎないためだ。ほかはすべて明るいのオレンジ #F09819の上にあり、彩度の高い配色でも読めるのはそのためです。第二の色を使うなら、情報を担わせてください。

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

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

環境の動きはスクロール演出ではなく5.4秒の1894x1378ループから生まれる。だからページは落ち着き、文字は読める。映像はミュートかつインラインなので、操作なしで最初のフレームが出る。1894x1378以上で撮影または書き出す。

ポインター状態以外は何もしない

インタラクティブな層は小さく予測可能だ（すべてのカードではなくボタンとリンクのホバー状態）。ほかは静止したままで、構図への集中が保たれる。ホバーとフォーカスはまとめて指定されているので、ポインターとキーボードが同じ情報を受け取る。操作を確認しない状態は削る。この参考は1894x1378で収録しました。

Aesthetic Onboardingの最初の読みの順序

このログイン画面には明示された読みの経路がある。そこから視線は見出し、数値の行、カードグリッド、背景のクリップ、フッターを順にたどる。1画面が箇条書きに見えないのはそのため。 SaaSの読み手は、選択肢より先に訴求を受け取る。この参考は1894x1378で収録しました。

ログイン画面の再配置

流動的なスケールと段階的なスケールは、広い画面では似て見える。ビューポートを狭めると差が出る。10px〜80pxのクランプか、固定の跳ね幅かという違いだ。再配置しても、どの幅でもアクションに届く。

AI・SaaSに効くところ

メディアに色の膜をかぶせるのが簡単な解決だったはず。ブリーフはそれを外している。メディアは1894x1378の5.4sループ映像だ。それでもコピーが保つのは、80px刻みの余白が画面を静かに保つから。 Aesthetic Onboardingは提供内容を一度だけ述べ、二つ目の主張を足す代わりに構図で反復しています。