モックアップをツールで作成！ぶれないデザインを生み出す方法を解説

「モックアップを効率的に作りたい・・・」
「デザインをなんとなく決めてしまい、後で直すことが多い」
そんな悩みをお持ちではありませんか？

あなたはモックアップを作成するときに、どのように作成されているでしょうか。
手書きが早くて一番良いと考えていらっしゃる方も、パワーポイントやイラストレーターを使っている方も多いかと思いますが、最近はモックアップを作成するための専用ツールがたくさん出てきています。
モックアップは、ワイヤーフレームでデザインのアウトラインが決まった後に、デザインの肉付けをするものという特性があります。そのためデザインのパターンが作りやすく、完成系がイメージしやすい機能を持ったツールが求められます。
そしてさらなる作業効率化のためには、作ったデザインをいち早くチーム内に共有し意思決定が早いことも重要である点から、オンライン（Web）ツールが最適です。

専用ツールだからこその機能が満載で作成作業をスムーズに行えるので、導入すれば作成から共有まで一連の作業を効率化できます。
この記事では、モックアップ作成ツールの利用価値から実際の選び方までお伝えしていきます。最後までご覧いただければ、あなたにとって最高のツールを選ぶ方法がわかります。

＜留意点＞
モックアップ以外のツールをお探しの場合は別記事を御覧ください。デザインは、下記のフェーズに分けられます。
スケッチ（手書きのラフ画）
↓
ワイヤーフレーム（スケッチをデジタル化したもの）
↓
モックアップ（ワイヤーフレームよりさらに色やサイズなどデザインを意識したもの）※本記事でご紹介
　↓
プロトタイプ（モックアップに遷移やアニメーションなど動きをつけたもの）

1.ツールを使ってモックアップを作成する目的

具体的には主に下記のような効率化が図れます。

1-1. 実際に使われる場面のイメージがつかみやすい

あたかもパソコンのデスクトップやスマートフォンでサイトを見ているかのように、最終デザインを確認することができます。関係者間で、よりリアルに最終成果物をイメージすることができ、デザイン修正など手戻りの可能性を抑えます。

1-2. 関係者合意を得やすい

特にオンライン（Web）ツールであれば、デザイン画に対してツール上でフィードバックすることができ、その内容は関係者全員が時間や場所を問わずに確認できます。「誰がどのコメントをしたか」といった履歴を管理することもできるので、社内やクライアント含め常に共通認識を持ってデザインを進めることができます。

1-3. デザインのクオリティーを上げることができる

ツールを使えば、簡単に色や幅などの調整が変えられます。実際の製品にプリントアウトして検証しなくても、ツール上であれば、１つのサンプルに様々なデザインを適用することができます。短い時間で簡単にデザイン検証ができるので、クライアントやユーザーが求める細かいデザインに近づけることができます。また、Webやスマホ画面の画像にデザインをはめ込めるものもあり、よりデザインを具体的にイメージしやすくなります。

2.モックアップ作成ツールは大きく2種類

デザイン作成ツールと、完成したデザインをスマートフォンの画面にはめ込むツールの２つのカテゴリーに分けられます。

2-1. デザイン作成ツール

オフラインツールとオンラインツールの２つがあります。
モックアップのゴールである「デザインの合意形成」を効率的に行うためには、オンラインツール（Webツール）が特に適しています。

・オフラインツール
専用ツールではないパワーポイントやフォトショップなども含まれます。共有するための機能は備えられていないものが多いですが、オフラインのため、セキュリティ面は安心できます。

・オンラインツール（Webツール）
オフラインツールだと誰かが修正を加えている間に他の人が修正するなど、どれが最新版データかわからなくなることも考えられますが、オンラインであれば、複数人共同でリアルタイムに編集作業もできますので、変更履歴を残しつつ常に最新版を共有することができます。

2-2. 画像はめ込みツール

クライアントによっては、より実際の状況に近いデザインを見せたほうがいい場合があります。もしWebサイト製作の場合は、パソコン画面やスマートフォン画面にモックアップ画像をはめ込んだほうが、ただモックアップの画面だけ見せるよりもイメージがわきやすくなります。運用開始がスタートしてから「デザインがイメージと違う」と言われないように、できる限りのリアリティーを求めることは有効です。

3.いいツールを選ぶためのチェック項目

では実際にどんなツールを選べばいいのでしょうか。
まず実際に使ってみることが確実です。ツールを使う人によって、どんな機能を持ったツールがいいのかそれぞれ異なります。ほとんどのツールが無料体験版を提供していますので、実際に使ってみて「これだ！」と思うものを探しましょう。
ツールを選ぶ際には、何を目的にツールを選ぶかを明確にし、チェックすべきポイントを関係者全員で洗い出しましょう。

