ワイヤーフレーム・モックアップ・プロトタイプの違い｜早見表で比較

6,915 views

読了時間 : 約3分23秒

ワイヤーフレーム、プロトタイプ、モックアップはしばしば互換的に使用される言い方ですが、それぞれ同じであるわけではありません。

一方のプロジェクトではワイヤーフレームが必要だけど、他方ではプロトタイプでなければならない、というようなケースもあるのです。

本記事では、その違いとそれぞれの使われ方を解説します。

ワイヤーフレーム・モックアップ・プロトタイプの違いを3軸で整理

違いの読み方：ワイヤーフレーム、モックアップ、プロトタイプの違いは、「何を確認するための成果物か」で見ると整理しやすくなります。まずは目的・完成度・確認できることの3軸で、ワイヤーフレームとモックアップの違い、モックアップとプロトタイプの違いをつかんでから、本文で具体的な使い分けを確認してください。

比較軸	ワイヤーフレーム	モックアップ	プロトタイプ
目的	構造・情報設計を決める	見た目・デザインを固める	操作・体験を試す
完成度	低い。骨組みを確認する段階	中から高。静的な完成イメージ	高い。動く状態に近い試作品
確認できること	要素の配置・優先順位	配色・余白・トーン	遷移や操作感などの使い勝手

表ではあえて要点だけに絞っています。どの段階で作るべきか、チームでどう使い分けるかは、続く本文で順番に見ていきます。

１．まずはワイヤーフレームから

Usability.govによると、「ワイヤーフレームとは、それぞれのアイテムをページ上のどこに配置するかを示すために、ウェブサイトをイラスト化したもの」だそうです。

チームでワイヤーフレーミングを行う場合は、参加者同士で新しいアイデアや新たなインプット、さらにユーザビリティの面から必要となったもの等をその場ですぐにまとめていくことができるので、比較的早く作業が進みます。ワイヤーフレームは細かいディテールを示すものではありませんが、プロジェクトを導いていく大枠のデザインを作り出すものです。

・ウェブページの基本的なエレメンツを視覚化したものがワイヤーフレーム

・作成も修正も素早く進んでいく

・（ユーザに対して）インタラクティブではない

ワイヤーフレームをさらにインタラクティブ（ユーザが実際に使用して試せる形）にしたのがプロトタイプです。

２．プロトタイプの特徴は？

グラフィックやテキストなど、ワイヤーフレームより詳しいディテールが盛り込まれ、最終製品に近いインタラクティブな形になったのがプロトタイプです。ユーザがUIを実際に体験していくことが可能です。

プロトタイプは最終製品に近いものなので、綿密にインタラクションの調査や調整を行い、実際のUXを模る必要があります。コストダウンや開発のスピードアップのために、フロントエンドのインターフェイスとバックエンドのプログラミングのすり合わせが軽視される場合も少なくありません。

・プロトタイプはインタラクティブ

・UXを模るのがプロトタイプ

・外部向けのユーザテスティングが可能になる

プロトタイプを作成することで、コーディングに投資する前にソリューションを評価・テストすることが可能になります。議論を重ねてソリューションの評価やテストを繰り返していけば、ワイヤーフレームは自然にプロトタイプに進化していきます。

３．モックアップは必要？

モックアップは色、タイポグラフィ、スタイルなどを通して全体にコーポレートアイデンティティーを付け加えた、デザインの素描です。想定されたニーズに対するソリューションの構想を形にし、ユーザに受け容れられ市場で成功する製品かどうか、決め手となる要素を目に見える形でステークホルダーに提示することができます。

・モックアップにはコーポレートアイデンティティーが表現される

・見た目や使い勝手はソリューションの完成形に近いものになる

・ユーザテスティングや製品の普及に効果的

ワイヤーフレームより具体的で分かりやすく、プロトタイプより早く仕上がるため、ステークホルダーの早期購入に貢献してくれるのがモックアップです。