モックアップとプロトタイプの違い
見出し画像

モックアップとプロトタイプの違い

Hiroki Tani

定義に迷ったらいったんWikipedia。

モックアップ
木型(きがた)とは、製品の外観の検討や機能の確認のためにつくられる原型。基本的には木製。モックアップ(mockup)とも言う。
- 木型 - Wikipedia
プロトタイプ
プロトタイプ(英: prototype)は、デモンストレーション目的や新技術・新機構の検証、試験、量産前での問題点の洗い出しのために設計・仮組み・製造された原型機・原型回路・コンピュータプログラムのことを指す。
- プロトタイプ -Wikipedia

ちなみにラピッドプロトタイピングの項にいくと下記のようにある。

ラピッドプロトタイピング(英: rapid prototyping)とは、製品開発で用いられる試作手法である。文字通り、高速(rapid)に試作(prototyping)することを目的としている...製品設計では、初期のデザインの段階や製品設計が進んだ段階で、外観や性能の評価を行うために試作品を作成することが多い。その際、量産品と同じ材料を用いて作成するほか、粘土(クレイモデル)や木(モックアップ)で作成することが行われてきた。
ラピッドプロトタイピング - Wikipedia

デジタルプロダクトというより、WebサービスやWebアプリの開発に関わる自分の環境において、この「モックアップ」と「プロトタイプ」の2語が交差することがある。大抵の場合、どちらも目的は「価値検証」であることが多いはず。明確に使い分けをしているわけではなく、みんなの共通認識としてもこの2語におそらく違いを持っていない。

ちなみに僕自身としては暗黙的に、静的で単一画面での検証用成果物がモックアップ動的な複数画面と導線検証用成果物がプロトタイプ、と呼び分けている気がする。

プロトタイピング工程でいうと、まずモックアップでの検証があり、そのモックアップの組み合わせをプロトタイプと呼ぶことが多いのではなかろうか。

Lo-Fiなワイヤーフレームのままでプロトタイプ検証をすることもあるし、じゃあそれを「モックアップ」と呼ぶかというとそうではなく「ワイヤーフレームを元にしたプロトタイピング」とでも言うのだろう。ワイヤーフレームよりもHi-Fiになったものを「モックアップ」ときっと呼んでいる。

ただこうして考えてみると、本来のプロダクトや建築などのデザイン工程におけるモックアップと比べると、デジタルのデザインにおけるモックアップというのは、モックアップという言葉の枠組みにおいて、その価値はさほど無いようにも思う。

なので「モックアップ」という言葉の扱いを考えるならば、簡単に結論づけるならば、

モックアップはプロトタイピングのための成果物(プロトタイプ)の一種である

といったところか。

これは個人の感想で、組織やチームで共通認識あればよろし。


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
Hiroki Tani

明日の元気の素になります。

Hiroki Tani
株式会社サイバーエージェント Webのエンジニアだけどデザインのこと考えています。 OSS: FLOCSS http://github.com/hiloki/flocss 著書: Web制作者のためのCSS設計の教科書 http://amzn.to/2hJcQVX