スタートミーアップ合同会社

コラム

デジタル事業部

【拡張機能・専用ソフト不要】Google Chrome で縦に長いウェブページ全体のスクリーンショットを撮影する方法

2019年11月13日
2019年11月27日

Windows なら「Print Screen」キー、Mac なら「command＋shift＋3（または command＋shift＋4）」でウェブページのスクリーンショット（画面キャプチャー）を撮ることができます。
では、ウェブページを丸ごと撮影したい場合はどの様にしたらいいでしょうか？

Google Chrome なら拡張機能も専用ソフトも不要

専用のフリーソフトなどもありますが、Google Chrome ならデベロッパーツールを使ってウェブページ全体を撮影することができます。拡張機能も不要です。
簡単なのでお試しあれ！

Google Chrome で撮影したいページを表示する

まずは Google Chrome でスクリーンショットを撮りたいウェブページを表示します。
Google Chrome のインストールはヘルプをご参照下さい。

デベロッパーツールを表示する

【拡張機能・専用ソフト不要】Google Chrome で縦に長いウェブページ全体のスクリーンショットを撮影する方法

Google Chrome でページを開き、「メニューアイコン」＞「その他のツール」＞「デベロッパーツール」の順にクリックします（画像参照）。
Mac なら「F12」で一発表示もできますよ。

ウェブページのサイズを調整する

【拡張機能・専用ソフト不要】Google Chrome で縦に長いウェブページ全体のスクリーンショットを撮影する方法

スマホマーク（Toggle device toolbar）をクリックして、必要に応じてサイズを調整します。
パソコンサイトだけでなく、スマホサイトも撮影できちゃいます！

撮影する

【拡張機能・専用ソフト不要】Google Chrome で縦に長いウェブページ全体のスクリーンショットを撮影する方法

「More options 」＞「Capture full size screenshot」の順にクリックします。

【拡張機能・専用ソフト不要】Google Chrome で縦に長いウェブページ全体のスクリーンショットを撮影する方法

撮影できました！
※縦に長くなりすぎるので画像下半分は省略しました。

ぜひ一度お試し下さいねー♪

この記事を書いた人

冨江恵: 2014年個人で制作会社を開業後、2018年3月にスタートミーアップ合同会社へ社名を変更。現在は、茨城県つくば市を中心にホームページ制作・グラフィックデザイン・CAD図面データ作成等を行なっています :‑D

【設定不要】2枚の画像をスライドで簡単比較できる無料プラグイン「TwentyTwenty」ブログってどんなこと書いてますか？「ユーザーに刺さるブログ記事」って何？

お問い合わせ