ミーティングや打ち合わせの資料用にWebページを印刷して！とか言われることってないですか？いまだにあるのです。ノートPCやタブレットを持ち歩いて見せればいいじゃんっていう話なんですが、どうしても紙にして持っていきたいということが。
そんな時にブラウザから普通に印刷しても期待通りに印刷されないことは多々あります。テキストが小さすぎたり、画像が表示されていなかったり、レイアウトが崩れたり。このような場合、イライラしてしまいますよね。
また、Webページを印刷したいけど広告とかは省きたい、必要な部分だけ印刷したいということもよくあります。
この記事では画面に表示されているのと同じようにWebページを印刷する方法、いらない部分は省いて印刷する方法を紹介します。
Webページを見たまま印刷できない原因は
WebページのデザインにはCSSというスタイルシートが使われています。通常、CSSはPCモニターやスマホ画面に合わせて設定されていてプリント用には最適化されていない場合、印刷するとWebページのレイアウトが崩れることがあります。
また最近のWebサイトはほとんどがレスポンシブデザインで、デバイス（PC、スマホ、タブレット）の幅に合わせて、レイアウトを調整するようになっています。
しかし印刷時のレイアウトは想定されていない場合があるため、画像やテキストの配置が変わってしまたり、画像の解像度が低いと印刷でぼやけたりという問題が起きることがあります。
Webページを見たまま印刷できないよくある事象・背景画像が印刷されない
見た目通り印刷できないという問題でよくあるのは、Webサイトのメインビジュアルなどの画像や、背景画像が印刷できないということです。でもこれはブラウザの設定で解決できることが多いです。
Webサイトで背景画像として配置されている画像は、初期状態では印刷されない設定になっています。
例として、Appleのホームページ。Macのページは画面ではこのように表示されています。
このページを印刷しようとすると。。。印刷プレビューは無残なイメージが表示されています。
Safariの背景画像をプリント設定
印刷設定にある「背景をプリント」にチェックを入れます。これで背景画像がプリントされます。（Mac Safariの場合）
Firefoxの背景画像プリント設定
プリントプレビュー画面の下へスクロールしていくと「背景画像をプリントする」があります。
Google Chromeの背景画像プリントの設定
Google Chromeの場合、印刷プレビュー画面で「詳細設定」をクリックすると新たに設定項目が表示されます。その中のオプションにある「背景のグラフィック」にチェックを入れます。
Webページを見た目通りそのまま印刷する方法- スクリーンショットを撮って印刷する
上記のAppleサイトの印刷プレビューをみると、背景画像の印刷はできますがレイアウトは画面で見た通りにはなっていません。このような場合は、ページ全体を画像化して印刷する方法があります。
Webサイトのような縦に長いページのスクリーンショットを撮る場合は、ブラウザの拡張機能を使うのが一番手軽です。
スクリーンショットが撮れる拡張機能
- Awesome Screenshot（Google Chrome, Edge, Firefox, Safari ）
スクリーンショット以外にも画面録画もできる。 - Save Page WE （Chrome, Firefox）
以前はPearl Crescent Page Saverという名前でしたが変わったようです。固定されたナビゲーションバーが繰り返さずキャプチャできるようです。 - GoFullPage - Full Page Screen Capture （Chrome）
ページ全体のスクリーンショットを撮るのみのシンプルな拡張機能。画像以外にPDFにも出力可能。 - FireShot（Chrome, Firefox, Safari）
ページ全体、見えている部分、選択した範囲でスクリーンショットを撮ってPNG JPG, PDFに出力できる。
Awesome Screenshotを使ってプリントアウトする方法
AwesomeScreenshotをインストールし、スクリーンショットを取ります。
- 表示部分のみ
Ctrl + Shift + G - 選択範囲
Ctrl + Shift + S - フルページ
Ctrl + Shift + E
完成したスクリーンショット画面からプリントをクリックすると、取ったスクリーンショットをそのまま印刷することができます。
FireShotでプリントアウトする方法
FireShotでも同じようにスクリーンショットを撮った状態からプリントすることができます。
長いWebページを分割してPDFにしたい
ランディングページなど長ーいWebページを分割してPDFにして保存する方法。上記の手順でFireShotやAwesome Screeeshotを使って、フルページのスクリーンショットを撮ってプリント出力するところから、PDFとして保存します。
Windowsの場合（Windows10以降）
Windows10から「Microsoft Print to PDF」という仮想プリンタドライバが標準でインストールされているので、これを使えばPDFに出力することができます。
Microsoft Print to PDFを使う方法は、ブラウザから印刷を開き、プリンタの中から「Microsoft Print to PDF」を選ぶだけです。
Macの場合
Safariなら印刷プレビュー画面、左下にPDFというメニューがあります。そこからPDFを保存を選びます。
Chromeの場合は同じく印刷プレビュー画面の詳細設定を開くと「PDFをプレビュー」という項目があります。クリックするとプレビューappが開きます。
Chrome拡張機能：GoFullPageで分割されたPDFを生成する
GoFullPageを使うと、自動的に分割したPDFを生成してくれます。
いらない部分を印刷しない、必要な部分だけ印刷する、1ページに収まるように印刷する方法
ここからはWebページでいらない部分は印刷せずに必要な部分だけを印刷する方法。
印刷したい部分を選択して印刷する
- Webページ上で印刷したい範囲をマウスでドラッグして選択します。
- 選択した状態で、右クリックで印刷を選択します。
- 印刷範囲として「選択した部分」を選択して印刷。
範囲を選択してから、通常の印刷メニュー（Ctrl + P、Cmd + P）で開くと、印刷範囲がページ全体になってしまう場合があります。
ブラウザによっては「選択した部分」という機能がない場合があります。印刷プレビューを確認してみて選択範囲のみがプレビューされていればOKです。
Print What You Like で印刷内容をカスタマイズして1ページに収める
PrintWhatYouLikeは、ブックマークレットで利用できるツール。（私はいつもこれを使っています）
http://www.printwhatyoulike.com/
PrintWhatYouLikeを使うと印刷内容をカスタマイズできるので、複数ページにまたがってしまっているWebページを、印刷しなくていいものを除去して1ページに収めることができます。
Print What You Likeを使い方は以下のようになります。
- ブラウザのブックマークバーにこのツールのリンクをドラッグ＆ドロップしてブックマークします。
- 印刷したいページを表示し、保存したブックマークレットをクリック。
- すると、左サイドバーに操作ボタンが表示、印刷するページ上にはツールバーが表示されます。
- 記事中にある広告などを印刷したくない場合は、広告を選んでツールバーの「Remove」をクリック
- 印刷内容をセレクトしたら左サイドバーの「Print」をクリックするとカスタマイズした状態で印刷が行われます。
Chromeなら拡張機能もあります。
PrintWhatYouLike
https://chrome.google.com/webstore/detail/printwhatyoulike/npgfabafajliaooeicdoahbpoajfmbbe?hl=ja
以上、Webページをみた通りそのまま印刷する方法と、不要な部分は印刷しないで1ページに収めて印刷する方法を紹介しました。
ブラウザやOSによってやり方が異なりますが拡張機能を活用すれば、希望通りにWebページを印刷することができるのではないかと思います。
参考になれば幸いです。
