WebをPDFにすると崩れる/文字化けする原因と解決法

WebページをPDFにすると、レイアウトが崩れる・文字化けする・画像が抜ける——こうした失敗はとても多いものです。原因を知れば、ほとんどは設定や方法の見直しで防げます。この記事では、崩れる主な原因を3つに整理し、それぞれの解決法を解説します。

Chrome拡張機能「ArchiveSeal」を開発する中で、「崩れずに保存する」ことには特に向き合ってきました。その実体験をもとに、つまずきやすいポイントを具体的に説明します。

結論：崩れる原因はおもに3つ

WebページのPDF化で崩れる原因は、次の3つに集約されます。

印刷用の再レイアウト：画面表示と別に、紙サイズへ組み直されて要素がずれる。
遅延読み込み（lazy-load）：スクロール前の画像が読み込まれず、PDFで空白になる。
フォントの問題：環境依存フォントが置き換わり、文字化けや配置ずれが起きる。

以下で、それぞれの仕組みと対処を見ていきます。

原因1：印刷用の再レイアウトでずれる

ブラウザの印刷機能は、画面表示をそのまま写すのではなく、用紙サイズに合わせてページを組み直します。このとき、横幅の広い表や段組みが折り返され、要素の位置がずれたり見切れたりします。

解決法

余白を「なし（最小）」にする：要素が収まりやすくなります。
倍率を下げる：横幅が収まらない場合は、倍率を90%前後に調整します。
背景のグラフィックを有効にする：背景色や画像が反映され、見た目が画面に近づきます。

これらの印刷設定は仕上がりを大きく変えます。Chromeでの具体的な設定手順はChromeできれいに印刷・PDF化する設定で詳しく解説しています。

原因2：遅延読み込みで画像が抜ける

近年のサイトは、表示速度のためにスクロールして初めて画像を読み込む（遅延読み込み）作りが一般的です。スクロールせずにPDF化すると、まだ読み込まれていない画像が空白のまま保存されてしまいます。

解決法

保存前にページの最後までゆっくりスクロールして、すべての画像を読み込ませます。
読み込みを待ってから印刷・保存します。
それでも抜ける場合は、ページの構造（DOM）から組み立てて保存するタイプのツールを使うと安定します。

原因3：フォントの置き換えで文字化けする

PDFにフォント情報がうまく埋め込まれないと、別のフォントへ置き換わって文字化けや行のずれが起きます。特殊な字体や絵文字、環境依存文字で起こりがちです。

解決法

ブラウザやOSを最新の状態にします。
標準的なフォントで表示されるページなら、ブラウザ印刷でも文字化けは起きにくくなります。
テキストを画像化せず、文字情報を保ったまま出力できる保存方式を選ぶと、文字化けと同時に「あとで本文を選択・検索できない」問題も避けられます。

崩れにくい保存方式という選択肢

ここまでの対処をしても崩れが直らない場合、根本的には保存の方式を見直すのが近道です。

スクリーンショット起点：画面を画像として撮るため、見た目は残せますが、長いページや遅延読み込みに弱い面があります。
DOM抽出起点：ページの構造から組み立てるため、レイアウトを保ったまま崩れにくく、テキストも文字情報として残せます。

どちらが優れているという話ではなく、何を優先するかで選ぶのがポイントです。見た目を1枚の画像で手早く残したいならスクリーンショット型、崩さず・あとで本文も使いたいならDOM抽出型が向いています。

ArchiveSealは崩れにくいPDF化に向く

Chrome拡張の ArchiveSeal は、表示中のWebページをDOMから組み立ててPDF化するため、再レイアウトによる崩れが起きにくいのが特徴です。段組みや表のレイアウトを保ったまま、無料でも画像PDF（A4縮小）として体裁を残せます。

さらに Pro 版では、本文・構造化データの閲覧やJSON書き出しに対応し、出力したPDFはPDFビューアの検索機能で本文を探せます（検索可能PDF・Pro版）。つまり、テキストを文字情報として扱えるのは Pro 版です。崩れに悩んでいるなら、まず無料で同じページを保存して仕上がりを比べてみてください。各方法の全体像はWebページをPDFで保存する方法に、サイト単位の保存はサイトをまるごとPDF化する方法にまとめています。

よくある質問

WebページをPDFにすると崩れるのはなぜですか？

ブラウザの印刷機能が、画面表示を用紙サイズに合わせて組み直すためです。横幅の広い表や段組みが折り返され、要素の位置がずれたり見切れたりします。余白を最小に、倍率を下げる、背景のグラフィックを有効にする、といった設定で改善します。それでも崩れる場合は、構造から組み立てる保存方式が安定します。

PDFにすると画像が真っ白・抜けてしまいます。

スクロールしないと画像を読み込まない「遅延読み込み」が原因のことが多いです。保存前にページの最後までゆっくりスクロールして全画像を読み込ませてから保存してください。改善しない場合は、ページの構造から組み立てるタイプの保存ツールが有効です。

PDFで文字化けします。どうすればよいですか？

フォント情報がうまく埋め込まれず、別のフォントへ置き換わるのが主な原因です。ブラウザやOSを最新にし、標準的なフォントで表示されるページで保存すると起きにくくなります。テキストを画像化せず文字情報を保つ保存方式を使うと、文字化けと検索不可の両方を避けられます。

崩れずにPDF化できるツールはありますか？

スクリーンショット起点ではなく、ページの構造（DOM）から組み立てるタイプのツールが崩れにくいです。ArchiveSealはこの方式で、レイアウトを保ったままPDF化しやすいのが特徴です。無料では画像PDFとして体裁を残せ、Pro版ではテキストを文字情報として扱える（PDFビューアの検索機能で本文を探せる）ようになります。

印刷プレビューと実際のPDFで見た目が違います。

プレビュー後に遅延読み込みの画像が入る、または倍率・余白の自動調整が働くことがあります。プレビュー段階で全画像が表示されているか確認し、余白・倍率を手動で固定してから保存すると、見た目のずれを抑えられます。

まとめ

WebページのPDF化で崩れる原因は、再レイアウト・遅延読み込み・フォントの3つがほとんどです。余白と倍率、背景グラフィックの設定、保存前のスクロールで多くは改善します。それでも崩れるなら、スクリーンショット型から、構造を保つDOM抽出型へ方式を変えるのが確実です。ArchiveSeal をChromeに追加すれば、崩れにくい保存を無料で試せます。