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

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

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

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

WebページのPDF化で崩れる原因は、おもに次の3つです。

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

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

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

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

解決法

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

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

印刷プレビューと、保存したPDFで見た目が違うとき

プレビューでは整っていたのに、保存したPDFを開くと崩れている。この場合は、次の2つを疑います。

プレビューのあとに画像が入った：画像の読み込みが、プレビューを作った時点ではまだ終わっていないことがあります。仕組みは次の原因2と同じです。
余白や倍率の設定がそろっていない：プレビューと保存したPDFで、余白や倍率の設定がそろっていないことがあります。

対処は、ページを最後までスクロールして画像を読み込ませてから印刷画面を開くことです。プレビューの段階で全部の画像が出ているかを確かめ、余白と倍率を手で決めてから保存すると、プレビューとのずれを抑えられます。

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

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

解決法

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

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

PDFにフォントが埋め込まれていないと、表示する環境にあるフォントに置き換わり、文字化けや行のずれが起きることがあります。特殊な字体などでは特に目立つことがあります。

解決法

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

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

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

画像起点：画面を画像として撮るため、見た目は残せます。ただし画面を撮る方式は、撮り方によってはスクロールで読み込まれる部分を取りこぼすことがあります。
記録系：画面の見た目を画像で残し、本文テキストと一緒に保存するため、印刷用の再レイアウトによる崩れが起きにくくなります。保存前にページ全体を一度スクロールして読み込ませてから撮影するため、スクロールで読み込まれる部分も残りやすくなります。

どちらが優れているという話ではなく、何を優先するかで選ぶのがポイントです。見た目を1枚の画像で手早く残したいなら画像起点型、崩れにくく・あとで本文も使いたいなら記録系が向いています。

記録系に切り替えると仕上がりがどう変わるかは、A4 1枚に書き出したときの仕上がりで、ヘッダーに入る項目や長いページの扱いまで具体的に確認できます。

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

Chrome拡張の ArchiveSeal は、画面の見た目をそのまま画像として残し、あわせてページの本文テキスト・URL・保存日時を取得して残す方式です。印刷用の再レイアウトを介さないため、崩れが起きにくくなります。残した PDF のヘッダーには URL と日時が入ります。動画や埋め込み枠は空白になります。

基本の保存・グループ整理・画像 PDF（A4 縮小）の出力と、保存したページの本文の閲覧は無料で使えます。Pro 版では、ページの HTML を保存し、管理画面で元のまま開いて閲覧（オフライン可・文字の選択も可）／保存した HTML を1つのファイルとしてダウンロード／範囲を指定して PDF 出力（テキスト検索に対応）／PDF の連結・一括・A4 分割出力／PDF のテキスト検索対応ができます。崩れに悩んでいるなら、まず無料で同じページを保存して仕上がりを比べてみてください。各方法の全体像はWebページをPDFで保存する方法に、サイト単位の保存はサイトをまるごとPDF化する方法にまとめています。

Pro の機能は 10 日間無料で試せます。登録も決済情報の入力も不要で、期間が終わると自動的に Free に戻ります。

あわせて、Webページ保存ツールの比較・選び方【用途別】もご覧ください。

よくある質問

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

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

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

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

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

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

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

画面の見た目を画像として残すタイプのツールが崩れにくいです。ArchiveSealはこの方式で、印刷用の再レイアウトを介さないため崩れが起きにくくなります。無料では画像PDFとして体裁を残せ、Pro版ではPDFがテキスト検索に対応し、PDFビューアの検索機能で本文を探せるようになります。

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

プレビューのあとに画像の読み込みが終わる、または倍率・余白の設定がそろっていないことがあります。プレビュー段階で全画像が表示されているか確認し、余白・倍率を手動で固定してから保存すると、見た目のずれを抑えられます。

まとめ

WebページのPDF化で崩れる原因は、再レイアウト・遅延読み込み・フォントのおもに3つです。余白と倍率、背景グラフィックの設定、保存前のスクロールで多くは改善します。それでも崩れるなら、画像起点型から記録系へ方式を変えると、崩れにくくなります。ArchiveSeal をChromeに追加すれば、崩れにくい保存を無料で試せます。