アプリ開発で驚くほど簡単にモックアップが作成できるツール11選

モバイルファーストと言われて久しい昨今。
モバイルの場合、特に画面遷移まで含めた設計を考えないとユーザーに違和感を生じさせることもあります。
それらマイナス要素を無くすためにもモックアップの段階から意識してつくり込みましょう。

モックアップは作成までに手間がかかるイメージがありますが、ツールを活用することで効率良く作成できます。

今回は、モックアップ作成ツールの中でも特にモバイル向けのものをまとめてご紹介します。
アプリ、モバイル用サービスの開発をする際にぜひ使ってみてください。

モバイル向けモックアップ作成ツール11選

1.fluid

https://www.fluidui.com/

予め用意してあるパーツを使って、直感的かつ簡単にモックアップ作成ができるツールです。ブラウザ上でパーツをドラッグして配置するだけで作成できます。

基本的なUI設計で使用するパーツの多くが揃っていますので十分足りてしまいますが、欲しいものがある場合には画像をアップロードすることも可能です。海外向けのサービスではありますが作成方法がとにかく簡単なため、説明を読まなくとも大半の方は問題なく使用できるでしょう。

1プロジェクト10ページが上限となっていますが無料でも使用することができます。有料プラン（月払いまたは年払い）であれば、料金に応じて使用できる機能が多くなります。気になった方は一度無料で試してみるといいでしょう。

利用料金：月額 Solo $12〜Team 5 $49
年間契約の場合割引あり（月々$10〜）。無料プラン提供あり。

2.POP

https://popapp.in/
iOS版
Android版
Windows版

画像をベースにアプリのプロトタイピングができるツールです。手書きのアプリ画面イメージを取り込むことで、見た目や画面遷移の確認を手軽におこなうことができます。

なんといっても手書きのスケッチを取り込めるのが魅力的です。紙と書くもの、スマートフォンがあればいつでもモックアップが作れてしまいますので、アナログ派の方には特にオススメです。

iPhoneアプリ、Androidアプリ、Windowsアプリの3種類が揃っていますのでお手持ちのデバイスに合わせてダウンロードしてください。プロジェクト数、メンバー数の制限がありますが、無料のフリープランで使うこともできます。使い倒したい方には$10から有料プランを提供しています。

利用料金：月額 BASIC $10〜PRO $25（年払い）
無料プラン提供あり。

3.Flinto

https://www.flinto.com/

イメージ画像をアップロードし、リンクをするだけの簡単操作で使えるツールです。画面遷移時のアクションも色々と選べるため、具体的なイメージができるようになっています。

Macで使える「Flinto for Mac」、スマートフォン用の「Flinto Lite」を用意しており、無料で試すことができます。トライアル期間終了後は利用料金がかかる有料となります。

利用料金：Flinto for Mac $99、Flinto Lite 月額$20
無料トライアル期間あり。

4.Proto.io

https://proto.io/

本物のアプリのようなリアリティを追求したツールです。ライブビュー機能がついており、実機で確認しながら作成作業を進めることができます。複雑な設定ができてしまうため、簡単さをウリにしているツールに比べるととっつきにくい印象がありますが、機能性を重視する方にはぴったりです。

有料ツールですが、15日間無料で試すことができます。有料のプランには月払い、年払いがありプロジェクトの規模が大きくなるにつれ価格も上がります。最も最安のプランなら、月々$24で利用可能です。

利用料金：月額 $24〜（年払い）
無料トライアル期間あり。

5.Interface3

http://interface.lesscode.co.nz/
iOS版

直感的な操作でiOSアプリのモックアップが作成できるツールです。画面に必要な要素を追加していき、画面遷移時の設定をおこなうだけでリアルなモックアップが完成します。動画での解説もあり分かりやすいため、ツール初心者の方にも使いやすくなっています。

なお、アプリは無料で試すことができる無料版を提供しており、$9.99支払うことでフルに使えるバージョンにアップグレードができます。

利用料金：有料バージョン $9.99
無料バージョン提供あり。

6.AppCooker

http://www.appcooker.com/
iOS版

