共有軸トランジション
「次へ」で今の画面が左へ、新しい画面が右から入る。「前へ」なら向きが逆になる。進む・戻るの方向を動きで示すので、どこにいるかを見失わない。
プレビュー
クリック
操作クリック／タップで動きます。
デザインの要点
- 出る画面と入る画面は同じ軸で同じ向きに動く。逆向きに動かすと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>
</div>