スクショする時に「画面に表示されてる部分のみ」ではなく、「スクロールしなきゃ表示されない部分も含めて」撮影する方法を紹介します。
わかりづらい人は、トイレットペーパーのロール状態ではなく、巻かずに広げた状態をイメージしてください。
ロール状態では一部の紙しか見えませんが、巻かずに広げた状態では全体の長さ分の紙が見えます。
ロール状態が普段のスクショ、巻かずに広げた状態がページ全体スクショだと思ってください。
ページの全体をスクショする方法がオススメな人
- 「縦長とか横長のページを撮影したい時に、スクショしてスクロールしてスクショしてスクロールして……面倒臭い」
- 「一回でページ全体をスクショできれば良いのに……」
- スクショを見せる機会の多い人
ページの全体をスクショする方法のメリット
- 何回かスクロールして撮影しなきゃいけなかった長いページを、一回で撮影できるようになる
- 撮影回数が減るから管理が楽
- 問い合わせとかで「スクショ見せてください」って言われた時も、とりあえず全体を撮影すれば間違いがない
- サーバー情報とかPHP情報とか「重要だけど何書いてあるかわからないし、長くて情報を探しづらい」ってページの情報を簡単に伝えられる
- 一枚ずつしか画像添付できない時とか、一回のやりとりでより多くの情報を伝えることができるようになる
では、本題である「 ページ全体をスクショする方法の具体的な手順 」を紹介します。
ページの全体をスクショする方法の手順
まず大雑把な手順を紹介し、次に詳細を説明します。
大雑把な手順
手順を大雑把に言うと、以下の2通りがあります。
- Chromeの場合はデベロッパーツールを使う
- Firefoxの場合はブラウザの機能を使う
つまり、使用しているブラウザによって方法が異なるということです。
次に詳細な手順です。
詳細な手順
先ずはChromeの場合について説明します。
Chromeの場合
PC表示をスクショしたい時
- Ctrl+Shift+Iでデベロッパーツールを起動
- Ctrl+Shift+Pで機能を検索
full
で検索→Capture full size screenshot
で決定
Windows
- command+option+Iでデベロッパーツールを起動
- command+shift+Pで機能を検索
full
で検索→Capture full size screenshot
で決定
Mac
スマホ表示をスクショしたい場合
- デベロッパーツールを起動
- command+shift+Mなどで、モバイル表示に切り替え
- デバイスを選択
- あとはPC版と一緒
- Googleスプレッドシート
- Cpanelのファイルアップローダー
補足
できないページもある
- ウインドウをスクショならURLは撮影されるが、スクロールで隠されている部分は撮影されない
- ページ全体をスクショならURLは撮影されないが、スクロールで隠されている部分は撮影される
URLは含まれない
- 上のようなページで、 全てが表示された状態でスクショしたい時 はどうすれば良いか?
- 一旦スクロールして、ページ全体を表示させてからスクショ
空白や読み込み中の状態でスクショされてしまう場合
- ページのズーム機能を使う
- Ctrl+マウススクロールの上下
- 縮小
- command+-
- 拡大
- command+shift++
Windows
Mac
余白を調整したい場合
- Chromeの拡張機能 をインストールする
拡張機能
Firefoxの場合
PC表示をスクショしたい場合
- アドレスバー横の
…
をクリック - 表示されるメニューから、
スクリーンショットを撮る
をクリック - 表示されるメニューから、
ページ全体を保存
をクリック
↓
みたいな形をしたダウンロードボタンをクリック- 開発ツールを起動
- モバイル表示に切り替え
- デバイスを選択
- あとはPC版と一緒
スマホ表示をスクショしたい場合
iPhone 6s
などの中から確認したいデバイスを選択- ページの先頭に戻るボタンなど、不要な要素が映り込む場合
- スクショする前に、開発ツールで非表示にする
補足
不要な要素を非表示にしたい場合
- 非表示にしたい要素を右クリック→
要素を調査
- 選択された要素に対して右クリック→
ノードを削除
- 要素が非表示になるので、スクショ
手順
- 一々スクロールしてスクショするのは面倒
縦長のページとかで使う
最後に、全体ではなく一部のみを撮影する方法を紹介します。
指定した要素のみをスクリーンショットする方法
- デベロッパーツールを起動
- 要素を選択
- command+shift+Pなどで機能を検索
Capture node screenshot
を選択
手順
まとめ
- 使用しているブラウザによって方法が異なる
- Chromeならデベロッパーツール 、Firefoxならブラウザの機能や開発ツールを使用する
- 撮影できないページもある
- 問い合わせとか質問サイトとかで、誰かに見てもらいたい時に便利
しかし
これでWebページ全体を撮影したい時などに、何回もスクロール+スクショせずに済むようになりました。
この方法を知っていると、例えばブログ運営などで困ったことがあり、サポートを利用したい時とかに便利です。
何回も撮って何回も添付して……ではなく、一回撮影して一回添付すれば済むからです。
やり取りがスムーズになり、トラブル解決までの時間が短くなります。
しかしスクショには他にも様々な使い方やテクニックがあります。
また、画像には著作権や肖像権も絡むため注意点もあります。
では、初心者がスクリーンショットに関して基本的なポイントを抑えるには、どうすれば良いのでしょうか?
というわけで、次のページです。
次のページ

- スクリーンショット機能についてのページです。
- スクショ機能とは、現在の画面を撮影する機能です。
- PC、スマホ両方で使うことができます。
- TPPで著作権法について話があった時に違法になりかけましたが、違法化は見送られました。
- ターミナルを使えば、デフォルトの保存先を変更し、デスクトップを整理することができます。
- フォルダアクションを利用すれば、保存と同時に圧縮をかけ、容量を節約することもできます。
- 目を通しておく事で、スクショ機能についてそれなりに理解できます。
要約
意味
自由なコメント