【Googleドキュメント】公開Docsの埋め込み方法!ブログ・サイトへの組込

Googleドキュメントで作成したマニュアルや資料を自社のブログやWebサイトにそのまま埋め込みたい場面があります。PDFとして書き出してアップロードする方法もありますが、ドキュメントの更新が即座に反映される埋め込みの方が運用負荷が低いです。

本記事では、Googleドキュメントを公開設定にしてiframeでサイトに埋め込む手順と、レイアウト調整のコツを解説します。

「ウェブに公開」の仕組み

「ウェブに公開」は通常の共有とは別の仕組みで、ドキュメントを誰でもアクセスできる固定URLとして配信します。Googleアカウントなしで閲覧でき、検索エンジンにもインデックスされる可能性があります。

公開URLとは別に「埋め込みコード」が用意されており、iframe要素として他のWebページに組み込めます。WordPressやSquarespace、Wixなどあらゆるサイトビルダーで使えます。ただし機密性のある資料は絶対に公開しないでください。誰でも閲覧可能になります。

Googleドキュメントを埋め込む手順

1. 埋め込みたいドキュメントを開く
   対象のGoogleドキュメントを表示します。書き込み中のドキュメントでも問題ありません。
2. 「ウェブに公開」を選択
   「ファイル」メニュー→「共有」→「ウェブに公開」をクリックします。ダイアログが表示されます。
3. 「埋め込む」タブを選んで公開
   「リンク」と「埋め込む」の2タブがあるので、「埋め込む」を選択して「公開」ボタンをクリックします。確認ダイアログで「OK」を押します。
4. iframeコードをコピー
   表示された iframe コード(例:<iframe src=”https://docs.google.com/document/d/…/pub?embedded=true”></iframe>)をコピーします。
5. WebサイトのHTMLに貼り付け
   WordPressなら投稿エディタの「カスタムHTML」ブロックに、HTML直接編集なら本文中の任意の場所に貼り付けます。width=100%、height=600px の属性を追加すると見た目が整います。

Docs埋め込みでよくあるトラブル

埋め込まれたドキュメントが小さい

iframeのデフォルト高さは小さいので、height=”600″のように明示的に高さを指定してください。レスポンシブにしたい場合はCSSで「.embed-container { height: 100vh; }」のように設定します。

「公開を停止」で埋め込みが消える

「ファイル」→「ウェブに公開」→「公開を停止」を押すと埋め込みもアクセス不能になります。誤って停止した場合は再度「公開」をクリックすると同じURLで復活します。

編集が反映されない

公開設定で「変更があれば自動的に再公開する」がオンになっていることを確認してください。Googleのキャッシュ更新で5分〜30分の遅延が出ることがあります。

スマホで見にくい

埋め込みドキュメントはモバイルで横スクロールが必要になりがちです。Googleドキュメント側の「ファイル」→「ページ設定」で用紙幅を狭めるか、モバイル用にスタイル調整します。

公開・共有方法の比較

方法	用途	更新
ウェブに公開(リンク)	誰にでもURL共有	自動反映
ウェブに公開(埋め込み)	サイトへiframe組込	自動反映
PDFエクスポート	ダウンロード提供	手動更新が必要
通常の共有リンク	関係者のみアクセス	自動反映

まとめ

Googleドキュメントの「ウェブに公開」→「埋め込む」機能を使うと、iframeコードで簡単にサイトに組み込めます。ドキュメント側で編集すれば埋め込み先にも自動反映されるため、マニュアルやFAQの運用負荷が大きく下がります。一方で公開設定は誰でもアクセス可能になるので、機密性の確認は必ず実施してください。社内Wikiやマニュアルサイト構築の選択肢として、PDFアップロードより柔軟な手段になります。

📄

Googleドキュメントトラブル完全解決データベースこの記事以外にも、書式・共有・Apps Script・引用など様々な困りごとへの解決策をまとめています。逆引きに活用してください。