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

ライフスタイルブランド向けにログイン画面を作り直す前にAurora Onboardを読むと、構成とそれを支える仕様がここに揃っていることが分かる。配色は黒 #000000の下地、くすんだのインディゴ #DBCDE9の文字に絞り、書体はInter。納品物はReactとTailwind CSSで、1850x1352で記録しているため、コードを書く前に枠が決まっている。主題ではなく構造を借りる。ログイン画面とその数値は、そのまま自社ブランドに移せる。このページの残りは、ログイン画面をブロックごと、次にタイミングと値ごとに分解する。ブリーフにない主張は足さない。ブリーフが固定しているもの（フレーム、文字サイズ、タイミング、ブレイクポイント）は下記にすべて書き出してあるので、ログイン画面を作り直すときに背後の意図を推測せずに済む。

対象

• 複数案件を同時に進めるスタジオ責任者は、このログイン画面を他ページが踏襲する型として使う。
• ログインのコピーを自社で書くプロダクトチームは、表示用の文字サイズが想定した行長を一行ずつ守る必要がある。
• このログイン画面を1スプリントに収め、新しい素材も増やしたくないプロダクトマネージャーのために作った。

含まれる内容

• スケールがスタイルになる. Interに仕事を任せ、見出しから補助コピーへサイズを大きく落とし、サイズが大きくなるほど字間を詰めています。階層を担うのは色ではなく文字です。ブリーフが置いたサイズと字重を動かさなければ、書体の差し替えは安全だ。
• フォームがファーストビューのすべて. ここでする判断は1つだけです。フォームに入力するか、離れるか。画面のほかの要素はすべてその判断を支えます。エラー状態とフォーカス状態は、ブラウザ任せにせず指定しています。1列に、操作1つ。この参考は1850x1352で収録しました。
• 大見出し級の数字. 数字はInterで、本文よりも見出しに近いサイズで組む。数字は周囲のコピーと同じベースラインに乗り、行が1つの塊として読める。
• ブランドを担うフッター. リンクは列にまとめ、ワードマークは独立したブロックに置きます。長いフッターが単なる一覧にならず、読める状態に保たれます。ワードマークは独立したブロックに置き、長いリンク一覧でも読めるようにします。この参考は1850x1352で収録しました。

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

よくある質問（FAQ）