ChromeでWebページの全画面スクリーンショットを撮る方法(拡張機能不要)

スポンサードリンク



Chrome59から(正直使いづらい部分はありますが)公式にフルスクリーンキャプチャが撮れるようになったので、方法を共有しておきます。

この方法について、一部のニュースサイト(海外含む)では「モバイル表示しかフルスクリーンキャプチャできない」という誤った情報が書いてありましたが、モバイル表示(スマホ表示)とPC表示のどちらもフルスクリーンキャプチャが可能です。

Chromeで全画面キャプチャを撮る方法(拡張機能不使用)

PCサイトの場合

まずは、キャプチャしたいページを開いて、右クリックの「検証」から開発者ツールを開きます。

ひびテク よいエンジニアになるために 日々 ひび 技術 テック に関することをアウトプットするブログ

次に、Windowsの場合はCtrl + Chift + p、Macの場合はcommand + shift + pを押します。

ひびテク よいエンジニアになるために 日々 ひび 技術 テック に関することをアウトプットするブログ 2

するとテキスト入力できるバーが出てくるので、ここに「capture」を入力します。実行できる操作の候補が絞られるので、ここから「Capture full size screenshot」を選択します。頭に「mobile」と表示されていますが、モバイルでなくてもキャプチャ出来ます。
ひびテク よいエンジニアになるために 日々 ひび 技術 テック に関することをアウトプットするブログ 3

ページのサイズにもよりますが、2,3秒待つと画像がダウンロードされます。
ひびテク よいエンジニアになるために 日々 ひび 技術 テック に関することをアウトプットするブログ と マイファイル

これを開くと
Yoshikiito net blog png
全画面キャプチャが撮れます。

スマホシミュレータの場合

Chromeにはスマートフォンやタブレットでの表示を簡単に確認できるシミュレータの機能があります。このシミュレータでスマホ表示にしているときのほうが、実は楽に全体のスクリーンショットが撮れるのです。

まず、スマホのシミュレータモードにします。
ひびテク よいエンジニアになるために 日々 ひび 技術 テック に関することをアウトプットするブログ と yoshikiito net blog png

次に、右上の■が3つ縦に並んでいるところをクリックし、メニューの中からCapture full size screenshotを選択。
ひびテク よいエンジニアになるために 日々 ひび 技術 テック に関することをアウトプットするブログ と yoshikiito net blog png 2

これで、スマホ表示の全画面スクショが撮れます。
Yoshikiito net blog iPhone 6 png

関連

Firefoxの場合はこちら。

FirefoxでWebページの全画面スクリーンショットを取る方法(拡張機能不要) | ひびテク

スポンサードリンク







ABOUTこの記事をかいた人

都内でテストエンジニア&ブロガーをやっている@yoshikiitoです。 ソフトウェアエンジニアの学習方法や成長するための考え方、会社に依存せず自分の力で生きていけるエンジニアになる方法などについて興味があります。 こういった方法や考え方、自分が試したことなどをブログを通じて発信します。 仕事は主にソフトウェアテストやテスト自動化。 趣味は浦和レッズと読書と技術書を買って積むこと。 技術評論社から本を出すのが夢