【Notion】NotionからエクスポートしたHTMLが開けない時のファイル構成確認

NotionからエクスポートしたHTMLファイルを開こうとしたところ、ブラウザで真っ白な画面が表示されたり、画像が表示されなかったりという経験はありませんか。これはエクスポート時に生成されるファイル構成が正しく保たれていないことが原因であるケースが多くあります。Notionのエクスポート機能は単一のHTMLファイルではなく、複数のリソースファイルをフォルダごと出力する仕様になっているため、ファイルの移動や圧縮・解凍の方法によって構成が崩れると正しく表示できなくなります。本記事では、エクスポートしたHTMLが開けない原因をファイル構成の観点から切り分け、具体的な確認手順と解決方法を解説します。

NotionエクスポートHTMLの基本構成

NotionのページをHTML形式でエクスポートすると、ZIPファイルがダウンロードされます。このZIPファイルを解凍すると、中には次のようなファイルとフォルダが格納されています。

• メインのHTMLファイル(例:ページ名.html)
• HTMLファイルと同名のアセットフォルダ(例:ページ名/ または ページ名_files/)
• アセットフォルダ内には画像ファイル(PNG、JPG、GIFなど)や、埋め込まれたファイルへのリンク情報(実際のファイルは別途ダウンロードが必要な場合あり)

この構成が崩れると、HTMLファイルからアセットフォルダ内の画像などが参照できず、表示が不完全になります。最も典型的な失敗パターンは、ユーザーがHTMLファイルだけを取り出してアセットフォルダを別の場所に移動してしまうことです。

ファイル構成の具体例

例えばNotionで「プロジェクト概要」というページをエクスポートした場合、正しい解凍後のフォルダ構成は以下のようになります。

プロジェクト概要.zip
  プロジェクト概要.html
  プロジェクト概要/ (フォルダ)
    image1.png
    image2.jpg
    その他アセット

HTMLファイルと同名のフォルダが同じ階層にあることが重要です。このフォルダ名はNotionのエクスポート時の設定やバージョンによって ページ名_files となることもありますが、HTMLファイルのベース名と一致している必要があります。

HTMLが開けない主な原因と確認手順

開けない原因は大きく分けて「ファイル構成の問題」「参照パスの問題」「ブラウザの制限」「圧縮・解凍時の問題」の4つです。以下に順を追って確認する手順をまとめます。

1. ZIPファイルを正しく解凍する: まず、ダウンロードしたZIPファイルを右クリックして「すべて展開」を選択します。ドラッグ&ドロップで直接フォルダを取り出すとファイル属性が欠落する場合があります。Windowsではエクスプローラーの「展開」機能を使い、macOSではダブルクリックで解凍してください。
2. ファイル構成を確認する: 解凍されたフォルダを開き、HTMLファイルとその同名のアセットフォルダが同じ階層に存在することを確認します。もしHTMLファイルだけが単独で存在する場合は、ZIPファイルが不完全か、解凍時にエラーが発生した可能性があります。
3. ブラウザでHTMLファイルを開く: HTMLファイルをダブルクリックし、ブラウザで表示します。ページが真っ白な場合はF12キーで開発者ツールを開き、コンソールタブにエラーメッセージがないか確認します。一般的なエラーとして「Failed to load resource: net::ERR_FILE_NOT_FOUND」が表示される場合は、画像やCSSファイルが見つからないことを示しています。
4. アセットフォルダの内部を確認する: アセットフォルダを開き、HTMLファイル内で参照されている画像ファイルが実際に存在するか確認します。HTMLファイルをテキストエディタで開き、src="xxx" や href="xxx" のパスを確認し、その相対パスが正しいか照合します。
5. ファイル名のエンコードを確認する: Notionのエクスポートでは日本語ファイル名がURLエンコードされた状態になることがあります。ブラウザによっては正しく解釈されず、ファイルが見つからないエラーになる場合があります。その場合はファイル名を半角英数字にリネームしてから再度参照パスを修正する必要があります。
6. 異なるブラウザで試す: ブラウザのセキュリティ設定によってローカルファイルの読み込みが制限されることがあります。Chromeの場合は --allow-file-access-from-files フラグを付けて起動するか、EdgeやFirefoxで試してみてください。

失敗パターンとファイル構成の比較表

よくある失敗パターンを表にまとめました。自分の状況と照らし合わせて原因を特定してください。

症状	考えられる原因	確認ポイント
HTMLを開くと真っ白で何も表示されない	HTMLファイルとアセットフォルダが同じ階層にない、または参照パスが絶対パスになっている	フォルダ構成を確認。HTMLファイルをテキストエディタで開き、<link>や<img>のパスが相対パスかを確認。
画像だけが表示されず×印になる	アセットフォルダ内の画像ファイルが存在しない、またはファイル名が一致しない	アセットフォルダを開き、画像ファイルの有無と拡張子を確認。HTML内のsrc属性とファイル名を比較。
ブラウザで「ページが見つかりません」となる	HTMLファイル自体が壊れている、またはZIP解凍に失敗している	ZIPファイルを再度ダウンロードし、別の解凍ソフト(7-Zipなど)で試す。
一部のテキストは表示されるがレイアウトが崩れている	CSSファイルが別途必要なのに含まれていない、または参照が切れている	アセットフォルダ内に.cssファイルがあるか確認。NotionのエクスポートではCSSはHTML内にインラインで埋め込まれるため、通常はCSSファイルはエクスポートされませんが、埋め込みコードなどがある場合は別途必要になります。

