KAKERU Designing トミー（末富将也）

ページの切りかえをCSSでなめらかに｜View Transitionsの使い方と写真をつなげる方法

一覧のページから詳細のページへ、なめらかに切りかわる見本とコード

リンクを押して次のページへ移るとき、画面が一瞬白くなって「パッ」と切りかわる。ふだん当たり前に見ているこの切りかえを、前のページが消えながら次のページが出てくる「ふわっ」とした動きにできるのが、CSSの View Transitions（ビュー・トランジション＝画面の切りかえ）です。両方のページのCSSに数行足すだけで、JSはいりません。

使いどころは、同じサイトの中で、一覧から詳細へ移るときなど「つながり」を見せたい場面です。対応していないブラウザでは、今までどおりパッと切りかわるだけなので、足しても困る人は出ません。ただし動きは短く、動きを減らす設定の人には出さない、をセットにします。

この記事の要点

  • @view-transition { navigation: auto; } を両方のページに書くと、同じサイトの中のページ移動が「ふわっ」と切りかわる
  • 使いどころは、一覧から詳細へなど、前と後のページのつながりを見せたいとき。view-transition-name で写真をつなげて動かせる
  • ページ間の切りかえは、2026年11月時点でFirefoxが未対応（対応しないブラウザではふつうに切りかわる）。動きは0.3〜0.4秒ほどに短くし、動きを減らす設定では止める
トミー

連載「WEBの技術」の59回目です。
今回は、ページの切りかえをなめらかにするView Transitionsです。ページの中ではなく「ページとページのあいだ」に効く、少し変わった技術です。

完成見本：ページの切りかえ方4種類

どの見本も、小さな画面の中で「施工事例の一覧ページ」から「詳細ページ」へ移り、また一覧へ戻る動きを自動でくり返しています。1は、左が何も書かないとき、右がView Transitionsを書いたときです。

FADE1. ページをふわっと切りかえるどのサイトでも、まずはこれ
SLIDE2. 横にすべるように切りかえる順番に読むページに
MORPH3. 一覧の写真が、詳細の大きな写真へつながる施工事例・商品の一覧から詳細へ
SAFE4. 動きを減らす設定では、動きをなくすどのサイトでも、いっしょに書く

※ View Transitions は本来ブラウザの画面全体の切りかえに効きます。1ページの中で4つを同時に動かすことはできないので、見本では、その見え方を小さな画面の中で再現しています。本物の動きは、下の「応用」のボタンで試せます。見本は読み上げソフトでは読まれないようにしています。動きを減らす設定にしている方には、止まって見えます。

コピペ用のコード

CSSは、サイトのCSSファイルや、WordPressならテーマの「追加CSS」などに入れます。ページとページのあいだの切りかえなので、移る前のページと、移った後のページの両方にこのCSSが読み込まれている必要があります。WordPressの「追加CSS」はサイトの全ページに読み込まれるので、1か所に書けば足ります。

1. ページをふわっと切りかえる

切りかえる前と後の両方のページのCSSに @view-transition を書くと、同じサイトの中でページを移るとき、前のページが消えながら次のページが出てくる「ふわっ」とした切りかえになります。JSはいりません。左が書かないとき、右が書いたときです。

HTML
<!-- いつもどおりの、同じサイトのページへのリンク -->
<a href="works.html">施工事例を見る</a>
CSS
/* 切りかえる前と後、両方のページのCSSに書く */
@view-transition {
  navigation: auto;
}

2. 横にすべるように切りかえる

切りかえの動きは、::view-transition-old(root)（前のページの写し）と ::view-transition-new(root)（次のページの写し）に、ふつうのCSSアニメーションを当てて変えられます。ここでは前のページを左へ、次のページを右から出しています。

HTML
<!-- いつもどおりの、同じサイトのページへのリンク -->
<a href="works.html">施工事例を見る</a>
CSS
@view-transition {
  navigation: auto;
}

