iPhoneでWebページ上のスクリーンショットを全画面で撮るには!

検証
検証

意外と知られていない、スマホでのWeb全画面スクショ方法!

制作の仕事であれば特に、PCのChromeブラウザなどでは、Chrome拡張機能などで、Webのフルページのスクショ機能を活用することは多いだろう。

※以下、”Awesome Screen Shot”の例

【Chrome拡張】Webページ全体のスクショを撮るならこれ! 注釈も書き込める「Awesome Screenshot」
Webサイトやブログのページ全体を、ブラウザーで表示している見た目のまま画像として保存したい! こうした縦長のスクリーンショットは、WindowsやMacの標準機能では撮影できませんが、Chromeの拡張機能を使えば簡単です。

しかし、iPhoneのデフォルトのスクリーンショットの機能では、その時に表示されている画面内しかスクリーンショットできない。

フルページでスクリーンショットをして画像化するには、Safari

しかし、Safariであれば以下のよに、デフォルトのスクリーンショットを使用したあとに、「フルページ」というボタンがあるのだ!

これを使うと、以下のようにページ全画面のスクリーンショットを撮れる!

しかし、この機能で保存できる画像はなぜかPDF形式になってしまう・・!なぜ。。。

PDF形式になってしまうので、「ショートカット」機能を使ってjpgに変換!

PDFではiPhoneの”写真”の中に保存できず、”ファイル”という場所に保存され、かつPDFのビューアアプリを介さないと開けないので、jpgなどの画像に変換したい時もあるだろう。というかほとんどの人はそうしたいんじゃないだろうか。。?

その場合、PDF→JPG変換アプリのようなものを使用する方法もありだが、アプリを使わないもっと簡単な方法がある。

それが、純正でiPhoneに備わっている「ショートカット」の機能を使用することだ。

この「ショートカット」、使ったことなどない人がほとんどだと思う。

Macではお馴染みなようだが、簡単にいうと、複数のアプリをまたいだ一連の動作を登録できるものだ。エクセルでいうマクロ、Photoshopでいうアクションバッチ、Linuxでいうシェルのようなもの。

Apple Watchなどを持っていて、自分好みに一連の動作をApple Watchのホーム画面でボタン一発にしたいというときなど、

大活躍できる機能である。

ショートカットで作成したボタンを文字盤に追加している
ショートカットで作成したボタンを文字盤に追加している

このアプリを起動して、以下のようにボタン一発でどんな動作を設定するかを、ウィザード形式で作成できる。

このショートカットを作成していれば、

さきほどの「スクリーンショット」>「フルページ」選択後の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だとスムーズです)

※ダウンロードできるようにするには、以下の動画のように、「信頼されていないショートカットを許可」する必要があります!

Shortcuts

※余談ですが、同じように紹介している記事がほかにも何件かあったのですが、ダウンロードしてみたところ、なぜかどれもPDFをJPGに変換できませんでした。

なので、僕のショートカットを使用すると間違いないかと思います。

Webサイト制作を依頼したい方へ

PRYTHM WORKS(プリズムワークス)は、東京都墨田区、東京スカイツリーのふもとにあるWebコンテンツ制作事務所です。

華々しいおしゃれなECサイトをはじめ、アンダーグラウンドな案件まで幅広くご依頼をいただき、どんな案件でも真心・丁寧・楽しくを理念に掲げて制作しております!

作りたいサービスはあるけど、まずは費用感が知りたい!という方も、まずはお問い合わせください!

mail@prytymworks.tokyo

PRYTHM WORKSが手掛ける仕事の一部をご紹介します。

制作のご依頼者様用 費用かんたんお見積もりフォーム

おそらく本記事を読まれるのは、制作の現場の、法人またはフリーの、プロデューサーの方、ディレクターの方、エンジニアの方がほとんどかと存じます。
いつもおつかれさまです!そして本記事をお読みいただきありがとうございます。
紹介した記事の内容について、またはその他制作のご依頼について、以下のフォームより簡易お見積もりができます!
試算だけならフォーム送信しなくてもできますので、ぜひ試しにいかがでしょう?

お仕事をご希望の制作者様用 お問合せフォーム

また、まずはライトなご相談から…ということであれば、こちらのコンタクトフォームからお気軽にどうぞ!ご縁を大切にしてご返信いたします!

    ShopifyでのECサイト制作を行うならPRYTHMWORKS(プリズムワークス)へ

    ShopifyでのECサイト制作を外注しようとお考えの方は、PRYTHMWORKS(プリズムワークス)にご依頼ください。高品質なWebサイト制作で、お客様のビジネス成長を支援する会社です。Shopifyを使ったECサイト制作に力を入れており、売上向上に貢献するECサイト構築を代行いたします。豊富な経験と実績にもとづき、お客様のニーズに最適なECサイトを構築しますので、費用相場や制作事例など、気になることがございましたらお気軽にお問い合わせください。移行のご相談も承っております。

    社名合同会社PRYTHMWORKS
    事業内容EC/Webサイトの構築、管理保守
    CEO吉川直人
    法人事務所所在地〒150-0001
    東京都渋谷区神宮前六丁目23番4号桑野ビル2階
    設立日2023年(令和5年)7月3日
    沿革2020年(令和2年)10月
    個人事業主PRYTHMWORKS事業開始
    2023年(令和5年)7月
    合同会社PRYTHMWORKS設立

    会社に関するご連絡は以下よりお願いいたします。

    mail@prytymworks.tokyo


    お問い合わせ用LINEはこちらからどうぞ!

    お問い合わせ用LINEはこちらからどうぞ!

    LINE

    GoogleMeetの相談予約が可能になりました!

    以下の空いている日からサクッとGoogleMeet(ビデオ通話)の予約をどうぞ!

    タイトルとURLをコピーしました