《Web担当者を応援する、ホームページ集客の専門家のブログ。》

ホームページ全体をスクリーンショットするには?

ホームページ全体をスクリーンショットするには?

ホームページ全体をスクリーンショットする方法を説明します。パソコンでホームページ全体を1枚の画像に収める方法を、お探しの方に適した内容です。非常に簡単な方法でスクショできますので、どなたでも試せますよ。

なぜホームページ全体のスクリーンショットが、重要なのか?

「ホームページ全体をスクリーンショットしたい」ということは、ごくまれにあると思います。私の場合はWebの業者なので、お客様にお見せするために全体をスクリーンショットする場合がありますが、業者でなくても必要な場合はあるでしょう。

例えば、何かのマニュアルがWebページのみで、PDF化されていない場合です。外へ持って行って使いたいけれど、スマホ画面では小さいので、印刷物でほしいというようなことがあるでしょう。そのような場合には、やはりページ全体のスクリーンショットがほしいですよね。

そこで、ホームページ全体のスクリーンショットの方法をご紹介しましょう。

ホームページ全体をスクリーンショットする方法!

それでは、ホームページ全体をスクリーンショットする方法をご紹介します。

ホームページ全体をスクリーンショットする手順とは?

まず、ホームページ全体をスクリーンショットする手順をご紹介します。ポイントは、Firefoxの機能を使うところです。こうすれば、とても簡単にスクリーンショットできます。つまり、IE や Edgeを使用している方は、Firefox のインストールが別途必要になります。

もちろん、Firefoxのインストール方法からご紹介しますので、ご安心ください。

  1. Firefoxをインストールする
  2. Firefoxでスクリーンショットする

具体的には、上記のような手順となります。続いて、それぞれの手順を説明していきましょう。

なお、すでに Firefox をインストール済みの場合は、当然インストール作業の必要はありませんので、インストールの話は読み飛ばしてください。

1.Firefoxをインストールする

最初に、 Firefox をインストールします。これは、スクリーンショット(スクショ)機能を利用するためです。このブラウザに搭載されているスクショの機能は、1ページを丸々1枚の画像にできる優れモノなんですよ。(既にインストール済みの方は、この手順は不要です。)

インストール手順は、次の通りです。

  1. 公式サイトにアクセスする。
  2. [今すぐダウンロード]のボタンをクリックして、インストーラーをダウンロード。
  3. ダウンロードした『Firefox Installer.exe』を実行してインストールを開始する。
    (自動的にダウンロードとインストールが開始されます。)
  4. インストールが完了する。

これで、 Firefox のインストールが完了しました。なお、「わざわざ別のブラウザをインストールするのは気が引けるなあ」とお考えの方もいらっしゃると思いますが、スクショ機能を使うためだけに入れておいても損はないと思いますよ。

続いて、スクリーンショットのやり方について説明します。

2.Firefoxでスクリーンショットする

Firefoxの準備が出来たら、お目当てのホームページをスクリーンショットしてみましょう。やり方はとても簡単で、次のような手順で行います。

  1. お目当てのホームページを開く。(ブックマーク、URLの直接入力、検索、など。)
  2. 右端にある[メニューを開きます]Firefox メニューボタン のボタンをクリックする。
  3. 開いたメニューの[ウェブ開発]をクリックする。
    Firefoxのメニュー、ウェブ開発
  4. 開いたら[開発ツールを表示]をクリックする。
    Firefox のメニュー、開発ツールを表示
  5. 開発ツールが、ウィンドウ下部に表示される。
    Firefox のスクリーンショット、カメラアイコン
  6. カメラ型のアイコン[ページ全体のスクリーンショットを撮ります]をクリックする。
    ※ カメラ型のアイコンが無いときは、こちらを参照してください。
  7. シャッター音が「パシャッ」と鳴って、スクリーンショットが完了する。
  8. [ダウンロードの進行状況を表示します]Firefox ダウンロードボタン のボタンをクリックする。
  9. PNG画像が保存されている。
    Firefox スクリーンショット画像ファイル

これで、ホームページ全体が1枚の画像に保存されました。

3.ウィンドウサイズも調整しましょう。

Firefox のスクリーンショット機能は、ウィンドウサイズに影響を受けますので、調整を忘れないでください。ウィンドウ表示や最大表示など、いろいろ変えてスクショすると画像サイズや内容が変化しますので、何度か調整を繰り返して納得できる画像にしましょう。

4.カメラ型のアイコンが見当たらないときは?

カメラ型のアイコンが見当たらない場合は、以下の手順で表示しましょう。

  1. 先ほどの手順で[開発ツール]を表示する。
    Firefox 開発ツール
  2. 右側[×]の左隣にある[…]のボタンをクリックする。
  3. 表示されたメニューの[設定]をクリックする。
    Firefox 開発ツールの設定
  4. 設定メニューが表示されたら、下へスクロールする。
    Firefox の開発ツール設定メニュー
  5. [ページ全体のスクリーンショットを撮ります]にチェックを入れる。
  6. カメラ型のアイコンが表示される。
    Firefox のスクリーンショット、カメラアイコン

これで、スクリーンショットが撮れますので、先ほどの手順に戻ってやってみてください。

まとめ

いかがでしたか? ホームページ全体をスクリーンショットする方法を説明しました。

今回説明したのは、ホームページ全体をスクリーンショットする手順とは?、Firefoxをインストールする、Firefoxでスクリーンショットする、ウィンドウサイズも調整しましょう、カメラ型のアイコンが見当たらないときは?、などのポイントでした。

ホームページ全体をスクリーンショットするためには、Firefoxをインストールする必要がありますので、多少面倒かもしれません。しかし、Internet Explorerや Edgeにはスクショ機能がありませんので、それらを使用されている方には、Firefoxの利用価値はあると思います。

なお、繰り返しになりますが、スクリーンショットの際はウィンドウサイズに注意してください。なぜなら、ウィンドウサイズによってスクリーンショットのサイズが変わるからです。うまく調節して狙ったサイズのスクリーンショットをしていただきたいと思います。

以上、「ホームページ全体をスクリーンショットするには?」と題して説明しました。