モックアップとは？必要な理由やWebデザインで使える作成ツール

モックアップとは

モックアップとは、直訳すると模型です。

電気屋さんに行くとクーラーや携帯電話など、見た目や大きさは同じだけれど機能はしない見本品が置いてありますよね？

その見本品をモックアップといいます。
では、Webサイトやアプリ開発の際に使われるモックアップとはなんのことでしょうか？
それはWebサイトやアプリの完成イメージを見てわかるようにした画面イメージのことです。

商品やコンテンツの配色・デザインは完成に近い状態ですが、プログラムは入っていないため実際に画面は動きません。完成イメージをみんなで共有するためのものです。

モックアップが必要な理由

モックアップを作ることで生まれるメリットが3つあります。それを見るとモックアップがなぜ必要なのかがわかります。

実際に使っているところを想像しやすい
クライアントとの打ち合わせがしやすい
デザインの完成度をより高めることができる

実際に使っているところを想像しやすい

パソコンやスマートフォンの画面で表示されている画像のようにデザインされているので出来上がりのイメージがしやすいです。

そのため完成してからのwebサイトやアプリのデザインの修正を防ぐことができます。

クライアントとの打ち合わせがしやすい

モックアップを見ることで、社内でもクライアントでもデザインや構成がイメージしやすくフィードバックもしやすくなります。

デザインの完成度をより高めることができる

モックアップを見ながら打ち合わせをすることで、ターゲットの訴求ポイントがより明確になり、その場でデザインの変更や構成の変更などが可能です。

モックアップを見ることでよりよいデザインを思いつく可能性もあります。

逆に、もしモックアップを使っていなければ、変更しなければならないところや、ターゲットの新たなニーズを付け加えることを、完成近くになって気が付くことになりかねません。そうすると、多くのコストと時間がかかってしまいます。

モックアップが必要な理由は、開発の早い段階で修正部分を洗い出し、課題を早期発見することで効率よく完成までを目指すにはよりよいツールだからです。

業界別のモックアップの活用例

モックアップはいろいろな業界で展示見本として使われています。
例えば、家電業界ではスマートフォン・カメラ・テレビ・エアコンなど小型家電から大型家電までモックアップが作られており、自動車業界では設計段階で実物大のモックアップを制作します。
建築業界では、ビルを建設する際に、その町にビルを建てた時の町のビジュアルを見るためにミニチュア版を制作し、モックアップとして使用します。
住宅の場合は設計の段階でモックアップが使われています。
また、Web業界では、Webサイトやアプリ開発の構成やデザインイメージで使われています。

このように、完成形をイメージしやすく、改善点がないかを把握しやすくするために、モックアップはいろいろな業界で使われています。

ワイヤーフレームやプロトタイプとの違い

モックアップを作る際にワイヤーフレームとプロトタイプも作るとより作業がしやすくなるのでおすすめです。

それにはワイヤーフレームとプロトタイプを知っておく必要があります。Web業界での使い方を見ていきましょう。

ワイヤーフレーム

ワイヤーフレームとは、Webサイトやアプリ開発の骨組みの様なものです。

デザインや配色などはされておらず、構成の要素をページのどの部分に配置するか、大枠を決めてわかりやすく可視化したものです。

ワイヤーフレームは細かなディテールにはこだわっていませんが、Webサイトやアプリ開発の大事な基礎となる部分を作る作業なので、とても大切です。

プロトタイプ

プロトタイプとは、完成形に近いものでプログラムやコードも入っていて、実際に機能するところまでできるものです。

プロトタイプをシミュレーションすることで綿密な調整を行なって、修正箇所がないかを調べることができます。

例えば、Webサイトを作るとして、最初にイメージを膨らませて構成を考えます。どんな記事をページのどこにもってくるかを決めていき、大体のイメージの骨組みを作ったものがワイヤーフレームです。

できたワイヤーフレームをどんどんブラッシュアップして、画像をいれたり、配色したり、見た目を完成形に近づけたものをモックアップといいます。

モックアップを改良していき、機能を追加してほとんど完成近くまでにしたものをプロトタイプといいます。

このように、ワイヤーフレームを改良しテストをすることでモックアップになり、プロトタイプへと自然と段階があがっていきます。改良を重ねることによりスムーズに開発が進むので、コストの削減ができ、完成までのスピードも上がります。

細かくクライアントにフィードバックをもらえば、手戻りが防げるのでとてもいいツールといえるでしょう。

Webデザインで使えるモックアップ作成ツール

モックアップを使うメリットはわかりましたが、実際作る際に一から作るのは大変ですよね？今は、簡単にモックアップが作れる作成ツールがたくさんあります。

その中からおすすめのツール7選をご案内します！

• cacoo
• moqups
• AdobeXD
• Prott
• InVision
• fluid
• Framer

cacoo

Webブラウザからログインするため、インストールが不要です。インターネットさえ繋がっていればチームでモックアップを作れます。リアルタイムで協力して一つのものを作り上げていくことができるのが最大の特徴です。

アイデアや、修正箇所をみんなで確認しあえて、作業効率も上がりますし、フィードバックをも受けやすくなります。テンプレートもたくさんあり、Webデザインのワイヤーフレーム、サイトマップのほかに、開発のためのネットワーク構成図やデータベースの設計図、プロジェクト管理のマインドマップなどWebサイトやアプリ開発に必要なテンプレートがそろっています。

海外のツールですが日本語対応しているので使うのに困りません。

