読者です 読者をやめる 読者になる 読者になる

仕事で使えるスクリーンショット(3) Chromeでスマートフォンページを撮る

スクリーンショットシリーズの第3弾です。前回の予告どおり、ChromeFull Page Screen Captureスマートフォンページを撮る方法を紹介します。

まずはChromeデベロッパツールを開いてToggle device modeをクリックしてユーザーエージェントをスマートフォンにしておきます。その状態でページを開きます。

f:id:Akiyah:20160430024946p:plain

やってみればわかるのですが、このままFull Page Screen Captureを使っても、キレイにスクリーンショットが撮れないのです。1ページごとにスキマができてしまうという感じです。それを回避するために、以下の手順を行います。

f:id:Akiyah:20160430024950p:plain

ブラウザの表示上の幅をスマートフォンの大きさにほぼぴったり合わせます。

f:id:Akiyah:20160430024953p:plain

Toggle device modeをクリックして、ページの表示はスマートフォンのまま、縦横の制限を解除します。

f:id:Akiyah:20160430024956p:plain

Full Page Screen Captureのアイコンをクリックして、スクリーンショットを撮ります。

f:id:Akiyah:20160430025000p:plain

パックマンがパクパク動いて、

f:id:Akiyah:20160430024941p:plain

前回と同様にスクリーンショットが撮れました。

f:id:Akiyah:20160430024943p:plain

クリックすれば等倍でもみることができます。ここからも前と同様で、ファイルに保存するだけ。

f:id:Akiyah:20160430024936p:plain

できあがり。

コツは、スマートフォンとして表示してから、幅を調整してからスマートフォン表示を解除することですね。