【PC版】ChromeブラウザでWebサイトをPDF保存する方法

PC版ChromeブラウザからWebサイトをPDFに変換して保存する方法です。

Webサイトのレイアウトをあまり崩さずに見たままを保存することもできますし、必要なページだけPDF化することも可能です。

Webサイトそのまま再現できる場合とそうでない場合があります。

拡張機能のインストールをしなくてもChromeブラウザのみでできます。

この記事ではPC版のChromeブラウザでの手順をご紹介しています。

目次

WebサイトをPDFで保存するメリット・デメリット

Webサイトのデザインをあまり崩さずそのまま保存できる

デザインを【あまり】崩さずに保存はできるのですが、Webサイトによっては大幅に崩れます。

特に崩れやすいのがレスポンシブウェブデザインのサイト。

PC用、スマホ用、タブレット用にそれぞれ見やすいデザインが用意されているのですが、そのようなサイトでは印刷やPDF保存時にデザインが崩れやすいです。

まさにこのサイトがそうです。

完全な状態で保存したいのであればスクリーンショットで画像として保存するのが確実です。

選択したページだけを保存できる

Webサイトって基本的に縦に長いし、別のページへのリンクやメニューなどが含まれて「PDFファイルにすると15ページになった」なんてこともあります。

Chromeブラウザでは、PDFにしたいページだけを指定して保存ができます。

文章をコピーしたり、リンク先にアクセスもできる

Webサイトを見たままの完全な状態で保存したいのであればスクリーンショットで画像として保存するのが一番です。

ただ画像だと文章をコピーできないので、使い方によっては不便です。

ChromeブラウザでPDFファイルに変換すると、テキスト部分はそのままなのでコピーできますし、リンクもクリックしてリンク先にアクセスできます。

WebサイトのPDF化で一番のメリットだと思います。

印刷が簡単

PDF形式での保存なので、あとあと印刷する必要があった場合に楽です。

Webサイトが残っていれば良いんですけど、削除されてしまうことも多いですからね。

WebサイトをPDFで保存する方法

1ChromeブラウザでPDFで保存したいWebサイトを開いて、右上の縦の3点リーダーアイコン [ ] をクリック > [ 印刷 ] をクリック。

Google Chromeの設定を開く

2[ 送信先 ] から [ PDFに保存 ] を選択。

送信先を「PDFに保存」にする

3[ ページ ] で保存するページを指定します。

複数ページある場合はページプレビューをスクロールするとページ数が表示されます。

保存するページを指定する

項目 保存されるページ
すべて 全ページがPDFに保存されます。
カスタム 指定したページだけを保存します。

保存するページを指定する

指定したページだけを保存する場合は [ カスタム ] を選択します。

すると、下に入力ボックスが現れるのでそこに保存したいページ番号を入力します。

左のプレビュー画面でページ番号を確認できます。

■ 1ページ目だけを保存する場合

1

■ 3ページ目~4ページ目を保存する場合

3-4

■ 2ページ目と4ページ目~6ページ目を保存する場合

2,4-6
半角の数字じゃないとエラーになりますのでご注意ください。

4[ レイアウト ] は [ 縦 ] か [ 横 ] を選びます。

縦長か横長にするかを選択

プレビューを確認して最適な方を選びましょう。

5[ 詳細設定 ] をクリックすると、細かい設定項目が出てきます。

詳細設定を表示させる

項目 内容
用紙サイズ 用紙の大きさを選択
1枚あたりのページ数 用紙1枚に何ページ分入れるか選ぶ
余白 用紙の上下左右にどのくらい余白を入れるか設定する
倍率 [ カスタム ] にして倍率を調整可能
オプション ヘッダー・フッター・背景を印刷するか

ポイント

  • [ 1枚あたりのページ数 ] を「1」以外にすると [ 余白 ] の設定はできません。

  • 「あと少しで1ページに収まるのに!」ってときは、倍率を小さくしてみると良いですよ!

  • [ オプション ] の [ ヘッダーとフッター ] にチェックを入れると上の余白に日付とWebサイトのタイトル、下の余白にURLとページ数が入ります。

  • [ オプション ] の [ 背景のグラフィック ] にチェックを入れると、Webサイトの背景に設定されている色もPDFに反映されます。

背景のグラフィックありとなしの違い

背景のグラフィックとは少し分かりづらいですが、背景色として設定されている色をつけるか、つけないかの設定になります。

下の画像をご覧ください。

背景のグラフィックのオンとオフの違い

小さくて見えないですが、左上に黒字で「日本経済新聞」とあります。

右端の画像(実際のWebサイト)は、その下の横に紺色のラインがありますね。

それが背景グラフィックとして扱われていて、[ 背景のグラフィック ] にチェックを入れると、より実際のWebサイトに近い状態でPDFに保存できます。

他にも右のサイドメニュー付近に違いがあるのがわかると思います。

ちなみに上の画像の左と真ん中は以下の設定で保存したPDFファイルです。

  • 余白なし
  • 倍率は既定
  • ヘッダートフッターなし

6設定が終わったら [ 保存 ] をクリック。

保存する

7PDFの名前を入力して、保存先を決めたら [ 保存 ] をクリック。

名前を付けて保存する

選択した部分だけを保存する方法

カーソルで選択した部分だけをPDFに保存することも可能です。

1保存したい部分をカーソルで選択 > 青色に反転した場所の上にカーソルを置き右クリック > [ 印刷 ] をクリック。

選択した部分だけを保存する

2印刷の設定をして [ 保存 ] をクリック。

選択した部分だけをPDFで保存

ニュースの記事本文だけを選択して保存してみると、下の右の画像のようになります。

選択した記事部分だけを保存したPDF

記事本文だけを選択することにより、実際のWebサイトにある広告や右サイドのメニューなどが含まれないのでスッキリしますね。

上の右の画像は以下の設定でPDF化したものです。

  • 余白は既定
  • 倍率は既定
  • ヘッダートフッターなし

確認した環境

  • Windows 10
  • Chrome 83.0.4103.61(2020年5月26日時点での最新バージョン)
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

なんか色々やってます。

目次