NTTドコモ様_dカーシェア
NTTドコモ様_dカーシェア
2018.07.09

Google Chromeユーザーは知っておくべき神ワザ! ひとつ上のスクリーンショット術

さささん

こんにちは。Web事業部マネージャーのさささん(さっさん)です。

みなさんは普段使っているブラウザはGoogle Chrome派ですか? IEやEdge派ですか? それともSafari派? FireFox派?

私は断然Chrome派です。

そんなChromeで実はあまり知られていない機能があるんです。今回はその機能を紹介します!

マジ必見! ひとつ上のスクショ術

画面のスクリーンショット(スクショ)の取得方法はさまざま。みなさんはどうやってスクショしてますか? 私はこれまでこんな方法でスクショしてました。

  • OS標準機能
  • Chrome拡張機能(アドオン)の「Awesome Screenshot」
  • アプリSkitch

しかし、いつの時からかChromeに標準でスクリーンショット機能が付いていたんです。やりかたを紹介します。

1. Chromeでスクショを撮りたいページにアクセスする

今回はこのLIGブログのトップページをサンプルとして試していきます。
このページのスクショを撮ります。

LIGブログの画面

2. デベロッパーツールを開きます

次にChromeのデベロッパーツールを開きます。

デベロッパーツールを開く

  1. 画面右上の点々のメニューをクリックする。
  2. 「その他のツール」にカーソルを合わせる。
  3. 「デベロッパーツール」をクリックする。

次のような画面が表示されます。

デベロッパーツールを開いた画面

3. スクショを撮る画面をセットする

スクショを撮る準備をします。
まずは、デバイスのアイコンをクリックして、Toggle device toolbarを開きます。

Toggle device toolbarを開く

次のように画面にToggle device toolbarが表示されます。

Toggle device toolbarが表示される

次に、Toggle device toolbarで撮りたいスクショの状態をセッティングします。
GIFでご覧ください。

デバイスを選択することができます。

デバイスを選択

 

サイズの拡大縮小も可能です。

拡大縮小の画面

このように撮りたいスクショのセッティングをおこないます。

4. スクリーンショットを撮る

ここまで来たら、いよいよスクショの作業です。
次の画像のように、点3つのアイコンをクリックしメニューを表示させます。Capture Screentshotという項目をクリックします。
スクリーンショット操作

Capture Screenshotを押すと、準備がはじまり、スクショの保存先を選択するダイアログが表示されるので、好きな場所に保存してください。

Capture Screenshotの下にCapture full size screenshotという項目がありますが、これは画面の上部から下部までのすべての部分をスクショすることができます。

しかし、ページのファイルサイズによってはうまくスクショを撮れない場合があるので、注意してください。スクショ保存後はイメージどおりのものが撮れたか確認しましょう。

TIPS:スマホの筐体も表示できるからスクショして資料に使える!

番外編のTIPSとして、私が普段使っていることをお教えしちゃいます。資料をつくる際にスマホのフレーム(筐体)込みのイメージを使いたいときってありますよね?

スマホのデバイスを選択し、Capture Screenshotを実行すれば取得できてしまいます。

iphone6_7_8のイメージ

上の図は、iPhone6/7/8 を選択したときの表示です。この画面を表示してCapture Screenshotを実行するようにしてください。

そして下の図がChromeのスクショ機能を使って取得した画像です。この画像をそのまま資料に画像挿入して使います。

iPhone6/7/8のスクショ画像

まとめ

今まで、OS標準やブラウザアドオンに頼っていた方は、一度使ってみてはいかがでしょうか? 個人的にはデバイスのフレームとあわせてスクショできるところがお気に入りです。

スクショ画像はまあまあのファイル容量になるので、使わなくなったら削除するようにしましょう!

今回はこれで終わりです。ありがとうございました。