Macで作業中、Firefoxの画面をあとで見返そうと思い立ったのに、最適なスクリーンショットの撮り方が分からず手が止まってしまうことはありませんか？
ここでは、慣れないキー操作を１つずつ丁寧に示し、標準のショートカットからFirefox独自の便利機能、高解像度で撮るコツまでをまとめています。イメージ保存の迷いがなくなることで作業の流れが途切れず、共有や資料作りが驚くほど軽快になります。
気になる手順から試し、手元のMacで実際にキーを押して確かめながら、スムーズな画面キャプチャの習得を進めてみてください。
MacでFirefoxの画面をサクッと撮る手順
Firefoxの画面をパッと保存したいとき、Macならではの手軽な方法が３つあります。
- キーボードショートカット：⌘+Shift+3や⌘+Shift+4で全画面・選択範囲をサクッと撮れる
- Firefoxのスクショ機能：アドレスバー横のメニューからページ全体や表示部分をワンクリックで保存
- Previewアプリ活用：Controlキーを使ってクリップボードにコピーし、Previewで新規作成から貼り付けて確認できる
どれも慣れれば数秒でパシャッと完了します。ページ丸ごとキャプチャしたいときはFirefox内蔵機能、範囲指定で細かく撮りたいときはショートカット、編集しながら確認したいときはPreviewと、好みに合わせて使い分けてみてくださいね。
macOSショートカットで撮る
macOSに標準で入っているショートカットを使えば、追加アプリなしでパシャッと撮れます。フルスクリーンキャプチャや範囲選択、ウィンドウ単位の撮影までキー操作だけで切り替えられるので、手軽さバツグンです。
撮影したスクリーンショットは自動でデスクトップに保存されるので、ファイルを探す手間が省けます。プログラマー視点のアドバイスとしては、保存先を専用フォルダに変更したり、Automatorでファイル名に連番を付けたりすると整理がもっとラクになります。
①⌘⇧3でデスクトップ全体を撮影
キーボードで⌘と⇧と3を同時に押します。
撮影後、デスクトップに「スクリーンショット 日付 時刻.png」というファイルが自動保存されます。
②⌘⇧4で撮りたい範囲をドラッグして選ぶ
⌘⇧4を押すとカーソルが十字に変わるので、画面上でドラッグしてキャプチャ範囲を囲んでください。
ドラッグ中は右下に選択サイズが表示されるので、大きさの目安にするとバランスのよい切り取りができます。
選択範囲を離すと自動でスクショが撮影され、デスクトップに〈スクリーンショット 年月日 時刻.png〉として保存されます。
プログラマー的ワンポイント：⌃(コントロール)キーを同時に押すとファイル保存せずにクリップボードにコピーできるので、ペーストで即利用するときに便利です。
③スペースキーを押してウインドウ単体をクリック
Cmd+Shift+4を押したあと、スペースキーを押すとカーソルがカメラのアイコンに変わります。この状態でキャプチャしたいFirefoxのウインドウ上にカーソルを合わせてクリックしてください。
ウインドウ全体ではなくメニューバーやツールバーだけをキャプチャしたい場合は、ウインドウの境界線ギリギリを狙うと余分な黒い枠を省略できます。
④controlを同時に押してクリップボードに送る
shift+command+4で範囲選択できるのはおなじみだけど、ここにcontrolをくわえるとファイル保存ではなくクリップボードに乗せられます。
キーの組み合わせは次のとおりです。
control + shift + command + 4
controlを押しながらshiftとcommandと4を同時に押します。
この操作で選択した範囲が直接クリップボードにコピーされます。
マウスやトラックパッドでキャプチャしたい部分をドラッグします。
選択を終えたらキーを放すと、画像データがクリップボードへ送られます。
controlキーを忘れると自動的にファイル保存になるので注意してください。
⑤撮った画像をデスクトップで確認
Firefoxでキャプチャしたあと、そのままデスクトップをクリックしてみましょう。撮った画像は「スクリーンショット 年月日 時刻.png」という名前で置かれています。
Finderのアイコンをダブルクリックすると大きなプレビューで中身がパッと見られます。プログラマー的にはファイル名にプロジェクト名を先頭に付けると、あとで探しやすくなります。
Firefox内蔵の撮影機能で撮る
Firefoxには画面をそのままキャプチャできる機能が隠れていて、アドオンを入れなくても手軽に使えます。
この機能は部分的な範囲指定やページ全体のスクリーンショットにも対応していて、ブログ用の素材作りやエラー画面の保存など、とにかくサッと撮りたいときに心強いです。
①ページを右クリックしてスクリーンショットを選ぶ
表示したいウェブページ上でカーソルを動かし、何もない余白部分や画像の上で右クリックしてください。するとコンテキストメニューが開くので、その中の「スクリーンショットを撮る」を選ぶと専用の画面キャプチャツールが起動します。
プログラマー視点のコツとして、要素単位で撮影したいときはターゲットの部分を直接右クリックすると選択が格段にラクになります。
②「ページ全体」か「表示中の部分」を選択
メニューが開いたら「ページ全体をキャプチャ」か「表示中の部分をキャプチャ」をお好みで選んでください。長いページをまとめて保存したいときはページ全体、いま見えている部分だけでOKなら表示中の部分がぴったりです。
③ドラッグして好きな範囲をハイライト
Firefoxの画面上でマウスカーソルをドラッグしながら、キャプチャーしたい範囲を囲みます。四隅のハンドルを動かすと後から細かく調整できるので安心です。
④「ダウンロード」を押して保存
スクリーンショットのプレビュー画面が開いたら、右上のダウンロードボタンをクリックします。
クリック後、デフォルトのダウンロードフォルダにPNG形式で保存されます。⌘＋⌥＋Lを押せば、保存先をすぐに開いて確認できます。
⑤通知から「コピー」を選び即ペースト
アドレスバー右端に表示される通知でコピーをクリックします。
クリップボードに画像が保存されたら、貼り付けたいアプリで⌘+Vを押してすぐ表示しましょう。
開発者ツールから高解像度で撮る
開発者ツールを使うと、画面に映っていない部分まで含む全体キャプチャや指定要素のみのスクリーンショットを、実際の高解像度のままパシャッと撮れるのがうれしいポイントです。ビューポートサイズを自由に設定できるので、大きなWebページをまとめて保存したいときや、細かなデザインチェックをしたいときにぴったりです。ただの画面写真以上に、思いどおりの範囲とクオリティで残せるので、プログラマー目線でも頼もしい方法です。
①⌘⌥Iで開発者ツールを開く
まずFirefoxを前面に出しておいて⌘キーと⌥キー(オプション)を押しながらIキーを同時に押してみてください。パッと画面下部か横側に開発者ツールが現れるので、HTML構造の確認やコンソール操作がすぐに始められます。
タイピング癖でショートカットを忘れそうな場合は、メニューの「ウェブ開発」→「開発ツールを表示」からも呼び出せるので安心してください。
②歯車アイコンをクリックして設定を開く
画面右上にある歯車アイコンをクリックしてください。カスタマイズ用の設定画面が表示され、ツールバーに追加したいボタンを自由に編集できるようになります。
③「Take a screenshot of node」を有効にする
開発ツール右上の歯車アイコンをクリックして設定パネルを開きます。
設定内をスクロールしてスクリーンショットセクションを見つけ、Take a screenshot of nodeにチェックを入れて有効化します。
④要素を右クリックしてScreenshot nodeを選ぶ
検査したいHTML要素の上でトラックパッドまたはマウスで右クリックします。表示されるメニューからScreenshot nodeを選択すると、自動的にその要素だけを画像として保存できます。
要素が画面外にある場合は、先にスクロールして表示させてから操作すると確実です。
⑤高解像度PNGがダウンロードされる
クリックするとすぐに高解像度PNGが自動でダウンロードされます。Retina環境ではツールバーや文字もシャープに保存されるので、細かな部分までくっきりキャプチャできます。
デフォルトではダウンロードフォルダーに保存されるので、Finderの「ダウンロード」項目からすぐにアクセス可能です。
ファイル名は「Firefox Screen Capture YYYY-MM-DD at HH.MM.SS.png」のように日時付きで管理されるため、複数撮影しても上書きされずに整理しやすいです。
撮ったスクリーンショットをもっと便利に使いこなすアイデア
Firefoxでキャプチャしたスクリーンショットは、そのまま保存するだけじゃもったいないですよね。ちょっとしたひと工夫で、マークアップや自動整理など毎日の作業がぐっとラクになります。
| 応用アイデア | どう便利 |
|---|---|
| マークアップ＆注釈 | 重要な部分を矢印や枠で強調できて説明がわかりやすくなる |
| 自動保存＆整理 | 特定のフォルダに日付やサイト名で振り分けできるのであとで探しやすい |
| ショートカット連携 | ワンクリックでSlackやチャットに送信できて共有がスムーズ |
| ワークフロー自動化 | スクリプトで定期レポート用の画像をまとめてガバッと生成できる |
これらを活用すれば、手動でファイル整理したり説明画像を作ったりする手間がグッと減って、作業がスムーズになります。遊び心を取り入れつつ、自分好みの使いこなし方を見つけてみてください。
ブログ用にページ全体を縦長1枚で保存
ブログ用に縦長1枚でページ全体を保存したいときは、Firefoxの「ページ全体をスクリーンショット」機能が便利です。ページアクションメニュー（アドレスバー右端の三点リーダー）から「スクリーンショットを撮る」を選び、「ページ全体」をクリックするだけで、見出しからフッターまで一気にキャプチャできます。画像をあとでつなぎ合わせる手間が省けるので、長い記事や商品一覧をそのままブログに貼りたいときにぴったりです。
Firefoxの「ページ全体を保存」で長い記事を丸ごとキャプチャ
アドレスバー右端のページアイコン（三つの点）をクリックしてメニューを開き、スクリーンショットを撮るを選びます。
表示されたオプションの中からページ全体を保存を押すと、縦に長い記事もまとめてキャプチャできます。
キャプチャ結果のプレビューが開いたら右上の「ダウンロード」をクリックしてPNGファイルとして保存します。
Slackにパッと貼り付けて共有
Slackの投稿欄にキャプチャをペーストすると、ファイル選択の手間をまるっと省けます。クリップボードにある画像を⌘+Vでサクッと貼り付けられて、チームとのやりとりが一瞬でビジュアル共有モードに切り替わります。バグ報告やデザインの細かい相談など、言葉だけでは伝わりにくい場面で大活躍するテクニックです。
controlキー併用で撮影してからcommand+Vで即投稿
controlキーを押しながらShift+Command+4を押すと十字カーソルが表示されます。撮りたい範囲をドラッグしてからマウスを放すと、ファイルではなくクリップボードに画像が保存されます。
SafariやSlackなど投稿先の入力欄をクリックしてcommand+Vを押すと、先ほど撮ったスクリーンショットがすぐに貼り付けられます。
ショートカットキーを1つにまとめて時短
Firefoxのスクリーンショット呼び出し（Shift＋Command＋S）と保存操作をAutomatorのクイックアクションにまとめて、システム環境設定で好みのキー（例：F2）を割り当てる方法です。いちいち複数キーやマウスを使わず、シングルキーでパシャッとキャプチャが完了します。
頻繁にスクリーンショットを撮る人にぴったりで、手の移動がグッと減ってサクサク作業が進みます。単なるカスタムキーではなく、実際の操作をワンアクションに凝縮するのがプログラマー流の時短ポイントです。
Automatorで⌥⇧5に連番保存ワークフローを作成
ここではAutomatorを使ってOption+Shift+5を押すだけで連番付きのスクリーンショットをPicturesフォルダに保存するワークフローを作ります。
アプリケーションフォルダからAutomatorを開き、「新規書類」→「クイックアクション」を選択してください。
上部メニューで「ワークフローが受け取る現在の項目」を「入力なし」にし、「任意のアプリケーション」を選んでおきます。
左側のライブラリから「ユーティリティ」→「シェルスクリプトを実行」をドラッグ＆ドロップします。
スクリプトフィールドに以下をコピーして貼り付けます。
filename=$(date +%Y%m%d%H%M%S).png screencapture -i ~/Pictures/"$filename"
このスクリプトで日時ベースの連番ファイル名を作り、インタラクティブスクリーンキャプチャをPicturesフォルダへ保存します。
⌘+Sで「連番スクショ」といった分かりやすい名前を付けて保存します。
システム環境設定→キーボード→ショートカット→サービスに移動し、「連番スクショ」を探してOption+Shift+5を割り当てれば完了です。
プレビューで画像サイズを軽くする
画像を軽くしたいときにはMac標準のプレビューを使うのが便利です。アプリを追加せずに写真を開いたら書き出し設定でクオリティを調整するだけで容量をぐっと抑えられます。ブログやSNSにアップロードするときにサクサク動くようになるので、手軽に試してみてください。
プレビューのサイズ調整で幅1200pxにリサイズして再保存
スクリーンショットを撮ったあとは、ファイルをプレビューで開いてサイズを整えると、ブログや資料で見栄えよく使えます。
Finderでスクリーンショットをダブルクリックすると、既定のプレビューで表示されます。
メニューバーの「ツール」→「サイズを調整…」を選択します。
幅の入力欄に「1200」と入れて「OK」をクリック。そのままコマンド+Sで上書き保存します。
拡大すると画質が若干落ちることがあるので、もともと大きめのスクリーンショットを使うとシャープに仕上がります。
よくある質問
Firefoxのスクリーンショット機能はどこにある？
- Firefoxのスクリーンショット機能はどこにある？
最新のFirefoxではアドレスバーの右端にある「ページ操作」メニュー（︙アイコン）をクリックすると「スクリーンショットを撮る」が選べます。
撮影したスクリーンショットはどこに保存される？
- 撮影したスクリーンショットはどこに保存される？
特に設定を変えていなければホームフォルダの「ダウンロード」フォルダにPNG形式で保存されます。Finderでサクッと確認できます。
画面の一部だけ撮影するコツは？
- 画面の一部だけ撮影するコツは？
スクリーンショットモードを選ぶとドラッグできる枠が現れます。角をドラッグしながら狙いたい部分をぴったり囲むと、余計な部分をカットできます。
シャッター音が鳴らないけど撮れている？
Firefoxでスクリーンショットを撮ると、スマホのようなパシャッというシャッター音は鳴りません。ビックリするかもしれませんが、音がないだけでちゃんと撮影されています。
撮れているか不安な場合は、デスクトップや指定フォルダに自動保存されたファイルを確認すると安心です。ファイル名には撮影日時が入るので、並び替えれば最新のキャプチャをすぐに見つけられます。
保存先をデスクトップ以外に変えたい？
Firefoxで撮ったスクリーンショットがデフォルトでデスクトップにどんどんたまると、作業中の画面がごちゃついてしまいます。そんなときは、Macの設定を変えて任意のフォルダに保存先を切り替えると便利です。ターミナルでパパッと設定すれば、プロジェクトごとや日付ごとに整理できて、デスクトップがいつもスッキリ保てます。
- 散らかったデスクトップをスッキリ：不要ファイルの混在防止ができる
- フォルダ単位で整理：プロジェクトごとにまとめやすい
- 自動化しやすい：スクリプトや外部アプリとの連携もスムーズ
Firefoxのスクロールショットが灰色になるのはなぜ？
Firefoxのスクロールショットは画面を分割して内部で合成する仕組みです。そのときGPU（ハードウェアアクセラレーション）を使って描画される要素やビデオ、canvas、クロスオリジンのコンテンツなどはキャプチャできず、灰色のブロックで置き換えられます。
Retinaの高解像度を保ったまま撮れる？
Firefoxで普通に画面を撮ると、Retinaの高解像度がCSSピクセルに変換されて文字やアイコンがちょっとぼやけることがあります。
そんなときは開発ツールのスクリーンショット機能が便利です。ここから撮ると画面のピクセル情報をそのままキャプチャできるので、見たままの鮮やかさとくっきり感を残せます。
細かい文字やデザインを後から拡大してチェックしたいとき、ブログ用の画像を綺麗に載せたいときにピッタリの方法です。
まとめ
Mac内蔵のShift+Command+3/4やFirefoxの右クリックメニューから呼び出すページ全体キャプチャを組み合わせれば、ほしい画面をぱっと保存できます。
Developer Toolsのスクリーンショットコマンドやショートカットのカスタマイズを活用すると、プログラマーらしい細かい調整も思いのままです。
これで資料作成やバグ報告がぐっと楽になりますので、ぜひ今日からスクリーンショット機能を楽しみながら使いこなしてみてください。