＜チェックポイント例＞

No.	チェックすべきポイント	優先度低—————高
1	ツールバーが直感的に使いやすいデザインか	１・２・３
2	日本語UIか	１・２・３
3	オンラインでフィードバックができるか	１・２・３
4	誰がフィードバックをしたらわかるか	１・２・３
5	楽に画像を取り込めるか	１・２・３
6	プロトタイプへの連携がスムーズにできるか	１・２・３
7	セキュリティ対策がされているか	１・２・３
8	ランニングコストがかかり過ぎないか	１・２・３
9	テンプレートが豊富か	１・２・３
10	画像はめ込みが簡単に行えるか	１・２・３

4.ツール選定までのスケジュール案

いいツールを選ぶためには、スケジュール感を持って進めることも大事です。
いくつか無料トライアルから始めるかと思いますが、通常の仕事を行いながらツール選定するのは時間がかかります。計画的に進め、最短でツールを選定しましょう。

＜ツール選定スケジュール案＞
2月　優先順位の洗い出し
3月　ツールのトライアル〜ツールの選定
4月　運用開始

※もし自社サーバーでの導入を検討される場合は、より長い期間の確保が必要です。

5.モックアップ作成ツールのご紹介

では最後にツールのご紹介をします。主要なツールはこちらに網羅されていますので、下記のリストから検討を始めてみてください。

5-1. オンラインツール

5-1-1. moqups

ユーザー数：100万人以上
プラン：登録不要で無料で利用できるが一部機能制限あり
料金：月額約¥1,500〜
特徴：UIは英語だが、あらかじめ用意してある部品をドラック＆ドロップして配置ができるので、英語がわからなくても直感的に操作可能。動作が軽い。
URL：https://moqups.com/

5-1-2. Prototyper

ユーザー数：—
プラン：無料プランあり（一部機能制限あり）
料金：月額約¥2,000〜
特徴：イラストレーターで作成したデータをPrototyperに読み込めば、変更があった場合もイラストレーターで編集した内容をリアルタイムにPrototyperにも反映することができる。
URL：https://www.justinmind.com/

5-1-3. Flinto

ユーザー数：—
プラン：30日間無料プランあり
料金：Macインストール約¥11,000〜　もしくは月額¥2,200〜
特徴：端末にインストールして使う方法と、ブラウザ上で動かす方法の２つがある。Dropboxとの連携ができる共有機能あり。※Macのみ対応。
URL：https://www.flinto.com/

5-1-4. Cacoo

ユーザー数：150万人以上
プラン：14日間無料トライアルあり
料金：1アカウント月額¥454〜
特徴：インターネット環境さえあればどこでも作業可能。同時編集が可能であったりチャット機能があるなどチームで共同作業がしやすい。
またDropboxなどのクラウドストレージとの連携が可能。Cacooから直接ストレージサービスにログインでき、ストレージ内に保存している画像を直接挿入できるため、いちいちデータを引っ張ってくる手間が要らない。
URL：https://cacoo.com/ja/

5-1-5. Fluid

ユーザー数：23万人以上
プラン：無料プランあり
料金：月額約¥1,600〜
特徴：スマホリンク機能ですぐにスマホでデザインを確認できる。
URL：https://www.fluidui.com/

5-1-6. POP

ユーザー数：—
プラン：2プロジェクト分だけ使える無料プランあり
料金：月額¥1,400〜
特徴：手書きのモックアップをスマートフォンで撮影することでツール内に取り込める。製作中のデータを自動でDropboxなどのストレージに保管する機能があるため、データの紛失が起こらない。
URL：https://popapp.in/

5-1-7. InVision

ユーザー数：70万人以上
プラン：無料プランあり（一部機能制限あり）
料金：月額約¥1,600〜
特徴：SNS機能があり、コメントを書いたりタイムリーに編集できる。
URL：https://www.invisionapp.com/

5-1-8. Balsamiq Mockups

ユーザー数：—
プラン：30日間の無料トライアルあり
料金：約¥9,900〜
特徴：手書き風に書ける。
URL：https://balsamiq.com/products/mockups/

5-1-9. Framer

ユーザー数：—
プラン：無料トライアルあり
料金：月額約¥1,600〜
特徴：JavaScriptを使って作成可。パソコンやスマートフォンの画面上に表示させ、ページの確認もできる。
URL：http://framerjs.com/

5-1-10. AppGyver

ユーザー数：20万人以上
プラン：無料版あり
料金：要問合せ
特徴：作成したモックアップはURLやQRコードでシェア可能。スマートフォンにアプリをインストールすればスマートフォンからの作業も可能。
URL：http://www.appgyver.com/

5-1-11. MockFlow

