皆さんは「モックアップ」という言葉について、どんなものか内容までご存知でしょうか？
IT業界や建築業界、各種メーカーなどデザインの関わる分野に携わっている方は知っておくべきこの言葉。
今回はそもそも「モックアップ」とはどんなものなのかから、そのメリット・作成方法まで幅広くご紹介します。
この機会にモックアップが洗練されたデザインを作成するためにどのように重要なのか、理解を深めてみてくださいね。
目次
そもそもモックアップとは？デザインにどう影響するのか
「モックアップ」とは、英語で「模型」や「モデル」を意味します。
その名の通り、実際に機能まではしないものの見本品となるもののことを表しています。
身近なところでは家を建てる際の小さな模型の家や、携帯ショップに置いてある見本品のスマートフォンなどもモックアップに該当します。
モックアップは、手に取った時に実際に使用イメージができる・デザインやサイズの把握ができることを目的として作られており、アプリ開発やウェブサイトの開発の際などでもモックアップは様々なところにおいて用いられています。
アプリやウェブサイトのモックアップの場合は、頭の中だけにあったイメージを完成形として落とし込んだ時にどのようになるのか、デザインの確認をすることを目的に作られています。
モックアップはあくまで「模型」であるため機能自体は実装されていません。
モックアップを作る目的とは
では、モックアップを作る目的にはどんなものがあるのでしょうか。
ここでは大まかな目的と、ウェブサイト制作を例にとって具体的に解説していきます。
モックアップを作る目的
家電量販店でモックアップを手にとった時、「このくらいのサイズ感であれば使用しやすそうだ」「動作がこのくらいスムーズなのであればストレスなく使用することができそうだ」と感じたことはないでしょうか。
モックアップは、使用イメージを持っていただき、購入段階と実際の使用感のズレを無くすという目的で作られています。
購入段階で使用イメージが細かくできていれば、「買ってみたけどやっぱり使わなかった」「やっぱり他のものがいいので買い替えよう」という手間がかかる心配もないですよね。
ウェブサイト制作を例にしたモックアップを作る目的
では、ウェブサイトを作成する場合にモックアップを用いるのにはどんな目的があるのでしょうか。
ウェブサイト制作時のモックアップは、クライアントとの完成イメージの齟齬を無くすために必須となる工程のうちの1つです。
例えば「全体的に明るいイメージ」という要望があった際に、「明るく楽しげなイメージなのか」「シンプルな明るさを求めているのか」など、言葉だけでは細かいところまで通じない場合 があります。
できるだけ正確にイメージのすり合わせを行うためにも、モックアップは必要なのです。
レイアウトや色・フォントなどを実際に視覚化し、齟齬があった場合はモックアップの段階で意見をもらうことで完成までをスムーズに行うことができます。
関連：良いデザインの基準とは？実践する4つのコツを詳しく解説！
最初に押さえておきたい「デザインフロー」について
モックアップが組み込まれる「デザインフロー」について、ご紹介します。
一般的にデザインを作っていく流れのうちの1つとして、モックアップは存在します。
モックアップの前後にどんな工程があるのか、知っておくことでモックアップの作成イメージがつきやすくなるかと思いますので、ぜひ最初に知っておきましょう。
デザインフローは以下の4つで成り立っています。
- スケッチ
- ワイヤーフレーム
- モックアップ
- プロトタイプ
1つずつ簡単に紹介します。
- スケッチ…アイディアを書き出す工程。ラフにアイディアを表現し、整理する。
- ワイヤーフレーム…前工程で出たアイディアを構成していく工程。配置など、大まかな枠組みを決定する。
- モックアップ…色やフォント・レイアウトなどを具体的に決めて「模型」を作る。
- プロトタイプ…モックアップに動作確認をするための機能を追加した「試作品」を作る。
モックアップは、プロトタイプの段階で動作を追加して試作品とする前の段階となります。
モックアップを作るメリットを解説
モックアップを作る目的が分かったところで、次は作るメリットについて解説していきます。
モックアップを作るメリットは以下の3つほどあります。
メリットその1：完成形が視覚的にイメージ可能となる
モックアップを作成する一番のメリットは、頭の中で描いていたものを視覚的にイメージしてもらうことが可能となる点です。
具体的な文字の大きさやボタン配置・写真イメージの配置・配色などをモックアップがあることで確認できるようになります。
モックアップがあることによってクライアントから出てくる新たな意見を聞くことができるなど、制作者・クライアント間での円滑なコミュニケーションにも役立つでしょう。
メリットその2：社内・社外ともにイメージの共有をすることができる
次に、複数人が関わるプロジェクトでデザインを考える際にイメージの共有がしやすくなる点がメリットとしてあります。
複数人で物事を進める際には、細かな情報共有・認識の統一が必要となります。
モックアップにてサイトのコンセプトカラーや画像、配置などを細かく確認し、共有することで、制作チームの目指す方向を揃えながら進めることができます。
明確にビジョンを策定するためにモックアップを使用することは、社内・社外問わず複数人で取り組む際に重要であると言えます。
メリットその3：後からの修正回数の削減・仕様変更などのリスク回避ができる
モックアップを作ることで、動作を実際に組み込む（プロトタイプを作る）前に綿密に完成形のすり合わせをすることができます。
モックアップの段階で「想像していたものと違った」というイメージの齟齬を最小限にすることで、後からの修正依頼や仕様変更のリスクを抑えることができます。
完成間近となった段階でコミュニケーションが足りないことで生じる修正の要望の発生を防ぐことができるため、修正にかかる工数やコストなどの削減が期待できます。
モックアップ作成における注意点を解説
モックアップを作る場合、注意しておきたい点もいくつかあります。
以下の3点に留意して、作成を進めていきましょう。
前段である「スケッチ」や「ワイヤーフレーム」から作成を始める
モックアップの作成における留意点として、前段の「スケッチ」「ワイヤーフレーム」の作成を必ず踏むことをおすすめします。
いきなりモックアップ作りに入ってしまうと、「レイアウトや表示内容を大きく変えたい」と思った際にデザインまで一緒に少しずつ修正を加える手間が発生してしまいます。
そうならないためにも、ラフなアイディアや枠組みをしっかり固めておくことでスムーズにモックアップの作成に入ることが可能となります。
ユーザー目線を忘れずにデザインを行う
モックアップを作成するに当たって、忘れてはならないのがユーザー視点であることです。
見づらい配色やレイアウトになっていないか・使いにくいと感じることはないかを念頭に置き、当初依頼されていたものと相違はないかを都度チェックしながら進めていきましょう。
また、サイトのモックアップを作る場合は機種によって表示のされ方が異なるということも起こりますので、様々なデバイスからチェックすることをおすすめします。
関係者の認識を統一させて作成を進める
モックアップ作成において、制作チーム・クライアントとの認識のズレがないかをその都度確認しながら進めることも重要です。
作成が進む中でこまめに思っていたものと相違がないかを具体的に見てもらいつつ、すり合わせながら進めていくことをおすすめします。
途中で重大な修正や変更が生じた場合は、より深く確認・連携を関係者に取りながら進めるようにすると、最終的なズレを最小限にして作成することができます。
モックアップの作成手順。洗練されたデザインを作るためには？
では、具体的にどのようにしてモックアップを作成していったらよいのでしょうか。
作成のためには以下の3つを参考にしてみてください。
「モックアップジェネレーター」を使用する
「モックアップジェネレーター」とは、モックアップ用の素材を手軽にダウンロードができるサイトのことです。
ウェブサイトやアプリの画面など、デジタルで見たときにどのように表示されるのかを確認できる素材のダウンロードをすることが可能です。
またそれだけでなく、名刺や商品パッケージなどの印刷物用の素材など、色々なシーンで使用されているイメージを持つことのできる素材をダウンロードすることができます。
PSDデータで素材が作られていることが多いため、自分の持っている編集ソフトに対応していれば任意のデータと合わせてモックアップを作成することができます。
配布サイトによっては、著作権の表記が必要であったり商用利用が不可な場合もありますので、利用規約をしっかりと読んだ上で利用するようにしましょう。
「モックアップ作成ツール」を使用する
次に、「モックアップ作成ツール」を使用する方法があります。
こちらはモックアップ作成の主な目的である「イメージ共有」をスムーズに行うために、オンラインツールを使用して作成することができます。
複数のメンバーでリアルタイムで作成・共有を行うことができるというメリットがあります。
また、変更履歴を残しながら最新版の共有ができるという点もポイントです。
コーディングの知識やデザインの知識をもともと持っていないという場合でも簡単に制作ができるため、手軽にモックアップを作ることが可能です。
モックアップ作成ツールは有料版ではない場合、使える機能に制限できてしまいます。
まずは無料版でできるところまでやってみて、良ければ有料版を検討することをおすすめします。
外部に委託する
クオリティの高いモックアップを求める場合にやはりおすすめなのが、外部に委託する方法です。
上記で紹介したやり方に不安があるという場合は、社外にお願いする方法も考えてみましょう。
コーディングやデザインに関する知識を全く持っていないという場合でも、デザインのプロが知見を活かして作成してくれます。
アプリやウェブサイト制作の基盤ともなる部分なので、不安な場合は信頼できるプロに委託することで失敗なく安心して進めることができるでしょう。
また、社内でモックアップ制作に検討する時間を削減できることもメリットのうちの1つです。
その分、ラフなアイディア出しのスケッチやワークフローの部分に時間を割くこともできるため、納得のいくものを得ることができるかもしれません。
関連：デザインのコツとは？基礎からレイアウトまで詳しくご紹介！
まとめ
モックアップとはそもそも何かということや、デザイン制作におけるモックアップの重要性、作成方法などをご紹介いたしました。
モックアップとは動作機能の搭載されていない模型のことであり、デザインの完成形の前に関係者との認識のズレを無くすために重要な工程です。
モックアップについて全く知らなかったという方にとって、まずはやってみようと思っていただくことができましたら幸いです。
ここまでお読みいただき、ありがとうございました。
picks designでは、現在最新情報をメルマガにて配信しています。
この機会に是非ご登録ください。
→メルマガ登録はコチラ
