この記事では「モックアップ」について解説する。

端的に言えばモックアップの意味は「模型」ですが、もっと幅広い意味やニュアンスを理解すると、使いこなせるシーンが増えるぞ。

情報誌系の記者を10年経験したにべこを呼んです。一緒に「モックアップ」の意味や例文、類語などを見ていきます。

ライター/にべこ

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

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

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.駅貼りのポスターやビルボード、壁面広告や屋外広告看板などのプレゼンでは、まるですでに現場に広告や看板デザインを施したかのように見せかけたモックアップ画像を作っておくと説得力がアップする。

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

\次のページで「「モックアップ」の類義語は?違いは?」を解説!/

「モックアップ」の類義語は?違いは?

image by iStockphoto

「モックアップ」と混同されやすい言葉としては、上記スマートフォンアプリ制作の例でご紹介した「プロトタイプ」が挙げられます。

「プロトタイプ」

「モックアップ」が完成デザインを確認するものであれば、「プロトタイプ」はデザインだけでなく機能も確認するための「試作品」です。完成の一歩手前といったところでしょうか。このプロトタイプを経て開発完了するのが通例でしょう。

「プロトタイプ」を作る目的は、実際の機能をほぼ搭載して操作性を確認し、より具体的な形で完成時のシミュレーションやチェックを行うこと。このプロトタイプから様々な意見や発見を引き出せるので、プロジェクトに進行においては欠かせないフェーズです。

「カンプ」

似た意味を持つ言葉としては「カンプ」も挙げられるでしょう。しかしこれはWeb業界ではなく印刷業会で使われる言葉です。制作物の実際の仕上がりを確認するために作るレイアウト見本のことで、「カラーカンプ」「デザインカンプ」とも呼ばれます。

そのほかに印刷業界では、実際の刷り色を確認するための「色見本」、中身は白紙ですが実際の製本時と同じ紙を使い仕上がりや体裁を確認するための「束見本」、本番の印刷物が納品される前に届けられる刷り上がり見本の「見本誌」などがあり、それぞれが重要な要素のひとつです。

「モックアップ」の対義語は?

「モックアップ」の明確な対義語はありません。

\次のページで「「モックアップ」を使いこなそう」を解説!/

「モックアップ」を使いこなそう

この記事では「モックアップ」の意味・使い方・類語などを説明しました。高品質なアプリのスムーズな開発のためには欠かせない工程でしたね。

ちなみに、「モックアップ」という言葉を検索すると「木型」というのがヒットします。CADなどで設計された工業デザインは、旧来は木を使い手作業でモックアップを作っていたのですね。しかし現在では3Dプリンタの普及により、木素材を使用せずにFRPや合成樹脂などで立体形を作ることが多くなっているようです。

" /> 「モックアップ」の意味や使い方は?例文や類語をWebライターがわかりやすく解説! – Study-Z
国語言葉の意味

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

この記事では「モックアップ」について解説する。

端的に言えばモックアップの意味は「模型」ですが、もっと幅広い意味やニュアンスを理解すると、使いこなせるシーンが増えるぞ。

情報誌系の記者を10年経験したにべこを呼んです。一緒に「モックアップ」の意味や例文、類語などを見ていきます。

ライター/にべこ

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

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

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.駅貼りのポスターやビルボード、壁面広告や屋外広告看板などのプレゼンでは、まるですでに現場に広告や看板デザインを施したかのように見せかけたモックアップ画像を作っておくと説得力がアップする。

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

\次のページで「「モックアップ」の類義語は?違いは?」を解説!/

次のページを読む
1 2 3
Share: