拡張機能を使わずにサイト全体のスクリーンショットを撮影する方法

前回の記事でChromeならFull Page Screen Captureという拡張機能でサイト全体のスクリーンショットを撮影するのがオススメだと書きましたが、どうやら拡張機能をインストールしなくても、撮影できたみたいです。
デベロッパーツールから撮影する

Chromeの[表示]→[開発 / 管理]→[デベロッパーツール]からデベロッパーツール(開発者ツール)を開いて、表示されるツール左上のスマホアイコンをクリックします。

今回はPC表示の撮影をしたいので、「Responsive」を選択して横幅を決定します。
後は画面右上のメニューアイコンをクリックして「Capture full size screenshot」をクリックすれば、サイト全体の画像がダウンロードできます。
Firefoxの場合
Firefoxにも同様の機能があります(しかもChromeより優秀です)。
アドレスバーの右の三点アイコンをクリックして[スクリーンショットを撮る]を選択すると、スクリーンショットを撮影するモードに切り替わります。

ドラッグすれば選択範囲を撮影できますし、「ページ全体を保存」をクリックすれば全体の撮影ができます。

撮影後には、テキストを入れたりマーカーを引いたりもできます。
デフォルトでここまでできるのはすごいですね。
拡張機能に頼るところ
Chromeの場合は分かりにくいですし、わざわざ「Responsive」を選択して横幅を決める必要が出てくるので、拡張機能の方が早そうです。
また、デフォルト機能だと保存形式がPNGで固定なので、JPGやPDFで保存したい場合は拡張機能を使ったほうがよさそうです。



Gmailの確認不要なメールを整理してスッキリさせる
ツイエバを使ってTwitterのいいねやツイート履歴をEvernoteに保存する方法
外部マウスを自由にカスタマイズできるステアーマウスで、マウスの細かい設定を行う
アクティビティモニタで「kernel_task」の暴走を落ち着かせるためには、CPU温度を下げる必要がある
FontExplorer X Proを使ってフォントの管理を行う
Alfredでダークモードを切り替えるWorkflowを作成する方法
Alfred 4のmacOS標準アプリとの連携機能(電卓・辞書・連絡先・iTunes)に関してのまとめ
ATOKの変換領域(文節区切り)を選択しやすくするカスタマイズ
シンプルが特徴のノートアプリ「Simplenote」とApple純正の「メモ.app」の比較
ATOKで変換時に文章を指摘してくれる「校正支援」タブの設定項目
AirPodsで片耳を外しても再生が止まらないようにする方法
MacのKeynoteにハイライトされた状態でコードを貼り付ける方法
iTerm2でマウスやトラックパッドの操作を設定できる環境設定の「Pointer」タブ
DeepLで「インターネット接続に問題があります」と表示されて翻訳できないときに確認すること
Ulyssesの「第2のエディタ」表示を使って2つのシートを横並びに表示する
ウェブ開発時のテスト環境と本番環境の取り違えを防ぐChrome拡張機能「Environment Marker」
【2026年版】Karabiner-Elementsで実現する右commandキー活用のススメ
Bartender ProのTop Shelf機能でできること
高機能なスクリーンショットアプリ「CleanShot X」
macOSの効率化に関するDiscordコミュニティ「CMD-F」を立ち上げました
1Passwordの開発者向け機能(SSH Agent / Environments / 1Password CLI / Developer Watchtower)
Default Folder Xで保存ダイアログ内のファイルリストにフォーカスする方法
Obsidianで整理した知識をAnkiで定着させる方法
Figma × Keyboard Maestroでどこまで効率化できる?
マウス操作の完成度が高いウインドウリサイズアプリ「Magnet」