こんにちは、Six Apart ブログ編集長のことぶきです。

オウンドメディア記事執筆や広報の仕事の中で、ブラウザ画面のスクリーンショット（以下、スクショ）を撮影する機会が、頻繁にあります。

スクショは Windows 系OSならば PrintScreen キー、macOS ならば [Shift] + [command] + [4] を押せば、一瞬でパシャッと簡単に撮れちゃいます。

めでたしめでたし。終わり。

ではなくて、その雑に撮ったスクショには、個人のアカウント名や生々しい数値、不要なバナー広告など「隠したい情報」がたっぷり含まれていませんか？選択範囲の切り取りが雑で、撮りたい要素の上下左右の余白がバラバラになってませんか？

撮った後、画像加工ツールで隠したい情報にモザイクをかけたり、トリミングしたりと加工するのは手間です。ちゃんと下準備してから見せたい要素だけを一発で撮れたら、楽ですよね。

その下準備と撮影、パソコンの Chrome などの Chromium 系ブラウザに搭載されてる DevTools （開発者ツール）で可能です。表示しているページの要素を加工した上で、特定の箇所を指定して撮影できます。

Chrome DevTools  |  Chrome for Developers

Chrome DevTools を使用して、ウェブ アプリケーションのデバッグと最適化を行います。

developer.chrome.com

今回の記事では、見せたい情報だけに絞り込む「加工パート」と、理想のサイズで切り取る「撮影パート」の2つのステップに分けて、DevTools の活用術をご紹介します。

なお、DevTools は、これらの方法で開けます。

• ブラウザ画面上で右クリック →「検証」を選択
• Windows：[F12] キー、または [Ctrl] + [Shift] + [I]
• macOS：[command] + [option] + [I]

パソコンの Chrome で DevTools を開きながら、この記事をご覧いただくとすぐワザを試せるのでオススメです。

見せたい画面を作る、加工パート

加工パートでは、撮影の下準備として「画面の整理」を行います。DevTools の [要素] タブから、ブラウザに表示されているページの HTML/CSS を一時的に書き換えることで、不要な要素を削除したり、テキストを差し替えたりします。

「あ、間違えて関係ないところまで消しちゃった！」と思っても、焦る必要はありません。元のWebサイト（サーバー側のデータ）を書き換えているわけではないので、ページをリロード（再読み込み）すれば、一瞬で元の状態に戻ります。何度失敗しても大丈夫ですので、安心して試してみてください。

なお、HTML/CSS の知識があれば、かなり自由に加工できます。

ページ内の不要な要素をカットする

スクショ内の見て欲しい部分に注目してもらうためにも、バナー画像やSNSボタンなど不要な要素はカットしましょう。

1. DevTools の左上にある [ページ内の要素を選択して検査] ※点線四角＋矢印マーク をクリックします。
2. ページ内の消したい要素にカーソルを持っていきます。下のスクショの例では、f・X・B! が並ぶソーシャルボタン枠を選択しています。
3. [要素] タブに表示されているDOMツリー上で、カーソルを置いた箇所のコードがハイライトされるので、その部分を選択して Delete/BackSpace キーで削除します。

これで、選択した要素がブラウザ上から消え、見せたいものだけにフォーカスした画面が作れます。

ページの余白を調整する

要素を消したことで直下の要素が持ち上がって撮影したい領域にかぶってしまった、もしくはスクロールしないと1画面に収まらない微妙な隙間がある場合には、CSS（スタイル）を調整して整えましょう。

1. 余白を調整したい要素にカーソルを持っていきます。
2. DevTools の右側（または下側）にある「スタイル」パネルを確認します。
3. margin（外側の余白）や padding（内側の余白）、height（高さ）などの数値を書き換えるか、不要なプロパティのチェックボックスを外して無効化します。

見せたい情報がスクショ1枚に収まるよう余白を調整することで、伝わりやすくなります。

