モックアップ（Mockup）

モックアップ（Mockup）とは、実際の製品や画面の見た目を、限りなく本物に近い形で再現した、見た目確認用の試作物のことです。中身のプログラムは動かなくても、デザインや配色、レイアウトを事前に確認するために作られます。

現実世界に例えると、モックアップは家具屋に展示されている実物大の見本のようなものです。中に収納機能があるかどうかより、置いたときの見た目やサイズ感を確かめることが主な目的です。

モックアップの目的

モックアップを作る一番の目的は、実際に開発を始める前に、完成イメージを関係者全員で共有し、認識のズレを防ぐことにあります。言葉だけの説明よりも、目に見える形にすることで、はるかに具体的な合意形成ができます。

ワイヤーフレームとの違い

プロトタイプとの違い

似た言葉に「プロトタイプ」がありますが、モックアップは見た目の確認に重点を置いた静止画に近いもので、プロトタイプは実際にボタンを押すなど操作を試せる点で異なります。動かせるかどうかが、両者を分ける大きな違いです。

作成に使われるツール

近年は、専用のデザインツールを使い、コードを書かずにマウス操作だけで、見た目に忠実なモックアップを手早く作れるようになっています。パーツを画面上に並べていくだけで形になるため、デザインの専門知識がなくても扱いやすくなっています。デザイナーとエンジニアの間で共有しやすい形式で書き出せる点も重宝されています。

忠実度による使い分け

ラフなアイデア段階では手書きに近い簡易な「ローファイモックアップ」を、方向性が固まった段階では、実物に近い「ハイファイモックアップ」を使うというように、目的に応じて忠実度を使い分けることが一般的です。

モックアップのメリット

完成後のイメージを早い段階で確認できることで、「思っていたのと違う」という認識のズレによる、大きな手戻りを防げることが最大のメリットです。デザインに関する議論も、具体的な画面を見ながら進められます。

注意すべき点

モックアップはあくまで見た目の確認用であるため、「動くもの」だと関係者に誤解されると、機能面の期待値がずれてしまうことがあります。何を確認するための試作物なのかを、あらかじめ明確にしておくことが重要です。

まとめ

モックアップは、完成後の見た目を先取りして確認できる、デザイン段階で欠かせない試作物です。プロトタイプと役割を使い分けることで、開発の手戻りを効果的に減らすことができます。

あわせて知っておきたい用語

• プロトタイプ：
  機能やデザインを確認するために作る、動作を伴う試作品です。
• ワイヤーフレーム：
  線と枠だけで示す、画面構成の骨組みです。
• UI/UX：
  利用者の目に触れる画面や、操作したときの使い心地のことです。
• Figma：
  Web上で使える、デザイン作成やモックアップ共有のためのツールです。