もう追従メニューに泣かない！スマホページ全体をきれいにキャプチャする方法とは？
こんにちは、編集部のジェシカです。
みなさん、スマホサイトのページ全体のキャプチャが必要になったことは、ありませんか？
私は、競合調査やサイト改修の指示書作成など、これまでたくさんキャプチャをとる機会をいただきました（笑）。
PCとスマホのサイトURLが異なる場合は、PCのブラウザにスマホのURLを入力して、ブラウザサイズを調整してキャプチャ・・・という作業をご まかしながらやっていたのですが、PCと同じURLの場合は、この方法が通用しません。
スマホのスクリーンショットで表示されている画面を撮って、PCで開いてつなげるという作業もアリですが、不要なヘッダやフッタを切り取る 必要があり、一苦労です。
そこで、今回は簡単にスマホサイト全体のキャプチャを撮れる方法をご紹介します。
PCでスマホのキャプチャをとる方法
まずは、PCで作業を完結させたい！という人におすすめの方法です。
●chromeのディベロッパーツールを使う方法
１，最初に、chromeの拡張機能にキャプチャツールを追加します。私は、Full Page Screen Captureという機能を利用しています。
追加した後に、chromeの設定＞拡張機能から、追加した機能を有効にすることをお忘れなく。機能を有効にすると、ブラウザの右上にカメラアイコンが表示されます。
２，キャプチャしたいサイトのページを表示している状態で、chromeの右上端にあるメニューから、その他ツール＞ディベロッパーツールを選択します。
３，画面上部に幾つかのプルダウンメニューが表示されます。一番左のメニューから対応させたい画面サイズを選択します。 私はiPhoneを使っているので、現時点（2016/8）では、iPhone６をよく選択します。
４，選択後、サイトをリロードすると、スマホページが表示されるので、先ほど設定したカメラアイコンをクリックするとキャプチャがスタート。
完了したら、別ウィンドウで全体の画像が表示されるので、右クリックで画像を保存すれば作業は完了です。
ただ、上記の方法ではヘッダが固定されているスマホサイトだと、所々にヘッダが入ったキャプチャが撮れてしまいます。
そこで、固定ヘッダを余計なところに表示させない方法をご紹介します。
●Firefoxで固定されたヘッダもきれいにキャプチャする方法
１，ブラウザを変えてFirefoxになるのですが、Pearl Crescent Page Saverというアドオンを追加し、有効にします。
Firefox右上端にあるメニュー内に「アドオン」があるので、そこから検索をすればすぐに見つかるでしょう。
２，キャプチャしたいページを表示して、Firefoxメニュー＞開発ツール＞レスポンシブデザインビューを選択すると、スマホサイズの画面に切り替わります。 プルダウンからサイズが選択できます。
３，しかし、画面サイズは変わったものの、リロードしても画面の中はPCサイズのまま！という場合があります。 そんな時は、User Agent Switcherもアドオンに追加して有効にしてください。
ただ、このアドオン、デフォルトがiOS3しか表示してくれない仕様になっています。選択肢を増やしたい場合は、下記のサイトで手順を詳しく紹介されているので参考にしてください。
４，サイトがきれいに表示されたら、Pearl Crescent Page Saverで「ページ全体を画像として保存」を選択しスクリーンショットをとります。 サイトの最上部を表示した状態で実行するときれいに撮れます。
ヘッダの追従がなくなりました！
設定さえしておけば、次回以降はすぐキャプチャができます。 ただ、設定が面倒と思われる方も多いでしょう。
アプリでスマホのキャプチャを撮る方法
私も最近まで上記の方法を使っていたのですが、スマホのアプリで簡単にサイト全体をキャプチャできる方法を見つけました！（遅い？）
なぜ早く気づかなかったのだろうとショックだったんですが……
●iPhoneの人におすすめキャプチャアプリ 「Awesome screenshot for safari」
iPhoneで閲覧しているサイトのページ全体をキャプチャできるアプリです。
１，アプリをインストールしたら、キャプチャしたいページをsafariで開き、ブラウザのフッタに表示されるシェアアイコンをタップ。 一番右端にある「その他」の中からScreenshotの設定をオンにしてください。
２，オンにすると、シェアアイコン中のメニューにScreenshotが表示されるので、アイコンをタップし、ページ全体をキャプチャするか、表示されている箇所のみにするか選択します。
ちなみに、キャプチャした後、メモしたり、枠で囲ったりなどといった編集も可能です。
３，キャプチャを保存するとカメラロールとアプリ内の両方に格納されます。
●Androidの人におすすめキャプチャアプリ 「ウェブクリッパー 」
ウェブクリッパー - Google Play の Android アプリ
Android端末で閲覧しているサイトのページ全体をキャプチャできるツールです。
１，アプリをインストールしたら、キャプチャしたいページをsafariで開き、ブラウザURL欄の右側にあるメニューを開きます。
２，「ページを共有」をタップすると共有アプリが表示されるので「ウェブクリッパー」を選択します。
３，選択するとヘッダにカメラアイコンが表示されるのでタップすれば完了です。アルバムの中にページ全体のキャプチャが格納されています。 撮影範囲は、アプリの設定で変更できます。
まとめ
スマホアプリでキャプチャをとる場合は、iCloud、Dropbox、Evernote、Skype等のアプリと共有できるように設定しておくと便利です。
いちいちメールに添付して送ったりしなくとも、PCから簡単にキャプチャした画像へアクセスできます。
上記で挙げた他にも、キャプチャアプリがたくさんあるので、目的にあったものを探してみてください。
みなさんのキャプチャ作業が少しでもストレスフリーになれば幸いです！
▼プロマネにおすすめのツールを紹介しているコラムはこちら▼
