「ダメ人間2.0」by地雷屋　リアルタイムでレビュー中！

スクリーンショットでページ全体を撮影する方法2通りとおまけ

スクショする時に「画面に表示されてる部分のみ」ではなく、「スクロールしなきゃ表示されない部分も含めて」撮影する方法を紹介します。

わかりづらい人は、トイレットペーパーのロール状態ではなく、巻かずに広げた状態をイメージしてください。

ロール状態では一部の紙しか見えませんが、巻かずに広げた状態では全体の長さ分の紙が見えます。

ロール状態が普段のスクショ、巻かずに広げた状態がページ全体スクショだと思ってください。

ページの全体をスクショする方法がオススメな人

  • 「縦長とか横長のページを撮影したい時に、スクショしてスクロールしてスクショしてスクロールして……面倒臭い」
  • 「一回でページ全体をスクショできれば良いのに……」
  • スクショを見せる機会の多い人

    • サポートや問い合わせ、質問サイトなどを利用する人

    問い合わせを送る時も一枚しか画像を添付できない時があるので、この方法が使えれば便利

ページの全体をスクショする方法のメリット

  • 何回かスクロールして撮影しなきゃいけなかった長いページを、一回で撮影できるようになる

    • 利用規約とか契約確認とか、そういう大事な情報が載ってるけど長いページを楽に撮影できる

  • 撮影回数が減るから管理が楽
  • 問い合わせとかで「スクショ見せてください」って言われた時も、とりあえず全体を撮影すれば間違いがない
  • サーバー情報とかPHP情報とか「重要だけど何書いてあるかわからないし、長くて情報を探しづらい」ってページの情報を簡単に伝えられる

    • 「大事な情報がどこに書いてあるかわからない」って時も、一部しか撮らずに「肝心な部分が映ってません」ってケースが減る

    「とりあえずこのページの中にあるんでしょ」って感じで、内容がわからなくても大事な情報を伝えられるようになる

  • 一枚ずつしか画像添付できない時とか、一回のやりとりでより多くの情報を伝えることができるようになる

では、本題である「 ページ全体をスクショする方法の具体的な手順 」を紹介します。

ページの全体をスクショする方法の手順

まず大雑把な手順を紹介し、次に詳細を説明します。

大雑把な手順

手順を大雑把に言うと、以下の2通りがあります。

  1. Chromeの場合はデベロッパーツールを使う
  2. Firefoxの場合はブラウザの機能を使う

つまり、使用しているブラウザによって方法が異なるということです。

次に詳細な手順です。

詳細な手順

先ずはChromeの場合について説明します。

Chromeの場合

    PC表示をスクショしたい時

    Windows

  1. Ctrl+Shift+Iでデベロッパーツールを起動
  2. Ctrl+Shift+Pで機能を検索
  3. fullで検索→Capture full size screenshotで決定

    Mac

  1. command+option+Iでデベロッパーツールを起動
  2. command+shift+Pで機能を検索
  3. fullで検索→Capture full size screenshotで決定

    スマホ表示をスクショしたい場合

  1. デベロッパーツールを起動
  2. command+shift+Mなどで、モバイル表示に切り替え
  3. デバイスを選択
  4. あとはPC版と一緒

    補足

    できないページもある

  • Googleスプレッドシート
  • Cpanelのファイルアップローダー

    • セキュリティレベルが高いページは無理？

    後述の拡張機能でも無理だった

    なので印刷→PDF化で対応した

    URLは含まれない

  • ウインドウをスクショならURLは撮影されるが、スクロールで隠されている部分は撮影されない
  • ページ全体をスクショならURLは撮影されないが、スクロールで隠されている部分は撮影される

    空白や読み込み中の状態でスクショされてしまう場合

    ↓以下のようなページの場合

    スクロールに応じてコンテンツが表示されるページ

    画像などの遅延読み込みを利用してるページ

  • 上のようなページで、 全てが表示された状態でスクショしたい時 はどうすれば良いか？
  • 一旦スクロールして、ページ全体を表示させてからスクショ

    余白を調整したい場合

  • ページのズーム機能を使う

      Windows

    • Ctrl+マウススクロールの上下

      • Mac

    • 縮小
    • command+-
    • 拡大
    • command+shift++

    拡張機能

  • Chromeの拡張機能 をインストールする

    • 特に必要を感じない

    インストールしたところで、スクショ不可のページはスクショ不可のままだった

Firefoxの場合

    PC表示をスクショしたい場合

  1. アドレスバー横の…をクリック
  2. 表示されるメニューから、スクリーンショットを撮るをクリック
  3. 表示されるメニューから、ページ全体を保存をクリック

    4. プレビューが表示されたら、↓みたいな形をしたダウンロードボタンをクリック

    スマホ表示をスクショしたい場合

  1. 開発ツールを起動

    2. command+option+Iなどで起動

  2. モバイル表示に切り替え

    3. command+shift+Mなど

  3. デバイスを選択

    4. iPhone 6sなどの中から確認したいデバイスを選択

  4. あとはPC版と一緒

    補足

    不要な要素を非表示にしたい場合

  • ページの先頭に戻るボタンなど、不要な要素が映り込む場合
  • スクショする前に、開発ツールで非表示にする

    手順

  1. 非表示にしたい要素を右クリック→要素を調査

    2. 開発ツール上で、非表示にしたい要素が選択される

  2. 選択された要素に対して右クリック→ノードを削除
  3. 要素が非表示になるので、スクショ

    縦長のページとかで使う

  • 一々スクロールしてスクショするのは面倒

最後に、全体ではなく一部のみを撮影する方法を紹介します。

指定した要素のみをスクリーンショットする方法

    手順

  1. デベロッパーツールを起動
  2. 要素を選択
  3. command+shift+Pなどで機能を検索
  4. Capture node screenshotを選択

まとめ

  1. 使用しているブラウザによって方法が異なる
  2. Chromeならデベロッパーツール 、Firefoxならブラウザの機能や開発ツールを使用する
  3. 撮影できないページもある
  4. 問い合わせとか質問サイトとかで、誰かに見てもらいたい時に便利

しかし

これでWebページ全体を撮影したい時などに、何回もスクロール+スクショせずに済むようになりました。

この方法を知っていると、例えばブログ運営などで困ったことがあり、サポートを利用したい時とかに便利です。

何回も撮って何回も添付して……ではなく、一回撮影して一回添付すれば済むからです。

やり取りがスムーズになり、トラブル解決までの時間が短くなります。

しかしスクショには他にも様々な使い方やテクニックがあります。

また、画像には著作権や肖像権も絡むため注意点もあります。

では、初心者がスクリーンショットに関して基本的なポイントを抑えるには、どうすれば良いのでしょうか？

というわけで、次のページです。

次のページ

スクリーンショット機能に関して調べた5つのページ
スクリーンショット機能に関して調べてみた SNSにスクショ上げたりする人や、ブログやサポートなどでスクショ使って説明する人向け 以前に話題に上がってた、著作権の法改正についても扱う
neetneed.net
2019.08.11

    要約

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

    • 意味

  • 目を通しておく事で、スクショ機能についてそれなりに理解できます。
Siri
Siri

なんでも言ってみてください

一々コメントするのも面倒ですよね。

というわけで作りました。機能は……

……一々説明するのも面倒ですので、こちらのページとかで調べてください。

Siri
Siri

Webで「JavaScript　自動入力」についての情報を調べますか？

自由なコメント