ウェブページを端から端まで!フルサイズでスクリーンショットを撮る方法

Google Chrome の「デベロッパーツール」を使う(PC)

拡張機能を使わず、ブラウザの隠しコマンドで撮影する方法です。

  1. 保存したいページで F12 キー(Macは Cmd + Option + I)を押してデベロッパーツールを開きます。
  2. Ctrl + Shift + P(Macは Cmd + Shift + P)を押してコマンドメニューを開きます。
  3. 入力欄に 「full」 と入力します。
  4. [Screenshot: Capture full size screenshot] を選択して Enter を押すと、ページ全体の画像がダウンロードされます。

iPhone / iPad の「標準機能」を使う(Safari)

スマホでも、Safariなら標準機能でPDFとしてフルサイズ保存が可能です。

  1. 通常通りスクリーンショットを撮ります。
  2. 左下に表示されるサムネイルをタップします。
  3. 画面上部のタブを [スクリーン] から [フルページ] に切り替えます。
  4. 「完了」を押し、「PDFをファイルに保存」を選択すれば、ページ全体の保存が完了です。

ブラウザの拡張機能を使う(最も手軽)

頻繁に撮影するなら、クリック一つで済む拡張機能が一番効率的です。

  1. GoFullPage: ChromeやEdgeで一番人気の拡張機能です。アイコンを押すだけで自動でスクロールして1枚の画像にしてくれます。
  2. FireShot: 画像(JPG/PNG)だけでなく、PDFとして保存する機能も強力です。

投稿者プロフィール

たーさん代表者
東海大学工学部を卒業後、東芝情報システム株式会社(旧グループ会社含む)に入社。半導体(SRAM)の開発チームにて、Unix環境でのPerlを用いた業務自動化プログラムの開発など、エンジニアとしての確かな基礎と緻密な論理的思考力を培う。

その後、東証上場企業である株式会社ザッパラスへ。Web・モバイルの最前線で、数多くのユーザーに愛されるコンテンツ制作業務に従事。ここで「ユーザー目線に立った魅力的なWebコンテンツの企画・制作ノウハウ」を深く学ぶ。

開発・システム側から見た「堅牢なロジック」と、制作・ユーザー側から見た「伝わるコンテンツ」の双方を実務で経験した強みを活かし、フリーランスとして独立。

現在は、ウイングアーク1st株式会社の「データのじかん」運営チームに参画するなど、大手・中小企業のWeb運営・開発パートナーとして活動。完全在宅でありながら、固定IPの完備や厳格なセキュリティポリシーの遵守を徹底し、企業のインフラや本番環境を安全に支える「チームの一員」として高い信頼を得ています。

見た目の美しさはもちろんのこと、内部の構造やWordPressのカスタマイズ、運用・セキュリティまでを見据えた、技術的バックボーンのある高品質なWebサイト・システム制作をワンストップでご提供しています。