パソコン関係の記事では、何かの瞬間をスクリーンショットとして保存したくなることはよくあります。しかし、スクリーンショットの撮り方だけではなく、その活用方法や便利なコツを知っていると、より効率的に作業が進みます。本記事では、Windowsでのスクリーンショットの基本的な撮り方から応用テクニックまでをわかりやすく解説します。どなたにも役立つ情報満載ですので、ぜひご覧ください！

スクリーンショットに使うツール

スクリーンショットのツール

Windows のスクリーンショット機能は画面全体とアクティブウィンドウのみの簡易的なもの。オブジェクトやスクロールウィンドウの撮影など、もろもろの機能が足りないためWeb製作用には向かない。

無料なら PicPick Portable がいいでしょう。現在は日本語環境でも使えます。自分は他の物を利用していますが機能面はほぼ同じです。

画像加工のツール

ブログにイラストレーターは使いますが PhotoShop は使ったことがない、必要になった場面がない。

無料のもので十分。ただし、レイヤーが使えないと話にならない。PhotoFiltre Portable はどうでしょうか。

MS Paint や GIMP はプロでも使いこなすのは難しいと思う。

スクリーンショットで利用するファイル形式

スクリーンショットは PNG で撮影保存します。多くのスクリーンショットアプリのデフォルトも PNG になっています。

JPEG は色を捨ててるし透過をサポートしないので元画像とするのは不可です。

JPEG にしたいときは、PNG を元画像として加工後に最終出力します。
最終フォーマット

Window のパーツはデジタルなので、当然できあがりは PNG。と言いたいところですが、グラデーションやシャドウが入るようになって悩ましくなった。

基本 PNG で、ファイルサイズが大きくなりすぎる場合は JPEG や WEBP を検討する感じです。

何回か実践すればすぐにフォーマットの特徴が分かりますが、はじめは実際に出力してファイルサイズや画質を比較してみるのがいいでしょう。

スクリーンショットの撮り方

範囲指定

多くの SS アプリは Windows のオブジェクトを指定できます。ウィンドウコントロールや Class の名称でも呼ばれます。

ドロップシャドウをどうするか？

メニューなどのオブジェクトは撮影位置を少しずらすと影を含んだ SS を撮れます。

だだ、影は半透明なので背景も映ってしまうのが難点。後ろにメモ帳を開いて白バックにするなど工夫が必要。

影なしで撮影して、必要に応じて後で影を入れるほうが応用が利くのでおすすめ。

編集の段階でドロップシャドウを入れるかスタイルで付けるかはお好みや状況次第。CSS で付けた場合、Google 画像検索には影なしの画像が表示されます。念のため。
白バックか透明か

ダークモードも視野に入れると白バックもありかもしれないが、やはり透明背景のが汎用性が高い。透明にするとファイルサイズが大きくなりすぎる場合には白バックも考えたい。

CSS の box-shadow ではなく filter プロパティを使えばウィンドウと同じように表示できます。

filter

box-shadow

この場合も PNG の透過が役に立ちます。
サブメニュー

シェルメニューのサブメニューはメインとサブの SS を撮って編集で合体させる。
1. 個別に SS を撮って
2. 編集で合体させます。
レイヤーを使ってサブを半透明にすれば意外にドットが荒いので簡単にフィットする。

背景を気にしないなら一発で撮影できるが、汎用性が低いのでおすすめしない。

このときに限らず、SS のショートカットを通常のキーや2つのキーの組み合わせにしていると被写体が消えてしまったり、別のアプリが立ち上がったりするので、キーボードのホットキーはファンクションキーや print screen などワンクリックなものにしておく。
カーソル

カーソルの有無は PicPick Portable の設定から選択できるので状況に応じて設定する。ほかの SS アプリでもたいてい指定できる。

アクティブなメニューは色が変わるので、その辺も撮影時には注意を要する。
ブラウザ

ブラウザ内のコンテンツは、F12 の開発ツールから細かく範囲指定して SS を取得できる。
1. ブラウザの開発ツールを開く。F12
2. 左上の矢印でノードを選択。
3. 右クリックメニューからノードのスクリーンショットを撮影

被写体のサイズ調整

Sizer

ウィンドウのサイズ調整には Sizer が便利。

覚えるのはCTRL + ALT + Zのショートカットのみ。

最新版の Sizer 4 は未完成感が残るので、Sizer 3 のがいいかもしれません。
ブラウザ内のコンテンツ

ブラウザのサイズも Sizer で調節できるが、コンテンツが表示されるビューエリアは指定できない。

ブラウザの開発ツールで幅を編集してしまうか、表示を見ながら手動で微調整する。
Windows オブジェクトの拡大

Windows のオブジェクト自体を拡大させて SS を撮る方法

⚙️設定 → 簡単操作

文字を大きくすると全体を大きくするの 2 つ方法がある。
- 文字を大きくするとオブジェクトも一緒に大きくなる。
  
  場所が限られるうえ、アイコンとのバランスをとる必要があるが、サイトで使用している画像ではたいてい上手くいってる。
  
  Windows の設定でなくても、アプリにフォントを設定できるものもあるので利用していきたい。
- 全体を大きくするは、通常サイズの SS を撮って編集ツールで拡大するのと同じなので SS 用ではあまり意味がない。

その他スクリーンショットのコツ

見せたくない文字の消し方

ぼかし

代表的な文字のマスク方法だが、見た目が汚くなりがち。

文字ではなく著作権侵害が懸念される画像をぼかすのには使えるでしょう。
背景色で消してしまう

背景色で塗りつぶしたりスタンプツールでなじませる。

一番きれいに仕上がるが、そこに文字があることを表現できない。

主題でない部分の文字を消すのに有効。
モザイク

多用してる方法。色数が増えるとPNG にするときにファイルサイズが大きくなってしまうのは注意。
黒塗り

黒またはほかの色で塗りつぶす。背景色と違い、明確にそこに文字があり隠してるのを表現できる。

目立ちすぎる欠点があり、また、先入観があるせいか、あまり印象が良くない。
取り消し線

または取消二重線で文字を隠す。最近注目している方法で意外に判別できなくなる。

ただし、じっくり解析されるとわかってしまうのでパスワード級の重要な情報には使用禁止。また、黒塗りと同様、多数の場所に使用すると少し目ざわりにも感じる。

画像は太めの線を使用しているが、もっと細くてもパッと見ではほとんど分からない。
はめ込み

背景色で消してしまい、上から○○○○〇など別の文字画像を埋め込む。

手間がかかるが、文字数も表現したい場合に有効。

多少の違和感も閲覧者は承知しているし、そこまで気にしない。説明したいことをしっかり伝えるのが一番の目的。