モックアップについてお調べですね。
WEBサイトやアプリ開発を行う際に必ずといっていいほど出てくるモックという言葉ですが、
何となくのイメージで人には説明できない程度の理解の人も多いのではないでしょうか？
今回は、モックアップについて解説していきます。
目次
モックアップとは？
モックアップとは「模型」といった意味を持つ単語です。
WEB制作などにおけるモックアップは、ビジュアルの完成イメージで、中身（機能部分）は全く入っていないものを指します。
携帯ショップに置いてある、サンプルの携帯電話などをイメージすると分かりやすく、外見は本物だけど実際は操作できないですよね。
WEB制作におけるモックアップは、本物そっくりだけど機能がないWebサイトやアプリのことです。
モックアップを作る目的
モックアップを作る目的は、完成形の見た目を確認するためです。
WEBサイト制作の過程において、クライアントと進捗や完成イメージをすり合わせしながら進めていくことが多いです。
モックアップを用意することで、完成形のイメージをクライアントと共有しながら進めることができるため、認識のズレを少なくします。
モックアップを作るタイミング
モックアップを作るタイミングは、コンセプトやデザインの方向性などがある程度固まったタイミングで作るのが好ましいです。
いきなりモックアップを作っても、作るのが難しいですし、良いのか悪いのかを判断する基準がありません。
モックアップを作るメリットを解説
ここまでモックアップについての概要をお伝えしてきました。
それでは、実際にモックアップを作ることによってどのようなメリットがあるのでしょうか？
メリットを理解すると、モックアップを作った方が良い理由が分かるので、ぜひご覧ください。
メリット１．完成形のイメージができる
完成形のイメージを視覚的に分かるように作ることができるのが一番のメリットです。
WEB制作においては、開発を進めている間に完成品のイメージと乖離していってしまうことが多々あります。
開発側と依頼側での認識のズレなくすために作成します。
何もない状態からアプリやWebサイトを作成しようとすると、開発側の都合で依頼者が想定していない完成形になってしまう恐れがあります。
完成形のイメージがあれば、随時照らし合わせながら開発を進めることができるため、モックアップは重要視されます。
メリット２．開発者と依頼者のすり合わせがしやすい
完成品のイメージができることで、開発者と依頼者のすり合わせがしやすくなります。
「百聞は一見に如かず」といいますが、
特にデザインにおいては言葉で説明するよりもビジュアルで伝えた方が認識のずれが生まれにくいです。
また、依頼者側としては完成イメージを早めに確認できるので安心して開発側に仕事を任せることができます。
メリット３．仕様変更のリスクを軽減できる
モックアップを作成することで、後々の仕様変更のリスクを減らすことができます。
モックアップを用意するだけで本格的な開発前に仕様変更を行うことができ、全体の工数の削減することができます。
モックアップを用意するだけで開発費用が安くなるという話はよくあります。
WEB制作を行う中で最も大変でコストがかかるのがが、開発が進んだ後の仕様変更です。
一から作り直すとなると、人手も工数も予算もかかり、開発側とのトラブルにもなりかねません。
後々の仕様変更になってしまう原因はコミュニケーション不足から起きることが多いです。
モックアップを利用すれば、コミュニケーション不足しても何とかイメージを共有することができます。
モックアップを作成する２つの方法
ここまででモックアップの重要性はお分かりいただけたかと思います。
それではここからは、実際にモックアップを作る方法についてお伝えします。
①スケッチやワイヤーフレームをもとに自分で作成する（経験とスキルが必要）
ワイヤーフレームの設計図に、スケッチで決めたデザインイメージをもとに詳細なデザインを施してましょう。
フォントのデザインや色・バナーの位置など、なるべく細かい部分まで作成していくのがポイントです。
■おすすめの作成素材とツールを紹介
モックアップを作成するときに必要になる素材と、実際にモックアップを作るためのツールでおすすめのものを紹介します。
モックアップ作成ツール「Mockup Photos」
Mockup Photosはとても簡単にモックアップを作成できるツールです。
サイト内の「Place Image Here」部分に画像をドラッグ＆ドロップするだけで、モックアップが出来上がります。
モックアップを作成できるだけではなく、サイト内でもモックアップ画像素材も用意されているので、モックアップ初心者はこれを使えば間違いないでしょう。
モックアップ用素材配布サイト「Mockup World」
Mockup Worldは様々なサイトのモックアップ素材を集めたサイトです。
iPhoneやファッション/アパレル、食べ物/飲み物など、カテゴリーで検索できます。
■モックアップを自分で作成する際の注意点
モックアップを作る際に注意すべきポイントをピックアップしてお伝えします。
注意点１．画面の作成漏れがないかどうか
通常、WEBサイトではTOPページと下層のページでデザインが異なります。
そのため、TOPページから遷移する画面はどれだけあるのかを考え、それだけのモックアップを作成しなければなりません。
遷移先のページ数とモックアップの作成数があっているかの確認をしておく必要があります。
注意点２．関係者たちのイメージとずれていないか
関係者たちの完成イメージとずれがないか、常に確認を怠らないようにしましょう。
イメージが具体的に分からない場合、ある程度まで作ったら一度確認を入れるなど、作成が進んだ後に大きな変更になるといったことがないように注意が必要です。
こまめにチェックを依頼し、イメージと合致するようにすり合わせていくようにしましょう。
注意点３．レイアウトで分かりにくい部分はないか
ワイヤーフレームで作成したレイアウトで分かりにくい部分はないかを作りながら確認しましょう。
モックアップを作るタイミングがレイアウトの修正点に気づける最後のポイントといえます。
特に問い合わせなどにつなげるバナーやボタンの位置は、運用開始後にユーザーの問い合わせにつながるかを決める重要なポイントです。
②システム開発会社等に作成してもらう（超簡単で確実な方法）
①では、自分の力で作る方法を紹介しましたが、もう一つの方法としてシステム会社に作ってもらうという方法があります。
こちらの方法であれば、上記のようなことを気にしなくてもシステム会社が作ってくれます。
基本的にWeb制作やアプリ制作は、プロにまとめて依頼・相談するほうが成功する確率が上がります。
例えば、Pieceというアプリ開発サービスでは、モックアップの作成やデモアプリ作成も行っています。
アプリ開発やWeb開発の前に作成するモックアップはプロに任せるのが一番安心だということを知っておいてください。
というのも、Webの画面のデザインやUI、UXなどは聞きかじった知識だけでは作られないからです。
計算された優れたデザインを作成するためには、どうしてもプロの力が必要になるでしょう。
モックアップと間違いやすい3つの用語
基本的に、下記のような流れで試作品のWebサイトなどを制作するのですが、
モックアップ はその中で「アイデアを具体化させる段階」というイメージです。
どれもデザイン面で似ている言葉ですよね。
間違えやすいので、それぞれを下で説明していきます。
モックアップと間違いやすい、「スケッチ」「ワイヤーフレーム」「プロトタイプ」について簡単に違いが分かるように解説します。
スケッチ
スケッチは、一番最初の工程で、アイデアを書き出す段階です。
まずはブレインストーミングから始め、アイデアを言葉で書きだします。
その後アイデアをまとめて抽象化（カテゴリー分け）し、整理していきます。
モックアップでは詳細なデザインを考案する一方、スケッチは大まかにアイデアを出し、全体の方向性を決めていく作業です。
ワイヤーフレーム
ワイヤーフレームは、スケッチの次段階の工程です。
具体的には、WEBページのレイアウトを決める設計図といえるでしょう。
例えば、「左上にロゴを配置して、記事カテゴリーは右側、問い合わせページは右上に配置しよう」といった形で、ページのどの部分に何を配置するのかを決めます。
多くのWEBサイトではTOPページと下層のページではレイアウトが違うことが多いので、最低でも2つのワイヤーフレームが必要になります。
ワイヤーフレームは、本格的に絵をかく前の下書きといったイメージでしょう。
プロトタイプ
プロトタイプとは、試作品という意味で、通常モックアップを作った後に行う工程です。
モックアップで作ったビジュアルに、実際の機能を追加したものを指します。
モックアップが静的な「模型」だとすると、プロトタイプは動的な「試作品」といえます。
まとめ
今回は、聞いたことはあるけどしっかりと理解できていないことが多い「モックアップ」というIT用語について詳しくお伝えしました。
Webシステムの制作やスマートフォンアプリの開発の際には必ずといっていいほど耳にするモックアップ。
実際のサービス作成においても重要な役割を果たすので、この機会にしっかりと理解しておきましょう。
この記事がお役に立てば幸いです。
Pieceを使ったアプリ開発サービスではモックアップの作成やデモアプリ作成もお任せください！
Pieceデモアプリ（モックアップの作成）
