レスポンシブ対応の超縦型Web画面をキャプチャーする方法

この記事で、紹介するスクリーンショット機能

• Windows 標準の「Snipping Tool」 PCに表示されている画面をキャプチャーする機能です。
• Microsoft Edge 標準のスクリーンショット機能 Edgeで表示されているWeb画面（Web ページ）をキャプチャーする機能です。Web画面の見えていない部分もキャプチャーすることができます。保存ファイル形式は、JPEGのみ。
• Web ブラウザの拡張機能に対応した「FireShot」 多様なWebブラウザの拡張機能にスクリーンショット機能を追加するものです。ファイル形式が選べたり、保存ディレクトリが選べたりします。Adobe Acrobatが実装されていたら、PDF保存ができるのかも。

Snipping Tool

Windowsで PC画面 をキャプチャーする定番です。

• [Windows logo]キー + [Shift]キー + [S]を同時押しすることで、Snipping Toolが起動します。
  • このツールで画面やウィンドウの画像や「ビデオクリップ」をキャプチャーすることができます。
  • アプリケーションの画面です。
  • 
  • キャプチャーの仕方は、四角形、ウィンドウ、全画面、フリーフォームが選択できます。
  • 

超縦型Web画面をキャプチャーしようとしたら...(涙)

ウィンドウを操作して、何枚も撮って、最後にまとめる、なんて嫌ですよね。

Microsoft Edgeの標準機能で、Web画面をキャプチャー！

なんと、Edgeの標準機能で「スクリーンショット」機能があるじゃないですか！

• 右上の[・・・]メニューを開くと「スクリーンショット」がある。
• 
• マウスの右ボタンで開くメニューにも「スクリーンショット」がある。
• 

これで「エリアをキャプチャーする」と「ページ全体をキャプチャーする」が選べます！ しかし、JPEGファイルしか保存できないのです。ちょっと足りない感じです。

そのような、物足りない方には、Webブラウザに「拡張機能」で「Web画面をキャプチャー機能」の追加がおすすめです。

超縦型Web画面をキャプチャーする

Webブラウザの拡張機能で、「Web画面キャプチャー機能」を追加するツールは、「FireShot」がおすすめです。Edgeでも、Chromeでも、拡張機能することができます。一度、使うと必携です。

Microsoft Edge + 拡張機能 + FireShot

Microsoft Edgeの拡張機能に「FireShot」を追加する手順を紹介します。

1. [・・・]メニューから、「拡張機能」を選択する。
2. 拡張機能のポップアップメニューが表示され「Edge アドオン」のサイトに誘導される。
3. 「Edge アド オン」のサイトで、"FireShot"を検索する。
4. 「FireShot」の検索結果が表示される。
5. 「S」のアイコンの「FireShot」を「インストール」する。
6. 「FireShot」のインストール確認画面がでてくるので、「拡張機能の追加」を選ぶ。
7. 「拡張機能」ボタンの隣にアイコンが表示され、「FireShot」がインストールされたというメッセージが表示される。
8. 「拡張機能」アイコンをクリックすると、Edge アドオンの一覧が表示されるので、「FireShot」をクリックする。
9. 「FireShot」のインストールが完了したというWeb画面が表示されるので、使い方を確認しておく。
10. 再び、「拡張機能」アイコンを開くと、正式な「FireShot」が表示されているので、「目」アイコンをクリックする。
11. 「拡張機能」アイコンの左隣に「FireShot」の「S」アイコンが表示される。
12. 「FireShot」の「S」アイコンをクリックすれば、Web画面のキャプチャー機能の選択画面が表示されます。
13. これでお好きなキャプチャーが可能です。
14. 「FireShot」のメニューで「オプション」を選択すると画像の保存形式や保存方法などを設定することができます。

Chrome + 拡張機能 + FireShot

Chromeの拡張機能に「FireShot」を追加する手順は、Microsoft Edgeとほぼ同じです。

1. [・・・]メニューから「拡張機能」→「Chromeウェブストアにアクセス」を選びます。
2. 検索窓で、"FireShot"を検索します。
3. 検索結果から、「FireShot」を選択します。
4. 「FireShot」の紹介ページから、「Chromeに追加」を選びます。
5. インストール確認のポップアップ画面が表示されるので「拡張機能を追加」を選びます。
6. 「FireShot」がインストールされたというメッセージが表示される。
7. 「拡張機能」ボタンをクリックすると、「FireShot」の項目が追加されているので、選ぶ。
8. 「FireShot」のインストールが完了したというWeb画面が表示されるので、使い方を確認しておく。
9. 再び、「拡張機能」のアイコンをクリックすると、表示される一覧から「FireShot」を確認して、「ピン」をクリックしてピン止めする。
10. 「拡張機能」のアイコンの左横に「FireShot」の「S」アイコンが表示される。
11. 「FireShot」の「S」アイコンをクリックすると、キャプチャー方法を選択できるようになる。
12. 「FireShot」のメニューで「オプション」を選択すると画像の保存形式や保存方法などを設定することができます。

関連記事