Chromeで見ているページをそのまま保存したいけど、部分だけ切り取りたいのか全体を一枚で取りたいのか迷って手が止まっていませんか。
この記事を読むと、Macの標準ショートカットからChrome内の便利な機能やおすすめ拡張まで、実際に使ってうまくいった具体的な手順で学べるので、すぐに欲しい画面をきれいに保存できるようになります。
| 項目 | 内容 |
|---|---|
| 独自コンテンツ1 | 実体験に基づく誰でもできるステップバイステップの手順を掲載しています。 |
| 独自コンテンツ2 | デベロッパーツールを使った長いページの一発キャプチャなどプログラマー目線の裏ワザを紹介します。 |
| 独自コンテンツ3 | よくあるミスの対処法やファイル名の付け方など現場で役立つコツを具体的に伝えます。 |
まずは基本のショートカットを試してみましょう。順番にやれば確実にできるようになりますし、慣れたら拡張機能やデベロッパーツールの技も試せるようになりますよ。
Macエンジニア気軽に試してみてくださいね。うまくいかないときは焦らず繰り返せば確実にコツがつかめますし、ちょっとした手順の違いで結果が変わることも多いので安心してください。
MacでChromeの画面を部分や全体で撮る方法
Chromeの画面を撮る方法はシンプルです。部分だけを切り取る方法と、特定のウィンドウだけを撮る方法、それに画面全体を撮る方法の3つがあります。どれもキーボードだけでサッとできるので慌てずに操作できます。
撮った画像はデフォルトでデスクトップにPNGで保存されます。ファイルをクリップボードに送って別のアプリに貼り付けたいときは、キーを押すときにControlを一緒に押すと便利です。
- 選択範囲を撮る：Shift+Command+4を押してドラッグで範囲を指定します。
- ウィンドウを撮る：Shift+Command+4を押してからSpaceでウィンドウをクリックします。
- 全画面を撮る：Shift+Command+3で画面全体を一気に保存します。
Macで選択・ウィンドウ・全画面の3パターンを撮る手順（キーボード）
キーボードだけで3つの撮影パターンを使い分けると作業が速くなります。Shift+Command+4で部分撮影、同じ操作中にSpaceでウィンドウ指定、Shift+Command+3で全画面を撮れます。
撮影時にControlを追加すると画像がクリップボードに入るので、チャットやドキュメントにそのまま貼れます。必要ならCommand+Shift+5でスクリーンショットの設定画面を開いて保存先を変えられます。
MacでShift+Command+4を押してドラッグで範囲を選びデスクトップに保存する手順
Shift+Command+4を同時に押します。カーソルが十字になります。
十字で撮りたい範囲をドラッグします。ドラッグ中にSpaceを押すと範囲の位置を微調整できます。
ドラッグを終えると撮影されてデスクトップにPNGとして保存されます。Controlを押しながら操作するとクリップボードに保存されます。
MacでShift+Command+4を押してSpaceを押しChromeウィンドウをクリックして保存する手順
Shift+Command+4を押します。カーソルが十字になります。
Spaceを押すとカーソルがカメラアイコンに変わります。
撮りたいChromeウィンドウをクリックすると、そのウィンドウだけがデスクトップに保存されます。Controlを押すとクリップボードに入ります。
MacでShift+Command+3を押して画面全体をデスクトップに保存する手順
Shift+Command+3を同時に押します。画面全体が即座に撮影されます。
外部ディスプレイがある場合は各画面ごとに個別のファイルが保存されます。
MacのChromeでページ全体や特定要素をスクロール込みで撮る方法
Chromeのページをスクロール込みで録る方法は主に3つあります。DevToolsのコマンドでフルページを撮る方法と、要素単位で撮る方法、そして専用拡張を使う方法です。
- DevToolsのコマンドでフルページを保存する方法。ブラウザの見たままを一気に画像化できます。
- Elementsパネルで特定の要素だけを選んで保存する方法。不要な部分を省けるので資料作りに便利です。
- スクロール録画や注釈付きが欲しいときは拡張機能を使う方法。操作がかんたんなものが多いです。
普段使いで迷わないのはDevToolsの機能です。表示崩れやlazyロードがある場合はページを最後まで読み込ませてから撮影すると失敗が少なくなります。
Macエンジニア初めてでも大丈夫です。まずはDevToolsでフルページを1回撮ってみると流れがつかめますし、要素撮影は慣れると作業がとても速くなりますので気楽に試してみてください。
ChromeのDevToolsコマンドでフルページと要素を撮る手順
DevToolsのコマンドを使うと、画面をスクロールして全体をまとめて画像化できます。Macでは開発者ツールを開いてコマンドメニューを呼び出し、該当コマンドを実行するだけです。
ページ内に遅延読み込みの画像や動的に高さが変わる要素がある場合は、最後までスクロールして完全に読み込ませてから実行してください。
MacでChromeを開きOption+Command+Iで開発者ツールを開きCommand+Shift+Pでコマンドメニューを表示してCapture full size screenshotを実行する手順
Chromeで該当ページを開き、Option+Command+Iを押して開発者ツールを表示してください。
Command+Shift+Pを押してコマンドメニューを表示してください。
メニューにCapture full size screenshotと入力してEnterを押してください。自動でページ全体が画像化され、ダウンロードが始まります。
MacでDevToolsのElementsパネルで対象要素を選び右クリックしてCapture node screenshotを選んで保存する手順
開発者ツールのElementsタブで撮りたい要素をクリックして選択してください。選択中の状態で右クリックが可能になります。
選択した要素を右クリックして表示されるメニューからCapture node screenshotを選んでください。
自動で選択要素だけが画像になりダウンロードが始まります。必要ならファイル名を変更して保存してください。
MacでChromeのスクリーンショットを撮ってすぐ注釈を付ける方法
Chromeの画面を撮ってすぐ注釈を付けたいときは、Macのスクリーンショット機能がとても便利です。撮った直後に小さなサムネイルが表示されるので、そこからすぐに編集に入れますので安心してください。
簡単な操作だと、Command+Shift+3で全画面、Command+Shift+4で範囲指定、Command+Shift+5で撮影オプションを呼び出せます。範囲指定中にSpaceを押すとウィンドウ単位で撮れるので、ウィンドウだけ注釈したいときに便利です。
編集はサムネイルやプレビューで矢印や文字を追加してDoneで保存するだけなので気軽に使えます。作業中に何度か保存しておくと、やり直しも楽になりますので試してみてください。
撮影後のサムネイルとプレビューで注釈を付ける基本ワークフロー
撮影後の最短ルートは、画面右下に出る浮かぶサムネイルをクリックしてマークアップを開くことです。マークアップには矢印や枠、文字ツールが揃っているので、伝えたい箇所をさっと強調できます。
もしサムネイルを見逃しても、後からFinderやプレビューで同じマークアップ機能を使えます。編集後はDoneかCommand+Sで保存すれば、Desktopなどの既定の保存先に反映されますので安心してください。
スクリーンショット後に表示される浮かぶサムネイルをクリックしてマークアップツールで矢印や文字を追加して保存する手順
Command+Shift+3で全画面、Command+Shift+4で範囲選択、Command+Shift+5でオプションを使って撮影します。撮影すると画面右下に浮かぶサムネイルが表示されます。
浮かぶサムネイルをクリックすると編集画面が開きます。ツールバーから矢印やテキスト、ハイライトを選んで注釈を追加します。
編集が終わったらDoneをクリックして保存か、共有ボタンで直接送信できます。保存先は通常Desktopなので後で見つけやすいです。
Finderで画像を選んでSpaceでクイックルックを開きマークアップを使うかダブルクリックしてプレビューで編集して保存する手順
スクリーンショットは通常Desktopに保存されますのでFinderで該当ファイルをクリックします。見つからないときはSpotlightでファイル名や日付検索を使ってみてください。
選択した状態でSpaceを押すとクイックルックが開きます。鉛筆マークのマークアップをクリックして矢印や文字を追加し、Doneで保存します。
ファイルをダブルクリックしてPreviewで開き、表示メニューからマークアップツールバーを表示して編集します。編集後はCommand+Sで上書き保存できます。
MacでChromeのスクリーンショットの保存先とファイル管理を効率化する方法
Chromeで撮ったスクリーンショットがどこにあるか迷うことはよくあります。ここではMacで保存先を賢く変える方法とダウンロードをすっきり整理するコツをやさしく紹介します。プログラマー視点の小技も交えて説明します。
主な方法は2つあります。撮影時に保存先を指定する方法と、撮ったあとでChromeやFinderからリネームや移動で整理する方法です。どちらも覚えると作業がぐっと速くなります。
プログラマーならではのコツとして、プロジェクトごとにフォルダを分けてスクリーンショット撮影時に保存先を切り替えると後で探しやすくなります。さらにスクリプトで命名規則を統一すると大量の画像整理がぐっと楽になります。
- 撮る前に保存先を指定して任意のフォルダへ保存する方法。
- ChromeやFinderで後からリネームや移動で整理する方法。
- Automatorやショートカットで自動振り分けする方法。
保存先変更とダウンロード整理の実践手順
保存先変更とダウンロード整理の基本をやさしく説明します。撮る前に保存先を変える方法と撮ったあとにChromeやFinderで整理する流れを身につけましょう。具体的な手順は次で順に示します。
よく使うフォルダはFinderのサイドバーに登録すると移動が速くなります。さらに自動化したい場合はショートカットやAutomatorで振り分けルールを作るのがおすすめです。
Command+Shift+5で保存先を選ぶとすぐに指定フォルダへ保存されます。
Chromeのダウンロードバーからファイルを表示してすぐに開けます。
リネームやフォルダ移動でカテゴリ分けすると後で見つけやすくなります。
MacでCommand+Shift+5を押しオプションの保存先からフォルダを選んで以降のスクリーンショットの保存先を変更する手順
画面下部にスクリーンショットコントロールが表示されます。
オプションから保存先を指定できるメニューが開きます。
選んだフォルダが以降の既定の保存先になります。
ChromeのダウンロードバーやFinderのダウンロードフォルダを開きスクリーンショットをリネームや移動で整理する手順
ダウンロードバーの矢印からファイルを表示できます。
ファイルを選んでリネームや移動で分類します。
よく使うフォルダはサイドバー登録やスマートフォルダで素早く開けます。
よくある質問
- Chromeで画面全体のスクリーンショットはどうやる
Mac標準のショートカットCommand+Shift+3で画面全体がデスクトップにPNGとして保存されます。Controlを押しながら実行するとクリップボードにコピーされるので、すぐに他のアプリへ貼り付けたいときに便利です。
- Chromeのウィンドウだけを撮るには
Command+Shift+4を押してからSpaceを押すとカメラアイコンに変わり、撮りたいウィンドウをクリックするとそのウィンドウだけが保存されます。操作をやり直したいときはEscでキャンセルできます。
- ウェブページ全体を1枚の画像で保存できますか
できます。Chromeの開発者ツールを開く(Command+Option+I)→Command+Shift+Pでコマンドメニューを出して’screenshot’と入力し’Capture full size screenshot’を選ぶとページ全体が保存されます。拡張機能を入れたくないときに重宝します。
- 画面の一部だけをきれいに切り取るコツは
Command+Shift+4でドラッグして領域を選べます。選択中にSpaceで選択を動かせ、Optionで中心基準のリサイズ、Shiftで方向を固定できるので細かい調整がしやすくなります。
- 保存先やファイル形式を変えたいときはどうする
Command+Shift+5を使うと画面下にコントロールが出て、保存先やタイマー、ファイル形式の設定ができます。頻繁に設定を変える場合はここで好みを登録しておくと手間が減ります。
まとめ
まずは手早く画面全体を撮る方法と、部分的に切り取る方法、それから縦長のウェブページ全体を保存する方法の三つを押さえておくと安心です。Macの標準ショートカットでサッと撮れる場面が多く、Chromeの開発者ツールや専用拡張機能はページ全体や細かい調整に便利です。用途に合わせて使い分けるだけで作業がぐっと楽になります。
画面全体はShift+Command+3、選択して部分を撮るときはShift+Command+4、ウィンドウ撮影はShift+Command+4のあとにスペースという流れが覚えやすいです。Chromeでページ全体を取りたいときは開発者ツールのコマンドからCapture full size screenshotを使うと確実です。拡張機能はスクロールや注釈をまとめて行いたいときに役立ちます。
撮影後はプレビューのマークアップ機能で不要部分をトリミングしたり、ファイル名を整理しておくと後で探しやすくなります。初めはいくつか試してみて、よく使う方法をショートカットやワークフローに組み込んでみてください。
Macエンジニア最初は戸惑うかもしれませんが、何度かやればあっという間に慣れます。気楽に試して、自分がよく使うパターンを見つけていきましょう。
スクリーンショットには個人情報やログイン情報が写り込みやすいので、不要な情報がないか必ず確認してください。