VimeoからGumletへの動画移行マニュアル｜インポートから埋め込みコード差し替えまでの完全手順

VimeoからGumletへの移行前に確認すべき3つのチェックポイント

1. 動画本数・総時間・月間転送量を別々に把握する

移行対象の動画本数と合計時間を一覧にし、Vimeoの利用実績から直近1〜3か月の月間転送量と繁忙月を確認します。本数は作業量、合計時間は保存量や処理量、転送量は配信費用を見積もるための情報です。動画200本を公開している場合でも、短い紹介動画中心か長時間の講座中心かで条件は変わります。

Gumletでは保存量に動画の分数を使い、配信転送量は実際に視聴された画質やダウンロードされたデータで変わります。Vimeoの利用量と同じになるとは限りません。平常月だけでなく、広告配信や講座公開が重なる月も見込み、移行中の二重契約とテスト再生の余裕を確保してください。単位は本数・分・GBを混同せずに記録します。

2. 埋め込みページ台帳を作り、差し替え漏れを防ぐ

動画一覧だけでは、どのページを修正すべきか分かりません。1本の動画が複数ページで使われるため、動画と掲載箇所を対応させた台帳を作ります。たとえば動画が200本、掲載ページが350ページなら、それぞれの件数を管理し、移行成功件数と差し替え完了件数を分けて確認します。

• 動画情報：Vimeo ID、タイトル、長さ、移行先ワークスペース、Gumletの実際の埋め込みURL。
• 掲載情報：ページURL、CMSの編集箇所、共通テンプレートや再利用ブロックの有無、同一ページ内の掲載位置。
• 表示条件：元のiframeコード、URLのクエリパラメーター、ファーストビュー内外、会員限定の有無。
• 作業情報：担当者、確認端末、切替状況、旧コードの保存場所、ロールバック手順。

HTML内のiframeだけでなく、URLを貼るだけの自動埋め込み、CMSプラグイン、JavaScriptで生成されるプレーヤーも対象です。置換前にCMSデータとテンプレートをバックアップし、同じ動画を使う別ページへの影響を確認します。

3. インポート権限と、移行後の機密設定を確認する

2026年11月3日時点の公式Docsでは、専用インポートの要件はVimeo Standard、Proまたはそれ以上のプランと、Gumletの有料アカウントです。Vimeo FreeはAPIのダウンロード制限により対象外です。トライアルを含むすべてのアカウントで利用できるとは考えず、契約画面と公式条件を確認してください。

Vimeo連携を承認する担当者が対象動画へアクセスできるか、Gumletの移行先ワークスペースで取り込みと設定変更を行えるかも確認します。権限不足は、全動画ではなく一部だけの取り込み漏れとして現れることがあります。退職者の個人アカウントだけに作業権限を依存させない運用も必要です。

• 公開動画と会員向け・社内向け動画を区別し、適切なワークスペースへ取り込む。
• 許可ドメイン、公開範囲、パスワード、署名URL、DRM、MP4ダウンロード可否を移行先で再確認する。
• 字幕の言語と同期、サムネイル、チャプターを実際のプレーヤーで確認する。
• 視聴を許可する利用者だけでなく、許可しない利用者や外部ドメインからの挙動も確認する。

Gumletのドメイン制限などはワークスペース単位の設定が関係します。また、Unlistedはリンクを知る人が視聴できる状態で、会員認証の代わりにはなりません。Vimeoのプライバシー設定がそのまま有効になると決めつけず、移行先の仕様に合わせて設計してください。

仕様の確認先：Gumlet公式FAQ、Video Protection。

【3ステップ】動画データの移行と初期設定手順

ステップ1：無料アカウントを作成し、移行先を準備する

紹介特典リンクからGumletの無料アカウントを作成し、管理画面で移行先ワークスペースを準備します。無料登録だけで専用インポートが利用できるとは限りません。公式DocsではGumlet有料アカウントが条件のため、必要な機能と購入画面の特典を確認してから、利用できる契約へ進んでください。Vimeoはまだ解約しません。

最初から全件を切り替えず、短い紹介動画、長時間動画、字幕付き動画、視聴制限付き動画など、条件の違う数本を選びます。動画の取り込み中もWebサイトはVimeoの埋め込みを使い続け、Vimeoの契約、元動画、視聴権限を維持してください。インポート完了だけを理由に解約や削除を進めると、戻し先を失います。

