「Google Driveの動画をブログに埋め込みたい」
「PDFファイルをウェブサイトに表示させる方法は？」
「画像や資料を共有リンクじゃなくて、直接サイトに表示したい…」
Google Driveに保存したファイルを、自分のウェブサイトやブログに表示できたら便利ですよね。実は、Google Driveには「埋め込みコード」という機能があり、簡単に実現できます。
この記事では、画像、動画、PDF、Googleドキュメントなど、あらゆるファイル形式の埋め込み方法を、コピペできるコード付きで解説します。
埋め込みコードって何？基本を理解しよう
まず、埋め込みコードの基礎知識から見ていきましょう。
埋め込みコードとは？
ウェブサイトに他のサービスのコンテンツを表示するためのHTMLコード（ウェブページを作る言語）のことです。
イメージ：
YouTubeの動画をブログに貼り付けるのと同じように、Google Driveのファイルもウェブサイトに表示できます。
埋め込みのメリット
✅ ダウンロード不要：訪問者がその場で内容を確認できる
✅ 常に最新版：Google Drive上で更新すれば、埋め込んだ場所も自動更新
✅ 容量節約：自分のサーバーを使わず、Googleのサーバーを利用
✅ 管理が簡単：一箇所で管理、複数のサイトに埋め込み可能
埋め込み可能なファイル形式
📄 文書系：PDF、Googleドキュメント、Word
📊 表計算：Googleスプレッドシート、Excel
🎞️ プレゼン：Googleスライド、PowerPoint
🎬 動画：MP4、MOV、AVI など
🖼️ 画像：JPG、PNG、GIF など
🎵 音声：MP3、WAV など
【事前準備】共有設定を正しく行う
埋め込む前に、必ず共有設定を変更しておきましょう。
共有設定の手順
どのファイル形式でも、この設定は必須です。
ステップ1：ファイルを選択
- Google Driveを開く
- 埋め込みたいファイルを右クリック
- 「共有」を選択
ステップ2：公開範囲を設定
- 共有設定画面で「制限付き」をクリック
- 「リンクを知っている全員」を選択
- 権限は「閲覧者」のまま（推奨）
- 「完了」をクリック
重要な注意点：
⚠️ 「リンクを知っている全員」に設定すると、URLを知っている人なら誰でもアクセス可能になります
⚠️ 機密情報や個人情報を含むファイルは埋め込まないでください
⚠️ 必要に応じて、特定の人だけに共有する設定も可能です
【画像ファイル】埋め込みコードの取得方法
画像を埋め込む方法は、少し工夫が必要です。
方法1：直リンクを使った埋め込み（推奨）
ステップ1：共有リンクを取得
- 画像ファイルを右クリック→「共有」
- 「リンクを知っている全員」に設定
- 「リンクをコピー」をクリック
元のURL例：
https://drive.google.com/file/d/1ABC123def456GHI789jkl/view?usp=sharingステップ2：URLを変換
1ABC123def456GHI789jkl の部分が「ファイルID」です。これを使って以下のURLに変換します。
変換後のURL：
https://drive.google.com/uc?export=view&id=1ABC123def456GHI789jklステップ3：HTMLコードに埋め込む
<img src="https://drive.google.com/uc?export=view&id=ファイルID" alt="画像の説明">実際の例：
<img src="https://drive.google.com/uc?export=view&id=1ABC123def456GHI789jkl" alt="商品画像" width="600">方法2：iframeを使った埋め込み
HTMLコード：
<iframe src="https://drive.google.com/file/d/ファイルID/preview" width="640" height="480" allow="autoplay"></iframe>サイズ調整：
width="640"→ 横幅（ピクセル数）height="480"→ 縦幅（ピクセル数）- 好みのサイズに変更可能
【動画ファイル】埋め込みコードの取得方法
動画の埋め込みは、Google Driveが自動でコードを生成してくれます。
公式の埋め込みコード取得方法
ステップ1：動画を開く
- 動画ファイルをダブルクリックして開く
- プレビュー画面が表示される
ステップ2：埋め込みコードを取得
- 画面右上の「︙」（3点メニュー）をクリック
- 「新しいウィンドウで開く」を選択
- 新しいウィンドウが開いたら、再度「︙」をクリック
- 「埋め込みアイテム」を選択
- 埋め込みコードが表示される
- 「コピー」をクリック
生成されるコード例：
<iframe src="https://drive.google.com/file/d/ファイルID/preview" width="640" height="480" allow="autoplay"></iframe>カスタマイズ方法
サイズ変更：
<!-- 小さめ -->
<iframe src="https://drive.google.com/file/d/ファイルID/preview" width="480" height="360"></iframe>
<!-- 大きめ -->
<iframe src="https://drive.google.com/file/d/ファイルID/preview" width="854" height="480"></iframe>
<!-- レスポンシブ（画面サイズに応じて可変） -->
<div style="position: relative; padding-bottom: 56.25%; height: 0;">
<iframe src="https://drive.google.com/file/d/ファイルID/preview" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" allow="autoplay"></iframe>
</div>自動再生の設定：
デフォルトでは自動再生しませんが、allow="autoplay" を追加すると有効になります。
【PDFファイル】埋め込みコードの取得方法
PDFもiframeで簡単に埋め込めます。
基本的な埋め込み方法
ステップ1：共有リンクを取得
- PDFファイルを右クリック→「共有」
- 「リンクを知っている全員」に設定
- リンクをコピー
ステップ2：ファイルIDを抽出
共有リンク：
https://drive.google.com/file/d/1ABC123def456GHI789jkl/view?usp=sharingファイルID：1ABC123def456GHI789jkl
ステップ3：埋め込みコードを作成
<iframe src="https://drive.google.com/file/d/ファイルID/preview" width="640" height="480" allow="autoplay"></iframe>PDFビューアのカスタマイズ
ツールバーを非表示：
<iframe src="https://drive.google.com/file/d/ファイルID/preview?toolbar=0" width="640" height="480"></iframe>全画面表示：
<iframe src="https://drive.google.com/file/d/ファイルID/preview" width="100%" height="600"></iframe>特定のページから開始：
残念ながら、Google Driveの埋め込みでは特定ページ指定はできません。別のPDFビューアサービスを検討してください。
【Googleドキュメント・スプレッドシート・スライド】埋め込み方法
Google形式のファイルは、専用の埋め込み機能があります。
Googleドキュメントの埋め込み
ステップ1：公開設定
- ドキュメントを開く
- メニューから「ファイル」→「共有」→「ウェブに公開」
- 「公開」をクリック
ステップ2：埋め込みコードを取得
- 「埋め込む」タブを選択
- 埋め込みコードが表示される
- コピーして使用
生成されるコード例：
<iframe src="https://docs.google.com/document/d/e/ファイルID/pub?embedded=true" width="640" height="480"></iframe>Googleスプレッドシートの埋め込み
手順：
- スプレッドシートを開く
- 「ファイル」→「共有」→「ウェブに公開」
- 「埋め込む」タブで埋め込みコードを取得
特定のシートだけ埋め込む：
<iframe src="https://docs.google.com/spreadsheets/d/e/ファイルID/pubhtml?gid=シートID&single=true&widget=true&headers=false" width="640" height="480"></iframe>パラメータの意味：
gid=シートID→ 特定のシートを指定single=true→ 1シートのみ表示widget=true→ ウィジェットモードheaders=false→ ヘッダーを非表示
Googleスライドの埋め込み
手順：
- スライドを開く
- 「ファイル」→「共有」→「ウェブに公開」
- 「埋め込む」タブでコードを取得
自動スライドショー：
<iframe src="https://docs.google.com/presentation/d/e/ファイルID/embed?start=true&loop=true&delayms=3000" width="960" height="569"></iframe>パラメータ：
start=true→ 自動再生loop=true→ ループ再生delayms=3000→ 3秒ごとに切り替え
【フォルダ】埋め込み方法
フォルダ全体をウェブサイトに埋め込むこともできます。
フォルダ埋め込みの手順
ステップ1：フォルダの共有設定
- フォルダを右クリック→「共有」
- 「リンクを知っている全員」に設定
- 共有リンクをコピー
ステップ2：埋め込みコード作成
共有リンク：
https://drive.google.com/drive/folders/フォルダID?usp=sharing埋め込みコード：
<iframe src="https://drive.google.com/embeddedfolderview?id=フォルダID#list" width="640" height="480"></iframe>表示形式の変更：
<!-- リスト表示 -->
<iframe src="https://drive.google.com/embeddedfolderview?id=フォルダID#list"></iframe>
<!-- グリッド表示 -->
<iframe src="https://drive.google.com/embeddedfolderview?id=フォルダID#grid"></iframe>埋め込みコードのカスタマイズテクニック
より使いやすくするためのカスタマイズ方法です。
レスポンシブ対応（スマホでも見やすく）
CSSを使った方法：
<div style="position: relative; padding-bottom: 75%; height: 0; overflow: hidden;">
<iframe src="埋め込みURL" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;"></iframe>
</div>アスペクト比の調整：
- 16:9（動画向け） →
padding-bottom: 56.25%; - 4:3（文書向け） →
padding-border: 75%; - 1:1（正方形） →
padding-bottom: 100%;
枠線（ボーダー）の追加
<iframe src="埋め込みURL" width="640" height="480" style="border: 2px solid #ccc;"></iframe>スクロールバーの設定
<!-- スクロールバーを表示 -->
<iframe src="埋め込みURL" width="640" height="480" scrolling="yes"></iframe>
<!-- スクロールバーを非表示 -->
<iframe src="埋め込みURL" width="640" height="480" scrolling="no"></iframe>背景色の指定
<iframe src="埋め込みURL" width="640" height="480" style="background-color: #f5f5f5;"></iframe>よくあるトラブルと解決方法
埋め込み時に起こりやすい問題の対処法です。
問題1：「このファイルを表示できません」と表示される
原因： 共有設定が正しくない
解決策：
- 共有設定を「リンクを知っている全員」に変更
- 権限を「閲覧者」に設定
- ページを再読み込み
問題2：画像が表示されない
原因： URLの形式が間違っている
解決策：
- 共有リンクを埋め込み用URLに変換したか確認
- ファイルIDが正しいか確認
- ブラウザのキャッシュをクリア
問題3：動画が再生されない
原因： ファイル形式が対応していない、またはファイルサイズが大きすぎる
解決策：
- MP4形式に変換
- ファイルサイズを圧縮（100MB以下推奨）
- YouTubeにアップロードして埋め込む（大容量の場合）
問題4：スマホで表示が崩れる
原因： レスポンシブ対応していない
解決策：
前述のレスポンシブ対応コードを使用
問題5：埋め込みが遅い・重い
原因： ファイルサイズが大きい、または多数のファイルを埋め込んでいる
解決策：
- ファイルを圧縮
- 画像は適切なサイズにリサイズ
- 重要なファイルだけ埋め込む
- 遅延読み込み（Lazy Load）を実装
セキュリティと制限事項
埋め込みを使う際の注意点です。
アクセス制限について
「リンクを知っている全員」の範囲：
- URLを知っている人なら誰でもアクセス可能
- 検索エンジンには通常インデックスされない
- URLを共有・公開すると、不特定多数が閲覧可能
より安全な設定：
- 特定の人だけに共有
- 閲覧期限を設定（Google Workspace）
- パスワード保護（サードパーティツール使用）
帯域幅と転送量の制限
Google Driveには、1日あたりのアクセス制限があります。
制限の目安：
- 無料アカウント：1日あたり数千〜数万アクセス
- 超過すると一時的に「帯域幅の上限を超えました」エラー
対処法：
- アクセスが多い場合は、CDN（コンテンツ配信ネットワーク）サービスを使用
- 画像はCloudinaryやImgixなどの専用サービス
- 動画はYouTubeやVimeoを使用
商用利用について
Google Driveの規約を確認してください。
一般的な考え方：
- 個人のブログやポートフォリオ：通常問題なし
- 企業サイトや大規模サイト：Google Workspaceの使用を推奨
- 販売サイトの商品画像：専用CDNサービスが安全
まとめ：埋め込みコードで、ファイル共有がもっと便利に
Google Driveの埋め込み機能を使えば、ウェブサイトでのファイル共有が格段に便利になります。
この記事のポイント：
✅ 事前準備：必ず「リンクを知っている全員」に共有設定
✅ 画像：URLを変換して<img>タグで埋め込み
✅ 動画：公式の埋め込みコード取得機能を使用
✅ PDF：iframeで簡単に埋め込み可能
✅ Googleファイル：「ウェブに公開」から埋め込みコードを取得
✅ カスタマイズ：レスポンシブ対応、サイズ調整、スタイル変更
✅ 注意点：セキュリティ、帯域制限、商用利用を考慮
ファイル形式別おすすめ方法：
🖼️ 画像 → 直リンク変換で<img>タグ
🎬 動画 → 公式埋め込みコード（iframe）
📄 PDF → iframe埋め込み
📝 Googleドキュメント → ウェブに公開→埋め込みコード
📊 スプレッドシート → シート指定して埋め込み
🎞️ スライド → 自動再生設定で埋め込み
この記事のコードをコピペして、あなたのウェブサイトやブログでGoogle Driveのファイルを活用してくださいね！
コメント