投稿日:

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

モックアップとは

モックアップについてお調べですね。

IT企業に未経験で入社したら、知らない用語が多く、驚いてしまうことも少なくありません。

WEBサイトやアプリ開発を行う際に必ずといっていいほど出てくるモックという言葉ですが、何となくのイメージで人には説明できない程度の理解の人も多いのではないでしょうか?

今回は、いまさら聞けないモックについて、用語の解説から作り方まで記事を通して解説していきます。

この記事を読めば、モックアップについて分からないことはなくなります。

是非参考にしてください。

モックアップとは?

モックアップの画像

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

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

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

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

モックアップを作る目的

purposeの画像

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

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

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

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

モックアップの画像

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

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

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

スケッチ→ワイヤーフレーム→モックアップ→プロトタイプ

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

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

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

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

スケッチ

スケッチの画像

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

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

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

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

ワイヤーフレーム

ワイヤーフレームの画像

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

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

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

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

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

プロトタイプ

機能を表した画像

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

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

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

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

メリットの画像

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

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

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

メリット1.完成形のイメージができる

吹き出しの画像

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

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

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

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

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

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

打ち合わせの画像

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

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

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

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

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

図を描いている画像

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

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

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

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

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

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

モックアップの作成方法

自社開発の画像

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

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

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

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

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

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

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

注意の画像

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

・画面の作成漏れがないかどうか
・クライアントのイメージとずれていないか
・レイアウトで分かりにくい部分はないか

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Mockupphotsの画像①

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

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

Mockupphotosの画像②

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

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

Mockupworldの画像

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

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

まとめ

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

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

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

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

■ 失敗しないアプリ開発のために

アプリ開発虎の巻無料プレゼント実施中

アプリを作る目的を明確にせずになんとなくアプリを開発してしまっては、大きな予算をかけてアプリ開発を行っても思ったような成果を得ることはできません。
アプリ開発で失敗しないための、始める前に知っておくべき情報・目的を明確にするためのステップを「アプリ開発虎の巻」を公開中!
販促アプリ開発に大いに役立ててください。

■ まずは資料請求!

先ずは資料請求

JokerPieceでアプリ発注をした際に弊社でできることや、過去の制作例、実績など資料にてご覧いただけます。販促アプリのPieceを受託するだけでなく、よりクライアント様に最適なプラン提案をしながら共に作り上げていく開発スタイルを得意としております。またITエンジニア支援、教育訓練事業も行なっております。