<p class="thumb"><img src="http://web-marketing.zako.org/images/2016/11/browserframe.png" alt="Browser Frame" width="592" height="306" class="alignnone size-full wp-image-30700" /></p>
<p>作ったモックアップやワイヤーフレームの画像をブラウザにはめ込んだ状態にして共有したいこともあると思うのですが、それがあらゆるブラウザにはめ込んでということになると、該当の端末やブラウザがなかったりと、手間がかかってしまうものですよね。</p>
<p>今回ご紹介するのは、非常にシンプルではあるものの、地味に便利なスクリーンショットを生成してくれるサービスです。</p><!--more-->

<h3 class="header-label">あらゆるブラウザの枠内にスクリーンショットを入れられる「Browser Frame」</h3>
<p>「<a target="_blank" href="https://browserframe.com/">Browser Frame</a>」は、<strong>アップロードしたスクリーンショットにブラウザの枠をつけた画像を生成</strong>してくれるサービス。</p>
<p>ChromeのWin版、Mac版など8種類のブラウザをフレームとするスクリーンショットを生成することができます。</p>

<h4 class="tips">生成されたスクリーンショット</h4>
[caption id="attachment_30698" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2016/11/frame-chrome-mac.png" alt="Mac版Chromeのフレームにスクリーンショットを入れたもの。" width="592" height="329" class="size-full wp-image-30698" /> Mac版Chromeのフレームにスクリーンショットを入れたもの。[/caption]
<p>たとえば私のようにMacBookを持っていない人も、さもMacbookのChromeでスクショを撮ったような画像を作成できます。</p>

<h4 class="tips">スクリーンショットをアップロードするだけで生成</h4>
[caption id="attachment_30699" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2016/11/browserframe-upload.png" alt="スクリーンショットをアップロード。" width="592" height="306" class="size-full wp-image-30699" /> スクリーンショットをアップロード。[/caption]
<p>サービスサイト上でローカルにあるモックアップやワイヤーフレームの画像をアップロードします。</p>

<h4 class="tips">ブラウザを選択</h4>
[caption id="attachment_30697" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2016/11/browserframe-select.png" alt="選べるブラウザは8種類。" width="592" height="231" class="size-full wp-image-30697" /> 選べるブラウザは8種類。[/caption]
<p>次にフレームにするブラウザを選択します。選択できるブラウザは、以下の8種類です。</p>
<ul><li>Chrome (Mac)</li><li>Chrome (Win)</li><li>Firefox (Mac)</li><li>Firefox (Win)</li><li>Safari</li><li>IE</li><li>Opera</li><li>Edge</li></ul>

<h4 class="tips">プレビューを確認したらダウンロード</h4>
[caption id="attachment_30696" align="alignnone" width="592"]<img src="http://web-marketing.zako.org/images/2016/11/browserframe-preview.png" alt="各ブラウザでのプレビューが表示されます。" width="592" height="290" class="size-full wp-image-30696" /> 各ブラウザでのプレビューが表示されます。[/caption]
<p>プレビューを確認したら、【SAVE】ボタンを押して画像をダウンロードします。生成される画像の拡張子はPNGです。</p>

<p>興味がある方は<a target="_blank" href="https://browserframe.com/">Browser Frame</a>へどうぞ。</p>
