お疲れ様です！tkmiです。
エンジニアだって資料とかいっぱい作成します。テキストの説明だけじゃ伝わりにくいので、画面キャプチャも多用したりしますよね？
Windowsの画面切り抜きのショートカットもよく使うのですが、サイトの1ページがまるごと欲しい！っていう時には切り貼りするのとか面倒ですよね。
今回はChrome開発者ツールを使ってウェブページのフルサイズのスクリーンショットを簡単に撮る方法をご紹介します。
Chrome開発者ツールとは？
Chrome開発者ツールは、Google Chromeに組み込まれている強力なデバッグツールです。ウェブ開発者がHTML、CSS、JavaScriptをリアルタイムで編集、デバッグ、監視するための機能を提供します。
また、ネットワークパフォーマンスの解析や、モバイルデバイスのエミュレーションなど、さまざまな機能を備えています。
フルサイズスクリーンショットを撮るメリット
フルサイズのスクリーンショットを撮ることには多くのメリットがあります。ウェブページ全体のデザインやレイアウトを一目で確認できるため、特にクライアントやチームメンバーと共有する際に非常に便利です。
また、ページの長さに関わらず全体をキャプチャできるため、スクロールする手間を省くことができます。
Chrome開発者ツールでスクリーンショットを撮る方法
まず、Google Chromeを開き、フルサイズのスクリーンショットを撮りたいウェブページを表示します。
その後、キーボードのF12キーを押すか、右クリックして「検証」を選択して開発者ツールを開きます。
開発者ツールが開いたら、右上の「...」ボタンをクリックし、「コマンド」を選択します。[Ctrl]+[Shift]+Pでもいいです。
その後、「スクリーンショット」を検索し、「フルサイズスクリーンショットをキャプチャ」を選択します。
保存先を指定する設定のための画面が開きます。
好きなところに保存します。
これで、ウェブページ全体のスクリーンショットが保存されます。
でも、正直これでもまだ面倒ですよね？？？？
便利なショートカットキーとカスタマイズ方法
Chrome開発者ツールには、多くの便利なショートカットキーがあります。例えば、F12キーで開発者ツールを開閉することができます。また、Ctrl+Shift+J（Windows）やCmd+Option+J（Mac）で直接コンソールを開くこともできます。
これらのショートカットキーは設定でカスタマイズすることも可能です。
Chromeの設定メニューから「拡張機能」を選び、「ショートカット」をクリックすることで、自分の使いやすいキーに変更できます。
さきほどの「フルサイズのスクリーンショットをキャプチャ」の項目を探します。
カーソルを合わせると右側に鉛筆のマークが現れるので、押します。
「ショートカットを追加する」を押します。
お好きなキーで設定します。
ショートカットを押す時と同じ動作でキーボードを押すと、勝手に入力してくれます。
右側のチェック「変更を確認」を押すと保存されます。
使ってみよう！
これで準備は整いました！
ではフルサイズのスクリーンショットのキャプチャを撮ってみましょう。
ウェブページを表示します。
その後、キーボードのF12キーを押すか、右クリックして「検証」を選択して開発者ツールを開きます。
ここまでは最初と同じですね。
開発者ツールが開いたら、さきほど登録したショートカットを押します！
即！保存画面！
無事BlogTOPのフルサイズスクリーンショットが撮れました！
１．開発者ツール開く
２．コマンド開く
３．「スクリーンショット」検索
４．「フルサイズのスクリーンショットをキャプチャ」を選択
５．保存
だったものが
１．開発者ツールを開く
２．ショートカット入力
３．保存
になりました！
おわりに
他にもよく使うコマンドがあれば、ショートカットをカスタマイズしておく事でとても便利なると思います。
