動画のトランジション素材を無料で作成

トランジション素材の作り方

動画のトランジション（場面転換・シーンチェンジ）素材を、動きを選ぶ・色を選ぶ・保存するの3ステップで作成できます。イージングやキーフレーム、マスクといった設定は必要ありません。動画を読み込む必要もなく、作るのはカットの上に重ねる素材だけです。

1. 動きを選ぶ

   一覧のサムネイルは、サンプルの映像A・Bの上で動いています。気になる動きをタップすると、プレビューがすぐ切り替わり、効果音も鳴ります。

2. 色・向き・速さを選ぶ

   配色の見本から選ぶか、自分のチャンネルの色を指定します。向きと、速さ（はやい・ふつう・ゆっくり）も変えられます。

3. 動画を保存

   使うソフトを選んで保存し、編集ソフトでカットの上に重ねます。合わせる位置は保存後に数字で表示します。

カットのつなぎ目に重ねるだけで場面転換

このツールで作る素材は、背景が透明な動画です。編集ソフトのタイムラインで、映像の上のトラックに置き、素材の「切り替えポイント」をカット位置に合わせます。素材が画面を完全に覆っている間に下の映像が切り替わるので、カットのつなぎ目が見えません。

何も変えなければ、切り替えポイントは素材のちょうど真ん中です。「素材の真ん中をカットに合わせる」だけなので、Premiere Pro・DaVinci Resolve・Final Cut Pro・CapCut・AviUtl・iMovie など、どのソフトでも同じ手順で使えます。素材は、コマ0と最後のコマが必ず透明、覆っている間は必ず全面が不透明になるように作っているので、カット位置が1コマずれても下の映像が見えません。

素材集サイトとの違い

配布されているトランジション素材は、色も長さも決まっていて、合わなければ別の素材を探し直すことになります。このツールは「探す」のではなく「自分の動画に合わせて作る」道具です。

• 自分のチャンネルの色にできる：配色22種のほか、メインの色を1つ選ぶだけで3色の配色を作れます。作った配色は「マイ配色」に残り、どの動きにも同じ色を使えます。
• 前後の長さをコマ単位で合わせられる：入り・覆っている時間・抜けを別々に、コマ数を見ながら変えられます。
• あとから直せる：保存した設定は「マイトランジション」に残ります。編集ソフトで使ってみて合わなければ、開いて直して保存し直せます。
• 同じ見た目でそろえられる：同じ色・同じ長さのまま、別の動きや、16:9・9:16・1:1 のサイズ違いを増やしていけます。

設定は、お使いの端末のブラウザの中だけに保存します。会員登録やログインは不要です。

ジャンル別のおすすめ

動きは、フェード・定番ワイプ・図形・手描き・コミック・デジタル・グリッチ・シネマ・じわっとゆっくり・補色のグラデーション・和風・番組風の137種類です。一覧の上のチップで、16のジャンルから絞り込めます。

このうち「質感」のしるしが付いた52種は、紙・布・金属・墨・光などのテクスチャ画像を使った動きです（緞帳・シャッター・ジグソーパズル・ステンドグラス・墨にじみ・油絵・フィルムロール・霜・金箔・カチンコ・巻物など）。画像は白黒で持っていて、色は選んだ配色から付けるので、ほかの動きと同じように色を変えられます。季節の葉・花（桜・新緑・笹・もみじ・イチョウ・枯れ葉・雪の結晶・ひいらぎ）は、アニメ寄りとリアル寄りの2種類ずつあります。

• Vlog・旅行：カラーワイプ・サークル・ブラシ・もくもく・ページめくり・ちぎり紙・暗転・ライトリーク・玉ボケ・花ふぶき・落ち葉・雪
• ゲーム実況：3色レイヤー・ななめ帯・アロー・ストライプ・タイル・ポリゴン・バースト・集中線・ジグザグ・グリッチ・ドット絵・バトル突入・VS（対決）
• 解説・ビジネス：カラーワイプ・カーテン・ブラインド・ステップ・クロック・ダイヤ・ボックス・スキャン・グリッド・タイトルカード・ニュース
• バラエティ：ストライプ・丸閉じ・風車・ドット・集中線・うずまき・紙吹雪・ブラウン管・カラーバー・ふすま・数時間後…・回想
• かわいい・ポップ：サークル・スター・ハート・ドット・リキッド・らくがき・サンバースト・ふわっと円・グラデーション・ミックス
• シネマ・MV：カーテン・インク・スピードライン・グリッチ・暗転・フラッシュ・ライトリーク・ライトリーク2・ビネット・フィルムバーン・オーロラ
• ニュース・スポーツ：カラーワイプ・ななめ帯・アロー・スピードライン・クロスワイプ・フラッシュ・ニュース・VS（対決）
• ホラー：インク・うずまき・ブラウン管・砂嵐・暗転・ビネット
• 和風：ブラシ・インク・もくもく・霧・波紋・市松・ふすま・花ふぶき・落ち葉・雪
• レトロ・ドット：丸閉じ・サンバースト・ドット絵・ブラウン管・砂嵐・ビデオノイズ・カラーバー・バトル突入
• テック：ブラインド・タイル・ハニカム・ポリゴン・グリッド・グリッチ・走査線・データレイン・スキャン
• イベント・お祝い：カーテン・スター・ハート・サンバースト・紙吹雪・オーロラ・玉ボケ・花ふぶき
• グリッチ・サイバー：グリッチ・RGBずれ・ブロックノイズ・スライス・砂嵐・砂嵐（細）・走査線・走査線（細）・データレイン・ビデオノイズ
• じわっと・ゆっくり：じわっとワイプ・ふわっと円・ビネット・霧・水彩にじみ・フィルムバーン・粒子ディゾルブ・オーロラ・波紋・夜明け（ふつうの速さで2秒前後。もっとゆっくりにもできます）
• 補色・バイカラー：グラデーション・夜明け・ミックス・バイカラー・2色ストライプ・市松・クロスワイプ・カラーバー・VS（対決）
• くすみ・中間色：ステップ・ボックス・ちぎり紙・じわっとワイプ・水彩にじみ・粒子ディゾルブ・波紋・アーチ

