【簡単】ホームページ全体or一部のスクリーンショットを撮る方法

縦長のホームページのスクショを撮りたいんですが、上手くいきません…

よくこんなご質問をいただくことがあるので、今回は『ホームページ全体or一部のスクショを撮る方法』について解説したいと思います。

縦長のホームページなどの場合で、ホームページ全体を丸ごとスクショしたい方は、下記目次から「拡張機能を使ってホームページ全体 or 一部のスクリーンショットを撮る方法（パソコン）」にジャンプしてご覧ください。

キーボードを使ってホームページのスクリーンショットを撮る方法（パソコン）

まずは、キーボードでホームページのスクショを撮る方法を押さえておきましょう。

撮ったスクショは、ペイントやWordなどのソフトに貼り付けて（Ctrl+V）保存します。

ただ、『スクショを撮って、ソフトに貼り付けて保存』っていう手順がちょっと面倒ですよね。

そこで、次項にてもっと簡単にスクショを撮る方法を解説します。

拡張機能を使ってホームページ全体 or 一部のスクリーンショットを撮る方法（パソコン）

Google Chrome、または、Firefoxには『FireShot』という拡張機能があります。

ウェブページ全体をスクリーンショット – FireShot（https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg?hl=ja）

この『FireShot』を使うと、キーボードよりも簡単＆手早くスクショを撮ることができます。

こちらの方法の場合、縦長のホームページであっても、ホームページ全体を丸ごとスクショすることができます。

ブラウザはGoogle Chromeのほうがおすすめなので、今回はGoogle ChromeでFireShotを使う方法を解説します。

1.FireShotを開き、[Chromeに追加]をクリック

▼FireShot（※別の画面で開きます）
https://chrome.google.com/webstore/detail/take-webpage-screenshots/mcbpblocgmgfnpjjppndjkmgjaogfceg?hl=ja

2.[拡張機能を追加]をクリック

3.アドレスバーの右にあるパズルのマークをクリック

4.FireShotのピンのマークをクリック

↓ピンのマークをクリックすると、FireShotのマークが追加されます。

これでスクショを撮る準備が整いました！

5.スクリーンショットを撮りたいホームページを開き、FireShotのマークをクリック

「ページ全体」「表示部分」「選択範囲」の3つから選んで、スクショを撮ることができます。

6.いずれかの方法でスクショを撮り、[画像として保存] or [PDFとして保存]をクリック

FireShotというフォルダが作成され、フォルダ内にスクショが保存されます。

PDFの場合、矢印ボタンをクリックすると、色々なカスタマイズも可能です。

スマホ（iPhone・Android）ホームページのスクショを撮る方法

今回は、パソコンからスマホ（iPhone・Android）版ホームページのスクショを撮る方法を解説します。

パソコンからスマホ版ホームページを表示させ、前項で紹介したFireShotでスクショを撮ります。

1.FireShotをインストールし、アドレスバーの右にFireShotのマークを表示させる（前項1～4参照）

前項1～4の拡張機能『FireShot』をインストールし、アドレスバーの右にFireShotのマークを表示させるところまで行ってください。

2.Google Chromeでスクショを撮りたいホームページを開き、右クリック-[検証]をクリック

下図のようなウィンドウが新しく開きます。このウィンドウのことを『デベロッパーツール』と呼びます。

3.[サイズ]から確認したいデバイスを選択

ホームページの上に表示される[サイズ]から確認したいデバイスを選ぶことができます。

上記が表示されない場合は、デベロッパーツールにある下図のボタンをクリックしてください。（青色の状態にしてください）

4.FireShotのマークをクリック

「ページ全体」「表示部分」「選択範囲」の3つから選んで、スクショを撮ることができます。

5.いずれかの方法でスクショを撮り、[画像として保存] or [PDFとして保存]をクリック

FireShotというフォルダが作成され、フォルダ内にスクショが保存されます。

えりー

この方法がうまくいかない場合は、スマホでスクショ用のアプリをダウンロードしたほうが良いかもしれません。

（補足）ホームページのスクショを掲載する場合は出典を明記

著作権法違反にならないようにするために、ホームページのスクショをどこかに掲載する場合は、基本的には出典を明記するようにしましょう。

スクショの下に、「出典：サイト名（URL）」といったかたちで記載します。

ホームページやブログなどのWeb上にホームページのスクショを掲載する場合は、リンクを張るとさらに親切です。

あわせて読みたい

ホームページやブログに引用を記載する方法【2つのポイント】

まとめ：ホームページのスクリーンショットはFireShotを使う方法がおすすめ

キーボードでスクショを撮る方法は以下のとおりです。

縦長のホームページなどの場合で、ホームページ全体を丸ごとスクショしたい場合は、『FireShot』というGoogle Chrome or Firefoxで使える拡張機能を使ってスクショを撮ることをおすすめします。

空創デザインオフィスでは、ホームページ制作・リニューアル、自分でホームページを作成したい方へのサポートなども承っております。

下記ボタンよりお気軽にお問い合わせください！（お見積りは無料です）

えりー

Web・グラフィックデザイナー / ブロガー

2018年よりフリーランスWeb・グラフィックデザイナー 兼 ブロガーとして活動しています。
都内IT系企業にて研鑽を積んだ後、起業しました。
IT・デザイン業界歴は10年以上。
今までに関わらせていただいたクライアント様は300社以上となります。
ブログでは、自身の経験を元に、Web・グラフィックデザイン制作のことや、就職・転職のこと等の情報を発信しています。
少しでも読者の皆様のお役に立てれば幸いです！