---
title: "PDF埋め込みが表示されないときに共有前に確認するチェックリスト"
description: "HTMLに埋め込んだPDFが共有先で表示されないリスクを共有前に発見したいデザイナー・Web担当者向け。パス・ブラウザ設定・CSPの三つの観点から共有前にチェックできる手順とつまずきやすい落とし穴を解説します。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/pdf-embed-hidden-checklist"
markdown: "https://giga-site.com/articles/pdf-embed-hidden-checklist/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 5
---
# PDF埋め込みが表示されないときに共有前に確認するチェックリスト

PDFを埋め込んだHTMLを共有する前に、表示トラブルを自分で発見するためのチェックリストを用意しておくと、相手から「PDFが見えません」と指摘される前に問題を解消できます。ブラウザ別・環境別の確認手順をまとめました。

> Source HTML: https://giga-site.com/articles/pdf-embed-hidden-checklist
> Article index: https://giga-site.com/articles/index.md

## よくある原因

AI生成HTMLでPDF埋め込みが失敗する一番の原因はファイルパス問題です。AIはローカルで動作するパス（例：`./documents/report.pdf`）を生成しますが、ギガサイト便やその他のホスティングサービスに単体のHTMLをアップロードした場合、PDFが同じサーバーに存在しないためリンク切れになります。共有前チェックとして「PDF埋め込みのsrc属性値がローカルパスになっていないか」の確認を必ず行います。

次点はブラウザのPDF設定の個人差です。Chromeはデフォルトでインライン表示しますが、設定変更（設定→プライバシーとセキュリティ→サイトの設定→PDFドキュメント）でダウンロードに切り替えている場合、`<embed>`タグが空白表示になります。自分のChromeでは正常でも相手の設定が違うと非表示になるため、テスト用に設定をいったんダウンロードに変えてから確認すると相手環境を擬似的に再現できます。

- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく

## 自分側で確認すること

チェック1：HTMLのソースを開き（ブラウザで右クリック→ページのソースを表示）`embed`または`iframe`を検索します。src属性の値が絶対URLでなく相対パスや`file://`から始まる場合、公開環境では機能しません。ギガサイト便にアップロードする場合はHTMLとPDFをzipで一緒にアップロードし、HTMLのsrcを`相対パス`のまま使うか、PDFだけを別サービス（Google Drive、OneDrive等）にアップして絶対URLをsrcに指定します。

チェック2：公開URL（ギガサイト便の共有URLなど）をChromeのシークレットウィンドウで開き、DevTools（F12）のNetworkタブでPDFファイルのリクエスト結果を確認します。404なら「PDFのパスが存在しない」、200なら「PDFは届いているが表示設定に問題がある」と判断できます。200でも表示されない場合はConsoleタブのCSPエラー（`Refused to load`）を確認します。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## 相手側で確認すること

共有先が複数人の場合、事前に「PCのChrome/Edge/Firefoxのどれで閲覧予定ですか？またスマホ（iOS/Android）も使いますか？」と確認します。iOSは`<embed>`によるPDFインライン表示が不安定なため、iOSユーザーが含まれる場合はPDF.jsかリンクボタン方式に変更しておきます。事前確認するだけで共有後のトラブル件数を大幅に減らせます。

相手がPDFを見られない状態で連絡してきた場合の確認依頼に備えて「①ブラウザ名とバージョン、②スクリーンショット、③F12→Consoleに赤いエラーが出ているか」の3点をセットにしたメッセージテンプレートを手元に持っておきます。この3点が揃えば原因の8割は特定できます。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## 再発防止の運用

PDFを含むHTMLを作る際の標準化として「PDFはHTMLと同じzipに同梱するか、Google Drive等の絶対URLで参照すること」「iOSユーザーが含まれる配布先にはPDF埋め込みでなくリンクボタンにすること」の二つをルール化します。これをチームのWiki（Notionなど）に記載しておくと、担当者が変わっても再発しにくくなります。

AIにHTMLを生成させる際に「PDFは外部URLで参照するか、PDFのURLをプレースホルダー（YOUR_PDF_URL）として記載すること」と指示を追加するだけで、生成物のsrc属性が絶対URL前提のコードになります。後からURLだけを差し替えれば使える状態になるため、毎回ローカルパス問題に対処する手間がなくなります。

