WEB用語辞典-モックアップ（Mockup）

WEB用語辞典-モックアップ（Mockup）

モックアップとは、WEBサイトやWEBアプリケーションの完成イメージを確認するために作成するデザイン見本のことです。ワイヤーフレームがページ構成や情報の配置を示す設計図であるのに対し、モックアップは実際の配色やフォント、画像、アイコンなどを反映し、完成後の見た目に近い状態で作成されます。そのため、デザインの方向性やブランドイメージを関係者と共有する際に重要な役割を果たします。

モックアップを作成することで、「色の印象が企業イメージに合っているか」「文字は読みやすいか」「ボタンは目立っているか」といった点を事前に確認できます。制作の初期段階で修正点を見つけられるため、コーディング後の大幅な修正を減らし、制作時間やコストの削減にもつながります。

また、モックアップは静止画として作成されることが一般的で、実際に画面を操作することはできません。画面遷移やボタン操作などの動きを確認したい場合は、「プロトタイプ」と呼ばれる試作品が作成されます。このように、ワイヤーフレームが構成を検討する設計図、モックアップが完成イメージを確認するデザイン見本、プロトタイプが操作性を検証する試作品というように、それぞれ役割が異なります。

モックアップは、デザインの品質を高めるだけでなく、制作担当者と依頼者との認識のずれを防ぐためにも欠かせない工程です。WEBサイト制作を円滑に進めるための重要な資料として、多くの制作現場で活用されています。