# 動画のトランジション効果｜ディゾルブ・フェード・ワイプなど 6 種 + 音声フェードの使い方

> クリップの始まりと終わりにかける 6 種類の映像トランジション (ディゾルブ・黒・白・ブラー・ズーム・ワイプ) と、テキスト専用のタイプライター、音声のフェードの使い方を解説。長さの調整や、開始と終了で別の効果を使う方法で、唐突なカットをなめらかな切り替えに変えましょう。

_Last updated: 2026-10-11 · First published: 2026-10-11_

## トランジションの概要

VideoBuffのトランジションは、クリップの「開始」と「終了」にかける効果です。映像には 6 種類（ディゾルブ・黒・白・ブラー・ズーム・ワイプ）があり、テキストではさらに「タイプライター」が使えます。音声クリップには「フェード」があります。動画・画像・テキスト・音声のどのクリップにも設定できます。

トランジションを使うと、唐突なカットをなめらかな切り替えにできます。長さは 0.1 秒から、クリップの長さの半分（最長 10 秒）まで設定できます。開始と終了に同じ効果をかけることも、それぞれ別の効果にすることもできます。

## トランジションの種類

インスペクターに表示される名前で紹介します。開始では効果から元の映像に戻り、終了では元の映像から効果に向かって変化します。

- **ディゾルブ**: 透明な状態から徐々に現れ、終わりは徐々に透明になって消えます。動画は黒い背景から、画像やテキストは下の映像の上に浮かび上がります。
- **黒**: 黒から明るくなって始まり、黒に暗くなって終わります。シーンの締めくくりの定番です。
- **白**: 白から始まり、白に飛んで終わります。回想や夢のシーンに向いています。
- **ブラー**: ぼけた状態からピントが合って始まり、ぼけながら終わります。
- **ズーム**: 少し大きく映った状態から元の大きさに収まって始まり、拡大しながら終わります。
- **ワイプ**: 左から右へ現れ、終わりは右から左へ消えていきます。
- **タイプライター**（テキストのみ）: 文字が 1 文字ずつ現れ、終わりは末尾から 1 文字ずつ消えていきます。

2 つのクリップが重なり合って入れ替わるのではなく、前のクリップの終わりと次のクリップの始まりに、それぞれ効果がかかります。テキストでは「黒」「白」「ワイプ」もディゾルブと同じように透明度で表現されます。画像の「黒」「白」は、画像の部分だけが黒・白に変わります。

![コーヒーを注ぐ場面の始まりに 6 種類のトランジションをかけ、途中のコマを並べた比較。ディゾルブと黒は暗い所から現れ、白は白い所から、ブラーはぼけから、ズームは拡大から、ワイプは左から右へ現れる](https://videobuff.app/guides/transitions/transition-types-ja.webp)
_6 種類のトランジションの途中のコマ（場面の始まりにかけたとき）_

## トランジションの適用方法

1. タイムライン上でクリップを選択します。
2. インスペクターの「トランジション」で、効果のボタン（「なし」「ディゾルブ」「黒」など）を選びます。「共通」タブのまま選ぶと、開始と終了の両方に同じ効果がかかります。
3. 「デュレーション」のスライダーか数値で長さを決めます。0.1 秒から、クリップの長さの半分（最長 10 秒）までです。

設定したトランジションは、タイムライン上でクリップの端に斜線の帯とアイコンで表示されます。帯の内側の境目かアイコンをつかんでドラッグすると長さを変えられ、クリックするとインスペクターがその端だけの設定に切り替わります。

隣のクリップと接している切れ目では、両側のクリップに同じ効果と長さが入ります。長さは、短いほうのクリップの半分までになります。

![タイムラインの映像のクリップの両端に、斜線の帯とトランジションの印が出ている](https://videobuff.app/guides/transitions/transition-band-ja.webp)
_トランジションを付けた端には斜線の帯が出る。帯の端をつかむと長さを変えられる_

![インスペクターの「トランジション」。「共通」「開始」「終了」のタブ、なし・ディゾルブ・黒・白・ブラー・ズーム・ワイプのボタン、デュレーションのスライダーが並ぶ](https://videobuff.app/guides/transitions/transition-panel-ja.webp)
_インスペクターの「トランジション」（「開始」のタブを開いたところ）_

## 開始と終了で別の効果を使う

「開始」タブと「終了」タブを使うと、クリップの始まりと終わりに別々の効果と長さを設定できます。例えば、開始は「ディゾルブ」でふわっと入り、終了は「黒」でシーンを締めくくる、といった使い方ができます。

個別に設定したタブには ● 印が付きます。「個別設定をクリア（共通に戻す）」を押すと、その端は「共通」の設定に戻ります。「共通」タブで効果や長さを変えると、開始・終了の個別設定は消えて、両端とも共通の設定にそろいます。

## オーディオトランジション

音声クリップのトランジションは「なし」と「フェード」です。フェードを選ぶと、開始では音量が 0 から徐々に上がり、終了では 0 まで徐々に下がります。BGM の入りと終わりや、ナレーションの切り替えを自然にできます。

隣り合う音声クリップでは、前のクリップがフェードアウトしてから次のクリップがフェードインします（2 つの音を重ねて鳴らすクロスフェードではありません）。

映像と音声がつながっている動画クリップでは、映像にかけたトランジションが音声にも入り、映像の効果に合わせて音声もフェードします。音声だけ別にしたいときは、映像と音声のリンクを解除してから、それぞれに設定します。

## 技術解説：トランジションのレンダリング

トランジションの進み具合は、効果の長さに対して一定の速さで変わります。プレビューでは CSS で表現しています（ディゾルブは opacity、ブラーは blur フィルター、ズームは scale、ワイプは clip-path、黒・白は上に重ねた黒・白の層の濃さ）。

書き出しでは、同じ計算を Canvas 2D で再現します（globalAlpha、filter の blur、拡大縮小、矩形の切り抜き、黒・白の塗りの重ね）。ブラーのぼかし量とズームの拡大率の上限はプレビューと書き出しで共通なので、見た目がそろいます。

音声のフェードは、書き出しでは Web Audio の音量を直線的に上げ下げし、プレビューでは再生中の音量を同じ割合で変えています。