テキストをダミー情報に書き換える

画面内にアカウント名やID情報、実際の金額など隠したい情報が含まれている時は、画面上で別のテキストに差し替えてから撮影しましょう。

1. 要素選択ツールで、編集したいテキストにカーソルを持っていきます。
2. DevTools の [要素] タブのDOMツリー上で、編集したいテキストを探し、その行をダブルクリックします。
3. 任意に編集して Enter を押します。

ページで指定されたフォント情報のまま、テキストだけが差し替わるため、違和感のないダミー画面が完成します。

なお、この方法はあくまで「非公開にしたい情報をダミー情報で隠す」ための手段として使い、見る人が実際の情報だと誤認しないよう配慮してください。具体的には、「user01」や「testuser」のように明らかに匿名のプレースホルダーらしい文字列にするとわかりやすいです。実在しそうな値に差し替える場合は「金額はダミーです」とキャプション等で記載するのが良いかと思います。

決まったサイズで欲しい要素だけを撮る、撮影パート

画面の整理が終わったら、次は撮影パートです。手作業の範囲選択に頼らず、DevTools の機能でサイズも切り取り位置もきっちり揃ったスクショを撮りましょう。

ぴったり同じサイズで複数撮影する、デバイスモード

「PC版の画面を3パターン」「モバイル版の画面を3パターン」など、複数のスクショを並べたい時があります。手作業で範囲を指定して撮影すると、どうしても数ピクセルのズレが発生し、記事に並べたときに画像がガタついて見えてしまいます。これらを完璧に同じサイズで揃えるために、DevTools のデバイスモード を活用します。

1. DevTools の左上にある [デバイス] ボタン（PCとスマホのアイコン）をクリックして、デバイスモードに切り替えます。
2. 最初は「サイズ：レスポンシブ」で表示されます。その隣のサイズ指定欄で、横幅を「1200」など数値で指定すると、その横幅でページが描画されます。もしくは、「レスポンシブ」の箇所をクリックすると、プリセットされているモバイル端末の選択肢が出てきます。任意のモバイル端末を選ぶと、そのサイズになります。
3. その状態のまま、デバイスモードのツールバー右上にある [︙] ボタンから [スクリーンショットをキャプチャ] を選びます。

指定したサイズ、もしくは指定したモバイル端末のサイズに固定された状態の画面を撮影できるため、何枚撮っても縦横のサイズがぴったり揃います。

なお、同じ [︙] メニューにある [フルサイズのスクリーンショットをキャプチャ] を選ぶと、ページ全体の縦長のスクショを1枚で撮影できます。

狙った要素だけを切り取る、ノードキャプチャ

ページの中の狙った要素だけを、スクショ撮影してくれる機能です。商品説明の1枠分、価格表だけなど、「この部分だけを綺麗に切り抜きたい」というときに使えます。

1. 要素選択ツールで、切り抜きたい要素（ノード）を選択します。
2. [要素] タブのDOMツリー上で、ハイライトされたその要素を右クリックします。
3. メニューから [ノードのスクリーンショットをキャプチャ] を選びます。

すると、選択した要素だけを切り抜いたスクショが撮影できます。

まとめ：「何を伝えたいか」が伝わりやすいスクショを撮ろう

Chromium 系ブラウザ内蔵の DevTools は、開発者向けのツールですが、「読者に伝わりやすいスクリーンショットを作るための、情報の整理・撮影ツール」としても非常に優秀です。

見せたい情報だけに編集した上で、必要な要素だけをきっちり撮影する。そうするだけで、説明用画像のわかりやすさも、並べたときの美しさも大幅に向上しますし、何よりスクショ撮影がかなり簡単になります！

スクショ撮影の際に、お役立てください。

※補足：本記事に掲載されている画像の赤丸数字や矢印、説明文追加などの加工は、DevTools ではなく「CleanShot X」を利用しています。