COLUMN

長いホームページのスクリーンショットを撮る方法

公開日

本文・操作画面・数値は記事掲載時点のものです。

目次
  1. ウェブブラウザ
  2. Chromeに拡張機能をインストールする
  3. ホームページ全体のスクリーンショットを撮る

気になるところから、ゆっくり読んでみてくださいね。日々のお仕事に取り入れられそうなヒントを、一緒に探していきましょう。

前回の記事で、パソコンやスマホの画面内に表示されている内容のスクリーンショットを撮る方法を各OS(Windows 10, Mac OS, Android, iOS)毎に詳しく書きましたが、縦に長いホームページ全体のスクリーンショットが必要だという場合もあると思います。

例えば、弊社のトップページはランディングページとして非常に長い構造になっています。

ホームページ制作会社エフ・ファクトリートップページのスクリーンショットの一部
ホームページ制作会社エフ・ファクトリートップページのスクリーンショットの一部


あまりにも長いページなので、スクリーンショット画像を途中で切ってあります(笑)。

もちろん、その長いホームページを少しずつスクロールしながら何枚も画面を取り込んで、Photoshopなどの画像処理ソフトで繋げる方法もありますが、非常に面倒です。

実は、そんなことをしなくてもボタンひとつで長いウェブページを1枚の画像でスクリーンショットを撮ることができるので、その方法を紹介します。


ウェブブラウザ


みなさんは普段ホームページを閲覧するのにどのブラウザを使っていますか?

スマホの場合、Android端末ならChrome、iPhoneならSafariになりますが、パソコンでは、私はGoogleのChromeをよく使います。

もちろん、仕事柄、いろんなウェブページをChromeだけでなく、Edge、IE、Firefoxなどでも開きますが、Chromeを普段使う理由は、

  1. 動作が軽い
  2. 拡張機能が使える


特に、PCで毎日たくさんのホームページを見ている私にとって、仕事効率を左右するのが「動作の軽さ」です。


Chromeに拡張機能をインストールする


長いホームページのスクリーンショットを撮ることができる拡張機能「FireShot」をインストールしてみましょう。

  1. Chromeウェブストアを開き、左上の検索窓で「fireshot」を開く。
  2. 「+ CHROMEに追加」ボタンをクリック。
Chromeウェブストア
Chromeウェブストア


これでOKです。

そうすると、ChromeにこのようなFireShotのアイコンが追加されます。

FireShotのアイコン

ホームページ全体のスクリーンショットを撮る


スクリーンショットを撮りたいウェブページを開いて、FireShotのアイコンをクリックします。

「ページ全体をキャプチャ>…」

をクリックして保存します。

ここでは説明しませんでしたが、スクリーンショットに文字を入れたり、枠を入れたり、編集してから保存することもできるので試してください。

便利ですね。

私は使ったことはありませんが、FireShotと同じような機能を持った拡張機能に、「Awesome Screenshot」というのもあります。

← コラム一覧へ戻る

LET’S TALK

実現したいことから、お聞かせください。

ホームページ制作・広告運用・生成AIの活用まで。お困りごとや実現したいことを、分かる範囲でお聞かせください。

ここからは、担当スタッフへのご相談です。「まだうまく説明できない」というときも、気になることから気軽にお聞かせください。

専門スタッフに無料で相談する