モック(モックアップ)とは？いまさら聞けないIT用語を初心者向けに解説

モックアップとは？

モックアップとは、正式には“モックアップ”と呼び、「模型」といった意味を持つ単語です。

WEB制作などにおけるモックアップは、ビジュアルの完成イメージで、中身（機能部分）は全く入っていないものを指します。

携帯ショップに置いてある、サンプルの携帯電話などをイメージすると分かりやすく、外見は本物だけど実際は操作できないですよね。

WEB制作におけるモックアップも携帯のサンプルのようなものです。

モックアップを作る目的

モックアップを作る目的は、完成形の見た目を確認するためです。

WEBサイト制作の過程において、クライアントと進捗や完成イメージをすり合わせしながら進めていくことが多いです。

その際にモックアップを用意することで、完成形のイメージをクライアントと共有しながら進めることができるため、齟齬が少なくなります。

モックアップを作るタイミング

モックアップを作るタイミングは、コンセプトやデザインの方向性などがある程度固まったタイミングで作るのが好ましいです。

いきなりモックアップを作っても、作るのが難しいですし、良いのか悪いのかを判断する基準がありません。

以下に、大まかな工程を記します。

モックアップはアイデアを具体化させる段階というイメージです、どれもデザイン面で似たような言葉ですよね。

間違えやすいので、それぞれを下で説明していきます。

モックアップと間違いやすい3つの用語

モックアップと間違いやすい、「スケッチ」「ワイヤーフレーム」「プロトタイプ」について簡単に違いが分かるように解説します。

スケッチ

スケッチは、一番最初の工程で、アイデアを書き出す段階です。

まずはブレインストーミングから始め、アイデアを言葉で書きだします。

その後アイデアをまとめて抽象化（カテゴリー分け）し、整理していきます。

モックアップでは詳細なデザインを考案する一方、スケッチは大まかにアイデアを出し、全体の方向性を決めていく作業です。

ワイヤーフレーム

ワイヤーフレームは、スケッチの次段階の工程です。

具体的には、WEBページのレイアウトを決める設計図といえるでしょう。

例えば、「左上にロゴを配置して、記事カテゴリーは右側、問い合わせページは右上に配置しよう」といった形で、ページのどの部分に何を配置するのかを決めます。

多くのWEBサイトではTOPページと下層のページではレイアウトが違うことが多いので、最低でも2つのワイヤーフレームが必要になります。

ワイヤーフレームは、本格的に絵をかく前の下書きといったイメージでしょう。

プロトタイプ

プロトタイプとは、試作品という意味で、通常モックアップを作った後に行う工程です。

モックアップで作ったビジュアルに、実際の機能を追加したものを指します。

モックアップが静的な「模型」だとすると、プロトタイプは動的な「試作品」といえます。

モックアップを作るメリットを解説

ここまでモックアップについての概要をお伝えしてきました。

それでは、実際にモックアップを作ることによってどのようなメリットがあるのでしょうか？

メリットを理解すると、モックアップを作った方が良い理由が分かるので、ぜひご覧ください。

メリット１．完成形のイメージができる

完成形のイメージを視覚的に分かるように作ることができるのが一番のメリットです。

WEB制作においては、開発を進めている間に完成品のイメージと乖離していってしまうことが多々あります。

一生懸命開発していても、求められていたものと違えばやり直しにもなりかねません。

時間もお金も信用も失ってしまう可能性も…。

完成形のイメージがあれば、随時照らし合わせながら開発を進めることができるため、モックアップは重要なのです。

メリット２．クライアントとのすり合わせがしやすい

完成品のイメージができることで、クライアントとのすり合わせがしやすくなります。

「百聞は一見に如かず」といいますが、特にデザインにおいては言葉で説明するよりもビジュアルで伝えた方が認識のずれが生まれにくいです。

仕様変更があれば本格的な開発に入る前に行うことができるので、全体の工数の削減にもなります。

クライアントの立場にたっても、完成イメージを早めに確認できると安心して仕事を任せることができます。