/* 前のページは左へ、次のページは右から */
::view-transition-old(root) {
  animation: 0.4s ease both kd-vt-out;
}
::view-transition-new(root) {
  animation: 0.4s ease both kd-vt-in;
}
@keyframes kd-vt-out {
  to { opacity: 0; transform: translateX(-30%); }
}
@keyframes kd-vt-in {
  from { opacity: 0; transform: translateX(30%); }
}

3. 一覧の写真が、詳細の大きな写真へつながる

一覧のページの小さな写真と、詳細のページの大きな写真に、view-transition-name で同じ名前をつけます。するとブラウザが2つを同じものとみなし、小さな写真が大きな写真の位置と大きさまで動いてつながります。

HTML
<!-- 一覧のページ -->
<a href="work-01.html">
  <img class="kd-vt-thumb" src="photo-sea.jpg" alt="海のそばの家">
</a>

<!-- 詳細のページ -->
<img class="kd-vt-hero" src="photo-sea.jpg" alt="海のそばの家">
CSS
@view-transition {
  navigation: auto;
}

/* 2つのページで同じ名前をつけると、写真がつながって動く */
.kd-vt-thumb,
.kd-vt-hero {
  view-transition-name: work-01;
}

4. 動きを減らす設定では、動きをなくす

端末で「動きを減らす」設定をオンにしている人には、切りかえの動きをなくします。::view-transition-group(*) などの * は「名前をつけたものも含めて全部」という意味です。左が動きを減らす設定のとき、右がふだんのときです。

HTML
<!-- いつもどおりの、同じサイトのページへのリンク -->
<a href="works.html">施工事例を見る</a>
CSS
@view-transition {
  navigation: auto;
}

/* 動きを減らす設定の人には、切りかえの動きをなくす */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

サイトで使うときは、1（または2・3）と、4の動きを減らす設定の指定を、いっしょに書いておくのがおすすめです。

応用：同じページの中で、本物の切りかえを試す

View Transitions は、同じページの中の表示の切りかえにも使えます。こちらは少しだけJSを使い、document.startViewTransition() の中で表示を変えると、変わる前と後のあいだをブラウザがなめらかにつないでくれます。下のボタンを押すと、写真が小さい形と大きい形のあいだで動きます。

海のそばの家

海のそばの家

HTML
<div class="kd-vt-card">
  <img class="kd-vt-photo" src="photo-sea.jpg" alt="海のそばの家">
  <p class="kd-vt-cap">海のそばの家</p>
