アプリ開発で驚くほど簡単にモックアップが作成できるツール11選
モバイルファーストと言われて久しい昨今。
モバイルの場合、特に画面遷移まで含めた設計を考えないとユーザーに違和感を生じさせることもあります。
それらマイナス要素を無くすためにもモックアップの段階から意識してつくり込みましょう。
モックアップは作成までに手間がかかるイメージがありますが、ツールを活用することで効率良く作成できます。
今回は、モックアップ作成ツールの中でも特にモバイル向けのものをまとめてご紹介します。
アプリ、モバイル用サービスの開発をする際にぜひ使ってみてください。
モバイル向けモックアップ作成ツール11選
1.fluid
予め用意してあるパーツを使って、直感的かつ簡単にモックアップ作成ができるツールです。ブラウザ上でパーツをドラッグして配置するだけで作成できます。
基本的なUI設計で使用するパーツの多くが揃っていますので十分足りてしまいますが、欲しいものがある場合には画像をアップロードすることも可能です。海外向けのサービスではありますが作成方法がとにかく簡単なため、説明を読まなくとも大半の方は問題なく使用できるでしょう。
1プロジェクト10ページが上限となっていますが無料でも使用することができます。有料プラン(月払いまたは年払い)であれば、料金に応じて使用できる機能が多くなります。気になった方は一度無料で試してみるといいでしょう。
利用料金:月額 Solo $12〜Team 5 $49
年間契約の場合割引あり(月々$10〜)。無料プラン提供あり。
2.POP
画像をベースにアプリのプロトタイピングができるツールです。手書きのアプリ画面イメージを取り込むことで、見た目や画面遷移の確認を手軽におこなうことができます。
なんといっても手書きのスケッチを取り込めるのが魅力的です。紙と書くもの、スマートフォンがあればいつでもモックアップが作れてしまいますので、アナログ派の方には特にオススメです。
iPhoneアプリ、Androidアプリ、Windowsアプリの3種類が揃っていますのでお手持ちのデバイスに合わせてダウンロードしてください。プロジェクト数、メンバー数の制限がありますが、無料のフリープランで使うこともできます。使い倒したい方には$10から有料プランを提供しています。
利用料金:月額 BASIC $10〜PRO $25(年払い)
無料プラン提供あり。
3.Flinto
イメージ画像をアップロードし、リンクをするだけの簡単操作で使えるツールです。画面遷移時のアクションも色々と選べるため、具体的なイメージができるようになっています。
Macで使える「Flinto for Mac」、スマートフォン用の「Flinto Lite」を用意しており、無料で試すことができます。トライアル期間終了後は利用料金がかかる有料となります。
利用料金:Flinto for Mac $99、Flinto Lite 月額$20
無料トライアル期間あり。
4.Proto.io
本物のアプリのようなリアリティを追求したツールです。ライブビュー機能がついており、実機で確認しながら作成作業を進めることができます。複雑な設定ができてしまうため、簡単さをウリにしているツールに比べるととっつきにくい印象がありますが、機能性を重視する方にはぴったりです。
有料ツールですが、15日間無料で試すことができます。有料のプランには月払い、年払いがありプロジェクトの規模が大きくなるにつれ価格も上がります。最も最安のプランなら、月々$24で利用可能です。
利用料金:月額 $24〜(年払い)
無料トライアル期間あり。
5.Interface3
直感的な操作でiOSアプリのモックアップが作成できるツールです。画面に必要な要素を追加していき、画面遷移時の設定をおこなうだけでリアルなモックアップが完成します。動画での解説もあり分かりやすいため、ツール初心者の方にも使いやすくなっています。
なお、アプリは無料で試すことができる無料版を提供しており、$9.99支払うことでフルに使えるバージョンにアップグレードができます。
利用料金:有料バージョン $9.99
無料バージョン提供あり。
6.AppCooker
iPad、iPad miniを使ってiOSアプリのプロトタイプができるツールです。モックアップ作成から画面遷移、画面設計、さらに売上予測を立てることもできるようになっています。
多機能なため、モックアップを作り込みたいという方よりも色々なシーンで使用したい方にオススメ。もちろん、iPadを日頃使っている方にも適したツールです。
有料のアプリで、Appstoreで$14.99で販売しています。お試しはできないものの、公式ホームページ上で動画を見ることができますので、一度視聴すると使用感わかるでしょう。
また、買い切りのため継続的に料金を払う必要がないのもポイントです。
利用料金:$14.99
7.BRIEFS
http://giveabrief.com/index.html
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
iPad上で作業ができるツールです。手書きで画面イメージを考えながら、操作感の確認までができるモックアップが作成できます。四角形を書くと自動的にiPhoneの形になりますので、あとはそのままiPhoneの枠内に画面を書いていきます。ボタンを作ったり、画面遷移を設定すれば完成です。
似たような手書きで作れるサービスは他にもありますが、アプリ内で完結するというのが特徴的です。なお、利用料金は月額$10です。30日間の無料トライアルがありますので、気になる方は使用感を試してみてはいかがでしょうか。
利用料金:月額 $10
無料トライアル期間あり。
10.inVision
チーム内での共有機能に優れたワイヤーフレーム作成ツールです。Enwenote,Twitterをはじめとする有名企業にも導入実績を持つ、世界的に支持率の高いツールの一つです。inVisionの優れた点は、複数人での作業を効率よく進めることができることです。
作成したものにコメントを入れたり、進行状況を把握できるステータス管理機能までついているため、プロジェクト内での作業を強力にサポートします。コメントの色を変更したり、図でコメントできるという嬉しい機能が満載です。
ワイヤーフレーム作成はもちろん、デザインのチェックにも使うことが可能。無料で使えるプランから本格的なENTERPRIZEプランまで揃えていますので、活用シーンに応じて選択することができます。
利用料金:月額 STARTERプラン $15〜ENTERPRIZEプラン 応相談
無料プラン提供あり。
11.Marvel
inVisionと同様、プロトタイプとコラボレーションが同時にできるツールです。埋め込みコードを生成することで、簡単に共有することができます。
また、他にはない機能としてフリーハンドで書いたスケッチをスクリーンとして取り込むことが可能です。色々な使い方ができるため、こだわりを持つ方にオススメです。
有料プランなら月額・年払い$12〜使用できますが、無料のプランも提供しています。
利用料金:Proプラン $12〜Companyプラン $33/月額(年払い)
無料プラン提供あり。
まとめ
一口にモックアップ作成ができると言っても、備えている機能・特徴や価格は様々です。
パソコンから作業できるのも以外に、スマートフォン、iPadから作業できるものもあります。
色々なツールが登場しているので、ご自身の用途や作業環境にぴったりのものを選びましょう。
有料ツールの多くは無料でお試しできるプランを提供しています。
本格的に導入するかどうか悩んでいる方も、この機会に一度試してみてはいかがでしょうか。
このニュースを読んだあなたにオススメ
改めて知っておきたい、一般的なWebサイトのレイアウト6種類を解説
Webデザインに役立つ無料のツール・デザイン集まとめ
これだけ読めば大丈夫!デザインの基礎が学べる厳選5記事
このニュースに関連するカリキュラム
LPOとは
ランディングページとはユーザーが最初に見るホームページのことです。そのページは第一印象であり、その後のユーザーの行動にも大きく影響することは必至です。そのランディングページを最適化し、成果の最大化を目指すこと、それをランディングページ最適化=LPO(Landing page optimization)といいます。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- Android
- Android OSとはスマートフォン用に開発された基本ソフト(OS)の一種です。米国Google社が中心となり開発されました。
- デバイス
- デバイスとは「特定の機能を持つ道具」を表す語で、転じてパソコンを構成するさまざまな機器や装置、パーツを指すようになりました。基本的に、コンピューターの内部装置や周辺機器などは、すべて「デバイス」と呼ばれます。
- リンク
- リンクとは、インターネット上では、あるページの中に記された、他のページの所在を表す情報のことを「ハイパーリンク」と呼び、これを略した言葉です。リンクのある場所をクリックすると、他のページにジャンプするようになっています。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- OS
- OSとはOperation Systemの略称です。パソコンやスマートフォンで操作した内容をアプリケーションに伝える役目を担っています。パソコン用ではwindowsやMac OS、スマートフォンではiOSやAndroidが有名です。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- OS
- OSとはOperation Systemの略称です。パソコンやスマートフォンで操作した内容をアプリケーションに伝える役目を担っています。パソコン用ではwindowsやMac OS、スマートフォンではiOSやAndroidが有名です。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- アプリ
- アプリとは、アプリケーション・ソフトの略で、もとはパソコンの(エクセル・ワード等)作業に必要なソフトウェア全般を指す言葉でした。 スマートフォンの普及により、スマートフォン上に表示されているアイコン(メール・ゲーム・カレンダー等)のことをアプリと呼ぶことが主流になりました。
- Twitterとは140文字以内の短文でコミュニケーションを取り合うコミュニティサービスです。そもそもTwitterとは、「小鳥のさえずり」を意味する単語ですが、同時に「ぺちゃくちゃと喋る」、「口数多く早口で話す」などの意味もあります。この意味のように、Twitterは利用者が思いついたことをたくさん話すことのできるサービスです。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング