<p class="thumb"><img src="http://web-marketing.zako.org/wp-content/uploads/2009/09/MockFlow.jpg" alt="サイトのワイヤーフレームを作成し、画像でエクスポートできる「MockFlow」" title="サイトのワイヤーフレームを作成し、画像でエクスポートできる「MockFlow」" width="514" height="204" class="alignnone size-full wp-image-8655" /></p><p>サイトのモックアップ作成ツールと言えば、身近なところでFirefoxアドオンの<a class="hacks" href="https://addons.mozilla.org/en-US/firefox/addon/8487" onclick="window.open('https://addons.mozilla.org/en-US/firefox/addon/8487'); return false;">Pencil</a>などもありますが、それよりもパーツひとつひとつがリアルに再現されているところが特徴。しかし日本語が通らないところはとても残念。</p><!--more--><h3 class="header-label">サイトのワイヤーフレームを作成し、画像でエクスポートできる「MockFlow」</h3><p>「<a class="web-site-link" href="http://mockflow.com/" onclick="window.open('http://mockflow.com/'); return false;">MockFlow</a>」は、<strong>ウェブサイト設計時のワイヤーフレームをサクッと作成して共有できるオンラインソフト</strong></p><p>日本語は通らないものの、Firefoxアドオンと違って、どのブラウザでも対応できるところが便利です。</p><h4 class="tips">ワイヤーフレームの作り方</h4><p class="picture2"><img src="http://lh3.ggpht.com/_fRSz8mJZTZY/SqOQVoM9V-I/AAAAAAAAaU8/_Sk8K0Aaycg/s512/MockFlow1.jpg" /> ↑これがワイヤーフレーム作成のUI。右メニューからパーツをドラッグで持ってくるだけで配置できます。</p><p class="picture2"><img src="http://lh6.ggpht.com/_fRSz8mJZTZY/SqORda1tOEI/AAAAAAAAaVI/bXBiG_uo47o/s512/MockFlow4.jpg" /> ↑文字が入っている部分をダブルクリックすると、その部分のテキストの編集画面が開きます。</p><h4 class="tips">ワイヤーフレームの作り方 デモ動画</h4><object width="522" height="322"><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="always" /><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=6372877&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" /><embed src="http://vimeo.com/moogaloop.swf?clip_id=6372877&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true" allowscriptaccess="always" width="522" height="322"></embed></object><h4 class="tips">ワイヤーフレームを共有する</h4><p>モックアップを共有するには、<a class="web-site-link" href="http://app.mockflow.com/mockflow/view.jsp?pid=P7BF15575AF9B956BC42E80F2F8FEB3C4&id=72DF2C11C347E6CCB36D80F39E6D69AD/" onclick="window.open('http://app.mockflow.com/mockflow/view.jsp?pid=P7BF15575AF9B956BC42E80F2F8FEB3C4&id=72DF2C11C347E6CCB36D80F39E6D69AD'); return false;">共有ページ</a>のリンクを発行する方法と、PNG形式の画像をエクスポートする二つの手段があります。</p>[caption id="attachment_8739" align="alignnone" width="522" caption="↑これが生成したPNG形式の画像。ページ毎に生成できます。"]<img src="http://web-marketing.zako.org/wp-content/uploads/2009/09/Page2.png" alt="これが生成したPNG形式の画像。ページ毎に生成できます。" title="ワイヤーフレームを画像でエクスポート" width="522" height="364" class="size-full wp-image-8739" />[/caption]<p class="picture2"><img src="http://lh4.ggpht.com/_fRSz8mJZTZY/SqOQVwbJ35I/AAAAAAAAaVA/EYa-BAstZz4/s512/MockFlow2.jpg" /> ↑共有する場合には右上の「Present」ボタンを押します。</p><p class="picture2"><img src="http://lh6.ggpht.com/_fRSz8mJZTZY/SqOQWEUmLWI/AAAAAAAAaVE/5oKf5RBKqiU/s512/MockFlow3.jpg" /> ↑開いたページで共有ページのリンクを生成する「Links」か、PNG形式の画像をダウンロードできる「Export」を押します。</p><p>興味のある方は<a class="web-site-link" href="http://mockflow.com/" onclick="window.open('http://mockflow.com/'); return false;">MockFlow</a>へどうぞ。</p><p>無料で作成できるのは１アカウント1サイトまでになっていて、それ以降は月額3.25ドル必要となりますが、うまく使いこなせばかなり便利ですよね。Gmailなら+～～＠とか。</p><p>Via：<a class="website-link" href="http://delicious.com/url/d41cd0a2bf0f0131adcbd9edd5ed093d" onclick="window.open('http://delicious.com/url/d41cd0a2bf0f0131adcbd9edd5ed093d'); return false;">delicious</a></p>