使えるモックアップツール12選！簡単に作るコツとは？

皆さんは、社内会議や取引先で完成前の製品やサービスのプレゼンをする際、どのようにコンテンツを提示していますか？

実物がない以上、完成イメージ図を用いてをプレゼンするのが一般的で良い方法でしょう。しかし、それらをイチから作るのは骨の折れる作業です。

そこで今回は、誰でも簡単に完成イメージ像を制作できる「モックアップツール」をご紹介します。この記事でおすすめするモックアップツールを使い、簡単にハイクオリティな完成イメージを作りましょう！

モックアップの基礎知識

まずはモックアップについて簡単に学んでおきましょう。すでにモックアップについて十分ご存知の方はこちら。

「モックアップ」とは

モックアップ（mock-up）とは、直訳で「実物大の模型」という意味です。Web制作の世界では、ウェブサイトやアプリ、その他様々なアイテムの実寸大モデルを指します。

モックアップツールは、商品やサービスのモックアップを作るツールです。Webブラウザ上で使えるものからオフラインのアプリまで、幅広い種類のツールが存在します。

なお、似た用語として「プロトタイプ」が存在しますが、「モックアップ」はデザイン面にフォーカスしたモデルであり、「プロトタイプ」は機能面にフォーカスしたモデルです。ただし、両者は混同して使われる場合がよくあります。

モックアップを用いる意味

モックアップはほとんど実物に近いモデルです。そのため商品やサービスのプレゼンをする際、相手に実物のイメージを持ってもらいやすいという効果があります。
また、チーム内で制作イメージを共有するのにも役立ちます。

加えて設計段階やワイヤーフレームでは分からなかった問題点も、モックアップにすることで判明することが多々あります。モックアップとしてリアルなデザインを書き出すことは、サービスの課題の早期発見にもつながるのです。

モックアップツールおすすめ12選

ここからはモックアップに使えるツールを15個ご紹介します。

1. cacoo（カコー）

日本語対応しているモックアップ作成ツールのひとつです。国内のユーザーはとても多い印象があります。

Webブラウザ上で動作し、リアルタイムで共同作業ができるのがcacooの最大の特徴です。複数人で同時にモックアップ制作を行うことで、作業効率が大幅にアップすること間違いなしです。

動作がやや重いのが欠点ですが、比較的安価で使用できるので試してみる価値アリです。

価格：月額4.95〜15ドル（無料版プランあり）
種別：ブラウザアプリ

cacoo

2. prott（プロット）

日本語に対応しているモックアップ作成ツールの一つです。KDDIやDMMなどの国内大手企業も利用しています。

Web上で動作するツールであり、コードを書かずに本物のようなアプリを再現できるのが特徴です。シェア機能、コメント機能、プレゼン機能など、共同制作や提案に便利な機能が多く搭載されています。

初心者でも簡単に使えるツールとしておすすめです。

価格：月額1900円〜（無料プランあり）
種別：ブラウザアプリ

prott

3. InVision（インビジョン）

https://www.youtube.com/watch?v=YXNk4gQCPSY

海外では非常に有名なモックアップ作成ツールです。TwitterやNETFLIX、amazonなどの世界的企業もアプリ開発の際にInVisionを使用しています。

Web上で動作し、モックアップファイルを他の人と共有することができます。また、デザインに対してログやコメントを残すこともできます。共同制作する際にはとても便利なツールです。

価格：月額15ドル（無料プランあり）
種別：ブラウザアプリ

InVision

4. moqups（モックアップス）

https://www.youtube.com/watch?v=542DbwY5OuU

Webブラウザ上で動作するモックアップ作成ツールです。

ダウンロード不要で制作可能で、開発チームでモックアップの制作を手軽に共有することができます。共有はURLひとつで可能です。

動作が非常に軽く、また直感的に作れるため、デザイナー以外の人にもおすすめできるツールです。スマホ向けのテンプレートもあり、モバイルファーストの現代においてはとても有用でしょう。

価格：月額13ドル（無料プランあり）
種別：ブラウザアプリ

moqups

5. fluid（フルード）

https://youtu.be/uodln1GmrFM

用意されたパーツをドラッグ＆ドロップで組み合わせることで、直感的にモックアップを作成できるツールです。

