[初回公開] 2021年10月19日
ブラウザで表示したウェブサイトやブログを PDF や印刷する際に、実際に画面に表示されているレイアウトとデザインではなく、印刷用にレイアウトされた状態で出力されてしまうことがあります。そのため、本記事では画面に表示した状態のまま PDF にする方法を紹介します。
このページの目次
１．ブラウザで表示したときと PDF や印刷した時と異なる様子
ウェブサイトをブラウザで表示したときと PDF や印刷したときにレイアウトやデザインが異なることがあります。PDF または印刷時には背景が無くなったり、コンテンツが縦に長くなる傾向が見られます。
まず、ウェブサイトを通常通りブラウザで表示すると、下図のようにヘッダーやメニューなど各所に背景色が付いていることが分かります。レイアウトはニュースサイトでよく見られるような複数列構成で、1 画面内に多くの情報が表示されるようになっています。
このブラウザで表示されたウェブサイトを印刷操作から出力先を PDF に指定して書き出したものが下図です。レイアウトが 1 列になり、背景色が無くなるなど、文字主体の内容に切り替わっていることが確認できます。
２．PDF や印刷時に表示と異なる原因
PDF や印刷時にブラウザの表示と異なる原因は、ブラウザが印刷用紙サイズに自動的に合わせる場合があることと、ウェブサイト側が印刷用のデザインレイアウトを指定している場合があるためです。
ブラウザが用紙サイズに合わせる理由は、横長のディスプレイが主流の現在でも、印刷用紙は縦長の A4 用紙が一般的に使われているためです。そのため、ブラウザはコンテンツが用紙の幅に収まるように自動調整して印刷します。
また、スマートフォン向けサイトのように縦長のレイアウトでも、サイト運営者が印刷用のデザイン（メニューを消すなど）を設定している場合は、表示どおりの印刷にはなりません。運営者側で不要な要素を削除するなど、利用者に配慮した構成になっていることが多いです。
３．ブラウザで表示した状態のままウェブサイトを PDF に変換する方法
ウェブサイトをブラウザ表示の状態のまま PDF に変換するには、印刷から PDF を書き出すのではなく、ブラウザに組み込まれるアドオンなどから直接 PDF 出力を行う方法があります。
例えば Adobe Acrobat では、インストール時にブラウザへアドオンが自動的に組み込まれます。この拡張機能を利用することで、見たままの状態で PDF に変換できます。
ただしアドオンは自動的に有効にならないため、手動で有効化する必要があります。IE の場合は、ブラウザ上部のメニュー部分の空欄を右クリックすると、利用できる追加機能一覧が表示されます。
Acrobat の場合、「Adobe Acrobat Create PDF Toolbar」がアドオンとして追加されます。追加機能一覧から「Adobe Acrobat Create PDF Toolbar」を選択すると「このアドオンを有効にしますか？」というウィンドウが表示されるため、必要な項目にチェックを入れて「有効にする」をクリックします。
アドオンを有効化すると、ブラウザ上部のメニューに PDF 関連のアイコンが追加されます。その中の「変換」アイコンをクリックして PDF を作成すると、表示しているレイアウトのまま PDF に変換することができます。
４．アドオンを使わず PDF にする
ブラウザの拡張機能やアドオンを使わずに、表示したウェブサイトの状態をそのまま PDF にする方法としては、スクリーンショットを活用する方法があります。
画面に表示されている内容を画像としてキャプチャし、その後 PDF に変換することで、レイアウトや背景を保持したまま保存できます。
Windows では Snipping Tool、macOS ではショートカットキーでキャプチャ可能です。
スマートフォンでも「フルページキャプチャ」機能を使えば、長いページもまとめて PDF にできます。
手軽で設定も不要なので、アドオンを導入できない環境でも簡単に画面表示どおりの PDF を作成できます。
５．ウェブサイトをそのまま PDF にするまとめ
ブラウザで表示した状態と PDF 出力時でレイアウトが異なるのは珍しくありませんが、アドオンを活用することで画面に表示されているままのレイアウトで PDF を作成できます。
特に Adobe Acrobat の拡張機能は手軽に導入でき、正確なレイアウト保持に役立ちます。ウェブサイトの見た目どおりに資料化したい場合は、本記事で紹介した方法を試してみてください。
