developer

Webページやモバイルページのフルスクリーンキャプチャを撮りたいけど、やり方がわからない。拡張機能があるのは知ってるけど、なるべく拡張機能は入れたくないので拡張機能を使わずにできる方法を探している。

そんな方に朗報!Chromeブラウザを使っていれば、実は拡張機能なしでフルスクリーンキャプチャを撮ることができます。今日はその方法をご紹介します。なお操作方法はMacユーザー向けのやり方をご紹介しています。

フルスクリーンキャプチャが必要な状況とは?

IT業界で仕事をしている人ならわかると思うのですが、開発や制作の現場では、関係者に画面遷移や変更したい箇所をなるべく具体的に説明したいシーンがあると思います。

デジタル系の部署にいる人が、あまりデジタルに詳しくない部署の人にサイトやアプリに関する説明をする際などには特に、なるべく具体的に何がどうなっているのかを「視覚的にもわかりやすく」説明する必要がありますよね。

そんな時に便利なのがスクリーンキャプチャです。状況によっては画面の一部をキャプチャするのではなく、画面全体を見せて説明した方が良い時があると思います。今回はそんな「フルスクリーンキャプチャする方法」をご紹介します。

Chromeブラウザでフルスクリーンキャプチャを撮る方法

Chrome デベロッパーツールにアクセスする

ブラウザの好みは色々あると思うのですが、今回は僕が普段から使っているChromeブラウザでのやり方をご紹介します。まずは以下からデベロッパーツールにアクセスしてください。

Chrome Dev Tool

ショートカットを使いたい方は、“option + command + I” でアクセスできますので、覚えておきましょう。デベロッパーツールにアクセスするとこのような画面が出てくると思います。

Dev Tool Dashboard

ツールを使ってフルスクリーンキャプチャを撮る

この状態でフルスクリーンキャプチャを取れる状態になっていますので、あとはツールの機能を使ってキャプチャしていくだけです。やり方は2通りあるのでそれぞれご紹介します。

ツールから辿ってキャプチャする方法

この画像のように、ツールのボタンからから辿っていくと「Capture full size screenshot」という部分があるので、それをクリックするとキャプチャを取ることができます。簡単ですね!

コマンドを使ってキャプチャする方法

もう一つのやり方はコマンドを使ってキャプチャする方法です。まずは「Run command」をクリックしてコマンド画面を表示させます。

Run command

するとこのような画面になります。

command page

ここで “full” と入力すると「Capture full size screenshot」というコマンドが出てくるので、それを選択すればキャプチャできます!

モバイルページ(レスポンシブページ)をキャプチャしたい場合

ウェブ版の表示ではなく、レスポンシブ表示したモバイルページをキャプチャしたい場合は、画面表示の設定を指定のデバイスに変更することで可能です。例えば以下の画像のように、iPhone Xでの表示に変更することもできますので、こちらを試してみてください。

モバイル表示への変更

知ってると便利なのでぜひ試してみましょう

こういう地味なテクニックって、知ってたら意外と便利で後になったらヘビロテすることもあったりします。特に制作現場でのサイトの導線改善などを説明する際、フルスクリーンのキャプチャをプロトタイピングツールなどに挿入して動作を説明したりする方がわかりやすかったりします。

なのでぜひみなさんの業務でも使ってみてくださいね!