意外と知られていない、スマホでのWeb全画面スクショ方法!
制作の仕事であれば特に、PCのChromeブラウザなどでは、Chrome拡張機能などで、Webのフルページのスクショ機能を活用することは多いだろう。
※以下、”Awesome Screen Shot”の例
![](https://prythmworks.tokyo/wp-content/uploads/cocoon-resources/blog-card-cache/12e79e83d6af031f1a74db117c4a6195.png)
しかし、iPhoneのデフォルトのスクリーンショットの機能では、その時に表示されている画面内しかスクリーンショットできない。
![](https://prythmworks.tokyo/wp-content/uploads/2021/06/IMG_3271-473x1024.jpg)
フルページでスクリーンショットをして画像化するには、Safari
しかし、Safariであれば以下のよに、デフォルトのスクリーンショットを使用したあとに、「フルページ」というボタンがあるのだ!
![](https://prythmworks.tokyo/wp-content/uploads/2021/06/IMG_3280-473x1024.jpg)
これを使うと、以下のようにページ全画面のスクリーンショットを撮れる!
![](https://prythmworks.tokyo/wp-content/uploads/2021/06/PDF書類-1-scaled.jpeg)
しかし、この機能で保存できる画像はなぜかPDF形式になってしまう・・!なぜ。。。
PDF形式になってしまうので、「ショートカット」機能を使ってjpgに変換!
PDFではiPhoneの”写真”の中に保存できず、”ファイル”という場所に保存され、かつPDFのビューアアプリを介さないと開けないので、jpgなどの画像に変換したい時もあるだろう。というかほとんどの人はそうしたいんじゃないだろうか。。?
その場合、PDF→JPG変換アプリのようなものを使用する方法もありだが、アプリを使わないもっと簡単な方法がある。
それが、純正でiPhoneに備わっている「ショートカット」の機能を使用することだ。
![](https://prythmworks.tokyo/wp-content/uploads/2021/06/image-1.png)
この「ショートカット」、使ったことなどない人がほとんどだと思う。
Macではお馴染みなようだが、簡単にいうと、複数のアプリをまたいだ一連の動作を登録できるものだ。エクセルでいうマクロ、Photoshopでいうアクションバッチ、Linuxでいうシェルのようなもの。
Apple Watchなどを持っていて、自分好みに一連の動作をApple Watchのホーム画面でボタン一発にしたいというときなど、
大活躍できる機能である。
![ショートカットで作成したボタンを文字盤に追加している](https://prythmworks.tokyo/wp-content/uploads/2021/06/38BC291A-0DF7-4699-A279-BB3BF5CA866B-300x287.jpeg)
このアプリを起動して、以下のようにボタン一発でどんな動作を設定するかを、ウィザード形式で作成できる。
![](https://prythmworks.tokyo/wp-content/uploads/2021/06/IMG_3259-1-473x1024.jpg)
このショートカットを作成していれば、
さきほどの「スクリーンショット」>「フルページ」選択後のPDF作成の画面で、共有ボタンを押して、
以下のようにその場でjpg画像変換できる!
※追記)しかし、大きすぎるPDFはJPGに変換できないことがわかった。。
やることは結構上級者向けになるが、この機能が活用できるようになれば、制作中のWebページiPhone Safari上のスクリーンショットを撮って、
実機での見え方に対して正確に赤入れをすることも可能だ。
僕は移動中などに制作中のサイトのスクリーンショットを撮って、”写真”アプリ内で写真の”マークアップ”機能を使って、指で赤丸をつけたり校正記号で赤入れしたりしている。
PCでChromeの開発者画面でスマホビューにして、Chrome拡張機能でスクリーンショットを撮ればいいじゃない、という意見もあるが、
実は、Chrome開発者モードで確認できる画面は、実機で確認できる画面とは、フォントやYou Tubeの埋め込動画などの表示が違っている。
※Windows, Mac, iPhone, Android、それぞれで表示できるフォントの制約が違ってくる。
※You Tube動画も再生前のサムネイル表示の時の縦横比率が端末によって1px単位だが違ったりするために、意図せずサムネイルの端に1pxの黒い線が入ったりする。
また、iPhone Safiariでは「スクロールバウンス」といったhtmlやcss、jsでは制御不可能な独自の挙動などもあるため、実機での確認が重要になる。
僕の作成した「ショートカット」をダウンロードできます
以下のリンクより、今回僕の作成したショートカットを配布します。(iPhoneだとスムーズです)
※ダウンロードできるようにするには、以下の動画のように、「信頼されていないショートカットを許可」する必要があります!
※余談ですが、同じように紹介している記事がほかにも何件かあったのですが、ダウンロードしてみたところ、なぜかどれもPDFをJPGに変換できませんでした。
なので、僕のショートカットを使用すると間違いないかと思います。