パソコン版のChromeブラウザの便利な機能の紹介です。
ブログ記事を作成していて「サイトの画像があればいいのにな…」と思った経験はありませんか？
特に、ネットサービスの申込手順や、操作方法を解説するような「ノウハウ系の記事」を作成していると、必要になるはずです。
「他のブロガーさんは、どうやって用意しているのだろうか？」と思っていました。
ネットで検索すると、さまざま方法が紹介されています。
私が今回紹介する方法も、ネットで簡単に見つけることができるものです。目新しい方法ではありませんが、とても簡単で私が一番使っている方法です。
ブログで使う画像の用意はブロガーの悩み
ブログの記事を作るときに、必要なものが「画像」です。
目的にあった「画像」を用意するのは、ブロガーにとって重要で大変な作業です。
記事に必要な画像は、ネットの無料サイトから探してきたり、有料の画像配布サービスを利用する方法があります。その他、自分で画像を編集する方法もあります。
当ブログ内の別の記事で、私が利用しているサイトやサービスを紹介しているので、興味のある方は参考にしてください。
【関連記事】
これらの方法以外に、パソコン画面に表示されているWebサイトをそのまま画像素材として使いたい場合があります。
「パソコンの画面をスクリーンショットしたい」という人に向けた解説です。
「スクリーンショット」のタイプの違いについて
「スクリーンショットの方法」を紹介する前に、解説しておきたいことがあります。
今回紹介する「スクリーンショット」は、画面をそのまま保存する一般的な「スクリーンショット」とは異なります。
「画面をスクショ」は、表示されている画面をそのまま保存するタイプ
スマートフォンなどで画面に表示されている状態をそのまま撮影して保存するのが「スクリーンショット」（略して「スクショ」）です。
パソコンでも、表示されている画面をそのまま保存するタイプのスクリーンショットを行う方法があります。（具体的な方法については、私が記事にするまでは、ネットで検索してください。）
上の画像の左側「PC画面をスクショ」の方です。
「サイトをスクショ」は、表示されているWebページを保存するタイプ
対して、上の画像の右側「サイトをスクショ」のタイプが、今回紹介するスクリーンショットのタイプです。
「サイトをスクショ」のタイプは、表示されているWebページを撮影して保存します。
「画面をスクショ」と「サイトをスクショ」の違い
スクリーンショットのタイプのちがいは、大雑把に言えば「撮影する範囲が異なる」ことです。
ブラウザの外枠には「戻るボタン」や「ページタブ」が表示されています。
「サイトをスクショ」では、これらブラウザの外枠部分は撮影できません
ブラウザの外側部分を含めたい場合は「画面をスクショ」を利用しなければなりません。
「スクリーンショット」について、事前の解説は以上です。
いよいよ「Chromeブラウザ」での「サイトをスクショ」の手順を説明します。
ChromeブラウザでWebサイトのスクリーンショットを撮影する方法
今回紹介するWebページをスクショする方法は、Chromeブラウザに標準で備わっている機能を使います。
誰でも簡単にできる方法です。
Chromeブラウザでスクリーンショットを撮影する方法
- 「ブラウザの設定メニュー」を開く
- 「デベロッパーツール画面」を開く
- 「デベロッパーのメニュー」を表示する
- 「キャプチャ」（スクショ）をクリックする
- スクショのタイプは2種類
- 表示部分のみ
- ページ全体（full size）
- スクショのタイプは2種類
では、画像付きで詳しく説明していきます。
スクショを撮影したいサイトをChromeブラウザで表示している状態を前提として、解説をスタートします。
➀ブラウザの設定メニューを開く
まずは「ブラウザの設定メニュー」を開きます。
画面右上の「メニューアイコン」をクリックします。
メニューアイコンは、アカウントアイコンの右横にある、点が3つ縦に並んだアイコンのことです。
②デベロッパーツールの画面を表示する
「デベロッパーツール」という画面を表示させます。
操作は、ブラウザの設定メニューから
- その他のツール
- デベロッパーツール
の順にクリックして表示します。
「デベロッパーツール」とは「開発者向けツール」という意味です。
➂デベロッパーツールの「メニュー」を開く
今度は「デベロッパーツール」の「メニュー」を開きます。
3つの点が縦に並んでいるアイコンがメニューアイコンです。
＊この解説では、「ブラウザの設定メニュー」と「デベロッパーツールのメニュー」と2つの「メニュー」がでてきますが、混同しないように注意してください。
➃メニューの項目をクリックして撮影する
デベロッパーツールのメニューにいくつかの項目があります。
今回、スクショを撮影するのに必要な3つの項目について、それぞれ説明します。
- Capture screenshot → 表示部分だけをスクショする
- Capture full size screenshot → サイトページ全体をスクショする
- Close DevTool → デベロッパー画面を閉じる
スクショで撮影された画像について
Chromeブラウザの機能で撮ったスクショの画像は「PNG形式のファイル」として保存されます。
ちなみに撮影した画像は、ブラウザからダウンロードする扱いになります。
画像の保存先は、アカウントごとに指定しておくと、ファイル整理が楽になります。
別の記事で、アカウント毎にダウンロード先を指定する方法を紹介していますので、ぜひ活用してください。
> ファイル整理が楽になる！Google Chromeの便利な機能。ダウンロード先をアカウント別に指定する方法
パソコン版のChromeブラウザの便利な機能を紹介します。 今回紹介するのは、インターネットでファイルをダウンロードしたときの保存先を、Googleのアカウント毎に指定する方法です。 パソコンの設定を変更していない人に多くみら[…]
1. 画面の表示部分だけを撮影する「Capture screenshot」
メニューの「Capture screenshot」は、画面に表示されている部分を撮影するタイプのスクショです。
サイト内の撮影したい場所をスクロールして画面に表示した状態で「Capture screenshot」をクリックしてスクショを撮影します。
同じページ内で撮影したい箇所が複数ある場合は、デベロッパー画面が開いた状態のままページをスクロールして表示画面をずらしてから、スクショを撮影することができます。
つまり撮影後、毎回デベロッパー画面を閉じる必要はなく、連続撮影が可能です。
2. サイト全体を撮影する「Capture full size screenshot」
スクショのもうひとつのメニュー「Capture full size screenshot」は、表示されているサイトを1ページ丸ごと撮影できる機能です。
保存される画像が、縦に長くなるのが特徴です。
サイトページ全体を取り込んで、後から必要な部分を切り取るなどの編集をして使う場合に便利です。
「部分画像」と「全体画像」は、どちらがいいの？
「部分画像」は、ファイルサイズも小さく扱いやすいメリットがありますが、たくさん撮影してしまうとデータの数が増えて、管理が大変になります。
「全体画像」は、スクショが一度で済むのがメリットです。ただし素材として扱う場合は、コピペしてから切り抜きなどの編集作業が伴うこともあります。画像編集が得意な人向けです。
それぞれ一長一短がありますので、使いやすい方を選択してください。
3. デベロッパーツール画面を閉じる「Close DevTools」
「Close DevTools」は、スクショ撮影後、デベロッパーツール画面を閉じるときに使います。
【まとめ】ChromeブラウザのWebサイトのスクショについて
Googleブラウザの便利な機能「Webサイトのスクリーンショット」について解説しました。
ブラウザに標準搭載されている機能なので、誰でも使うことができます。
操作も簡単です。慣れてしまえば10秒もかからずにできるようになります。
画面に表示されている範囲を撮影する「部分的なスクショ」と、Webページ全体を撮影する「全体スクショ」の2つのタイプがあります。目的や用途に合わせて使い分けたり、扱いやすいタイプを選んで使ってください。
スクショ撮影後に保存される画像は「PNG形式」のファイルになります。
撮影した画像は、ブラウザからダウンロードする扱いになります。
ダウンロードしたファイルの保存先を、ブラウザを使用しているGoogleアカウント毎に指定できる方法があります。
合わせて活用するとファイル管理の手間が省けます。
当ブログ内でダウンロードファイルの保存先指定について紹介していますので、参考にしてください。
> ファイル整理が楽になる！Google Chromeの便利な機能。ダウンロード先をアカウント別に指定する方法
パソコン版のChromeブラウザの便利な機能を紹介します。 今回紹介するのは、インターネットでファイルをダウンロードしたときの保存先を、Googleのアカウント毎に指定する方法です。 パソコンの設定を変更していない人に多くみら[…]
ブログ内で使う画像の用意は、ブロガーの苦労するポイントです。
Webサイトのスクショが使えれば、画像を探す方法がひとつ増えます。
ブロガーとしてステップアップしていきましょう！
ただし違法な使い方や、コンテンツ作成者や閲覧者が不快に感じるような使い方は、絶対にしないでください。
マナーを守って使うようにお願いします。