ユーザー数：20万人以上
プラン：無料版あり
料金：月額¥1,500〜
特徴：テンプレートが豊富。
URL：http://www.mockflow.com/

5-1-12. Mockingbird

ユーザー数：20万人以上
プラン：7日間の無料トライアルあり（一部機能制限ありの無料版あり）
料金：月額約¥1,300〜
特徴：ブラウザ上でモックアップ作成可能。メンバー登録を行えば他のメンバーにも共有できる。
URL：https://gomockingbird.com/home

5-1-13. HotGloo

ユーザー数：—
プラン：15日間無料トライアルあり
料金：月額約¥1,400〜
特徴：シンプルな見た目で直感的な操作が可能。
URL：http://www.hotgloo.com/

5-1-14. Adobe Edge Reflow

ユーザー数：—
プラン：30日間無料トライアルあり
料金：Adobe Creative Cloudに登録すれば無料
特徴：レスポンシブWebデザインのモックアップを作成できる。
URL：http://www.hotgloo.com/

5-1-15. Adobe XD

ユーザー数：—
プラン：Adobe IDがあれば無料
特徴：ツールバーがシンプルで直感的に使いやすい。
URL：http://www.adobe.com/jp/products/experience-design.html

5-2. オフラインツール

5-2-1. UXPIN

ユーザー数：—
プラン：無料トライアルあり
料金：月額約¥3,200〜
特徴：Webやスマホに使える素材が豊富にプリインストールされている。デザインに動きをつけ検証することも可能。
URL：https://www.uxpin.com/

5-2-2. axure

ユーザー数：—
プラン：無料トライアルあり
料金：月額約¥3,400〜
特徴：Office系ソフトとの連携が優れており、画像をドラッグ＆ドロップで取り込むことができる。
URL：https://www.axure.com/

5-2-3. PENCIL PROJECT

ユーザー数：—
プラン：無料
特徴：無料で使えてパーツが豊富にあり。
URL：http://pencil.evolus.vn/Default.html

5-2-4. SIMPLEDIAGRAMS

ユーザー数：—
プラン：７日間の無料トライアルあり
料金：約¥5,500〜
特徴：Adobe Airで機能するインストール型ソフト
URL：http://www.simplediagrams.com/

5-3. 画像はめ込みツール

5-3-1. MockUPhone

プラン：無料
特徴：iPhoneやAndroid端末の画面に画像を挿入できる。実際にデバイスやマシンでページを閲覧した時に、どのような感じで表示されるかがわかる。
URL：http://mockuphone.com/

5-3-2. Shirt Mockup

プラン：無料
特徴：画像をアップロードするだけでTシャツのモックアップを作成することができます。
URL：http://shirtmockup.com/

5-3-3. Dunnnk

プラン：無料
特徴：日常生活に溶け込んだ画像にモックアップを差し込むことができます。
URL：http://dunnnk.com/

5-3-4. iPhone Screenshot Maker

プラン：無料
特徴：iPhone、iPad、Macの画面にモックアップ画像をはめ込むことができます。特徴的なオプション設定、デバイスの画面にあるステータスバーの有無、ステータスバーのみの上書き、反射エフェクト有無、鏡面反射の有無と多くの機能が備わっています。
URL：http://iphone-screenshot.com/

5-3-5. Placeit

プラン：無料
特徴：パソコン、スマートフォン、スマートウォッチなど豊富な素材が用意されています。
URL：https://placeit.net/

5-3-6. Businesscardstar

プラン：無料
特徴：名刺やポストカードなどのデザインをするときに活用できるモックアップ作成ツールです。
URL：http://businesscardstar.com/

5-3-7. Frame

プラン：無料
特徴：フレームは全部で36種類以上と豊富なバリエーションを揃えています。
URL：http://frame.lab25.co.uk/

5-3-8. Magic Mockups

プラン：無料
特徴：パソコン、スマートフォン、タブレット、額縁など画像が豊富です。
URL：http://magicmockups.com/

5-3-9. MakeScreenshots

プラン：無料
特徴：iPhoneアプリのモックアップが簡単に作成できるツールです。
URL：https://www.crunchbase.com/organization/makescreenshots#/entity

5-3-10. mockDrop

プラン：無料
特徴：Apple　Watchにも対応できる新しいモックアップ作成ツールです。
URL：https://mockdrop.io/

まとめ

デザインを作り出すツールを選択するということは、とても重要なことだと思います。
「何となくオススメされていたから選んだ」では、しばらく経ってから後悔することも考えられます。自分が何を目的としてツールを導入したいのかをまず明確にしましょう。
そこから実際に無料トライアルを使ってみて、モックアップ作成ツールの効果を感じてみてください。決定までのスケジュールもしっかりと計画した上で、費用対効果が大きいものはどれなのかを選び、今の業務をさらに効率化しましょう。