- HTML内の外部script・form action・iframeを確認する
- APIキーやトークンらしき文字列がないか検索する
- 画像・CSS・JSのパスが公開後も解決できるか見る
- noindexと認証を混同せず、必要なら両方設定する

## よくある質問

### PDFをHTMLとは別のGoogleドライブにアップして埋め込む場合、共有設定はどうすればよいですか？

GoogleドライブのPDFを「リンクを知っている全員が閲覧可」に設定し、共有リンクのIDをiframeのsrcに組み込む形式（`https://drive.google.com/file/d/ファイルID/preview`）で埋め込みます。ただしGoogleアカウントでログインしていないと表示できない場合があるため、相手のアカウント状況を事前に確認します。

### PDFをBase64でHTMLに直接埋め込む方法はありますか？

可能です。`<embed src="data:application/pdf;base64,（Base64文字列）">`の形式で埋め込めばPDFファイルを外部参照せずに動かせます。ただし10MB超のPDFでは変換後のHTMLが40MB超になり、ギガサイト便などのアップロード制限に引っかかる場合があります。

### 共有後にPDFの内容を更新した場合、HTMLも差し替える必要がありますか？

PDFをギガサイト便に同梱（zip）している場合はHTMLとPDFをセットで再アップロードします。PDFをGoogle Drive等の外部URLで参照している場合はPDFだけを上書きアップロードすれば、HTMLは差し替えなくても自動的に最新PDFが表示されます。

## 関連記事

- [PDF埋め込みが表示されないときの原因と直し方](https://giga-site.com/articles/pdf-embed-hidden-fix/index.md)
- [PDF埋め込みが表示されない問題をAI生成HTMLで防ぐプロンプト](https://giga-site.com/articles/pdf-embed-hidden-ai-prompt/index.md)
- [PDF埋め込みが表示されないときに相手へ伝える確認依頼の書き方](https://giga-site.com/articles/pdf-embed-hidden-request-message/index.md)
- [Googleマップ埋め込みが表示されないときに共有前に確認するチェックリスト](https://giga-site.com/articles/google-map-embed-hidden-checklist/index.md)
- [YouTube埋め込みが表示されないときに共有前に確認するチェックリスト](https://giga-site.com/articles/youtube-embed-hidden-checklist/index.md)
- [Googleマップ埋め込みが表示されないときの原因と直し方](https://giga-site.com/articles/google-map-embed-hidden-fix/index.md)

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "PDF埋め込みが表示されないときに共有前に確認するチェックリスト",
  "description": "HTMLに埋め込んだPDFが共有先で表示されないリスクを共有前に発見したいデザイナー・Web担当者向け。パス・ブラウザ設定・CSPの三つの観点から共有前にチェックできる手順とつまずきやすい落とし穴を解説します。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/pdf-embed-hidden-checklist",
  "url": "https://giga-site.com/articles/pdf-embed-hidden-checklist",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "PDFをHTMLとは別のGoogleドライブにアップして埋め込む場合、共有設定はどうすればよいですか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "GoogleドライブのPDFを「リンクを知っている全員が閲覧可」に設定し、共有リンクのIDをiframeのsrcに組み込む形式（`https://drive.google.com/file/d/ファイルID/preview`）で埋め込みます。ただしGoogleアカウントでログインしていないと表示できない場合があるため、相手のアカウント状況を事前に確認します。"
      }
    },
    {
      "@type": "Question",
      "name": "PDFをBase64でHTMLに直接埋め込む方法はありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "可能です。`<embed src=\"data:application/pdf;base64,（Base64文字列）\">`の形式で埋め込めばPDFファイルを外部参照せずに動かせます。ただし10MB超のPDFでは変換後のHTMLが40MB超になり、ギガサイト便などのアップロード制限に引っかかる場合があります。"
      }
    },
    {
      "@type": "Question",
      "name": "共有後にPDFの内容を更新した場合、HTMLも差し替える必要がありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "PDFをギガサイト便に同梱（zip）している場合はHTMLとPDFをセットで再アップロードします。PDFをGoogle Drive等の外部URLで参照している場合はPDFだけを上書きアップロードすれば、HTMLは差し替えなくても自動的に最新PDFが表示されます。"
      }
    }
  ]
}
```