～

タグ、段落は

タグ、表は

タグになります。ただし、classやidは付与されず、レイアウトはインラインスタイルに依存します。そのため、既存のWebデザインに合わせるには、スタイルを外部CSSに移行する作業が必要です。

GoogleドキュメントをHTMLとしてエクスポートする手順

ここでは、最も基本的な方法から、アドオンを使った高度な方法までを紹介します。目的に応じて使い分けてください。

標準機能を使ったエクスポート

1. ドキュメントを開く
   エクスポートしたいGoogleドキュメントを開きます。
2. 「ファイル」メニューをクリック
   左上のメニューバーから「ファイル」を選択します。
3. 「ダウンロード」→「Webページ(.html、zip形式)」を選択
   表示されるサブメニューの中で、対象の形式をクリックします。
4. ZIPファイルを解凍する
   ダウンロードされたZIPファイルを解凍します。中には「index.html」と画像フォルダ(images)が含まれています。
5. HTMLファイルを編集する
   「index.html」をテキストエディタやHTMLエディタで開き、必要に応じてスタイルや構造を修正します。

アドオン「Docs to Markdown」を使った方法

「Docs to Markdown」は、Google Workspace Marketplaceからインストールできるアドオンです。このアドオンを使うと、ワンクリックでHTMLコードをクリップボードにコピーできます。また、Markdown形式への変換にも対応しており、ブログの下書きなどに便利です。

1. アドオンをインストールする
   メニューバー「拡張機能」→「アドオン」→「アドオンを取得」から「Docs to Markdown」を検索し、インストールします。
2. アドオンを起動する
   「拡張機能」→「Docs to Markdown」→「Markdown」をクリックします。サイドバーが表示されます。
3. 出力形式を選択する
   サイドバーの上部で「HTML」を選びます。必要に応じて「Include table of contents」などのオプションを設定します。
4. 「Copy to clipboard」をクリック
   生成されたHTMLコードがクリップボードにコピーされます。あとは任意のエディタに貼り付けて保存します。

エクスポート時の注意点とよくあるトラブル

HTMLエクスポートは便利ですが、いくつかの落とし穴があります。ここでは、よく遭遇する問題とその対処法を紹介します。

画像が正しく表示されない

標準のエクスポートでは、画像はZIP内のimagesフォルダに保存され、HTML内のsrc属性は相対パス(例:images/photo.png)で指定されます。このHTMLを単体でWebサーバーにアップロードすると、画像が表示されないことがあります。対策として、画像のパスを絶対パスに変更するか、画像をBase64エンコードしてHTML内に埋め込む方法があります。Base64エンコードには専用のツールを使うと便利です。

スタイルが崩れる

出力されるHTMLはインラインスタイルが主なので、外部CSSと競合すると表示が崩れる可能性があります。例えば、既存のWebサイトに埋め込む場合、サイトのCSSが優先されてレイアウトが変わってしまいます。解決策としては、HTML内のstyle属性を削除し、クラス名を付与してから外部CSSでスタイルを再定義する方法があります。また、エクスポート後にHTMLを整形するツール(例:HTML Tidy)を使うと、スタイルを整理しやすくなります。

特殊文字が文字化けする

Googleドキュメントで使用した特殊な記号やアクセント文字が、HTMLエクスポート時に文字化けすることがあります。これは文字エンコーディングの設定が原因です。エクスポートされたHTMLのheadタグ内に「」が正しく記述されていることを確認してください。もし文字化けが発生した場合は、HTMLファイルをUTF-8で保存し直すことで解決します。

標準エクスポートとアドオンエクスポートの比較

比較項目	標準の「Webページ」エクスポート	アドオン「Docs to Markdown」
出力形式	ZIPファイル(HTML+画像フォルダ)	プレーンテキスト(コピー&ペースト)またはファイル保存
画像の扱い	別フォルダに保存(相対パス)	Base64埋め込み(オプションで外部参照も可)
スタイルの形式	インラインスタイル	インラインスタイルまたはclass属性(設定による)
カスタマイズ性	低い(後編集が必要)	高い(出力オプションが豊富)
Markdown変換	非対応	対応(HTMLとMarkdownを切り替え可能)

まとめ

GoogleドキュメントのHTMLエクスポートは、ファイルメニューから「Webページ」を選ぶだけで完了します。ただし、画像のパスやスタイルの調整が必要になるため、公開用に整える際はアドオンや手動編集を組み合わせると良いでしょう。特に「Docs to Markdown」アドオンは、HTMLコードを直接コピーでき、Base64埋め込みオプションも備えているため、ブログやWeb制作のワークフローに役立ちます。まずは標準のエクスポートを試し、その後の編集の流れを把握してみてください。さらに、エクスポートしたHTMLをChrome DevToolsで検証しながら修正すると、効率的にクリーンなコードに仕上げられます。