スクリーンショットを画像に変換：保存、形式設定、最適化の方法

最終更新日: June 28, 2026

スクリーンショットは単なる画像ファイルですが、どの形式で保存するかによって、テキストがシャープに保たれるか、ぼやけた塊になってしまうかが決まります。スクリーンショットのほとんどはフラットな色とテキストで構成されているため、JPEGでは圧縮されやすく、PNGまたはロスレスのWebPでは美しく再現されます。本ガイドでは、各プラットフォームでのスクリーンショットのキャプチャ方法、どの形式を選択すべきか、そして可読性を失うことなくウェブ用に縮小する方法を解説します。

クイックアンサー：どのような形式でスクリーンショットを保存すべきですか？

編集やアーカイブ用にはPNGとして保存し、ウェブ用にはロスレスWebPに変換してください。PNGはテキストとUI要素のシャープなエッジを保持しますが、WebPはファイルサイズが約半分という点で同じロスレス品質を提供します。JPEGはスクリーンショットには避けるべきです。その圧縮処理は、鮮明なテキストをぼやけたアーティファクトに変えてしまいます。ウェブサイトに掲載するスクリーンショットの場合は、まずresizeで表示寸法にリサイズし、次にロスレスWebPにcompressしてください。

各プラットフォームでどのようにスクリーンショットを撮りますか？

キャプチャ手順はデバイスによって異なりますが、すべてのプラットフォームには組み込みのショートカットがあります。

• Windowsでは、Win + Print Screenを押すと、Screenshotsフォルダ内に直接ファイルが保存されます。
• macOSでは、ショートカットにCtrlを追加すると、ファイルを保存する代わりにクリップボードにコピーできます。
• 高DPIディスプレイの場合、2xでキャプチャし、標準画面用にダウンスケールすることでよりシャープな結果が得られます。

なぜPNGがスクリーンショットに適した形式なのですか？

スクリーンショットは写真とは異なります。写真は滑らかなグラデーションと何百万もの色を持ちますが、スクリーンショットはフラットな色のブロック、硬いエッジ、そしてテキストで構成されています。JPEGは写真を想定して設計されているため、スクリーンショットのシャープな遷移をぼやけさせようとし、その結果としてすべての文字の周りに目に見えるアーティファクトが発生します。

PNGはロスレスであるため、すべてのピクセルを正確に記録します。トレードオフとなるのはファイルサイズであり、フルスクリーンPNGは数メガバイトになる可能性があります。ロスレスWebPがこれを解決し、より小さなサイズで同じピクセルパーフェクトな品質を提供します。WebP vs JPEG comparisonでは、それぞれの形式が具体的にどの点で優れているかを解説しており、WebAIM guide to image formatsではアクセシビリティの観点から説明されています。スクリーンショットは、それらをドキュメントとして頼りにするユーザーにとって可読性が重要だからです。

ウェブ向けにスクリーンショットを最適化する方法

生のスクリーンショットは、表示に必要なサイズよりもはるかに大きいことがほとんどです。最適化の手順は毎回同じです。

1. image cropperを使用して、ブラウザのChromeやタスクバーなど、不要な要素を切り抜きます。
2. 正確な表示寸法にresizeします。2560pxの画像を640pxのスロットに配信することは帯域幅の無駄になります。
3. ウェブ用にPNGをロスレスWebPに変換します。スクリーンショットが写真が多いUIの場合、品質85のWebPは許容できる損失があるものの、より小さくなる場合があります。
4. 100%ズームで結果を確認し、テキストがまだシャープであることを確認します。

フルページスクリーンショットのキャプチャ方法はどうしますか？

フルページスクリーンショットは、表示されているビューポートだけでなく、スクロールするページ全体を捉えます。現在では、主要なすべてのブラウザが追加のツールなしでこれを行うことができます。

• Chrome / Edge / Firefox: DevTools (F12) を開き、コマンドメニュー (Ctrl+Shift+P) を開いて、「screenshot」と入力し、「Capture full size screenshot」を選択します。
• Safari: Developメニューを有効にし、Develop > Show Web Inspectorからページ全体のスクリーンショットを撮ります。
• 拡張機能: GoFullPageなどのツールは、長いページをキャプチャして単一のPNGまたはPDFとしてエクスポートできます。

フルページキャプチャは、スクロールするレイアウトを1枚の画像でドキュメント化するための唯一の方法です。ウェブでのサイズ調整についてより深く知りたい場合は、responsive images guideが異なる画面に異なる寸法を配信する方法を解説しています。

スクリーンショットのバッチ処理

ドキュメンテーションサイトやヘルプセンターを維持している場合、すべて同じ処理（切り抜き、リサイズ、圧縮）が必要な何百ものスクリーンショットが蓄積されます。これを一つずつ行うのはスケーラブルではありません。

