ウェルカム画面
初回起動のウェルカム画面。アプリマーク・あいさつの見出し・ひと言の価値提案に、主要アクション「はじめる」と副次「ログイン」を中央に配した第一印象の型。
プレビュー
静的
操作動きのない質感・レイアウトの見本です。
仕様書
- 向く場面
- 初回起動の第一印象を作る1画面
- 主要「はじめる」と副次「ログイン」を並べる入口
- アプリマーク・見出し・一言の価値提案の型
- 避ける場面
- 機能説明を詰め込む画面（ウォークスルーに分ける）
- 毎回表示する画面（初回だけ）
- 構成要素
- アプリマーク
- 見出し
- 価値提案
- 主ボタン
- 副ボタン
- 注記
- 持っている状態
- 通常
- ホバー
- 押下中
- キーボード
Tab で「はじめる」→「ログイン」、Enter／Space で実行（見本のボタンは遷移しない）
- 支援技術
h1 で画面名を示し、マークは aria-hidden。主・副は色と枠に加えて文言で区別。:focus-visible で 2px のリング。出現アニメは reduced-motion で無効
- 動き
出現 500ms cubic-bezier(0.2,0.7,0.3,1) で 12px 上昇＋フェード（第一印象）。reduced-motion で無効
デザインの要点
- 主ボタンは1つだけ塗る。「はじめる」と「ログイン」を同じ強さにすると、新規の人が最初の一手で迷う
- 価値提案は一文・220px 幅で2行まで。機能の列挙はウォークスルーに回し、ここでは印象だけを作る
- 出現は 12px 上昇＋フェード 500ms の一度きり。ループする装飾は入れず、ボタンへ視線を落ち着かせる
- 「アカウントがなくても始められる」の注記は主ボタンの直下。登録の壁を感じる前に不安を消す
コード（コピーして使えます）
<div class="wc-screen">
<div class="wc-inner">
<div class="wc-mark" aria-hidden="true">ち</div>
<h1 class="wc-title">ようこそ、ちいつるへ</h1>
<p class="wc-lead">小さな道具で、毎日の手間をひとつ減らす。</p>
<div class="wc-actions">
<button class="wc-primary" type="button">はじめる</button>
<button class="wc-secondary" type="button">ログイン</button>
</div>
<p class="wc-note">アカウントがなくても、無料ですぐに始められます。</p>
</div>
</div>