拡張機能不要!ChromeでWebページを見た目そのままPDF化

Webページを保存して手元に置いておきたかったり、印刷したいときってありますよね。
そんな時はPDFにすると便利です。

いろんなサイトで紹介されているのは、Chromeでページ印刷してPDF化したり、FireShot等の拡張機能を使った方法だったりします。
ページ印刷では見た目そのまま印刷できないことが多いし、なるべく拡張機能を使いたくないので、個人的にはどちらの方法も求める結果ではありません。

▼ページ印刷では見た目そのまま印刷できない例:ブラウザでの表示
拡張機能不要!ChromeでWebページを見た目そのままPDF化

▼ページ印刷では見た目そのまま印刷できない例:Chromeでページ印刷してPDF化
拡張機能不要!ChromeでWebページを見た目そのままPDF化

明らかに右下のバナーの表示が違っているので、見た目そのままでPDF化できているとは言えません。

Chromeのみで拡張機能を使わずWebページを見た目そのままPDF化できる方法を考えたので、ご紹介します。
Windowsでのご紹介になりますが、Macでも同じように可能だと思います。

Chromeで拡張機能を使わずWebページのスクリーンショットを撮る

Chromeでスクリーンショットを撮りたいページを開いている状態で、キーボードで以下を押してデベロッパーツールを開きます。

  • Windows:F12 または Ctrl+Shift+i
  • Mac:Command+Option+i
拡張機能不要!ChromeでWebページを見た目そのままPDF化

デベロッパーツールの、タブレットとスマートフォンが重なっているようなアイコンをクリックして、デバイスモードを開きます。

拡張機能不要!ChromeでWebページを見た目そのままPDF化
拡張機能不要!ChromeでWebページを見た目そのままPDF化

必要に応じて表示させるサイズを変更します。
パソコン版を表示させる時は、「Edit…」を選択して、Emulated Devicesより「Laptop with HiDPI screen」と「Laptop with MDPI screen」にチェックを入れて追加し、お好みでいずれかを選択します。

拡張機能不要!ChromeでWebページを見た目そのままPDF化
拡張機能不要!ChromeでWebページを見た目そのままPDF化
拡張機能不要!ChromeでWebページを見た目そのままPDF化

スマートフォン版やタブレット版を表示させる時は、表示させたい機種を選択します。

拡張機能不要!ChromeでWebページを見た目そのままPDF化

Webページによってはサイズを変更した後、適したサイズが表示されないこともあるので、リロードして再表示させることを推奨します。

左カラムの右上の、点が縦に3つ並んでいるアイコンをクリックします。

拡張機能不要!ChromeでWebページを見た目そのままPDF化

表示されたメニューより「Capture full size screenshot」をクリックすると、表示されている状態でスクリーンショットが撮られ、撮られたスクリーンショットが自動的にダウンロードされます。

拡張機能不要!ChromeでWebページを見た目そのままPDF化

スクリーンショットをChromeで開いてPDF化する

ダウンロードされたスクリーンショットをChromeにドラッグ&ドロップをして開きます。

拡張機能不要!ChromeでWebページを見た目そのままPDF化

縮小した状態で開かれるので、マウスカーソルを画像に重ねて虫眼鏡アイコンが「+」になっていることを確認してクリックします。

拡張機能不要!ChromeでWebページを見た目そのままPDF化
拡張機能不要!ChromeでWebページを見た目そのままPDF化

スクリーンショットが100%表示されている状態で、印刷を実行します。

拡張機能不要!ChromeでWebページを見た目そのままPDF化

送信先が「PDF に保存」となっている状態で、保存をクリックしてファイルを保存して完了です。

拡張機能不要!ChromeでWebページを見た目そのままPDF化

お好みでレイアウトや詳細設定を変更するのも良いと思います。
僕は、レイアウトを「横」、余白を「なし」にしています。

拡張機能不要!ChromeでWebページを見た目そのままPDF化

スクリーンショットを1ページでPDF化したい場合

Webページのように縦長の場合は、これまでご紹介した方法ではどうやってもPDFが複数ページになってしまいます。
スクリーンショットをそのまま1ページのPDFとして作成するには、なんらかのPDF作成ソフトを利用する他なさそうです。
本家のAdobe Acrobat DCでは可能なことを確認していますので、そういった用途をご要望の方は、PDF作成の部分のみ導入をご検討されてはいかがでしょうか。

PDFを結合したい時はこちら

コメント

タイトルとURLをコピーしました