「モックアップ」の意味や使い方は？例文や類語をWebライターがわかりやすく解説！

ライター／にべこ

某大手情報誌の記者を務め、その後フリーライターに。ビジネス用語ならおまかせ。さまざまなシーンで使えるカタカナ言葉を噛み砕いてご紹介。

「モックアップ」の意味や語源・使い方まとめ

image by iStockphoto

Webサイトやアプリ開発の場でよく聞く「モックアップ」という言葉。いったいどういう意味があるのでしょう。それでは早速「モックアップ」の意味や語源・使い方を見ていきましょう。

「モックアップ」の意味は？

「モックアップ」には、次のような意味があります。

試作や店頭展示などのためにつくられる実物大模型。モック。

出典：デジタル大辞泉（小学館）「モックアップ」

Webサイトやアプリ開発と模型になんの関係が？と思われる方もいるでしょう。ですが、実は制作の現場において欠かせない要素のひとつ。言葉の意味こそ「模型」ではありますが、Webサイトやアプリ開発の場ではその完成形をイメージするために、まずはデザインを施し体裁や外形を整えたものを作るという作業があるのです。その模型を「モックアップ」と呼びます。ちなみに試作品は「プロトタイプ」と呼ばれますが、これについては下記の項目で詳しくお話ししていくとしましょう。

「モックアップ」でわかりやすいのが、携帯ショップの店頭でよく見かける、スマートフォンの本体デザインを見るためのサンプル。外見こそは本物ですが、実際は操作のできない模型を置いていますよね。「モックアップ」も、このスマートフォンの模型のようなものです。省略して「モック」と呼ばれることもあります。

アプリ制作での「モックアップ」

image by iStockphoto

具体的に、スマートフォン用アプリの制作を例にご説明していきましょう。アプリの設計デザインフローでは、大きく分けて以下のようなフェーズがありますが、その中に「モックアップ」が含まれます。

1. スケッチ：デザインフェーズにおける最初のステップです。アイデアを書き出し、それを整理しつつ大まかな画面遷移や流れを作成します。
2. ワイヤーフレーム：画面の基本設計図です。ここではまだデザイン要素はありません。ページ数や画像データやテキスト、ボタンの配置などのレイアウトを決めます。
3. モックアップ：デザインやコンテンツを加え、全体の体裁を整えた見た目を仕上げる工程です。この時点ではまだタッチやスワイプをしても動きません。デザイン変更や修正点の発見、課題の洗い出し・検討はこの段階で行います。
4. プロトタイプ：モックアップに機能を加え細部まで仕上げた試作品で、基本的に完成系と同じもの。ユーザビリティや操作性などはこの段階でチェックします。あくまで試作品のため、公開はせず他のサービスとの連携などもまだ行いません。

ちなみに「デジタルモックアップ」という言葉もありますが、これは3D -CADやDMUツールなどで作る3DのCG画像のこと。デザインやカラー、モデリングなどを確認し、開発の早期の段階で意匠に関わる決定をスムーズに進めるために作られるものです。

「モックアップ」の語源は？

英語では「mock up」。「mock」には本来「あざ笑う」「ばかにする」といった意味があるのですが、「up」を組み合わせたイディオムでは「模擬」「模型」といったような意味に変化します。

ちなみに「mock battle」は模擬戦、「mock rescue」は模擬演習、「mock trial」は模擬裁判など、接頭語として「mock-」を使うと「〜のふりをする」「〜を真似た」という意味になるのですね。

「モックアップ」の使い方・例文

「モックアップ」の使い方を例文を使って見ていきましょう。

1．アプリ開発においてモックアップを作ることは、完成形のイメージについてクライアントとすりあわせをしっかり行うためには非常に重要な工程だ。
2．プロダクトデザインにおけるデザインモデルまたはモックアップ、実際に目でみて手で触ることができるため、検証用モデルとして重要かつ説得力のあるアイテムである。
3．駅貼りのポスターやビルボード、壁面広告や屋外広告看板などのプレゼンでは、まるですでに現場に広告や看板デザインを施したかのように見せかけたモックアップ画像を作っておくと説得力がアップする。

例文でもわかるように、「モックアップ」を作る目的は完成系をイメージするためです。アプリケーションやプロダクト制作の過程においては、クライアントと進捗や完成イメージをすり合わせしつつ進めることが多いですが、その際にまずは「モックアップ」を用意し完成イメージを見せることで、課題を視覚的に確認することができ、双方の解釈の違いや齟齬を極力抑えることが可能となります。