公式フローは、ImportページでVimeoのConnectを選び、Vimeoで連携を承認した後、Destination workspaceと対象のファイル・フォルダを指定する流れです。Import Videosの後にProcessing Settingsを確認し、Save and Importで開始します。これは調査時点の公式Docs上の名称で、実際の画面表示と照合して進めます。

取り込み前に、出力形式、必要な解像度、MP4出力、DRM、AI字幕などを確認します。この処理設定は今回だけでなく、同じワークスペースの今後のインポートの既定値にもなります。既存字幕を取り込む作業と、AIで字幕を新規生成する作業は別です。不要なAI処理は無効にし、有効にする場合は表示されるクレジット費用を確認してください。

ステップ2：動画をインポートし、移行結果を検収する

Importページの進捗と完了通知を確認し、移行レポートで成功・スキップ・失敗を突き合わせます。動画の本数だけでなく、対象動画ごとの再生、尺、音声、字幕、サムネイルを確認してください。取り込み完了と公開準備完了は同じではありません。

取り込み後に処理設定を変更しても、処理済み動画が自動で再エンコードされるわけではありません。出力形式やDRMなどを変える場合は、対象動画の再処理要否と再生への影響を確認します。機密動画の保護が不十分なまま、先に本番ページへ公開しないようにしてください。

ステップ3：コレクション整理とドメイン制限を設定して公開する

移行した動画のコレクション・フォルダ構成を用途別に整理し、公開用、会員教材、社内用を区別します。ドメイン制限などの保護条件が異なる動画は、ワークスペースを分けることも検討してください。画面で利用する整理単位と、設定の適用範囲を確認してから変更します。

検収を終えた動画から、まず1〜3ページ程度を切り替えます。こうした少数ページの先行切替をカナリア切替と呼びます。対象はアクセスの少ないページだけに偏らせず、スマートフォン表示や会員ログインなど、本番で必要な条件を確認できるページも含めてください。

許可ドメインに本番ホストと必要なサブドメインを登録し、ステージング環境は必要な範囲で追加します。本番サイトのCSPで新しいiframeが遮断されないこと、CMSとCDNのキャッシュ更新後に新コードが表示されることも確認します。代表ページで通常の利用が増える時間帯を含めて観察し、問題がなければページ群ごとに切り替えます。

全対象ページの検収と、あらかじめ決めた安定確認期間が終わるまではVimeoを維持します。切替後の動画追加や差し替えはどちらのサービスで行うかを決め、切替直前の更新は台帳へ記録してください。旧環境にだけ追加された動画が残ると、後から差し替え漏れが生じます。

操作の詳細は既存のインポート操作5ステップガイドへ。移行対象と最新の画面操作は公式Import from Vimeo、処理設定は公式Processing Settingsで確認できます。

Webサイト上の埋め込みコード（iframe）差し替えと表示速度の最適化

URLの接頭辞置換は、対象動画のIDと実再生を確認してから行う

公式のVimeo専用インポートでは、元のVimeo IDを保持し、埋め込みURLの接頭辞を変更する方法が説明されています。例として、https://player.vimeo.com/video/831802811をhttps://play.gumlet.io/embed/831802811へ変更します。ただし、手動ダウンロード後の再アップロードや別経路の取り込みまで、同じIDになる保証はありません。

実作業ではGumlet側の埋め込みURLと台帳を照合し、対象動画で再生できることを確認します。Vimeoの共有URLをそのままiframeのsrcに入れたり、旧サービス用のクエリパラメーターを無条件に残したりしないでください。再生開始位置、自動再生、ループ、ミュートなどは移行先で対応する設定を個別に確認します。CMSの自動埋め込みを使っている場合は、URLの文字列置換だけでなく、ブロックやプラグインの出力も確認してください。

16:9の領域を確保し、画面外の動画だけ遅延読み込みする

次の例は、ファーストビュー外に置く16:9動画向けです。親要素で表示領域を先に確保し、プレーヤー読み込み時のレイアウトのずれを抑えます。例示IDは、検証済みの実際の埋め込みURLへ必ず差し替えてください。縦動画や正方形動画は元の比率に合わせて調整します。

<div style="position: relative; width: 100%; aspect-ratio: 16 / 9;">
  <iframe
    src="https://play.gumlet.io/embed/831802811"
    title="サービスの使い方を紹介する動画"
    width="1280"
    height="720"
    loading="lazy"
    allow="autoplay; encrypted-media; fullscreen; picture-in-picture"
    allowfullscreen
    style="position: absolute; inset: 0; width: 100%; height: 100%; border: 0;">
  </iframe>
