GoogleChromeのデフォルト機能でウェブページのスクリーンショットを撮る方法

 

ブログなどを運営していると、ウェブページのスクリーンショットを撮る機会が頻繁にあります。
MacやPCのデフォルトスクリーンショット機能だけでは、ウェブページのスクリーンショットは難しいので、専用アプリやブラウザの拡張機能を使うことが多いと思いますが、使っているブラウザがGoogleChromeだった場合、アプリや拡張機能を使わずに撮影することが可能です。

デベロッパーツール

GoogleChrome に標準搭載の開発者向けツールで、HTMLやスタイルシートのコードを調べたり、リアルタイムにウェブページのデザインを変更して試すことができたりと、かなり高機能で使いやすいルールです。

あまりにも高機能で、全く使いこなせるレベルではありませんが、ブログ運営でも使える機能満載ですので、覚えておくと便利です。

スクリーンショット機能

本来は、ウェブデザイン作るときの確認ツールのような機能だと思いますが、デスクトップ向けやスマホ、タブレットサイズなどウェブ画面のサイズによる見え方の違いを、簡単に表示できる機能を利用します。

撮影したいウェブページの画面サイズを指定して、スクリーンショットを撮ることができます。

主要なスマホの画面サイズなどは、デフォルト入っているので、一蘭の中からクリックひとつで選択することができます。

メニューの中から、見えてる範囲を撮影する「Capture screenshot」とウェブページ全体を撮影する「Capture full size screenshot」を選んでクリックするとスクリーンショットが撮影できます。

撮影結果はこちら。

デスクトップサイズの「Capture screenshot」で撮ったスクリーンショット。

デスクトップサイズの「Capture full size screenshot」で撮ったスクリーンショット。

スマホサイズの「Capture screenshot」で撮ったスクリーンショット。

スマホサイズの「Capture full size screenshot」で撮ったスクリーンショット。

動画

まとめ

GoogleChromeでは、別途アプリや拡張機能をインストールすることなく、デフォルト機能であるデベロッパーツールを使って、ウェブページのスクリーンショットを撮ることができます。

各種スマホやタブレットのサイズを、簡単に切り替えてデスクトップPCから撮影ができるというのは、アプリや拡張機能でもあまり見かけないので、結構便利だと思います。

レスポンシブデザインのウェブページならブラウザのサイズを変えて対応することもできますが、サイズを細かく指定したいときは、こちらのほうが便利に使えそうですね。

Amazonでお得に買う方法

ネット通販の代表格Amazon。Amazonプライム会員に登録すると送料無料の他にも様々な特典がついてきます。

そんなAmazonでの買い物を、さらにお得にするなら、Amazonギフト券への購入チャージをおすすめします。

 

現金でチャージするたびに、チャージ額 × 最大2.5%分のポイントがもらえます。

Amazonプライム会員の方なら是非活用して、更にお得に利用しましょう。

CHARGE NOW

コンビニ・ATM・ネットバンクが対象

1円単位で購入可能

スポンサーリンク

フォローする