「百聞は一見にしかず」ということわざがあります。何度話を聞くよりも自分で実際に見た方が確かだということを意味する故事成語です。

自分のアイデアを人に伝える時、口頭で伝えるよりも「モックアップ」を作ってしまった方が早い場合があります。
「モックアップ」とは実際に本物を作る前の試作品のことで、幅広い業種で活用されています。

Webやソフトウェアの製作にも、モックアップを作る工程が含まれています。
頭で考えた仕様やデザインなどの企画を口頭で製作者に伝えるのは難しく、お互いの認識のズレが生まれやすくなります。
そこで、実際に目で見て確認できるモックアップを使えば、デザインイメージの共有や方向性のズレを事前に防げます。

今回はモックアップの概要や、モックアップを製作する前に読んでおきたい記事を厳選してご紹介します。

モックアップとは

モックアップは模型という意味で、商品の大きさやデザインを確認するために用いられる試作品のことです。自動車のショールームで、運転することはできない実物大の模型を見たことはありませんか?これはモックアップの一つで、実際の大きさやデザインを確認できます。展示するためだけに毎回実物を用意するにはその分費用がかかります。モックアップを使えばコスト削減もできるでしょう。

モックアップは製造業だけではなく、インターネットの世界でも利用されています。ホームページアプリを製作するとき、デザインや機能を口で説明するだけではイメージしにくい場合があります。モックアップを作成すれば目でみて確認できるのでイメージしやすくなります。

モックアップではなくすぐに製作にとりかかった方がいいのではないかと思われるかもしれません。一見遠回りに見えるかもしれませんが、事前にモックアップを作成しておくと、デザインの企画者と製作者の間のイメージの共有ができます。製作途中での大幅な方向転換が起こるリスクを軽減できるので、無駄な工程を発生させずにすむのです。

参照:
簡単便利!サクッとモックアップが作れる便利ツール10選
モックアップ(もっくあっぷ)とは - コトバンク

モックアップを使うメリット

モックアップを作成するメリットは2つあります。

1.実際に実物を作る前にイメージしやすくなる

文章や口で説明するだけではイメージしにくいことがあります。

例えばライオンを知らない人に説明するときのことをイメージしてみてください。「体は黄色に近いクリーム色で、顔はたてがみに覆われていて、百獣の王と言われている肉食の動物」とただ説明するだけではイメージしづらいことがあります。実際にモックアップを見せた方がイメージを共有しやすくなります。

2.製作段階での方向転換や作り直しのリスクを回避する

モックアップを作って共有しておけば、いざ製作している段階で思っていたものと違ったので最初から作り直さなければいけないといった大きな作り直しや方向転換をするリスクを軽減できます。モックアップの作成は、認識のズレや勘違いを減らす点でも役立つでしょう。

参照:
モックアップ大解剖!利用する理由から使い方まで総まとめ - PhotoshopVIP

モックアップとプロトタイプの違いは?

モックアップと同じような意味で使われるのが「プロトタイプ」です。
プロトタイプもモックアップと同様試作品を意味しますが、プロトタイプでは実際にどのように動くのか機能を確認してより実物に近いものになります。

モックアップはビジュアルなどの静止しているもの、プロトタイプは機能など実際に操作して動きをみるものと覚えておくといいでしょう。

モックアップを作る前によんでおきたい記事9選

モックアップを作るときに便利な素材やツールを集めた記事をご紹介します。

1.デザインをより引き立たせるために活用したいモックアップ素材50選

デザインをより引き立たせるために活用したいモックアップ素材50選|ferret__フェレット_.png
https://ferret-plus.com/4322

PSDファイルは、Photoshopで使われるファイル形式です。Photoshopを使って簡単に無料で使用できるPSDファイル素材が50こまとめられています。

2.【12月編】モックアップに大活躍!無料のPSDファイル50選

【12月編】モックアップに大活躍!無料のPSDファイル50選|ferret__フェレット_.png
https://ferret-plus.com/2663

無料で使えるPSDファイルが50こまとめられています。ヴィンテージ感のある木製の樽や、錆びた金属にロゴを配置したものなど珍しいものもあるので、どんなときに使えるのか考えるのも次回のデザインのヒントになるかもしれません。

3.ラフやモックアップ作成に最適!無料の高品質PSDファイル89選【1月編】

ラフやモックアップ作成に最適!無料の高品質PSDファイル89選【1月編】|ferret__フェレット_.png
https://ferret-plus.com/2761

PCの上にスマートフォンが置いてあるプレゼンで使えるものや、缶バッジのモックアップを作れるものなど、ピンポイントで欲しい画像の素材を見つけられます。

4.【2月編】デザインやモックアップ作成に使える!無料PSDファイル89選

【2月編】デザインやモックアップ作成に使える!無料PSDファイル89選|ferret__フェレット_.png
https://ferret-plus.com/3111

2月編で新年度にも近いということで、みどりや青など爽やかですっきりしたデザインの素材も掲載されています。新しく名刺を新調するときや新サービスを売り出すときのビジネスシーンで活用できます。

5.アプリのモックアップからホームページのテンプレまで!用途が幅広い無料PSDファイル50選

アプリのモックアップからホームページのテンプレまで!用途が幅広い無料PSDファイル50選|ferret__フェレット_.png
https://ferret-plus.com/4088

モバイル向けのモックアップやホームページのテンプレートとしても利用できる素材が幅広くまとめられています。

6.モックアップのデザインが簡単に作れる無料PSDファイル60選

モックアップのデザインが簡単に作れる無料PSDファイル60選.png
https://ferret-plus.com/2153

書籍や文具、アパレルのプレゼンテーションに使えるモックアップや、アプリやホームページ素材のテンプレートを中心にまとめられている記事です。

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

アプリ開発で驚くほど簡単にモックアップが作成できるツール11選|ferret__フェレット_.png
https://ferret-plus.com/4476

モックアプリを効率的で簡単に作れるツールがまとめられています。モバイル向けのツールなので、アプリやモバイル向けのサービスを開発予定の方にオススメの記事です。

8.簡単便利!サクッとモックアップが作れる便利ツール10選

簡単便利!サクッとモックアップが作れる便利ツール10選|ferret__フェレット_.png
https://ferret-plus.com/2019

スマートフォンをはじめ、PC、Tシャツ、名刺のモックアップを作れるツールが紹介されています。サービスの開発だけでなく、会社のオリジナルTシャツの作成を考えている方は発注する前にロゴや画像の配置を確かめてみると、よりイメージに近いものが作れるでしょう。

9.インスピレーションが湧いてくる!シンプルでクールなモバイルアプリのデザインモックアップ18選

インスピレーションが湧いてくる!シンプルでクールなモバイルアプリのデザインモックアップ18選|ferret__フェレット_.png
https://ferret-plus.com/6803

モバイルアプリのデザインモックアップがまとめられている記事です。色のバランスや配置、画面遷移の仕方など、参考にできるものがたくさんあります。今すぐサービスを開発してモックアップを作る予定のない方でも、見ているだけでデザインのヒントを得られるのではないでしょうか。

まとめ

モックアップはデザインを目で見て確認して共有できるので、デザインの企画者と製作者のイメージ認識の方向性を合わせられるメリットがあります。
簡単に編集できる素材やツールを活用して、サービスをデザインするときに役立てましょう。

モックアップはイメージや内容を伝える手段の一つです。モックアップを作成して終わりではなく、より細かい内容は口頭で伝えるなど工夫も必要です。