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

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

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

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

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

Webサイト制作の実績・料金を見る

この記事のシェア数

Web事業部マネージャーの佐々木亮介です。 (LIG出戻り1号です) 真っ直ぐみんなを見つめる美しい瞳とキラキラ輝く眩しい笑顔、周りを優しく包み込む癒し系ボイスがチャームポイント のようです。 趣味はコスパの良い食べ物を探すことです。 【役職紹介 / Web受託制作マネージャー】 WebサイトおよびWebサービスを作り続けるWeb事業部に複数ある受託制作チームのマネジメントをおこなっています。 コンセプトの設計と、常に追いかけている最先端のデザインと開発技術で、イケてるものを作れる集団にしていきたいと考えています。 【普段やっていること】 Web制作部門の未来を見据えた組織構築と、組織や制作業務の課題・解決に取り組んでいます。 そのほか、採用面接、顧客折衝、プロジェクトマネジメント、制作ディレクションなど様々な業務をしています。

このメンバーの記事をもっと読む