全て英語のWebサービスではありますが、UIが非常に分かりやすいため誰でも簡単に操作できます。スマホに強く、モバイル向けの素材も多く用意されています。

個人では月額8.25ドルから利用できますが（無料版もあり）、月額41.25ドルを支払うことでチームで無制限に使えます。チームでの共同作業をする場合にはおすすめのモックアップツールです。

価格：月額8.25〜41.58ドル（無料プランあり）
種別：ブラウザアプリ

fruid

6. Marvel（マーベル）

ブラウザ上で動作するモックアップ作成ツールです。

ドラッグ＆ドロップの簡単操作でモックアップを制作できる他、コメント機能や共有URL発行なども可能です。

UIが非常に分かりやすい設計であり、説明書を読まずとも簡単に使用することができます。

価格：月額12〜84ドル（無料プランあり）
種別：ブラウザアプリ

Marvel

7. Framer（フレーマー）

GoogleやFacebookなども使っているモックアップ制作ツールです。

CoffeeScriptという、JavaScriptの簡易版のような記法によりモックアップを制作することができます。JSに慣れている人には使いやすいツールです。

一方、プログラミングに不慣れな人には少し難しいかもしれません。

価格：月額12ドル〜（無料プランあり）
種別：ブラウザアプリ

Framer

8. Proto.io（プロト）

https://www.youtube.com/watch?v=9dtWRECqJmk

実機で確認できる機能を備えたモックアップ作成ツールです。

操作の難易度はやや高めですが、慣れるとその分自由度の高い設定をすることができます。

他のモックアップツールよりもやや高額ですが、無料版もあるのでまずはそちらをお試しください。

価格：月額24〜160ドル（無料プランあり）
種別：ブラウザアプリ

Proto.io

9. AppGyver（アップジーバー）

https://www.youtube.com/watch?v=Mx4pzAEYn-M

ブラウザとAndroid両方で制作可能な珍しいタイプのモックアップ作成ツールです。

ビジュアルデザインのテンプレートはなく、自分で用意する必要があります。その分デザインの自由度は高く、手書きのイラストデザインを読み込むことも可能です。

ツールの価格は運営会社との相談なため、まずは無料版を利用してから連絡を入れるか判断しましょう。

価格：応相談（無料プランあり）
種別：ブラウザ＆Androidアプリ

AppGyver

10. Bootstrap Studio（ブートストラップスタジオ）

CSSフレームワークを使用してWebサービスのモックアップを作ることができるツールです。

ドラッグ＆ドロップで編集可能で、CSSは直接変更することもできます。またHTML、CSS、JavaScriptが自動生成されるという便利機能が標準装備されています。作成したモックアップはブラウザ上で確認できるため、Webデザインには最適なツールです。

現在は英語版のみで日本語入力に対応していませんが（ペーストは可能）、Web制作には大変おすすめできるモックアップツールです。月額制ではなく買い切りなのもポイントです。

価格：25ドル
種別：デスクトップアプリ

Bootstrap Studio

11. Justinmind（ジャストマインド）

https://youtu.be/kUes0bJYokU

Windows／Mac両方に対応している、デスクトップ上で動作するモックアップ作成ツールです。

チュートリアルが丁寧で分かりやすいので、初心者でも使いこなすことができます。シンプルでスタイリッシュなUIなので、直感的にも分かりやすいです。

また、アプリで作ったものをブラウザ上で確認することも可能です。

月額：19〜39ドル（無料プランあり）
種別：デスクトップアプリ

Justinmind

12. AppCooker（アップクッカー）

iPadやiPhoneなどでモックアップを制作できるiOSアプリです。

iOSアプリ用のモックアップ制作に特化しており、アイコン画像作成からアプリ概要設計、アプリ画面のデザインまで非常に様々なことができます。非常に多機能なため、全ての機能を使いこなすには多少の慣れが必要です。

無料プランはないものの、買い切りのため月額料金はかかりません。

価格：29.99ドル
種別：iOSアプリ

AppCooker

おわりに

いかがでしたか？

この記事で取り上げたモックアップ制作ツールを使い、短時間でクオリティの高いモックアップを作ってみましょう！

最後までご覧いただき、ありがとうございました！