ページ遷移カーテン
リンクを押すと幕が下から閉じ、閉じきった瞬間に内容を差し替えて上へ開く。3ページ分の擬似ルーティングで、遷移中の連打も最後の行き先だけを採用する。
プレビュー
クリック
操作クリック／タップで動きます。
仕様書
- 向く場面
- 世界観を切り替える作品サイトのページ遷移
- SPA で内容差し替えの瞬間を隠したいとき
- 行き先のアクセント色を先に見せたい導線
- 避ける場面
- 業務アプリの頻繁な画面移動（毎回 0.7 秒待つ）
- 同一ページ内のタブ切替
- 構成要素
- ナビボタン
- URL 表示
- ページ内容
- 遷移の幕
- 持っている状態
- 通常
- フォーカス
- 押下中
- キーボード
Tab でナビの3ボタンへ、Enter／Space で遷移。遷移中の再押下は最後の行き先を採用する
- 支援技術
nav に aria-label、幕は aria-hidden。現在ページは色＋aria-current=page。内容は textContent で差し替え、読み上げ順は不変。reduced-motion では幕を出さず即時に差し替え
- 動き
閉じる 320ms ease-in(.7,0,.84,0)・開く 420ms ease-out(.16,1,.3,1)。閉じきった1フレームで差し替え、勢いよく覆い静かに現す
デザインの要点
- 閉じる幕は ease-in（加速）、開く幕は ease-out（減速）。「勢いよく覆って、静かに現れる」順が自然に見える
- 内容の差し替えは幕が完全に閉じた 1 フレームで行う。差し替えの瞬間が見えると演出の意味が無くなる
- 遷移中の再クリックは無視せず「最後の行き先」を覚えて幕が閉じた時に採用する。無視すると押せていない不安を作る
- 幕の色はページのアクセント色にすると、開いた先の世界観が先に伝わる。黒一色は重い印象になる
コード（コピーして使えます）
<div class="pt-app">
<nav class="pt-nav" aria-label="ページ">
<button class="pt-link pt-active" type="button" data-route="home" aria-current="page">ホーム</button>
<button class="pt-link" type="button" data-route="works">制作事例</button>
<button class="pt-link" type="button" data-route="contact">お問い合わせ</button>
</nav>
<div class="pt-stage">
<div class="pt-url" id="ptUrl">/</div>
<div class="pt-page" id="ptPage" data-route="home">
<p class="pt-kicker">ミナト工房</p>
<h2 class="pt-title">木の道具を、毎日の手に。</h2>
<p class="pt-text">横浜の小さな工房で、椅子とカトラリーを作っています。</p>
</div>
<div class="pt-curtain" id="ptCurtain" aria-hidden="true"></div>
</div>
</div>