ホームページを印刷したらレイアウトが崩れるのは何故? ブラウザ別解決方法を解説

Web 体裁

ホームページの画面全体を印刷したいという場面がありますよね。そんな時、ホームページを開きいつものように「印刷」をクリックすればプリントアウトは可能ですが、PCで見たままのレイアウトではなく、酷いものでは文字が端に寄っていたり、フォントがまるで違っていたり、画像が表示されていないということがあります。何故このような表示で印刷されるのでしょうか。

webデザインの体裁崩れ

レイアウトを崩さずに、PCに表示されたままの状態を印刷するにはどうしたら良いのでしょうか? 今回はホームページの体裁崩れをさせずに美しく印刷する方法を解説いたします。

印刷したホームページが体裁崩れを起こす理由

レスポンシブデザインもしかしたら自分の持っているPCが壊れてしまったからかもしれない、と思われるかもしれませんが、原因はPCやプリンター側ではなく、実はWebサイトの構造に原因があるのです。
最近のWebサイトは“レスポンシブWEBデザイン”で作られていることが主流となっております。レスポンシブWEBデザインとはWebサイトのデザインを、閲覧ユーザーが使用するデバイスの画面サイズに応じて表示レイアウトを最適化する、というWEBデザイン構造を意味します。これまで多くのユーザーはPCからWebサイトを閲覧しておりましたが、近年はユーザーの使用デバイスにスマートフォンやタブレットなどが加わり、更にはテレビやビデオゲーム機に至るまで、多種多様な画面サイズの異なるデバイスが増えております。そのため、現在はあらゆる画面サイズで柔軟に可変させることで、使い勝手を向上させるレスポンシブWEBデザインに注目が集まっているのです。
しかし、そのレスポンシブWEBデザインという構造が裏目に出てしまい、印刷をした際には意図しないレイアウト崩れが起きてしまうのです。基本的にWebサイトはPCやスマートフォンなどのデバイスの画面上で見るものであって、ペーパーレス化を推進する現在においては、紙で印刷をすることは想定されておりません。そのため、このようなWebサイトを見た目のまま印刷するためには、ほんの少しの工夫が必要なのです。

Webサイトを画面のまま印刷する方法

ホームページを画面で見たまま印刷したい!じゃあWebサイトの構造から変更しよう…! なんてことはできません。ですので、今回ご紹介する「Webサイトを画面で見たまま印刷」する方法としては、お使いのインターネットブラウザの設定の解決策をご紹介いたします。

Google Chromeの場合

<ソフトウェア・拡張機能>
Google ChromeまずはブラウザシェアNo.1のGoogle Chromeの場合です。「Awesome Screenshot」という機能拡張ソフトウェアを検索し、Chromeにインストールします。拡張機能とは、ブラウザに様々な機能を追加でき、使いこなすとWebサイトの閲覧がとても便利になる仕組みです。
この「Awesome Screenshot」なら、ホームページの体裁崩れなく印刷できます。印刷したいホームページを開いたら、右上の「Awesome Screenshot」のアイコンをクリックし、「Capture entire page」を選択します。画面が切り替わりますが、そこからはいつも通り印刷マークを押してプリントアウトしてください。この「Awesome Screenshot」という機能拡張の良いところは、複数ページにわたって印刷が可能な点です。文字が小さくなってしまうことを防ぐため、読みやすい状態での印刷が可能です。また、他にはホームページから「印刷」→「詳細設定」→「背景のグラフィック」チェックボックスを設定るすと、背景印刷の有無を選べます。

Safariの場合

<拡張機能>
SafariSafari(Mac)でホームページを印刷する場合も拡張機能を追加します。Google Chromeと同じ「Awesome Screenshot」をインストールして印刷を行ってください。こちらはGoogleChromeでご紹介した操作方法と同じになります。

Firefoxの場合

<印刷設定・拡張機能>
Firefoxこちらも同じく、「印刷」→「ページ設定」→「背景色と背景画像を印刷」のチェックボックスにチェックを入れOKをクリックします。
また、FireShotというホームページ全体のスクリーンショットを撮影する拡張機能を利用してみると良いでしょう。
拡張機能であるFireShotをダウンロードし、拡張機能としてFirefoxのブラウザページの右上にアイコンが表示されます。アイコンをクリックし、「ページ全体をキャプチャ」という項目が表示されるため「印刷」と書かれているボタンをクリックして印刷しましょう。

Internet Explorerの場合

