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

Web 体裁
オススメ機種をさがす|コピー機 レコメンド・シミュレーター

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

webデザインの体裁崩れ

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

<目次>
印刷したホームページが体裁崩れを起こす理由
Webサイトを画面のまま印刷する方法
Google Chromeの場合
Safariの場合
Firefoxの場合
Internet Explorerの場合
アプリケーション

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

レスポンシブデザインもしかしたら自分の持っている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」をインストールして印刷を行ってください。こちらはGoogle Chromeでご紹介した操作方法と同じになります。

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キャプの使用感が簡単で良いと思いました。ホームページを紙資料として使用する際に、体裁が崩れてしまうホームページの場合は上記の方法を試してみてください!

“事務機器ねっとコラム”監修者 プロフィール
大塚さん

複合機のメンテナンスエンジニアとして業界歴26年以上のキャリアから、フィールドエンジニアグループのマネージャーとして事業部を統括。凡そ4万5,000回以上の複合機メンテナンス実績があり、コピー機やプリンターを隅々まで熟知。お客様が抱えられている課題やお悩みに対して真摯に向き合ってサポートすることがモットー。これまでに培った多くの知見と経験を活かした有益な情報を発信いたしますので、少しでもお役立ていただけると幸いです。[富士フイルム・キヤノン・シャープ・エプソンの複合機メンテナンス許可認定] » 監修者インタビュー記事

勤怠管理システム「Dr.オフィスLookJOB2」は人数無制限ながら月額9,800円のみの定額制
富士ゼロックス 富士フィルムビジネスイノベーションApeos C6580コピー機リース シャープBP-60C26コピー機リース imageRUNNER ADVANCE DX C3835Fコピー機リース
オススメ機種をさがす|コピー機レコメンド・シミュレーター

この記事を読まれた人はこちらの記事もチェックしています

  1. 斜め

    傾き印刷のイライラ解消!5つの原因を解決する補正方法

  2. ファイル

    無料でPDF変換・編集できる便利なオンラインサービス6選

  3. 廃トナーボックス

    廃トナーボックスって何だ!? 故障を防いで清潔に保つ縁の下の力持ち

  4. M1Mac

    M1Mac&macOS BigSur/Monterey 複合機メーカー6社のプリンタードライバー対応状況

  5. 蛍光ピンク

    世界初!蛍光ピンク大判プリンターimage PROGRAF誕生

  6. 危険

    複合機からの情報漏えいにご注意!今すぐセキュリティ設定を要チェック

  7. スモールオフィス

    スモールオフィス・店舗・個人事業主向けに最適な複合機6選

  8. プリントサーバー

    プリントサーバーの今昔解説

  9. 検定

    目指せ!複合機博士。“事務機器ねっと検定”に挑戦

  10. レーザープリンター

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

  11. インク2

    モノクロ印刷なのにカラーインクが減るのはなぜ?

  12. 電帳法

    【解説】改正 電子帳簿保存法。コピー機で文書管理対策が完結

“プロの目利き”で、最適なコピー機選びをご支援。

  1. 複合機の寿命って何年? 替え時の適切なタイミングと…

  2. 落とし穴

    月額リース2,400円コピー機の落とし穴。安さにはワケ…

  3. 悩む人

    複合機選びは販売店選びから。ヤンチャな営業と出逢…

  4. OK Go

    コピー紙が魅せる映像美。CGではなくアナログ表現に拘…

  1. お金 印刷

    お金はコピーできないってホント?コピー機の偽札防…

  2. エラーコード コピー機

    1分でわかる、コピー機エラーコード完全攻略マニュア…

  3. 裏技

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

  4. 社名の由来

    そういう意味があったなんて!驚きの複合機メーカー…

コピー機・プリンターリース価格満足度 第1位事務機器ねっとは「コピー機・プリンターリース価格満足度 第1位」と「コピー機・プリンター販売サイト導入後のサポート満足度 第1位」の二冠を獲得しました。

経済産業省認定
経済産業省認定「スマートSMEサポーター」第37号‐24020002

JIS Q 27001:2006(ISO/27001:2005)
ISO/ISMS(適用範囲:HCグループ)
一般人材派遣業:労働大臣許可 派13-01-0526
人材紹介業:労働大臣許可 13-ュ-010435
宅地建物取引業:東京都知事(2)第98397号
一般建設業:東京都知事許可(般-1)第150856号
高度管理医療機器等販売/貸与業第5502205165号