ページを移るときや、一覧から詳しいページへ入るときの画面の切り替えを8種類の型に分け、AIへの指示文・動く見本・コードを載せています。見本の下で時間や向きを変えると、指示文とコードも同じものに変わります。
画面の切り替えの動きはどの型を選ぶか
まず、画面を幕で覆って切り替えるか、画面そのものを動かすかで分けます。幕の型はページが替わったことをはっきり見せられますが、移るたびに通るので短くします。画面ごと動く型は、薄れる・横へ動く・奥へ入るといった動きで、どこへ移ったのかを伝えます。迷ったら、どのサイトにも合わせやすいフェードから始めます。
| こんなとき | 向いている動き | 近い型（ほかのページ） |
|---|---|---|
| ページが替わったことを、ブランドの色ではっきり見せたい | 色の幕が横切る（ワイプトランジション） | ワイプリビール |
| 作品を1ページずつ見せるサイトで、区切りを強めたい | 縦の帯が順に閉じて開く（シャッタートランジション） | カーテンリビール |
| 特設サイトで、最初の1回だけロゴを印象づけたい | 幕の中央にロゴが出る（ロゴトランジション） | ローディング画面 |
| 押した場所と、次の画面をつなげて見せたい | 押した位置から円が広がる（サークルトランジション） | — |
| 落ち着いた印象のまま、どのページにも付けたい | 薄れて次が浮かぶ（フェードトランジション） | — |
| 手順のある画面で、進んだのか戻ったのかを伝えたい | 「次へ」で右から、「戻る」で左から（スライドトランジション） | — |
| 一覧から詳しいページへ、階層を降りる感じを出したい | 押した項目の奥へ入る（ズームトランジション） | — |
| 写真で選ぶ一覧で、どれを開いたかを伝えたい | 写真がつながって広がる（共有要素トランジション） | — |
ワイプリビールやカーテンリビールは、見出しや写真などの要素1つを幕で隠してから見せる動きで、画面ごとは切り替えません。ローディング画面は読み込みを待つ間を幕で覆う型で、ロゴトランジションのように読み込みと関係なく見せる演出とは別のものです。
どの型でも守ること
- 短くする。ページを移るたびに通る動きなので、0.3〜0.6秒くらいに収めます。ロゴを見せる型のように長くなるものは、使う場面を絞ります。
- 途中で押されても壊れないようにする。切り替えの途中で別のリンクが押されたら、いまの切り替えが終わってから移ります。幕や写しを出したまま止めないよう、終わりの片付けは必ず通る場所（
finally）に書きます。 - 切り替えたら、フォーカスと印を移す。新しい見出し（
tabindex="-1"）へフォーカスを移し、ナビのaria-current="page"を付け替えます。読み上げでは、これでページが替わったことが伝わります。 - 動かすのは transform と opacity。幕は
scaleやtranslateで動かし、widthやleftを動かしません。円のclip-pathは重ねた1枚だけにします。 - 動きを控える設定では、すぐ切り替える。幕も円も出さずに中身だけを替えます（見本の「動きを控える設定で見る」で確かめられます）。
よくある質問 (FAQ)
画面を切り替える前と後の絵をブラウザが撮って、つなぐ動きを付けてくれるしくみです。同じページの中で中身を差し替えるなら
document.startViewTransition(更新する関数) を呼び、リンクでページごと移るサイトなら、両方のページの CSS に @view-transition { navigation: auto; } を書きます。対応していないブラウザでは、動きが付かずにそのまま切り替わるだけなので、付けても困ることはありません。
フェードと共有要素の型は、CSS だけで付けられます。両方のページに
@view-transition { navigation: auto; } と同じ view-transition-name を書くと、同じオリジンのページどうしを移るときに動きが付きます。幕や円の型は、中身を JavaScript で差し替えるサイト向けの書き方です。
0.3〜0.6秒くらいです。ページを移るたびに通るので、1回目は気持ちよく見えても、何度も移るうちに待たされている感じになります。幕で覆う型は、覆うまでと抜けるまでを合わせてこの長さに収めます。ロゴを見せる型は1秒を超えるので、最初の1回か、区切りの大きい移動だけにします。
いつ中身を替えるかと、途中で押されたときの扱い、切り替えたあとのフォーカスです。「ページ遷移にアニメーションを付けて」だけだと、幕が覆う前に中身が替わる作りや、途中で押すと幕が出たまま止まる作り、読み上げではページが替わったことが伝わらない作りになりがちです。ここの指示文は、それぞれを数字と要素名で書き、Wipe Transition や Shared Element Transition のような英語の一般名も添えています。