はじめてのWordPress入門講座【基礎知識・基本的な使い方・トラブル対応】

【iPhone/iPad】Webサイト全体をフルスクリーンでスクリーンショットを撮る方法

【iPhone・iPad】Webサイト全体をフルスクリーンでスクリーンショットを撮る方法

こんにちは。遠藤(@webmaster_note)です。Web担当者やWebマーケターなら、スマートフォンなど、モバイル版のWebサイト(Webページ)をスクリーンショットで撮りたいと思ったことがあるでしょう。

iOS 13以降、iPhoneとiPadでは、Webサイト(Webページ)をフルスクリーン(ヘッダーからフッターまで)でスクリーンショット(PDF)を撮ることができるようになりましたね。

以前は、Webページの上から下までを1つのPDF画像として保存をするために、Webサイト全体のスクリーンショットを撮るためだけのアプリを入れたりしていましたが、もうスクリーンショット用のアプリは必要ありません。

iPhoneでWebページ全体のスクリーンショットを撮る方法

iPhoneでiOS 13以降を使っている人なら、標準ブラウザの「Safari」を使うと、Webページ全体を上から下まで1つのスクリーンショットを撮ることができます。

Safariでスクリーンショットを撮りたいWebページを開き、iPhoneのサイドボタンと音量を上げるボタンを同時に押すと、スクリーンショットを撮ることができます。

iPhoneのサイドボタンと音量を上げるボタンを同時に押す

参照:iPhone でスクリーンショットを撮る – Apple サポート

撮影したスクリーンショットは画面左下に小さく表示されるので、その画像をタップするとプレビュー画面が表示されます。

「スクリーン」は、Safariで表示されていた部分のみを画像として保存することができます。

iPhoneでWebページのスクリーンショットを撮る

「フルページ」をタップすると、Webページ全体が表示されます。

iPhoneでWebページ全体のスクリーンショットを撮る

「フルページ」の画面右側に、Webページ全体が表示されています。明るくなっている部分を上下にスクロールすると、中央に表示されているプレビューにその部分が表示されます。

画面中央のプレビューを上下にスクロールすることもできます。

スクリーンショットのプレビュー画面では、文字を書き込むこともできます。Webページの修正やアイディアなどを書き込んで保存できるので、他の人とアイディアの共有もしやすいですね。

スクリーンショットに文字を書き込む

スクリーンショットを保存するには、画面左上の「完了」をタップします。

スクリーンショットを保存する

次に「PDFを”ファイル”に保存」をタップします。

スクリーンショットをファイルに保存する

ファイルの保存先を選択する画面が表示されます。自分の使いやすい場所を選択をしましょう。今回は「このiPhone内」を選択します。選択(タップ)をしたら、画面右上の「保存」をタップします。

スクリーンショットの保存先を選択する

これでiPhoneの純正アプリの「ファイル」を開くと、スクリーンショットがPDF形式で保存されています。

iPhoneのファイルアプリ
iPhoneのファイル内にスクリーンショットが保存されている

iPadでWebページ全体のスクリーンショットを撮る方法

iPadでWebページ全体のスクリーンショットを撮る方法は、iPhoneと全く同じです。

SafariでWebページを開いてスクリーンショットを撮るだけです。

iPadでWebページ全体のスクリーンショットを撮る

スクリーンショットの保存方法も同じです。

Safariでしか「フルページ」は機能しない

iPhoneやiPadでSafari以外のブラウザアプリを使っている人も多いと思います。

私も普段は「Smooz」を愛用していますが、今回、紹介した方法は「Safari」でしか使えません。

他のブラウザアプリで、スクリーンショットを撮っても「フルページ」は表示されません。