メリット３．仕様変更のリスクを軽減できる

モックアップを作成することで、後々の仕様変更のリスクを減らすことができます。

メリットの2つ目で上げた通り、クライアントと随時完成形のすり合わせを行うことで、イメージのずれが起きることを未然に防げるためです。

WEB制作を行う中で最も大変なのが、開発が進んだ後の仕様変更です。

一から作り直すとなると、人手も工数も予算もかかり、クライアントとのトラブルにもなりかねません。

後々の仕様変更になってしまう原因は、クライアントとのコミュニケーション不足から起きることが多いです。

モックアップを利用することで、コミュニケーションを無駄なく行えるため、仕様変更になってしまうりすくを軽減できます。

モックアップの作成方法

ここまででモックアップの重要性はお分かりいただけたかと思います。

それではここからは、実際にモックアップを作る方法についてお伝えします。

スケッチやワイヤーフレームをもとに作成する

前工程で作成済みのスケッチ・ワイヤーフレームをもとに作成していきます。

ワイヤーフレームの設計図に、スケッチで決めたデザインイメージをもとに詳細なデザインを施してましょう。

フォントのデザインや色・バナーの位置など、なるべく細かい部分まで作成していくのがポイントです。

モックアップを作る際に注意すべきポイント

モックアップを作る際に注意すべきポイントをピックアップしてお伝えします。

等を中心に確認していきましょう。

注意点１．画面の作成漏れがないかどうか

通常、WEBサイトではTOPページと下層のページでデザインが異なります。

そのため、TOPページから遷移する画面はどれだけあるのかを考え、それだけのモックアップを作成しなければなりません。

遷移先のページ数とモックアップの作成数があっているかの確認をしておく必要があります。

様々な画面がある中で、どこからどこの画面に遷移するのかをしっかりと確認して作成していきましょう。

注意点２．クライアントのイメージとずれていないか

クライアントの完成イメージとずれがないか、常に確認を怠らないようにしましょう。

イメージが具体的に分からない場合、ある程度まで作ったら一度確認を入れるなど、作成が進んだ後に大きな変更になるといったことがないように注意が必要です。

こまめにチェックを依頼し、イメージと合致するようにすり合わせていくようにしましょう。

注意点３．レイアウトで分かりにくい部分はないか

ワイヤーフレームで作成したレイアウトで分かりにくい部分はないかを作りながら確認しましょう。

モックアップを作るタイミングがレイアウトの修正点に気づける最後のポイントといえます。

プロトタイプの作成に入るとどうしても機能面に目が向いてしまうため、デザイン面の改善は見つかりづらい傾向にあります。

特に問い合わせなどにつなげるバナーやボタンの位置は、運用開始後にユーザーの問い合わせにつながるかを決める重要なポイントです。

作成途中でレイアウトに修正が必要な点があれば、プロトタイプ作成に入る前に修正しておきましょう。

おすすめの作成素材とツールを紹介

モックアップを作成するときに必要になる素材と、実際にモックアップを作るためのツールでおすすめのものを紹介します。

モックアップ作成ツール「Mockup Photos」

Mockup Photosはとても簡単にモックアップを作成できるツールです。

サイト内の「Place Image Here」部分に画像をドラッグ＆ドロップするだけで、モックアップが出来上がります。

モックアップを作成できるだけではなく、サイト内でもモックアップ画像素材も用意されているので、モックアップ初心者はこれを使えば間違いないでしょう。

モックアップ用素材配布サイト「Mockup World」

Mockup Worldは様々なサイトのモックアップ素材を集めたサイトです。

iPhoneやファッション/アパレル、食べ物/飲み物など、カテゴリーで検索できます。

まとめ

今回は、聞いたことはあるけどしっかりと理解できていないことが多い「モックアップ」というIT用語について詳しくお伝えしました。

IT業界で働く際には必ずといっていいほど耳にするモックアップ。

実際のサービス作成においても重要な役割を果たすので、この機会にしっかりと理解しておきましょう。

この記事がお役に立てば幸いです。