<p class="thumb"><img src="http://web-marketing.zako.org/images/2017/11/responsive-screenshots.jpg" alt="" width="800" height="413" class="alignnone size-full wp-image-31256" /></p>
<p>各端末のファーストビューでどこまで表示されるかを確認するのは意外と手間のかかるもの。そんな作業を一括でおこなってくれるのが、今回ご紹介するウェブツール。</p>
<p>日本語は文字化けしますが、Appleの最新端末でどのエリアまで表示されるかを一挙に知ることができるのが便利なポイントです。</p>
<!--more-->


<h3 class="header-label">Apple最新端末のレスポンシブなスクリーンショットを撮れる「Responsive Screenshots」</h3>
<p>「<a href="https://responsive-screenshots.com/" target="_blank">Responsive Screenshots</a>」は、<strong>Macbook Pro 15やiPhone X などのAppleのレスポンシブなサイズに合わせて一括でスクリーンショットを撮れるウェブツール。</strong></p>
<p>あいにく日本語は文字化けしてしまいますが、デスクトップからスマホまで、各サイズでファーストビューがどこまで表示されるかを把握するのに使えそうです。</p>

<h4 class="tips">一括スクリーンショット</h4>
[caption id="attachment_31257" align="alignnone" width="800"]<img src="http://web-marketing.zako.org/images/2017/11/responsive-screenshots-result.jpg" alt="" width="800" height="416" class="size-full wp-image-31257" /> URLを入れてワンクリックでスクリーンショットを生成。[/caption]
<p>一括で生成するスクリーンショットは全部で4種類。デスクトップはiMac 27、ラップトップはMacbook Pro 15、そしてiPadとiPhone Xです。</p>

<p>以下、生成されたスクリーンショットです。</p>

<h5 class="tips">iMac 27 (2560 x 1440 px)</h5>
[caption id="attachment_31255" align="alignnone" width="800"]<img src="http://web-marketing.zako.org/images/2017/11/desktop-2560x1440.jpg" alt="" width="800" height="450" class="size-full wp-image-31255" /> desktop-2560x1440[/caption]

<h5 class="tips">Macbook Pro 15 (1440 x 900 px)</h5>
[caption id="attachment_31254" align="alignnone" width="800"]<img src="http://web-marketing.zako.org/images/2017/11/laptop-1440x900.jpg" alt="" width="800" height="500" class="size-full wp-image-31254" /> laptop-1440x900[/caption]

<h5 class="tips">iPad(768 x 1024 px)</h5>
[caption id="attachment_31253" align="alignnone" width="800"]<img src="http://web-marketing.zako.org/images/2017/11/tablet-768x1024.jpg" alt="" width="800" height="1067" class="size-full wp-image-31253" /> tablet-768x1024[/caption]

<h5 class="tips">iPhone X(375 x 957 px)</h5>
[caption id="attachment_31252" align="alignnone" width="800"]<img src="http://web-marketing.zako.org/images/2017/11/mobile-375x957.jpg" alt="" width="800" height="2042" class="size-full wp-image-31252" /> mobile-375x957[/caption]

<p>興味がある方は<a href="https://responsive-screenshots.com/" target="_blank">Responsive Screenshots</a>へどうぞ。</p>