ファイル構成を修復する具体的な方法

ファイル構成が崩れてしまった場合、以下の手順で修復を試みてください。ただし、元のZIPファイルが残っていれば再解凍するのが最も確実です。

ケース1: アセットフォルダがない場合

ZIPファイルを解凍した結果、HTMLファイルしか存在しない場合は、ZIPファイルが不完全か、解凍時にエラーが発生しています。Notionから再度エクスポートを行い、同じ現象が再現するか確認します。もし再ダウンロードしても同様なら、Notion側のバグ可能性もあります。その場合はサポートに問い合わせる前に、エクスポート形式を「Markdown & CSV」に変更して試すと、HTMLとは別の形でデータを取り出せます。

ケース2: アセットフォルダはあるが画像が表示されない

アセットフォルダは存在するのに画像が表示されない場合は、HTML内の参照パスが間違っている可能性があります。HTMLファイルをテキストエディタ(メモ帳やVS Code)で開き、src="" の部分を確認します。理想的な相対パスは src="アセットフォルダ名/画像ファイル名" の形式です。もしパスが絶対パス(例:file:///C:/Users/...)になっている場合は、Notionのエクスポート時に絶対パスで書き出されることは基本的にありませんが、何らかの変換ツールを使った場合に起こりえます。その場合は相対パスに書き換えて保存してください。

ケース3: ファイル名が文字化けしている場合

Notionのエクスポートでは、画像ファイル名がURLエンコードされた文字列(例:%E3%82%A4%E3%83%A1%E3%83%BC%E3%82%B8.png)になることがあります。この場合、ブラウザによっては正しくデコードできずファイルが見つからないことがあります。対処法として、ファイル名をシンプルな英数字(例:image1.png)にリネームし、HTML内のsrc属性も同じ名前に修正します。ただし、大量の画像がある場合は手間がかかるため、なるべくエクスポート時にファイル名をシンプルにしておく(ページ内の画像を英数字のファイル名でアップロードしておく)ことが予防策です。

管理者に確認・依頼すべきこと

会社のPCでNotionのエクスポートを使用している場合、次のような理由でHTMLが開けないことがあります。これらはユーザー側で解決できないため、IT管理者やシステム担当者に連絡してください。

• 解凍ソフトの制限: 会社のセキュリティポリシーにより、標準のZIP解凍機能が無効化されている場合があります。管理者に許可を依頼するか、別の解凍ソフト(例:7-Zip)のインストールを申請してください。
• フォルダのアクセス権限: エクスポートしたファイルを特定の共有フォルダに保存する場合、読み取り権限が不足してアセットフォルダ内のファイルにアクセスできないことがあります。権限設定の見直しを依頼してください。
• セキュリティソフトによるブロック: 一部のセキュリティソフトはHTMLファイル内のスクリプトやアセットフォルダへのアクセスを遮断します。例外設定の追加を依頼するか、一旦セキュリティソフトを無効にして(許可されている場合)動作確認を行ってください。
• ファイルサーバーのパス問題: ネットワークドライブ上でHTMLファイルを開く場合、パスが長すぎたり、特殊文字が含まれているとブラウザが認識できないことがあります。ローカルドライブにコピーしてから開くようにしてください。

よくある質問(FAQ)

Q1. NotionからエクスポートしたHTMLをメールで送ったら先方が開けません。どうすればよいですか?

HTMLファイル単体をメールに添付するとアセットフォルダが欠落するため、必ずZIPファイルのまま添付してください。または、OneDriveやSharePointなどのクラウドストレージにZIPファイルをアップロードし、リンクを共有する方法が確実です。

Q2. エクスポート時に「HTML」と「Markdown & CSV」がありますが、どちらを選べばよいですか?

HTMLは見た目を保持したまま書き出したい場合に適しています。Markdown & CSVはテキストベースで軽量ですが、画像は別途リンクとして書き出されるため、オフラインで完全に表示するには画像を個別にダウンロードする必要があります。ファイル構成のトラブルを避けたい場合は、Markdown & CSVを選び、画像は別途エクスポートする方法もあります。

Q3. エクスポートしたHTMLをそのままWebサーバーにアップロードして公開できますか?

理論上は可能ですが、NotionのエクスポートHTMLはスタイルがインラインで記述されており、画像パスが相対パスのため、アップロード先のルートパスと合わないと表示が崩れます。公開を目的とするなら、Notionの公開機能や、別の静的サイトジェネレーターを使うことをおすすめします。

Q4. 解凍したフォルダ内に「.html」ファイルが複数ある場合はどうすればいいですか?

Notionで複数のページをまとめてエクスポートした場合、各ページごとにHTMLファイルとアセットフォルダが生成されます。それぞれのHTMLファイルに対応するアセットフォルダが同じ階層にあることを確認し、目的のページのHTMLファイルを開いてください。

まとめ

NotionからエクスポートしたHTMLが開けない原因のほとんどは、ファイル構成の崩れにあります。まずはZIPファイルを正しく解凍し、HTMLファイルと同名のアセットフォルダが同じ階層にあることを確認してください。画像が表示されない場合はブラウザの開発者ツールでエラーを特定し、必要に応じてファイル名や参照パスを修正します。会社の環境下ではアクセス権限やセキュリティソフトが原因となることもあるため、管理者への相談も視野に入れてください。これらの手順を踏めば、多くのトラブルは解決できるはずです。

🧩

Notionトラブル完全解決データベース 共有、権限、データベース、Notion AI、インポートで止まる問題を横断的に確認できます。