<p class="thumb"><img src="http://web-marketing.zako.org/images/2010/12/wirify.jpg" alt="サイトをワイヤーフレーム表示" title="wirify" width="514" height="204" class="aligncenter size-full wp-image-16938" /></p>
<p>サイトのモックアップを作成するツールは多々ありますが、業界の標準デザインを意識してサイトを構築するのであれば、参考にしているサイトは必ずあるはず。</p>
<p>今回は、そんな時に、サクっと参考サイトからモックアップを作成できるツールをご紹介します。</p>
<!--more-->
<h3 class='header-label'>開いたサイトをワイヤーフレームにするブックマークレット「Wirify」</h3>
<p>「<a href="http://www.volkside.com/tools/wirify/" target="_blank">Wirify</a>」は、<strong>見ているサイトをその場でモックアップにしてくれるブックマークレット。</strong></p>
<p>サイト上の画像とテキストリンクをワイヤーフレーム表示し、画面キャプチャを撮り、追加したいものを画像編集ソフトで追加すればモックアップとして共有することができます。</p>

<h4 class='tips'>サンプルモックアップ</h4>
<p><img src="http://web-marketing.zako.org/images/2010/12/wirify2.png" alt="モックアップ" title="wirify2" width="400" height="464" class="aligncenter size-full wp-image-16939" /><br />↑これは当ブログから作ったモックアップ。ブックマークレットをクリックするだけで生成されます。</p>

<p><img src="http://web-marketing.zako.org/images/2010/12/wirify3.png" alt="要素を表示" title="wirify3" width="400" height="151" class="aligncenter size-full wp-image-16940" /><br />↑画面上でマウスカーソルを乗せると、ワイヤーフレームの要素が、「img」「a」「p」などの要素が表示されます。</p>

<p>作成されたモックアップをクリックすると、元のサイトに戻ります。そのため、モックアップを保存、共有したい場合には、<a href="/hacks/google-chrome/screen-capture.html" target="_blank">スクロールキャプチャできるChrome拡張機能</a>や、<a href="/blog/screenpresso-pro-screenshot-soft.html" target="_blank">画面キャプチャーソフト</a>などを使って保存や共有をしてください。</p>


<h4 class='tips'>モックアップ生成ブックマークレット</h4>
<p class="bookmarklet"><a href="javascript:(function(){wf_bookmarklet='1.1';if(typeof wfInit=='undefined'){document.body.appendChild(document.createElement('script')).src=(document.location.protocol=='https:'?'https:':'http:')+'//www.volkside.com/tools/wirify/wirify.min.js?'+parseInt(new Date().getTime()/43200000);}else{wfInit();}})();">モックアップ作成</a></p>
<p>↑これをブックマークに登録して使用してください。<a href="http://www.volkside.com/tools/wirify/" target="_blank">サービスサイト</a>で入手することも可能です。</p>


<p>興味のある方は、<a href="http://www.volkside.com/tools/wirify/" target="_blank">Wirify</a>へどうぞ。</p>

<p>ツールを使ったとしても、モックアップを作るのはちょっと手間ですよね。それをこんなにカンタンに作れてしまうのですから、これから手放せなくなりそうです。</p>
<p>Via:<a class='web-site-link' href="http://www.delicious.com/url/3ef1fcbaa18e4be861fd9e410881836d" target="_blank">delicious</a></p>