---
title: "PDF埋め込みが表示されない問題をAI生成HTMLで防ぐプロンプト"
description: "AI生成HTMLでPDF埋め込みが共有先で表示されない問題を、プロンプトの改善で未然に防ぎたいエンジニア・デザイナー向け。有効なプロンプトパターンと生成後の確認方法を具体的に紹介し、PDF表示に強いHTML設計の指針をまとめます。"
image: "https://giga-site.com/og-image.png"
canonical: "https://giga-site.com/articles/pdf-embed-hidden-ai-prompt"
markdown: "https://giga-site.com/articles/pdf-embed-hidden-ai-prompt/index.md"
category: "トラブルシュート"
publishedAt: "2026-06-25"
updatedAt: "2026-06-25"
readingMinutes: 6
---
# PDF埋め込みが表示されない問題をAI生成HTMLで防ぐプロンプト

AIにHTMLを生成させると、PDF埋め込みは動かないコードになることが多いです。PDFのパス参照方法やブラウザ互換性をプロンプトで制御することで、共有後に「見えない」と言われないHTML生成が可能になります。

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

## よくある原因

AIはHTMLのPDF埋め込みを生成するとき、多くの場合`<embed src="document.pdf">`や`<iframe src="report.pdf">`のように相対パスのままコードを書きます。これはAIが「ローカル開発環境でのファイル配置」を前提にしているためで、Webサービスに単体のHTMLをアップロードする状況を想定していません。プロンプトで用途（ホスティングサービスへの単体アップロード）を明示することが対策の第一歩です。

また、`<embed>`タグは一部のブラウザやモバイル環境でPDFを表示せず、代わりにダウンロードを促すことがあります。AIがこのクロスブラウザ問題を考慮せずに`<embed>`を生成するのは、学習データに単純なコードスニペットが多く含まれているためです。プロンプトに「iOSのSafariでも表示できること」や「Chrome・Firefox・Edge・SafariのPC版で表示確認すること」と追記すると、AIがよりロバストな実装を選択する可能性が上がります。

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

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

AIが生成したHTMLのPDF関連コードを確認します。`<embed>`、`<iframe>`、`<object>`タグのsrc属性値が相対パスになっている場合、その相対パスで参照できるPDFファイルが実際に存在するか確認します。ない場合は外部URLを指定するようにAIに再プロンプトするか、自分でsrc属性の値を差し替えます。

生成されたHTMLをローカルのChromeとFirefoxの両方で開き、PDFが表示されるか確認します。Chromeで表示されてもFirefoxで「プラグインがサポートされていません」と表示される場合は、`<embed type="application/pdf">`のtype属性か、iframeへの切り替えで改善することがあります。さらにスマホ（iOS Chrome/Safari）でも確認すると、モバイル非互換を本番前に発見できます。

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

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

PDF埋め込みがAIの生成物であることを共有相手に事前に伝え、「表示されない場合は教えてください」と一言添えておきます。相手から「見えない」と報告を受けた場合、「ブラウザとOS、エラーメッセージのスクリーンショット」を求めます。こうすることでAIの生成コードに起因する問題か、相手環境の設定問題かを判断できます。

相手がiOSユーザーで`<embed>`が機能しない場合、Google Drive経由のiframe埋め込みに切り替えるか、PDFへのダイレクトリンクを提供します。この切り替えをAIへの再プロンプトで対応する場合は「iOSのSafariでPDFが表示できるよう、Google DriveのプレビューURLを使ったiframe形式にすること。URLは[YOUR_DRIVE_URL]というプレースホルダーで記載すること」と依頼します。

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

## 再発防止の運用

PDF埋め込みHTMLをAIに生成させる際の定型プロンプトの例：「PDFの埋め込みにはiframeを使うこと。PDFのURLは`YOUR_PDF_URL`というプレースホルダーで記載すること。iPhone/iPad（iOS Safari）では`<embed>`でのPDFインライン表示が不安定なため、PDFをダウンロードするボタンも別途設置すること。PDFが表示されない場合のエラーメッセージを日本語でHTMLに含めること。」