URLを共有すれば同時に数人と作業ができるので、PDFなどの変換の手間がなくなります。

無料プランでも25個のプロジェクトを管理できます。
ただ、動作が重たいのが難点です。

ユーザー数：250万人以上
プラン：14日間無料プランあり
料金：月額600円〜

moqups

モックアップ作成初心者で、無料で使いたいなら、moqupsが使いやすいでしょう。英語のサイトですが簡単に操作できます。無料版には作成する際に制限はありますが、使いやすいステンシル、アイコンやフォントが豊富にあるので不便なく使うことができます。

ダウンロードせずに使用でき、URL一つで簡単に共有ができるので共同でモックアップを作成できます。

アカウント登録するとアップロードした画像をモックアップ内に入れることも簡単にできます。

モックアップを作成するページがとてもシンプルかつ自分でカスタマイズでき、使いやすいアイコンがとても豊富なのでわざわざ他から探してこなくていいのがとても楽です。

動作が軽いのでストレスなく作業が可能。スマートフォン用のテンプレートもあるのでオススメです。

ユーザー数：100万人以上
プラン：Pro/Unlimited
料金：月額23ドル/69ドル

Adobe XD

初心者でも簡単にハイパフォーマンスのモックアップを作ることができます。モックアップからプロトタイプへの作成がスムーズにでき、高性能なのに動作が軽いのでとても使いやすいです。同時に複数人で作業していても瞬時に反応してくれるので動作が重くてイライラすることはありません。

デスクトップ・タブレット・iOS・Androidのどのデバイスにも最適に表示させることができます。

いろんなデバイスに対応しているので、MacだけではなくWindowsにも対応しています。
日本語対応しているところも初心者には使いやすいです。

凝ったデザインはできませんが、初心者にはシンプルで使いやすいツールとなっています。

ユーザー数：—
料金：Adobe IDがあれば無料

Prott

日本語対応しているツールの中でとても使いやすいツールです。
用意されたパーツを組み合わせるだけで簡単にワイヤーフレームが作れます。プロトタイプを作るのも、画像を取り込み・つなぎ合わせ・アニメーションを指定。これだけで、できあがります。より早く、効率的に作ることができます。

Prottが出しているアプリを使うとPCで作成したものが簡単にスマートフォンで確認できます。その場で修正したものがすぐに反映されるのでとっても便利です。

最大の特徴が、コードを書かなくても本物のような動きを再現できることです。チームでシェア機能があったり、コメント機能があったりとフィードバックがしやすい環境になっています。KDDIやリクルートなどの大手企業も使っています。

ユーザー数：ー
プラン：無料プランあり
料金：月額1,900円（Starterプラン）

InVision

サービスの登録やログインをしなくても指定のURLを開けばコメントができる手軽さが魅力です。（コメントを残すのにメールアドレスの登録は必要ですが、その他の面倒なユーザー登録は必要ありません）

さらに一番のポイントは、画像のダウンロードや数値の情報まで載っているので、デザイン担当や制作担当が連絡を取り合わなくてもファイルを見れば確認がとれるため、製作がスムーズになります。

コメントを残す際、コメントしたい箇所をクリックするだけでその個所のコメントが残せるので見てすぐどの場所の修正なのかがわかります。

それに、文章だけでなく図やフリーハンドの線でのコメントも残せます！

URLをスマートフォンに送れば、スマートフォンでの見え方が簡単にチェックできます。
海外でとても有名なツールで、TwitterやAmazonなどの大手企業も使っています。

ユーザー数：70万人以上
プラン：無料プランあり
料金：月額7.95ドル（Proプラン）

fluid

スマートフォンのアプリを開発するのにおすすめのツールです。一番の特徴はワイヤーフレームの時点でリンク機能が備わっているのでデザインの初期段階でリンク付きで画面遷移を確認することができます。
メールアドレスを登録するだけで使えます。

パーツをドラッグ＆ドロップで組み合わせるだけでモックアップができあがりますのでとても簡単です。英語表示ですが、非常にわかりやすく作られているので簡単に操作できます。

スマートフォンに強く素材もたくさんあるのでモバイル向けのコンテンツを作る場合はおすすめです。

ユーザー数：ー
プラン：無料プランあり
料金：月額15ドル（Soloプラン）

Framer

GoogleやFacebookなどの大手企業が使っているツールです。

デザイン作成と機能作成が両方同時にできるので、作業効率が格段に向上します。しかし、コードを書いて作っていくので初心者には向きません。

Sketchを使ったことがある方は、使い方が似ているのですぐに使いこなせるはずです。ゼロからこだわって作りたい！という方におすすめです。

ユーザー数：ー
プラン：無料プランあり
料金：月額2,240円（Proプラン）

まとめ

モックアップの大切さをわかっていただけたでしょうか？商品を開発する際に最初のうちにモックアップ（見本品）を作ることによって、関係者全員がアイデアを出し合い、修正点を把握することができます。

そして、ターゲットの新たな訴求ポイントを見つける手掛かりになる場合があるのでモックアップを作ることはとても重要です。

Webデザインでモックアップを作る場合は、ツールを使うと簡単に作ることが可能です。高機能なものから初心者が使いやすいものまでいろいろありますもで、自分のスペックに合ったものを使うことをおすすめします。

まだモックアップ作成ツールを使ったことのない方は、まず無料で使えるものを使ってみてからいろいろ試して自分に合ったものを見つけてみてください。

手戻りを防ぐことによりスムーズに商品開発ができますのでぜひ、モックアップを利用してみてください。