</div>

titleには動画内容を識別できる説明を入れます。loading="lazy"は初期表示に不要な画面外動画に使い、ページ上部の主役となる動画には機械的に付けません。ファーストビュー内の動画はこの属性を外すか、loading="eager"にします。画面外のプレーヤーを遅延読み込みすると、ページ初期表示時の通信や処理の競合を減らせますが、サイト全体の改善率を一律には約束できません。

動画一覧などでプレーヤーが多い場合は、サムネイルと再生ボタンを先に表示し、操作後にiframeを作る方法も選択肢です。独自実装ではキーボード操作とボタンの説明を用意し、再生までの操作が増える点も含めて検証します。

HLSの適応配信と、ページ読み込みの改善を分けて考える

GumletのABR出力ではHLSとDASHが生成されます。HLSによる画質の自動切替を使うには、元動画から必要な複数の解像度が処理済みで、プレーヤーが適応配信に対応していることが前提です。Gumletプレーヤーは回線や表示サイズなどに応じて画質を調整します。単一のMP4 URLに差し替えるだけでは、適応ビットレート配信にはなりません。

独自プレーヤーでHLSを使う場合は、ブラウザのネイティブ対応かHLS対応ライブラリが必要です。また、HLSの直接URLの利用可否は契約条件を確認してください。現行料金表にはCreatorのHLS／DASH対応がありますが、公式FAQにはHLS・MP4直接URL不可という説明があり、公開資料が一致していません。標準iframeの利用と、HLS URLを直接扱う独自実装は区別します。

適応配信は主に再生中の通信と画質調整を担い、iframeの遅延読み込みは主にページ初期表示の負荷を抑える対策です。移行後の表示や再生の速さは、埋め込み数、ページの画像やスクリプト、端末、回線にも左右されます。移行前後を同じページ・端末・回線条件で確認し、ページの表示が速いことと、再生開始が速いことの両方を確認してください。

自動再生と視聴制限は、実際のブラウザで最終確認する

allow="autoplay"は自動再生に関する権限指定で、自動再生の開始命令でも成功保証でもありません。プレーヤー側の設定に加え、ブラウザのポリシー、音声の有無、ミュート、利用者の操作状況などに左右されます。自動再生できない場合でも、再生ボタンから視聴できる状態を用意します。

署名URLを使う場合は、認証済み利用者に対してサーバー側で期限付きURLを発行します。署名用秘密鍵やAPIキーを、公開HTML、ブラウザのJavaScript、CMSの公開フィールドへ直書きしてはいけません。署名の有効期限切れや、会員ページを共有キャッシュへ保存したことによる視聴不具合も確認してください。ドメイン制限ではRefererが関係するため、リファラーを送らない設定をむやみに追加せず、本番環境で許可・拒否の動作を確かめます。

実装の確認先：高速埋め込み・DRM設定ガイド、Gumletの処理設定、MDNのiframe仕様、自動再生ポリシー。

よくある質問（FAQ）

まとめ：検証してから本番へ切り替える

VimeoからGumletへの移行は、動画本数と転送量の把握、埋め込みページ台帳の作成、権限と機密設定の確認から始めます。代表動画でインポートと設定を検収した後、少数ページの切替から範囲を広げ、全件の安定確認までVimeoと旧コードを維持してください。

表示速度対策では、16:9などの領域確保と、ファーストビュー外のiframeの遅延読み込みを行います。HLSの適応配信は処理形式とプレーヤーの条件を確認し、自動再生やID保持を無条件に期待しないことが重要です。動画の移行完了ではなく、実際のページで安全に視聴でき、必要なときに戻せる状態を移行完了の基準にしましょう。

出典・確認した公式情報

2026年11月5日確認。仕様・プラン・画面名・利用条件は変わる場合があります。料金、保護機能、移行対象は契約前に公式情報で確認してください。

• Gumlet Docs — Import from Vimeo
• Gumlet Docs — Processing Settings
• Gumlet Docs — Video Protection
• Gumlet Docs — Video FAQs
• MDN — iframe HTML inline frame element
• MDN — Autoplay guide for media and Web Audio APIs
• web.dev — It's time to lazy-load offscreen iframes!
• site-speedup.com — VimeoからGumletへ動画をインポートする完全移行ガイド