このプロンプトに加え、アップロード前にChrome DevToolsのNetworkタブでPDFリクエストの成否を確認するステップをフローに組み込みます。404が出なければアップロード後も同じURLのPDFにアクセスできます。PDFをギガサイト便のzip内に同梱する場合は、zipの中のファイル構成が意図通りか（HTMLとPDFが同一ディレクトリか）を確認してからアップロードします。

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

## よくある質問

### AIに「PDF埋め込みをクロスブラウザ対応にして」と指示しましたが相変わらず`<embed>`が生成されます。

`<embed>`自体はクロスブラウザ対応ですが、PDFのMIMEタイプやブラウザ設定により動作差があります。「iframeを使い、PDFが表示されない場合はダウンロードリンクを代替表示するフォールバックを実装すること」のように具体的な実装方針を指示すると変わります。

### PDF.jsを使ったプロンプトを書く場合の注意点はありますか？

PDF.jsのCDN（`https://mozilla.github.io/pdf.js/`）は本番環境では推奨されていません。npmパッケージとしてバンドルするか、GitHubリリースから`pdf.min.js`と`pdf.worker.min.js`をHTMLに同梱する方法を指定します。AIに「PDF.jsをCDNではなくローカルファイルとして組み込むこと」と明示します。

### Google DriveのプレビューURLをiframeに使う場合、相手がGoogleにログインしていない場合でも見えますか？

PDFの共有設定が「リンクを知っている全員」になっていれば、Googleアカウントなしで閲覧できます。ただしGoogleの仕様変更で非ログイン表示が制限される可能性はゼロではないため、重要な共有には自前ホスティングのPDFURLを使うほうが安全です。

## 関連記事

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

```json
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "PDF埋め込みが表示されない問題をAI生成HTMLで防ぐプロンプト",
  "description": "AI生成HTMLでPDF埋め込みが共有先で表示されない問題を、プロンプトの改善で未然に防ぎたいエンジニア・デザイナー向け。有効なプロンプトパターンと生成後の確認方法を具体的に紹介し、PDF表示に強いHTML設計の指針をまとめます。",
  "datePublished": "2026-06-25",
  "dateModified": "2026-06-25",
  "mainEntityOfPage": "https://giga-site.com/articles/pdf-embed-hidden-ai-prompt",
  "url": "https://giga-site.com/articles/pdf-embed-hidden-ai-prompt",
  "inLanguage": "ja",
  "image": "https://giga-site.com/og-image.png",
  "articleSection": "トラブルシュート",
  "author": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "publisher": {
    "@type": "Organization",
    "name": "ギガサイト便"
  },
  "mainEntity": [
    {
      "@type": "Question",
      "name": "AIに「PDF埋め込みをクロスブラウザ対応にして」と指示しましたが相変わらず`<embed>`が生成されます。",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "`<embed>`自体はクロスブラウザ対応ですが、PDFのMIMEタイプやブラウザ設定により動作差があります。「iframeを使い、PDFが表示されない場合はダウンロードリンクを代替表示するフォールバックを実装すること」のように具体的な実装方針を指示すると変わります。"
      }
    },
    {
      "@type": "Question",
      "name": "PDF.jsを使ったプロンプトを書く場合の注意点はありますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "PDF.jsのCDN（`https://mozilla.github.io/pdf.js/`）は本番環境では推奨されていません。npmパッケージとしてバンドルするか、GitHubリリースから`pdf.min.js`と`pdf.worker.min.js`をHTMLに同梱する方法を指定します。AIに「PDF.jsをCDNではなくローカルファイルとして組み込むこと」と明示します。"
      }
    },
    {
      "@type": "Question",
      "name": "Google DriveのプレビューURLをiframeに使う場合、相手がGoogleにログインしていない場合でも見えますか？",
      "acceptedAnswer": {
        "@type": "Answer",
        "text": "PDFの共有設定が「リンクを知っている全員」になっていれば、Googleアカウントなしで閲覧できます。ただしGoogleの仕様変更で非ログイン表示が制限される可能性はゼロではないため、重要な共有には自前ホスティングのPDFURLを使うほうが安全です。"
      }
    }
  ]
}
```