<印刷設定・Adobe Acrobat>
Internet Explorerこちらも簡単な方法としては、「印刷」→「印刷プレビュー」→「ページ設定」ダイアログの「背景の色とイメージを印刷する」のチェックボックスにチェックしてOKボタンをクリックしましょう。
Acrobatがインストールされている場合は「Adobe Acrobat Create PDF Toolbar」を、Acrobat Readerがインストールされている場合は「Adobe PDF」を選択して有効にすることで体裁崩れなしの印刷が可能になります。
しかし、これらは印刷プレビューでホームページが適切に表示された場合です。もし印刷したいホームページがIE(Internet Explorer)の印刷プレビューで適切に表示されなかった場合は、Google Chromeや他のブラウザをインストールして印刷した方が良いでしょう。ちなみに、マイクロソフト社はIEのサポート提供を2022年6月15日(日本時間16日)に終了すると宣言しているため、まだIEをご利用の方はMicrosoft Edgeか、その他のブラウザへの切り替えをお勧めします。Microsoft EdgeはPDFとして保存して印刷をすると画面の構成のまま印刷できるでしょう。もし体裁が崩れてしまった場合はGoogle Chromeに切り替え、Awesome Screenshotの方法を試すと良いでしょう。

アプリケーション

screen shot<スクリーンショット(アプリ)>
上記でご紹介してきた印刷方法は、拡張機能や印刷設定などでしたが、アプリケーションでホームページを綺麗に印刷することも可能です。下記のようにアプリケーションを使用して、Webサイトをスクリーンショットして印刷する方法もございます。

Mac

・WebScreenshot
Webサイトを長く一枚にしたキャプチャを印刷できます。
・Webキャプ
Webページを丸ごとキャプチャし、画像で保存が可能です。

Windows

・QuickCapture
日本語でわかりやすく、スクリーンショットの共有も可能です。
・Screenshot One Pro
英語ですが、Webページ全体をスクリーンショットできます。

※こちらのアプリケーションはMac、iPhone、iPadには対応しております。詳細はApp Storeをご覧ください。
以上がWebサイトを画面で見ているまま印刷する方法になります。このように何かをインストールしてまで時間をかけたくない、一枚に繋がっているなどの綺麗さは求めていないという方には、PC自体のスクリーンショットで解決すると良いでしょう。

<スクリーンショット(OSショートカットキー)>

Mac

スクリーンショットを撮るには、「shift」「command」「4」の 3 つのキーを同時に長押しします。
また、切り取りたいときは、「shift」「command」「4」の 3つのキーを同時に押すと切り取りカーソルが出てきます。これらはデスクトップに保存されます。

Windows

「Windows」キーを押しながら 「Print Screen」 キーを押すと、画面全体のスクリーンショットが撮れます。
また、「Windows」キー+「Shift」キー+「S」キーを同時に押し、「切り取り&スケッチ」を起動させて切り取るという方法もございます。

筆者の感想としては、Google Chromeの「Awesome Screenshot」ソフトウェアと、アプリケーションのWebキャプの使用感が簡単で良いと思いました。ホームページを紙資料として使用する際に、体裁が崩れてしまうホームページの場合は上記の方法を試してみてください!

富士ゼロックス 富士フィルムビジネスイノベーションApeosPortⅦ-C2273 シャープMX-2661 IR-ADVANCE-C3520F-II

関連記事

  1. 社名の由来

    そういう意味があったなんて!驚きの複合機メーカー各社の社名の由来とは

  2. お金

    複合機の値段の相場とは?リース価格について徹底解説!

  3. レーザープリンター

    テレワークに最適なオススメ小型レーザープリンター特集

  4. 三方良し

    三方良し

  5. Windows_11

    Windows11 複合機メーカー6社のプリンタードライバー対応状況

  6. jameswatt

    最古のコピー機はいつ、誰が、どうやって?コピー機の歴史ざくっり解剖!

お問い合わせフリーコール

  1. 情報

    公正な視点で、正確な情報を

    2020.10.07

  2. 複合機のテレワーク化

    忘れていませんか? 複合機のテレワーク化!

    2020.08.15

  3. M1Mac

    M1Mac&macOS BigSur 複合機メーカー6社のプリンタードライバー対…

    2021.06.10

  4. チラシ作成の基礎講座|あなたもデザイナーになれる5つのポイント

    2021.10.15

  5. 複合機・プリンター選びのコンシェルジュ、事務機器ねっとのトリセツ

    2021.04.16

  1. お金

    複合機の値段の相場とは?リース価格について徹底解説!

    2020.12.08

  2. 複合機 掃除

    複合機のお手入れしていますか? 定期的なクリーニング方法をご紹介

    2021.02.23

  3. 裏技

    複合機のちょっとした裏ワザ!知ってて損はありません。

    2021.02.03

  4. documentcloud

    各メーカーの最新機能、ドキュメントクラウドを比較紹介!

    2021.02.08

  5. お金 印刷

    お金はコピーできないってホント?コピー機の偽札防止対策とは!

    2021.01.12

プリンター・複合機リース等に関するご相談や見積依頼は無料。他店より1円でも高い場合はご相談下さい!
とにかく問い合わせしてみる