iPad、iPad miniを使ってiOSアプリのプロトタイプができるツールです。モックアップ作成から画面遷移、画面設計、さらに売上予測を立てることもできるようになっています。

多機能なため、モックアップを作り込みたいという方よりも色々なシーンで使用したい方にオススメ。もちろん、iPadを日頃使っている方にも適したツールです。

有料のアプリで、Appstoreで$14.99で販売しています。お試しはできないものの、公式ホームページ上で動画を見ることができますので、一度視聴すると使用感わかるでしょう。

また、買い切りのため継続的に料金を払う必要がないのもポイントです。

利用料金：$14.99

7.BRIEFS

http://giveabrief.com/index.html
Mac版
iOS版

Macを使って、綺麗なモックアップが作成できるツールです。素材を使用したり画面遷移時の設定をするだけで完成し、iPhoneでプレビューすることができます。

見栄えのいいモックアップを求めている方には適したツールといえます。なお、料金は$9.99です。

利用料金：$ 9.99

8.prott

https://prottapp.com/ja/
iOS版
Android版

シンプルな操作でアイデアを形にできる、直感的なツールです。画像をアップロードして繋ぎ、アニメーションを指定するだけですので、素早くモックアップを作成することができます。

作成後の共有までをサポートしているため、作ったアイデアに対してフィードバックをもらったり、ブラッシュアップしていくことができます。チーム内で使用できるツールを探している方にぜひ試していただきたいツールとなっています。

ちなみに、Yahoo!Japan、リクルート、クックパッドほか多くの国内企業でも導入実績があります。

料金は、チームの大きさに合わせて5タイプを用意しており、有料で月額1,900円〜利用ができます。（年間契約だと10%オフとなります。）制限つきの無料プランもあるので、お試し利用も可能。

利用料金：月額 Starter 1,900円〜
年間契約の場合割引あり（月々1,710円〜）。無料プラン提供あり。

参考：
スマホサイトやアプリのワイヤーデザインを簡単に作れるProttの使い方

9.pentotype

http://www.pentotype.com/
iOS版

iPad上で作業ができるツールです。手書きで画面イメージを考えながら、操作感の確認までができるモックアップが作成できます。四角形を書くと自動的にiPhoneの形になりますので、あとはそのままiPhoneの枠内に画面を書いていきます。ボタンを作ったり、画面遷移を設定すれば完成です。

似たような手書きで作れるサービスは他にもありますが、アプリ内で完結するというのが特徴的です。なお、利用料金は月額$10です。30日間の無料トライアルがありますので、気になる方は使用感を試してみてはいかがでしょうか。

利用料金：月額 $10
無料トライアル期間あり。

10.inVision

https://www.invisionapp.com/

チーム内での共有機能に優れたワイヤーフレーム作成ツールです。Enwenote,Twitterをはじめとする有名企業にも導入実績を持つ、世界的に支持率の高いツールの一つです。inVisionの優れた点は、複数人での作業を効率よく進めることができることです。

作成したものにコメントを入れたり、進行状況を把握できるステータス管理機能までついているため、プロジェクト内での作業を強力にサポートします。コメントの色を変更したり、図でコメントできるという嬉しい機能が満載です。

ワイヤーフレーム作成はもちろん、デザインのチェックにも使うことが可能。無料で使えるプランから本格的なENTERPRIZEプランまで揃えていますので、活用シーンに応じて選択することができます。

利用料金：月額 STARTERプラン $15〜ENTERPRIZEプラン 応相談
無料プラン提供あり。

11.Marvel

https://marvelapp.com/

inVisionと同様、プロトタイプとコラボレーションが同時にできるツールです。埋め込みコードを生成することで、簡単に共有することができます。

また、他にはない機能としてフリーハンドで書いたスケッチをスクリーンとして取り込むことが可能です。色々な使い方ができるため、こだわりを持つ方にオススメです。

有料プランなら月額・年払い$12〜使用できますが、無料のプランも提供しています。

利用料金：Proプラン $12〜Companyプラン $33/月額（年払い）
無料プラン提供あり。