<p class="thumb"><img src="http://cdn.zako.org/images/2015/09/mockup-io.png" alt="mockup-io" width="592" height="338" class="alignnone size-full wp-image-29938" /></p>

<p>アプリのUIを作成する過程で、モックアップを作った段階ではUIの動きは想像するだけになり、実装してみて初めて動きや遷移のおかしい部分に気づき、修正が発生することも多いかと思います。</p>
<p>できることなら、モックアップの段階でそういった修正は済ませておきたいところ。今回ご紹介するサービスは、そんな問題を解決してくれるものになるはずです。</p>
<!--more-->

<h3 class="header-label">スマホアプリのモックアップをリッチにする「Mockup.io」</h3>
<p>「<a target="_blank" href="https://mockup.io/about/">Mockup.io</a>」は、<strong>iOSやAndroidなどのスマホアプリのモックアップを、より実物に則した状態で見ることができるようにする</strong>サービス。</p>
<p>他のページヘのリンクや、ページ遷移時の動きも再現できるので、ユーザー視点で体験しながらモックアップに対してフィードバックをおこないやすくなります。</p>

<h4 class="tips">より実物に近い形で体感できる</h4>
[caption id="attachment_29941" align="alignnone" width="592"]<img src="http://cdn.zako.org/images/2015/09/mockup-io-ui.png" alt="モックアップの画像をアップしたもの。" width="592" height="324" class="size-full wp-image-29941" /> モックアップの画像をアップしたもの。[/caption]
<p>まず、モックアップの画像をアップロードすると、指定した端末の画面の枠にはめ込まれた状態で表示されます。<a href="https://geo.itunes.apple.com/us/app/mockup.io-mobile-ui-prototyping/id692766246?mt=8&at=11l8Es">iPhoneアプリ</a>または<a target="_blank" href="https://play.google.com/store/apps/details?id=com.alterplay.mockupio">Android アプリ</a>を使ってスマホで動きを見ることも可能です。（ただし画面サイズピッタリに表示するものではありません。）</p>

<h4 class="tips">コメントでフィードバック</h4>
[caption id="attachment_29940" align="alignnone" width="592"]<img src="http://cdn.zako.org/images/2015/09/mockup-io-feedback.png" alt="フィードバックのコメントを入れて、ステータスをProblemにしたところ。" width="592" height="415" class="size-full wp-image-29940" /> フィードバックのコメントを入れて、ステータスをProblemにしたところ。[/caption]
<p>画面ごとにコメントを付けられるようになっており、かつその画面のステータスを設定できるようになっています。</p>
<p>ステータス（Tags）は、Draft、Approved、Implemennted、Problemの４つを指定できるようになっており、自分なりにこのステータス名を編集することも可能です。（右クリックメニューの「Manage Tags」から編集可能。）</p>

[caption id="attachment_29939" align="alignnone" width="592"]<img src="http://cdn.zako.org/images/2015/09/mockup-io-public.png" alt="プロジェクトを「公開」状態にしたもの。" width="592" height="338" class="size-full wp-image-29939" /> プロジェクトを「公開」状態にしたもの。[/caption]
<p>また、プロジェクトを公開に設定すれば、URLでモックアップを共有し、メンバーやクライアントからフィードバックを受けることができます。</p>

<p class="desc"><a target="_blank" href="https://mockup.io/#projects/121026/mockups">サンプル画面</a></p>

<h4 class="tips">アップルウォッチやタブレットにも対応</h4>
[caption id="attachment_29942" align="alignnone" width="592"]<img src="http://cdn.zako.org/images/2015/09/mockup-io-device.png" alt="Apple Watchにはめ込んだもの。" width="592" height="338" class="size-full wp-image-29942" /> Apple Watchにはめ込んだもの。[/caption]
<p>iPhone、Android（Nexus）だけでなく、Apple WatchやNexus 7,9,10、iPad、その他カスタムサイズにも対応。さまざまな端末での体験を想像しやすくしてくれます。</p>

<h4 class="tips">他のページヘの遷移やスクロールなどの動きも再現</h4>
[caption id="attachment_29932" align="alignnone" class="ml-5" width="640"]<img src="http://cdn.zako.org/images/2015/09/2015-09-06-16h29_23.gif" alt="他のページヘのリンクを追加。" width="640" height="360" class="size-full wp-image-29932" /> 他のページヘのリンクを追加。[/caption]
<p>他のページヘの遷移やその遷移時の動きなどを簡単な操作で設定することができます。これらの設定は基本右クリックメニューからおこなえるようになっています。</p>

<h4 class="tips">デモ動画</h4>
<iframe width="600" height="338" src="https://www.youtube.com/embed/B17-CEWi0k8" frameborder="0" allowfullscreen></iframe>
<p>無料版では1プロジェクトのみ10個のモックアップを登録できるようになっています。興味があるかたは<a target="_blank" href="https://mockup.io/about/">Mockup.io</a>へどうぞ。</p>

<h5 class="tips">iPhoneアプリ</h5>
<p>
	<a href="https://geo.itunes.apple.com/us/app/mockup.io-mobile-ui-prototyping/id692766246?mt=8&at=11l8Es" style="display:inline-block;overflow:hidden;background:url(http://linkmaker.itunes.apple.com/images/badges/en-us/badge_appstore-lrg.svg) no-repeat;width:165px;height:40px;"></a>
</p>

<h5 class="tips">Androidアプリ</h5>
<p>
	<a target="_blank" href="https://play.google.com/store/apps/details?id=com.alterplay.mockupio">Mockup.io Prototype Simulator</a>
</p>
