このテンプレートについて
Real-Time Alertsは1738x1080で記録し、ギャラリー用の画像ではなく仕様として残した。「Built for fast-moving teams」は、レイアウトが背負うために組まれた一行。色はニュートラル #797979の下地、シェード #2F2A27の文字に限り、Eloquiaで組んでいる。納品形式は自己完結したHTMLファイル1つなので、ログイン画面全体をデザインの引き継ぎなしにプロジェクトへ持ち込める。動きは3500msのトランジション、cubic-bezier(.2.7.3,1)、ループする動画の下地だけで完結する。新しいセクションを足す前にログイン画面の順序を決めたいときに使う。以下に引用する値はすべてこのブリーフのもので、1738x1080の枠から最小の余白ステップまで含む。
対象
- このログイン画面は、キックオフに同席していない相手へcubic-bezier(.2.7.3,1)のイージングを説明する必要があるチームに応える。
- プロトタイプを作らずに370pxの挙動をクライアントへ説明する必要がある制作会社のために作った。
- 自社の見出しを書き、そのうえで計測値を変えずに自己完結したHTMLファイル1つでこのログイン画面を組み直せ。
含まれる内容
- 明記された寸法. レイアウトは比率ではなく絶対値で組む（16pxで固定した表示サイズ、100vhのセクション、角丸26px、10px刻みの余白）。リストは短く、確認者は要素ごとに突き合わせられる。
- 1本のクリップが担う. 背景は1738x1080の4.9sループ1本だけで、coverでトリミングし、色は一切載せていません。ほかの要素はすべて上のレイヤーに浮かびます。1738x1080以上で書き出せば、coverの切り抜きはそのまま機能する。
- 大見出し級の数字. 数値の行が根拠になります。1行に3〜4つの数字、その下に小さなラベル、インターフェースと同じEloquiaで組むため、装飾ではなくデータとして読めます。行の中に区切り線はなく、数字を分けるのは余白だけ。
- フォームがファーストビューのすべて. ここでする判断は1つだけです。フォームに入力するか、離れるか。画面のほかの要素はすべてその判断を支えます。入力欄は1列に積むため、タブ順は読み順と一致します。この参考は1738x1080で収録しました。
モーションとインタラクション
時間も仕様に書く
ブリーフはトランジションの値を3500msに固定しているので、作り直すときに遅い既定値で代用できない。コントロール間で同じ値を再利用するので、時間がばらけようがない。状態変化は速く、スクロールのタイムラインは持たない。
途切れない横方向の動き
マーキーが構図を横切って無限にループする。書体はEloquia。帯は一定速度で流れ、隙間なくループするので、継ぎ目に注意が向くことはない。
ログイン画面の背後にある順序
ここでは順序そのものがデザイン。訴求が実績より先に届くよう見出し、お知らせのピル、数値の行、カードグリッド、フォームを置き、両者の距離を16pxで固定した表示サイズ、100vhのセクションが決める。 SaaSの読み手は、選択肢より先に訴求を受け取る。
ログイン画面を自社のものにする
先に中身を変え、枠は後から確認する。コピーを差し替えている間、壊してはいけない値が16pxで固定した表示サイズ、100vhのセクション、角丸26px、10px刻みの余白だ。ここを動かすと、あとで枠ごと組み直すことになる。色に触る前に、見出しの一行を書き換える。
Real-Time Alertsを仕様として読む
16pxで固定した表示サイズ、100vhのセクション、角丸26px、10px刻みの余白にコミットすることは、柔軟性と引き換えに再現性を得る取引。同じページを別のブランドで、新たな推測なしに作るのがこの参考例の狙い。このログイン画面に、初期値任せの部分はない。
よくある質問（FAQ）
Real-Time Alertsは自己完結したHTMLファイル1つにどこまで依存していますか？
Real-Time Alertsは自己完結したHTMLファイル1つで作られており、項目にその記載があるのは出典を示すためです。ブリーフが定めているのは位置、サイズ、タイミングなので、書体を設定して要素を配置できるフレームワークならどれでも同じ構成を再現できます。
Real-Time Alertsのブリーフは、自分で書くプロンプトと同じものですか？
このページに引用している内容はすべて、収録された21,771文字のブリーフが出典で、後から書き足した解説ではありません。数値と文章が食い違わないのはそのためです。
Real-Time Alertsのブリーフをコピーすると何が手に入りますか？
気分を書いた説明ではなく、制作のための仕様です。1738x1080のキャンバス、余白、モーションの値を名指しで指定しており、レンダリングされた画像を正解として扱う箇所はありません。
