<p class="thumb"><img src="http://cdn.zako.org/images/2015/12/screenshotlayer.png" alt="screenshotlayer" width="592" height="369" class="alignnone size-full wp-image-30131" /></p>
<p>Webページ全体のスクリーンショットを撮れるツールはさまざまなものがあって、<a href="http://web-marketing.zako.org/blog/screenpresso-pro-screenshot-soft.html">ScreenPresso</a>のようなものでも撮ることも可能です。</p>
<p>でも、PCの環境によっては若干ズレが発生したりして、綺麗に撮れないこともけっこうあります。</p>
<p>今回ご紹介するのは、オンラインのツールながらも、綺麗にWEBページのスクリーンショットを撮ってくれるサービスです。</p><!--more-->


<h3 class="header-label">URLを指定するとページのスクリーンショットを撮れる「screenshotlayer」</h3>
<p>「<a target="_blank" href="https://screenshotlayer.com/">screenshotlayer</a>」は、<strong>指定したURLのページ全体をキャプチャ</strong>できるオンラインサービス。</p>
<p>APIも提供していて、ユーザーエージェントやビューポートを変更したり画像のフォーマットを変更したりなど、カスタマイズ性にも優れています。</p>

<h4 class="tips">URLを指定してページ全体のスクリーンショットを撮れる</h4>
[caption id="attachment_30130" align="alignnone" width="592"]<img src="http://cdn.zako.org/images/2015/12/screenshotlayer-yahoo.png" alt="サンプルツールでYahooのトップページを指定してページ全体をキャプチャしたところ。" width="592" height="388" class="size-full wp-image-30130" /> サービストップページで使えるサンプルツールで、Yahooのトップページを指定してページ全体をキャプチャしたところ。[/caption]
<p>スクリーンショットを撮りたいページのURLを入力することで、ページ全体の綺麗なスクリーンショットを撮ることができます。スクリーンショットが撮れるまでの時間も結構速い。</p>

<p>この手の海外のサービスは、日本語が文字化けすることも多いのですが、screenshotlayerでは、フォントが若干変わるものの、文字化けすることなくページ全体をキャプチャできます。</p>
[caption id="attachment_30132" align="aligncenter" width="242"]<a target="_blank" href="http://cdn.zako.org/images/2015/12/scl_api_yahoo.png" rel="attachment wp-att-30132"><img src="http://cdn.zako.org/images/2015/12/scl_api_yahoo-242x300.png" alt="Yahooトップページのサンプル、綺麗なもんです。" width="242" height="300" class="size-medium wp-image-30132" /></a> Yahooトップページのサンプル、綺麗なもんです。[/caption]

<h4 class="tips">月100回まで無料で使えるAPI</h4>
[caption id="attachment_30129" align="alignnone" width="592"]<img src="http://cdn.zako.org/images/2015/12/screenshotlayer-api.png" alt="サムネイルのサイズを指定したり、ビューポートやユーザーエージェントを変更したりなんてこともできます。" width="592" height="122" class="size-full wp-image-30129" /> サムネイルのサイズを指定したり、ビューポートやユーザーエージェントを変更したりなんてこともできます。[/caption]
<p>APIはベースとなる
<code>http://api.screenshotlayer.com/api/capture</code>
を元にパラメータを付与していくのですが、このパラメータが意外と豊富で、サイト制作時のブラウザチェックの取っ掛かりとして使うなんてこともできそうです。</p>

<p>興味があるかたは<a target="_blank" href="https://screenshotlayer.com/">screenshotlayer</a>へどうぞ。</p>