実用的なアプローチは、フォルダー内のすべてのファイルに同じ設定を適用することです。ドキュメント化された表示幅にリサイズし、PNGをロスレスWebPに変換し、元のファイルをそのまま残すために新しいフォルダーに出力を書き出します。これにより、ヘルプ記事のすべてのスクリーンショットが一貫したサイズと形式になり、サイト全体が一貫性のある印象になります。

• PNGマスターはアーカイブフォルダーに保管してください。これらがロスレスなソースです。
• スクリーンショットの名前を日付ではなく機能名で付けることで、見つけやすさを保てます。
• 新しい表示幅を採用した際は、古いスクリーンショットが新しいものと一致するようにバッチ処理を再実行します。

ロスレスWebPがどのようにしてPNGよりも小さなファイルサイズを実現するかの根本的な仕組みについては、Google WebP compression documentationで、この形式がフラットなUI領域で効率的であるようにする予測コーディングについて解説されています。

一般的なスクリーンショットの問題と修正方法

• エクスポートされたファイルでテキストがぼやけて見える — JPEGとして保存しました。PNGまたはロスレスWebPに切り替えてください。
• アップロードするにはファイルが大きすぎる — 表示寸法にリサイズし、WebPに変換してからアップロードしてください。
• 高DPIスクリーンでスクリーンショットの解像度が不適切 — 2xでキャプチャしてダウンスケールするか、ツールのDPI設定を確認してください。
• 透明度を期待した場所に白い背景がある — ほとんどのキャプチャツールは透過をサポートしていません。アルファチャンネルを持つPNGを出力できるツールを使用してください。
• スクリーンショットが間違ったモニターを表示している — マルチモニターセットアップの場合、ショートカットはプライマリディスプレイをキャプチャします。適切な領域を選択するために切り取りツールを使用してください。

スクリーンショットはそもそもいつ使うべきですか？

スクリーンショットはドキュメンテーションツールです。画面がどのように見えたかを正確に示す必要がある場合（バグ報告、チュートリアル手順、アプリレビューなど）に最適な選択肢です。一方、クリーンなイラストや切り抜いた写真の方がより良く伝わる場合は不適切です。なぜなら、スクリーンショットにはポイントから注意をそらすUIの雑然さが含まれるからです。関連する領域にタイトにトリミングし、PNGまたはロスレスWebPとして保存し、宛先に合わせてリサイズします。正しく行えば、スクリーンショットは証拠として読めますが、間違って行うとノイズとして読めてしまいます。

よくある質問

どのような形式でスクリーンショットを保存すべきですか？

シャープなテキストやエッジ、ロスレス品質のためにはPNGです。JPEGの圧縮はテキストをぼやけさせます。ウェブで使用する場合は、WebPに変換してサイズを縮小してください。スクリーンショットはグラフィックなので、写真としてではなくグラフィックとして扱ってください。

各プラットフォームでどのようにスクリーンショットを撮りますか？

macOS: Cmd+Shift+3（フルスクリーン）またはCmd+Shift+4（選択範囲）。Windows: Win+Shift+S (Snipping Tool) または Print Screen。Linux: スクリーンショットツール、またはgnome-screenshot。各プラットフォームにはブラウザ内でフルページキャプチャオプションもあります。

なぜPNGがスクリーンショットに適した形式なのですか？

スクリーンショットは主にシャープなテキスト、エッジ、フラットな色で構成されており、これこそがJPEGの圧縮によって損傷しやすいものです。PNGはそれらのエッジをロスレスに保持します。ウェブ配信のためには、ファイルサイズを削減するためにPNGをWebPに変換してください。

フルページスクリーンショットはどうキャプチャしますか？

ブラウザ内蔵のフルページキャプチャ機能を使用してください（DevToolsまたはブラウザ拡張機能）。ページ全体をスクロールし、1枚の縦長の画像に縫い合わせます。完全なレイアウトや長い記事をドキュメント化するのに役立ちます。

スクリーンショットは編集できますか？

はい—エディターで開いてトリミングしたり、注釈を加えたり、機密情報を削除したりできます。最終的なエクスポートまでは編集をロスレス（PNG）に保ち、ウェブ用にはWebPに変換してください。スクリーンショットはグラフィックなので、写真としてではなくグラフィックとして扱ってください。

ウェブ用にスクリーンショットを最適化するにはどうすればよいですか？

編集用にはPNGを保持し、配信用にはサイズ削減のためにWebPに変換します。表示幅にリサイズしてください。スクリーンショットはシャープなテキストとフラットな色なので、PNGがロスレスで保持し、WebPが縮小してくれます。JPEGではテキストのエッジが損傷します。compress guideを参照してください。

フルページスクリーンショットはどうキャプチャしますか？

ブラウザ内蔵のフルページキャプチャ機能を使用します。Chrome DevToolsでは、コマンドでビューポート全体をスクリーンショットするか、ページ全体をスクロールし1枚の縦長の画像に縫い合わせるブラウザ拡張機能を使用します。これは、画面に収まらない長い記事や完全なレイアウトをキャプチャするための信頼できる方法です。