配色は22種です。ポップ・ビビッドなどのはっきりした色のほか、補色（ブルー×オレンジ・イエロー×パープル・コーラル×スカイ）と、中間色（くすみピンク・グレージュ・モーヴ・スモーキーブルー・テラコッタ）を選べます。グラデーション・夜明け・ミックス・カラーバーは、2色の間の色を自動で作って塗ります。補色どうしでも、間の色が灰色に濁らないようにしています。

迷ったら「おまかせ」を押すと、絞り込み中のジャンルから動き・色・向きをまとめて選びます。

前後の長さをコマ単位で合わせる

素材の時間は、だんだん覆っていく入り（前）、完全に覆っている中、だんだん開いていく抜け（後）の3つに分かれています。「細かく調整する」の時間の配分、またはプレビュー下の時間バーのつまみで、それぞれの長さを別々に変えられます。秒とコマ数を並べて表示するので、編集ソフトのタイムラインと見比べながら合わせられます。

• 入りを短く・抜けを長く：パッと切り替えて、余韻を残したいとき
• 入りを長く・抜けを短く：じわじわ覆って、次の場面へすぐ入りたいとき
• 覆っている時間を長く：カット位置が多少ずれても隠したいとき、文字を読ませたいとき
• 前後どちらかだけ数コマ直す：編集ソフトで使ってみて、少しだけ長い・短いと感じたとき

長さは1/30秒きざみ（覆っている時間は1/15秒きざみ）です。30コマ／秒と60コマ／秒のどちらで書き出しても同じ長さになり、切り替えポイントは必ずコマの境目に来ます。前後を別々の長さにすると切り替えポイントが真ん中からずれますが、位置は保存後に秒・ミリ秒・コマ数で表示し、ファイル名にも入れます。

チャプターの題名・ロゴ入りのアイキャッチを作る

「文字・ロゴを入れる」を開くと、画面が覆われている間に、中央へ文字やロゴ画像を出せます。「番組・タイトル」グループの動き（タイトルカード・アイキャッチ・ニュース・数時間後…・VS（対決）・回想）は、文字入りが最初から選ばれています。

• チャプターの題名：「第2章　作り方」のように、話の区切りを見せる
• アイキャッチ：番組名やチャンネルのロゴを、コーナーの入りや CM 明けのように見せる
• 時間経過：「数時間後…」「そのころ」「翌日」など

文字の色は、覆っている色の明るさに合わせて白か黒を自動で選びます。文字を入れると、覆っている時間が表示時間（既定0.8秒）まで延びますが、切り替えポイントは覆っている時間の真ん中のままです。

効果音付きのトランジションを作成する

動きには、それぞれ合う効果音が付いています。ワイプなら風を切る「シュッ」、ふすまなら「スーッ…トン」というように、覆い始め・開き始めのタイミングに合わせて鳴ります。真ん中の切り替えポイントでは効果音を追加しません。効果音を別に探して、タイムラインで位置を合わせる手間がかかりません。前後の長さを変えると、音の長さもそれに合わせて伸び縮みします。

効果音は動画と一緒に保存されます（PNG連番ではWAVファイルを同梱）。BGMは入りません。不要なときは、プレビュー右上のスピーカーか「効果音を入れる」でオフにできます。音は録音素材ではなく、このツールがその場で合成しています。

背景透過で保存して動画に重ねる

保存のところで使うソフトを選ぶと、背景と形式が自動で決まります。背景が透明な透過MOV（ProRes 4444）・透過WebM・PNG連番は、背景を抜く作業なしで映像に重ねられます。MP4は透過に対応していないため、グリーンバックなどの背景色を付けて保存し、編集ソフトのクロマキーで背景を抜いて使います。

グリーンバックの抜き方

• CapCut：素材をオーバーレイに置き、「背景を削除」→「クロマキー」で緑を選びます。
• Premiere Pro：エフェクト「Ultra キー」を素材へ適用し、キーカラーに緑を指定します。
• DaVinci Resolve：エフェクト「3Dキーヤー」を適用し、スポイトで緑をなぞります。
• Final Cut Pro・iMovie：エフェクト「キーヤー」（iMovieは「グリーン／ブルースクリーン」）を使います。

用意している配色には、緑や黄緑に近い色を入れていません。カスタムの色で緑系を選んだときは、背景をブルーやマゼンタへ自動で切り替えます。暗転・フラッシュ・ライトリークや、「じわっと・ゆっくり」のフチをぼかす動き（一覧に「透過向き」と表示）は半透明を使うため、透過形式で保存するときれいに重なります。

OBS のスティンガートランジションとして使う

配信のシーン切り替えに使うスティンガートランジションも、同じ素材で作れます。保存のところで「OBS・配信」を選ぶと、透過WebMで保存します。

1. OBS の「シーントランジション」で「＋」を押し、「スティンガー」を追加します。
2. 「映像ファイル」に、保存した WebM を指定します。
3. 「トランジションポイントの種類」を「時間（ミリ秒）」にして、保存後に表示される切り替えポイントのミリ秒を入力します（ファイル名の cut500ms の数字と同じです）。
4. シーンを切り替えて、覆っている間に映像が切り替わることを確かめます。

項目の名前は、OBS のバージョンによって少し異なることがあります。配信ソフトで背景を抜くときも、緑・シアン寄りの色は一緒に抜けやすいため、用意している配色では使っていません。