iMovieで動画にロゴ・ウォーターマーク・装飾アイコンを重ねたい時に欠かせないのが 透過PNG画像の合成。背景を透明にしたPNGをタイムラインに置くだけで、ピクチャ・イン・ピクチャ合成が実現できます。本記事ではiMovieへの配置手順、透過PNGの作り方、よくあるトラブル(白く表示される/サイズが大きすぎる)の解決まで一通り解説します。
「iMovieに透過PNGを取り込んだのですが、背景が白くなって透過されません。書き出し時のPNG設定で何か間違っているのでしょうか?」
Yahoo!知恵袋(動画/映像 / 2024年10月)
📌 本記事の達成目標
| 目標 ❶ | 透過PNGをiMovieにドラッグ&ドロップしてピクチャ・イン・ピクチャ合成できる |
| 目標 ❷ | プレビュー/オンラインツール/Photoshopで透過PNGを自作できる |
| 目標 ❸ | 「白く表示される」「サイズが大きすぎる」の原因切り分けと対処 |
iMovieの透過PNG合成はシンプルで強力ですが、複数素材の重ね合わせや自由なマスク制御まで踏み込むなら、Premiere Proの7日間無料体験が次の選択肢として現実的です。
iMovieから本格編集へステップアップ
Premiere Proならプロ級のテロップやタイトルが簡単に追加できます。
テンプレートも10点まで無料
📱 PCでもスマホでも簡単動画編集
Adobe Expressなら、ブラウザやアプリで直感的に動画作成・編集が可能。豊富なテンプレートでSNS投稿もおしゃれに仕上がります。無料で始められます。
Adobe Expressを無料で試す透過PNGとは — JPEGとの決定的な違い
| 項目 | PNG | JPEG |
|---|---|---|
| 透過情報 | ○ アルファチャンネルあり | × 保持不可 |
| 圧縮方式 | 可逆圧縮(劣化なし) | 非可逆圧縮(劣化あり) |
| ファイルサイズ | 中〜大 | 小 |
| 得意分野 | ロゴ・アイコン・透過素材 | 写真 |
キーポイントは アルファチャンネル。PNGはピクセルごとに透明度を持てるので、背景を完全透明にしたり半透明にしたりが可能です。iMovieはこのアルファチャンネル情報をそのまま読み込めるので、特別な操作なしで合成が成立します。
JPEGで保存し直すとアルファチャンネルが失われ、透過部分が白(または黒)で塗りつぶされます。iMovieに渡す画像は 必ずPNG形式のまま 取り扱いましょう。
iMovieへの配置 — 2つのスタイルを使い分ける
ステップ ❶ メイン動画クリップをタイムラインに置く
透過PNGを重ねる土台となる動画クリップを、まずタイムライン下段に配置します。
ステップ ❷ PNG画像を上段(オーバーレイ用トラック)へドラッグ&ドロップ
メディアライブラリから透過PNGを選び、動画クリップの上段へ置きます。この時点でデフォルトは 「カットアウェイ」 スタイル。PNGの背景は透過された状態で合成済みです。
ステップ ❸ オーバーレイスタイルを「ピクチャ・イン・ピクチャ」に変更
PNGクリップを選択 → ビューア右上の 「ビデオオーバーレイ設定」アイコン(四角が重なったアイコン) → 「ビデオオーバーレイスタイル」を 「ピクチャ・イン・ピクチャ」 に切り替えます。
これでプレビュー画面にPNGが小窓表示になり、四隅のハンドルでサイズ変更・ドラッグで位置調整ができるようになります。ロゴやウォーターマークとして使いたいなら、このスタイルが必須です。
| 合成スタイル | 挙動 | 用途 |
|---|---|---|
| カットアウェイ | PNGが画面全体に表示される(背景は透過) | 画面いっぱいに装飾を被せたい時 |
| ピクチャ・イン・ピクチャ | 小窓として動画上に重ねる(位置/サイズ自由) | ロゴ・ウォーターマーク・吹き出し |
画像配置時に勝手にズーム&パンする「Ken Burnsエフェクト」が掛かることがあります。解除はビューア上部のクロップアイコン → スタイルを「Ken Burns」から「フィット」または「クロップ」に変更してください。
ロゴを半透明にしたい場合の注意
iMovieのピクチャ・イン・ピクチャに 不透明度スライダーはありません。透かしのように薄く重ねたい場合は iMovieに読み込む前 に画像編集ソフト(プレビュー/Photoshop/オンラインツール)で透明度を下げたPNGを作っておく必要があります。
ロゴ用PNGはあらかじめ「不透明度50%程度の半透明バージョン」を別ファイルで用意しておくと、再利用しやすく時短になります。プロジェクトごとに調整し直す手間が省けます。
透過PNGの作り方 — 3つの選択肢
選択肢 ❶ Mac標準「プレビュー」アプリ(無料・お手軽)
- 画像を「プレビュー」で開く
- マークアップツールバー表示 → インスタントアルファ(魔法の杖)または なげなわで選択 ツールを使う
- 不要領域を選択 → Deleteで削除
- ファイル → 書き出す → フォーマット「PNG」/「アルファ」にチェック → 保存
背景が単色の画像なら、インスタントアルファ一発で切り抜きが完了します。複雑な背景には不向きです。
選択肢 ❷ オンライン背景透過ツール(AI自動・高精度)
- remove.bg: 業界標準。髪の毛など細部の精度が高い
- Adobe Express: ワンクリック背景削除
- CapCut (Web版): 動画兼画像編集ツール
- Fotor / AI Ease: 数秒で透過変換
複雑な背景の写真からも、AIが被写体を自動判定してくれます。アップロード→ダウンロードだけで完結。
オンラインツールを使う際は ダウンロード時にPNG形式・アルファチャンネル有効 になっていることを必ず確認。JPEGで保存してしまうと透過情報が消えます。
選択肢 ❸ プロ用ソフト(GIMP/Photoshop/Illustrator)
| ソフト | 価格 | 特長 |
|---|---|---|
| GIMP | 無料 | オープンソース。Photoshop類似の操作感 |
| Adobe Photoshop | サブスク | 業界標準。高度な切り抜き・合成が自由自在 |
| Adobe Illustrator | サブスク | ベクター。ロゴ作成 → 透過PNG書き出し |
より高度な合成へ進むなら、Photoshopの7日間無料体験でロゴの背景透過と微調整をワンセットで試してみる手があります。被写体選択AI・髪の毛のリファインなど、iMovieだけでは届かない切り抜き精度を体験できます。
iMovieで透過PNGに動きを付ける(キーフレーム活用)
iMovieのピクチャ・イン・ピクチャは キーフレームによるアニメーション が可能。ロゴをスーッと画面端からスライドイン、フェードしながら拡大、などの演出ができます。
- ピクチャ・イン・ピクチャで配置したPNGクリップを選択
- プレビュー画面でPNGを選択 → 左上にキーフレーム追加/削除ボタンが出現
- アニメ 開始位置 でキーフレームを追加 → PNGの位置・サイズを設定
- タイムラインを進めて 終了位置 で再度キーフレーム追加 → 位置・サイズを再設定
2つのキーフレーム間の変化が自動補間され、なめらかなアニメーションになります。フェードイン/アウト・移動・ズームを組み合わせれば、テンプレートに頼らず手作りロゴ演出が完成します。
iMovieで2画面分割レイアウトを作成する
動画編集において、複数の映像を同時に見せる「画面分割」は、視聴者の理解を深め、コンテンツの表現力を飛躍的に高める強力なテクニックです。iMovieには、この画面分割を
iMovieで複数の素材を重ねて表示する方法-ピクチャインピクチャ
動画編集で 「メインの映像の上に小さな別の映像を重ねたい」 と思ったことはありませんか。ゲーム実況のワイプ、解説動画の補足映像、結婚式エンドロールの写真重ね — こ
よくあるトラブルと対処
「透過されない/背景が白くなる」時のチェックリスト
| チェック項目 | 確認方法 |
|---|---|
| 本当にPNG形式か | ファイル拡張子が.png(.jpgになっていないか) |
| アルファチャンネルが有効か | プレビュー書き出し時の「アルファ」チェック |
| iMovieは最新版か | 古いiMovieは透過の扱いに制限あり |
| 背景レイヤーが残っていないか | Photoshop等で書き出す時に背景レイヤーを非表示に |
ファイルサイズ最適化
- 解像度を動画に合わせる: フルHD(1920×1080)動画ならPNGも同等以下に。4Kサイズの巨大画像はiMovieの動作を重くする
- 圧縮ツールで軽量化: TinyPNGなどで可逆圧縮すれば、画質を保ったままサイズだけ小さくできる
透過PNGの解像度は動画解像度に合わせるのが基本。フルHD動画ならロゴPNGもその範囲内で作成し、iMovie上で必要に応じて縮小すれば、画質劣化を最小限に抑えられます。
透過PNG vs クロマキー合成 — どちらを選ぶ?
iMovieには グリーン/ブルースクリーン 機能(クロマキー)もあります。両者の使い分けを整理しましょう。
| 手法 | 適している素材 | 向く用途 |
|---|---|---|
| 透過PNG | 静止画(ロゴ/アイコン) | ウォーターマーク・吹き出し・装飾 |
| クロマキー | グリーンバック撮影の動画 | 人物の背景を別動画に差し替え |
透過PNGは “画像に透明情報を埋め込む” 方式、クロマキーは “撮影後に特定色を抜く” 方式。素材が動画か静止画かで使い分ければOKです。
iPhone/iPad版iMovieでグリーンスクリーン合成を行う方法
iPhoneやiPadに標準搭載されている動画編集アプリ「iMovie」で、まるでプロが作ったかのようなグリーンスクリーン合成（クロマキー合成）が手軽に実現できることをご存知で
iMovieでクロマキー合成を行う方法
iMovieには、手軽にプロのような映像表現を可能にする「クロマキー合成」機能が搭載されています。グリーンバックやブルーバックで撮影した素材を透過させ、別の背景と組み
iMovieのオーバーレイ機能を組み合わせると、表現の幅は無限に広がります。透過PNG/クロマキー/タイトルテキストの3点セットを使いこなせば、解説動画・実況・ブランド動画など多くのジャンルに対応できます。
透過素材の量産・微調整を効率化したい方へ
透過PNG作りを バッチ処理・高精度切り抜き・色調整セット でこなしたい場合、Photoshop の被写体選択AI・髪の毛選択リファイン・アクション(録画再生)を組み合わせれば、複数枚を一気に処理できます。
結婚式ムービーをテンプレートで簡単作成
fu-non.netのAfter Effectsテンプレートなら、写真を差し替えるだけでプロ品質のムービーが完成。無料お試し版で事前にクオリティを確認できます。
総まとめ
iMovieで透過PNGを扱う流れは PNG用意 → ドラッグ&ドロップ → ピクチャ・イン・ピクチャ の3ステップ。素材は プレビュー/オンラインツール/Photoshop のいずれかで作成し、アルファチャンネル付きPNGとして書き出せば、白く表示される失敗は防げます。半透明ロゴが必要な場合は事前に透明度を仕込んでおく — iMovieは合成パイプラインがシンプルだからこそ、素材の作り込みで仕上がりの差が出ます。
関連コンテンツ
動画の質を高めるアニメーション素材
10点まで無料でダウンロードできて商用利用もOK！今すぐ使えるテンプレート
