WEBサイトのページを印刷したいとき、右クリックして印刷ボタンを押すと、WEBサイトのレイアウトがぐちゃぐちゃになって印刷される…
その理由は、プリンターがCSS(WEBサイトの文字色や大きさを変えられる言語)に対応していないからです。
WEBサイトのページを綺麗に印刷したいなら「FireShot」の利用がおすすめ。
【FireShotが便利な4つの理由】
- Webサイトの印刷時にレイアウトが崩れない
- 全体ページのキャプチャが一瞬で、綺麗におこなえる
- 縦に長いページでも、切れ目のない1つの画像・PDFで保存できる
- ページ全体だけでなく、特定の箇所だけもキャプチャできる
【使える場面例】
- Webサイトを印刷したい時に
- Webデザインをトレースしたい時に
- ライバルサイトのデザイン・テキストを確認したい時に
- サイトの修正をしたい時に(言葉だけではわかりにくい説明も、画像を使えば理解度アップ)
そんな便利なChromeの拡張機能「FireShot」を使って、サイト全体をキャプチャしPDF保存する方法を紹介します。
手順1:Googleで「FireShot」を検索、もしくは下記のURLをクリック
※ブラウザは(インターネットのホームページを見る際に使うもの)は「Chrome」でないと、拡張機能が使えません。インターネットエクスプローラー(IE)、Safariを使っている方は「Chrome」をダウンロードしましょう。
https://www.google.com/chrome/
![](https://www.autoproject.nagoya/wp-content/uploads/1googleでfireshotと入力-1024x352.png)
https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg?hl=ja
手順2:Chromeに追加→拡張機能を追加→許可をクリック
![](https://www.autoproject.nagoya/wp-content/uploads/2Chromeに追加をクリック-1024x294.png)
![](https://www.autoproject.nagoya/wp-content/uploads/2.5拡張機能を追加-1024x559.png)
![](https://www.autoproject.nagoya/wp-content/uploads/3許可をクリック.png)
FireShotがない!パズルマークを押して、ピンマークをクリックすれば、表示(固定)されます。
![](https://www.autoproject.nagoya/wp-content/uploads/固定すればいつでも表示sれる.png)
手順3:キャプチャしたいページを選び、FireShotをクリック「ページ全体をキャプチャ」を選択
![](https://www.autoproject.nagoya/wp-content/uploads/4キャプチャしたいページを開き、ページ全体をキャプチャを選択.png)
手順4:キャプチャされたページの確認画面が出るため、PDFで保存を選択、名前をつけて保存で完成
![](https://www.autoproject.nagoya/wp-content/uploads/5スクリーンショットをPDFで保存を選択-1024x533.png)
![](https://www.autoproject.nagoya/wp-content/uploads/6名前をつけて保存-1024x585.png)
Chromeの拡張機能とは
スマホでいう「アプリ」のようなもの。拡張機能を入れることで、
- ページ全体のスクリーンショットが行える
- サイトになんのフォントが使われているかわかる
- 何色が使われているかわかる
など、様々なことができる便利な機能です。