画面遷移

WEB制作技術の引き出しを増やすため、自分なりにアレンジしたコードをアウトプットすることにしました。

その中でも特に勉強になったコードを紹介します。

コピペで使えるようになっているので、あなたのサイトで使っていただけるとうれしいです。

あくまでデザインの一例にすぎないので、調整してオリジナルのデザインを作ってみてください！

画面遷移

画面遷移アニメーションは、ページやビューが切り替わる瞬間を背景色の動きでつなぐ演出です。切り替えの「間」を埋めることで認知の連続性が生まれ、動きの方向（上から下・中央から外など）で情報の流れを暗黙に伝えられます。ポートフォリオやブランドサイトのような世界観重視のサイトで特に効果的です。

このページのデモは、オーバーレイ（覆い）を伸縮させる王道パターンを方向別に網羅しています。仕組みは共通で、全面を覆う要素をCSSのtransformで動かし、切り替えのタイミングを制御しているだけ――方向のバリエーションはその応用です。

おさえておきたいところ

画面遷移を使う目的と使いどころはこんな感じです。

　　　　　　　目的：ページの遷移を知らせる
使いどころ：画面の読み込み後

背景色が伸びる（上から下）

背景色が伸びる（下から上）

背景色が伸びる（右から左）

背景色が伸びる（左から右）

背景色が伸びる（中央から外）

背景色が伸びる（中央から上下）

背景色が伸びる（斜め）

背景色が円形に縮小（中央へ）

背景色が四角に拡大（四隅へ）

実務メモ（2026年追記）

デモは当時のまま残していますが、2026年現在の大きな変化は View Transitions API がブラウザ標準になったことです。ページ遷移のアニメーションを、オーバーレイを自前で管理せずブラウザに任せられるようになり、実装コストが大きく下がりました。ただし「全面を覆って切り替える」という考え方自体は、APIの内部で起きていることの理解にそのまま役立ちます。

• アニメーションはtransformとopacityだけで組むと軽い（レイアウトを動かさない）
• 遷移時間は0.3〜0.6秒程度が目安。長い演出は2回目以降ストレスになる
• JSが失敗してもリンク遷移そのものは成立する作りにしておく（演出は上乗せ）
• 読み込み中の見せ方はローディングとセットで設計すると一貫する

次回の予定

サイト全体の構成を分かりやすく伝える
グローバルナビゲーションを作ってみようと思います＼＼\٩( ‘ω’ )و //／／