モックアップとは、実際に商品が完成する前のビジュアル面のサンプルで、WEBやアプリ・システム開発において非常に重要です。
モックアップの段階では機能は実装されていませんが、デザイン面でのイメージを掴むことができます。
他にもモックアップを作成するメリットはいくつかあげられます。
そこで今回は、「モックアップとは？」といったモックアップの意味を簡単に解説するとともに、WEBやアプリ・システム開発に必要な理由や「ワイヤーフレーム」「プロトタイプ」など、よく利用される他の用語との違いについてなどを含め、発注者目線で解説します。
モックアップとは？
「モックアップ（mock-up）」とは「模型」という意味です。模型で代表的なプラモデルを思い浮かべると、モックアップの意味がよくわかります。プラモデルは実物を忠実に再現することを目的として作られていますが、中身は空洞です。
モックアップは、工業製品などでシステムは実装されていないが外観は本物そっくりに作られたサンプルのことです。例えば、スマホや携帯電話のサンプルなどがあげられます。
スマホや携帯電話をユーザーが購入する場合、モデルのデザインやカラーは非常に重要なポイントになります。モックアップを制作して、先にビジュアル面を検討することができるわけです。
モックアップを作成する必要性は、WEBやアプリ・システム開発でも同様です。モックアップは、Adobe製品のPhotoshop、XDなどや、その他モックアップ作成ツールを利用してデザイナーが作成します。機能は実装していなくても、画面のビジュアル面の完成イメージを見ていくことは非常に重要で、いくつかのメリットがあります。
モックアップを作成する理由・メリット
WEBやアプリ・システム開発でモックアップを作成する理由・メリットを解説します。発注者側の立場から考えると、WEBやアプリ、システムが出来上がった段階で、イメージと違うことが分かるというのは最悪です。
モックアップを作成する理由とメリットは、WEBやアプリ、システムが出来上がってくる前の段階で、ビジュアル面のイメージを確認できる点にあります。ここでは、さらに詳しくモックアップを作成する理由とメリットを紹介していきましょう。
デザイン面の完成形を明確にイメージできる
WEBやアプリ、システムの制作では、色見本・表示サンプルなどが提示されるケースがあります。しかし、色見本・表示サンプルだけでは、デザイン面の完成形を明確にイメージすることは困難です。例えば色やサンプルの大きさが完成形と異なる場合などは、想定したイメージと異なるが場合があります。
モップアップによって実際にデザインに起こすことで、イメージと異なる部分や、ユーザビリティなど改善点を事前に修正することができます。WEBやアプリ、システムの制作の工程が進んでいって、はじめてビジュアル面のイメージが異なることに気づくようなリスクを回避するためにも、モップアップは大きなメリットになります。
クライアントやメンバーとの認識の統一・共有が可能
カラーやデザインといったビジュアル関連の印象というのは、文字や言葉では表現できない感覚的な部分が大きいのが特徴です。表現が難しい課題であると同時に、ビジュアルはWEBやアプリ・システム開発にとって非常に重要なポイントです。
モップアップを見ることで、完成形のビジュアルについて発注者（クライアント）が認識の統一・共有を持つことができる点は、思い浮かべているWEBやアプリ、システムの完成を成功させるための大きなメリットです。
発注者（クライアント）と受注者とのコミュニケーションだけでなく、WEBやアプリ、システムを制作しているメンバー同士でも、詳細な仕様書や言葉だけのコミュニケーションだと、どうしてもビジュアル関連の印象については認識に齟齬が出るケースが発生する可能性があります。
そんな、認識の齟齬を防ぐためにもモックアップ作成は大きなメリットになります。モックアップがあるとビジュアル面の認識を明確に共有できるわけです。
完成後の変更などのリスクを低減できる
WEBやアプリ・システム開発において、工程の最終段階でのデザイン修正は手間と時間がかかります。ましてや完成後に変更点が見つかった場合は、さらに修正の手間がかかります。また、完成後だとデザイン修正のために機能面も修正しないといけない場合もあり、費用やエンジニアのプログラミングなどにかかる工数がかさむ場合も考えられます。
発注者は、完成のスケジュールを遅らせることは避けたいところです。モックアップの時点で完成時のビジュアルを確実に確認することができ、想定していたビジュアルと相違していた場合には修正を依頼して、モックアップの時点でビジュアルの課題を解決することができます。つまり、モックアップによって、完成後の変更などのリスクを低減できるメリットがあるわけです。
モックアップを作成・確認するときの注意点
モックアップを作成することで、発注者は、WEBやアプリ、システムが出来上がってくる前の段階で、ビジュアル面のイメージを確認でき、修正点が見つかった場合は修正することができます。ただし、前述のメリットを活かすためには、いくつかの点に注意が必要です。
まず、モックアップを作成する受注者も、モックアップを確認する発注者も、モックアップの時点でデザインを完成させるつもりで臨まなければなりません。モックアップ自体がアバウトで、「後から修正できる」という認識はNGです。
また、モックアップを作成する受注者と、モックアップを確認する発注者は、認識に齟齬が出ないようコミュニケーションを密に取る必要があります。モックアップの段階で、ビジュアルに関する疑問や要望は遠慮なく出し合い、モックアップ後にビジュアルについての修正が発生しないようしましょう。
例えば、「カラーイメージは合っているか」「デザインはイメージ通りか」「レイアウトで見づらい部分はないか」「使い辛そうな部分がないか」など、要望はすべて盛り込まれているかをチェックします。
「ワイヤーフレーム」「プロトタイプ」など他の用語との違い
「モックアップ」の他に、「ワイヤーフレーム」「プロトタイプ」も制作の各ステップで作成するものです。一般的にWEBやアプリ、システムを作成する際には、スケッチ、ワイヤーフレーム、モックアップ、プロトタイプの順に工程を進めていきます。
スケッチ
スケッチはWEBやアプリ、システムを作成する際の最初の段階です。日常的にスケッチというと、絵を描く時の大まかな描写や下書きを言いますが、WEBやアプリ・システム開発では、アイデアを描き出す段階といえるでしょう。スケッチの段階では、アイデアを描きながらや構想をまとめていきます。ステッチは、手書きではなく、ツールでもOKです。
ワイヤーフレーム
ワイヤーフレームは、スケッチの次の段階です。ワイヤーとは線、フレームは枠組みを指しますが、WEBやアプリ、システムを作成する段階のワイヤーフレームとは、骨組みや設計図を指します。スケッチでまとめた構想を完成したイメージとしてワイヤーフレーム（設計図）にまとめていきます。
発注者目線で見てみると、スケッチでは不明瞭であったWEBやアプリ、システムの構想が、ワイヤーフレームとして視覚的に見ることができます。例えば、WEBサイトのどこに何を置くかといった情報の配置や、どのような動作をさせるのかといった仕様の確認ができます。
ワイヤーフレームの段階で、WEBやアプリ・システム開発の設計図が出来上がるわけですから、発注者としては、WEBやアプリ、システムを制作する目的や方向性が正確に反映されているかどうかを確認していきましょう。
ビジュアル面が気になるところですが、ワイヤーフレームの段階では、基本となる設計図の確認を重視します。
モックアップ
ワイヤーフレームの次の段階の工程が、「モックアップ」になります。先で解説したようにビジュアル面の完成イメージを確認します。
プロトタイプ
プロトタイプは、モックアップの次の段階です。試作品とも言われ、モックアップで作ったビジュアルに、実際の機能を追加して完成に向け機能を実装していきます。プロトタイプは、一般的にもよく使われる言葉です。例えば、自動車メーカーが先行してプロトタイプを発表し、その後、市場に量産モデルを導入するケースがよくみられます。
プロトタイプは、基本的に使用できるレベルで作成されており、最優先の機能のテストを実施して評価し、その結果を反映させた修正を繰り返しながら、機能を追加して、WEBやアプリ、システムを完成させていきます。
まとめ
「モックアップ（mock-up）」とは「模型」という意味で、WEBやアプリ、システムの機能は実装されていませんが、ビジュアル的には外観は本物そっくりに作られたサンプルのことです。WEBやアプリ、システム開発において、デザインやカラーなどのビジュアルは非常に重要なポイントになります。モックアップを制作することで、先にビジュアル面を検討することができるわけです。
モックアップ作成する理由・メリットとしては、デザイン面の完成形を明確にイメージできる点と、クライアントやメンバーとの認識の統一・共有が可能な点、完成後の変更などのリスクを低減できる点ががあげられます。
モックアップを作成・確認するときの注意点は、モックアップを作成する受注者も、モックアップを確認する発注者も、モックアップの時点でデザインを完成させるつもりで臨まなければならない点です。そのためには、認識に齟齬が出ないようコミュニケーションを密に取る必要があります。
一般的にWEBやアプリ、システムを作成する際には、スケッチ、ワイヤーフレーム、モックアップ、プロトタイプの順に工程を進めます。スケッチとはアイデアを描き出す段階。ワイヤーフレームとは、骨組みや設計図を指します。スケッチでまとめた構想を完成したイメージとしてワイヤーフレーム（設計図）にまとめていきます。プロトタイプは試作品とも言われ、モックアップで作ったビジュアルに、実際の機能を追加して完成に向け機能を実装していきます。
モックアップは、実際に商品が完成する前のビジュアル面のサンプルで、WEBやアプリ・システム開発において、非常に重要です。注意点を意識してモックアップのメリットを十分に活かしましょう。