</div>
<button type="button" class="kd-vt-btn">大きく見る</button>
CSS
.kd-vt-card {
  display: flex;
  align-items: center;
  gap: 12px;
}
.kd-vt-photo {
  view-transition-name: kd-vt-photo;  /* 動かす写真に名前 */
  width: 40%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 8px;
}
.kd-vt-card.is-big {
  flex-direction: column;
  align-items: stretch;
}
.kd-vt-card.is-big .kd-vt-photo {
  width: 100%;
}
.kd-vt-btn {
  margin-top: 12px;
  padding: 10px 20px;
  border: 0;
  border-radius: 999px;
  background: #0284C7;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}
JS
const card = document.querySelector('.kd-vt-card');
const btn = document.querySelector('.kd-vt-btn');
btn.addEventListener('click', () => {
  const change = () => {
    const big = card.classList.toggle('is-big');
    btn.textContent = big ? '小さく戻す' : '大きく見る';
  };
  // 対応していないブラウザでは、動きなしで切りかえる
  if (!document.startViewTransition) { change(); return; }
  document.startViewTransition(change);
});

対応していないブラウザでは、if (!document.startViewTransition) の行で、動きなしでそのまま切りかえます。

仕組み：ブラウザが「写真」を撮って入れかえている

前と後の「写し」を重ねて動かす

View Transitions を使うと、ブラウザは切りかわる前の画面を写真のように写しておき、次のページが用意できたら、その写しと新しい画面を重ねて動かします。MDNによると、何も指定しなければ、前の写しは不透明から透明へ、次の写しは透明から不透明へ動き、「クロスフェード」（ふたつが溶けあうように入れかわる動き）になります。1の見本の「ふわっ」はこれです。

動きを変えるのは、写しにつけるCSSアニメーション

2の見本で使った ::view-transition-old(root) は「前のページ全体の写し」、::view-transition-new(root) は「次のページ全体の写し」を指します。:: から始まるのは、HTMLには書かれていないけれどCSSから選べる部分（疑似要素）の書き方です。ここに、ふだんどおり @keyframes で作ったアニメーションを当てると、すべる・縮むなど好きな動きにできます。2のコードは、戻るときも同じ向き（左へ）に動きます。

同じ名前の要素は、1つのものとしてつながる

3の見本の view-transition-name は、要素に「名前」をつける指定です。前のページと次のページで同じ名前の要素があると、ブラウザはそれを同じものとみなし、位置と大きさをなめらかにつなぎます。MDNによると、この名前は表示中の要素ごとに重ならないようにする必要があり、1ページに同じ名前が2つあると、切りかえそのものが飛ばされます。一覧に写真が何枚も並ぶときは、work-01、work-02 のように1枚ずつ別の名前にし、詳細のページではその作品の名前だけをつけます。

使えるのは、同じサイトの中だけ

MDNによると、ページ間の切りかえが動くのは、前と後のページが同じオリジン（ざっくり言うと同じサイト）のときです。よそのサイトへのリンクや、別のドメインへ移るときは、今までどおりに切りかわります。

数値を変えるとどうなるか

切りかえの長さ

1の見本の切りかえの長さだけを変えて並べました。2のコードなら、0.4s の部分を書きかえます。

0.15秒
0.4秒
1.2秒

0.15秒では、ほとんどパッと切りかわったように見えます。1.2秒になると、次のページを読みたいのに待たされている感じが出てきます。ページの移動は何度もくり返す操作なので、KAKERUでは0.3〜0.4秒ほどにしています。

すべる距離

2のコードの translateX(30%) は、横に動く距離です。100%にすると画面の端から端まで大きく動き、ページ全体が流れていくように見えます。動く距離が大きいほど目で追う量が増えるので、ページ全体を動かすときは小さめにしておきます。

対応状況と、見る人への配慮

ページ間の切りかえは、Firefoxが未対応

MDNの対応表（2026年11月13日確認）では、ページとページのあいだの切りかえ（@view-transition）は、Chrome・Edgeが126から、Safariが18.2から対応し、Firefoxはまだ試験中です。同じページの中の切りかえ（document.startViewTransition()）と view-transition-name は、2025年10月から主要なブラウザの最新版で動く「Baseline 2025」になっています。対応していないブラウザでは、指定が無視されてふつうに切りかわるだけなので、ページが見られなくなることはありません。

動きを減らす設定の人には、動きをなくす

ページ全体が溶けたりすべったりする動きは、画面の広い範囲が動きます。W3Cは、操作をきっかけに起きる動きのうち、なくてもよいものは止められるようにすることを求めています。4のコードで、prefers-reduced-motion: reduce（動きを減らす設定がオン）のときは、写しの動きをすべて止めます。

読み上げとキーボード操作

View Transitions は見た目の動きだけを変える指定で、リンクやボタンの働きはそのままです。応用の見本でも、ボタンは <button> を使っているので、キーボードのTabキーで選んでEnterキーで押せます。写真には、これまでどおり alt で内容を書いておきます。

やりすぎ注意

ページ全体を大きく回転させる、毎回ちがう動きをつける、といった目立つ切りかえは、何度もページを移るうちに疲れます。写真をつなげる3の形も、1ページにつなげるのは1枚までにすると、どこが変わったのかがはっきりします。

AIに頼むなら

Claudeなどの生成AIに頼むときは、「ページの切りかえをなめらかに」だけでなく、どのページのあいだで、どのくらいの長さで、動きを減らす設定をどうするかまで伝えると、手直しが減ります。

WordPressの追加CSSに入れる、View Transitionsのページ切りかえを作って。
JSは使わず @view-transition で、クロスフェードを0.3秒に。
prefers-reduced-motion が reduce のときは動きをなくして。

AIが出したコードは、そのまま使う前に、次の3つを確かめます。

  • JSのライブラリを足していないか。ページ間の切りかえは、CSSの @view-transition だけで作れます。ページをJSで読み込み直す仕組み（ページ遷移ライブラリ）が出てきたら、ほんとうに必要かを考えます
  • 同じ名前が2つ以上ないか。view-transition-name を一覧の写真すべてに同じ名前でつけると、切りかえが飛ばされます。1枚ずつ別の名前になっているかを見ます
  • 動きを減らす設定で止まるか。パソコンやスマホの「視差効果を減らす」「アニメーションを減らす」などの設定をオンにして、ページの移動がパッと切りかわるかを確かめます

KAKERUならこう使う／使わない

最後に、作り手としての判断です。

使う場面

  • 施工事例・商品の一覧から詳細へ。3の形で写真をつなげると、「さっき押した写真の続きだ」と分かりやすくなります
  • サイト全体の、さりげない切りかえ。1の形を0.3秒ほどで全ページに入れると、ページを移るときの白い一瞬がやわらぎます
  • 同じページの中の表示の切りかえ。応用のように、一覧の並べ方を変える・写真を大きくするなどの場面で、何が変わったかを目で追えるようにします

使わない場面

  • お問い合わせフォームや購入の手続き。入力の途中で画面が動くと、落ち着いて進めにくくなります。手続きのページは、ふつうの切りかえにします
  • 目立たせるためだけの大きな動き。回転・拡大など目立つ動きは、2回目からは待ち時間に感じられます
  • Firefoxでも同じ見え方が必要な演出。ページ間の切りかえは、2026年11月時点でFirefoxでは動きません。「動けばうれしい」程度の飾りとして使います
トミー

KAKERUなら、1と4をセットで全ページに入れて、一覧から詳細へ移るところだけ3で写真をつなげます。
動きは0.3秒ほど。気づく人だけ気づく、くらいがちょうどいいと考えています。

まとめ

  • @view-transition { navigation: auto; } を両方のページに書くと、同じサイトの中のページ移動が「ふわっ」と切りかわる
  • 動きを変えるときは、::view-transition-old(root) と ::view-transition-new(root) にCSSアニメーションを当てる
  • view-transition-name で同じ名前をつけた要素は、ページをまたいでつながって動く。名前は1ページに1つずつ
  • ページ間の切りかえはFirefoxが未対応。対応しないブラウザではふつうに切りかわる
  • 動きは0.3〜0.4秒ほどに短くし、動きを減らす設定では止める

まずは1と4のコードを、WordPressの「追加CSS」に入れて、サイトの中のリンクをいくつか押してみてください。

参考にした資料

いずれも2026年11月13日に確認しました。内容は変わることがあります。最新の情報は各ページでご確認ください。

ふだんの制作の話や、作ったものの裏側は Instagram と X でも出しています。

関連記事

動きが苦手な人への配慮をCSSで。ふつうの見え方と動きを減らす設定の見え方を並べた見本とコード
関連記事動きが苦手な人への配慮をCSSで（prefers-reduced-motion）｜止める・置きかえる・足す・JSで合わせる、書き方の型4つ
スクロールでふわっと表示するCSSの動き。コピペで5種類と、使う・使わないの判断
関連記事スクロールでふわっと表示するCSSの動き｜コピペで使える5種類と、使う・使わないの判断
画像の比率をそろえるCSS。aspect-ratioとobject-fitの使い方と、切る・切らないの判断
関連記事画像の比率をCSSでそろえる｜aspect-ratioとobject-fitの使い方と、切る・切らないの判断

次に読む

無料の道具（登録なし）KAKERU TOOLS｜仕事の「ちょっと面倒」を、道具で減らす。WEB技術・前の回背景の写真をCSSで固定する｜background-attachment: fixedとiPhoneでも動くsticky
一覧のページから詳細のページへ、なめらかに切りかわる見本とコード

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です

CAPTCHA


ABOUTこの記事をかいた人

25歳からWEBの世界に携わり、WEBデザインから始めて、今はWEBシステムまで一貫して制作しています。問題点を洗い出し、改善を提案する中で、WEB・グラフィック・動画・システムを縦断して提案するのが得意です。

NEW POSTこのライターの最新記事