共有軸トランジション
「次へ」で今の画面が左へ、新しい画面が右から入る。「前へ」なら向きが逆になる。進む・戻るの方向を動きで示すので、どこにいるかを見失わない。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- ウィザード・多段フォームの進む／戻る
- オンボーディングの手順切替
- 履歴の前後関係を動きで示したい画面
- 避ける場面
- 順序の無いタブ切替（方向が嘘になる）
- 1画面で完結する短いフォーム
- 構成要素
- 手順ドット
- ステージ
- ペイン
- 前へボタン
- 次へ／はじめるボタン
- 持っている状態
- 通常
- フォーカス
- 無効
- 成功
- キーボード
Tab で「前へ」「次へ」へ、Enter／Space で移動（切替後のフォーカスは新しいペインへ）。最初は「前へ」無効、最後は「はじめる」→「登録しました」
- 支援技術
手順は ol＋aria-label、現在は aria-current=step。非表示ペインは hidden。切替後は新ペインへフォーカスを移し、完了は role=status で通知。reduced-motion で 0ms
- 動き
出る側 90ms ease-in(.4,0,1,1) で 30px 移動＋消え、入る側は 90ms 遅れて 210ms ease-out(0,0,.2,1)。同軸同向きで進む・戻るを示す
原則一貫性と標準
デザインの要点
- 出る画面と入る画面は同じ軸で同じ向きに動く。逆向きに動かすと2枚が衝突して見える
- 移動量は 30px 程度で、フェードを併用する。画面幅ぶん動かすと、追いきれず疲れる
- 出る側 90ms で消え、入る側は 210ms で現れる。消えるほうを短くして、新しい画面に時間を使う
- 「戻る」は方向を反転する。進むも戻るも同じ向きだと、履歴の前後関係が動きから読めない
プロのサイトでの実例
実例は「型の使われ方」の観察であり、コード・ロゴの転載ではありません。サイト側の更新で見え方が変わることがあります。
コード（コピーして使えます）
<div class="sa-wrap">
<ol class="sa-dots" aria-label="手順">
<li class="sa-dot sa-dot-on" aria-current="step">1</li><li class="sa-dot">2</li><li class="sa-dot">3</li>
</ol>
<div class="sa-stage" id="saStage">
<section class="sa-pane" data-step="0">
<h3 class="sa-h">アカウント</h3>
<p class="sa-p">メールアドレスと表示名を登録します。所要時間は 1 分ほどです。</p>
<div class="sa-field"><span class="sa-label">メールアドレス</span><span class="sa-input">haruka@example.com</span></div>
</section>
<section class="sa-pane" data-step="1" hidden>
<h3 class="sa-h">プラン</h3>
<p class="sa-p">あとから変更できます。無料期間中は請求されません。</p>
<div class="sa-plan"><b>スタンダード</b><span>¥1,980/月・請求書 無制限</span></div>
</section>
<section class="sa-pane" data-step="2" hidden>
<h3 class="sa-h">確認</h3>
<p class="sa-p">内容を確認して「はじめる」を押すと、すぐに使い始められます。</p>
<div class="sa-plan"><b>haruka@example.com</b><span>スタンダード・14 日間無料</span></div>
</section>
</div>
<div class="sa-bar">
<button class="sa-btn sa-btn--ghost" id="saPrev" type="button" disabled>← 前へ</button>
<button class="sa-btn" id="saNext" type="button">次へ →</button>
</div>
<p class="sa-status" id="saStatus" role="status"></p>
</div>