モックアップとは、実際に商品が完成する前のビジュアル面のサンプルで、WEBやアプリ・システム開発において非常に重要です。
モックアップの段階では機能は実装されていませんが、デザイン面でのイメージを掴むことができます。
他にもモックアップを作成するメリットはいくつかあげられます。
そこで今回は、「モックアップとは？」といったモックアップの意味を簡単に解説するとともに、WEBやアプリ・システム開発に必要な理由や「ワイヤーフレーム」「プロトタイプ」など、よく利用される他の用語との違いについてなどを含め、発注者目線で解説します。
モックアップとは？
「モックアップ（mock-up）」とは「模型」という意味です。模型で代表的なプラモデルを思い浮かべると、モックアップの意味がよくわかります。プラモデルは実物を忠実に再現することを目的として作られていますが、中身は空洞です。
モックアップは、工業製品などでシステムは実装されていないが外観は本物そっくりに作られたサンプルのことです。例えば、スマホや携帯電話のサンプルなどがあげられます。
スマホや携帯電話をユーザーが購入する場合、多くのユーザーにとってモデルのデザインやカラーは非常に重要なポイントになります。モックアップがあることで、実際にユーザーがスマホを利用するイメージを確認でき、多くのユーザーが利用してくれるかを確認することができます。
モックアップを作成する必要性は、WEBやアプリ・システム開発でも同様です。モックアップは、Adobe製品のPhotoshop、XDなどや、その他モックアップ作成ツールを利用してデザイナーが作成します。機能は実装していなくても、画面のビジュアル面の完成イメージを見ていくことは非常に重要で、いくつかのメリットがあります。
モックアップを作成する理由・メリット
WEBやアプリ・システム開発でモックアップを作成する理由・メリットを解説します。発注者側の立場から考えると、WEBやアプリ、システムが出来上がった段階で、イメージと違うことが分かるというのは避けたいところです。
モックアップを作成する理由とメリットは、WEBやアプリ、システムが出来上がってくる前の段階で、ビジュアル面のイメージを確認できる点にあります。ここでは、さらに詳しくモックアップを作成する理由とメリットを紹介していきましょう。
デザイン面の完成形を明確にイメージできる
WEBやアプリ、システムの制作では、色見本・表示サンプルなどが提示されるケースがあります。しかし、色見本・表示サンプルだけでは、デザイン面の完成形を明確にイメージすることは困難です。例えば文字や画像、ボタンなどの要素の大きさやフォントがイメージと異なる場合があります。
モップアップによって実際にデザインに起こすことで、イメージと異なる部分や、ユーザビリティなど改善点を事前に修正することができます。機能を実装した後やコーディング後の修正はその分、無駄なコストが発生してしまいます。WEBやアプリ、システムの制作の工程が進んでいって、はじめてビジュアル面のイメージが異なることに気づくようなリスクを回避するためにも、モップアップを作成することは大きなメリットになります。
クライアントやメンバーとの認識の統一・共有が可能
カラーやデザインといったビジュアル関連の印象というのは、文字や言葉では表現できない感覚的な部分が大きいのが特徴です。表現が難しい課題であると同時に、ビジュアルはWEBやアプリ・システム開発にとって非常に重要なポイントです。
クライアント様にとっても、設計や実装に入る前に、デザインを確認し認識の擦り合わせができることは前項でも述べたとおり、工数が増えるリスク回避のためにもメリットになります。
クライアント様とweb開発会社とのコミュニケーションだけでなく、WEBやアプリ、システムを制作しているメンバー同士でも、詳細な仕様書や言葉だけのコミュニケーションだけでなく、モックアップがあることで各自担当のタスクに取り掛かる上でも認識の齟齬が少なくスムーズに進めることができると考えます。
モックアップの作り方
モックアップの作成は、基本デザイナーが行うところになります。また一部のクライアント様で、自社で作成したいという方もいらっしゃると思いますので、ここではモックアップの作成方法について解説します。
1.サイト・アプリの構造決め
まずは、サイト・アプリ全体でどのような画面が必要かを洗い出していきます。全ての画面を洗い出した後は、ユーザー側が何かのアクションを行う時(例：会員登録)、それぞれのページがどのように遷移していき(例；LP→会員登録ページ→会員登録完了ページ)、アクションを完了するのかを決めます。
2.ワイヤーフレーム作成
次に、各画面(ページ)のレイアウトを作成します。画像、ボタン、テキスト、どこに何を配置するかを決めていきます。この段階では、デザインは行いません。あくまでも各画面でどのような要素が必要かを他のプロジェクトメンバーに分かるように作成します。基本デザイン的な要素を省くため、色味のないモノトーンで一般的なフォントで作成していきます。
これをワイヤーフレーム作成といいます。詳しくは後の章でご紹介します。作成するためのツールとして、オプスインではFigmaやAdobeのXDをよく使用します。
3.デザイン的要素を加える
企業のコーポレートサイトやECサイト、サービスアプリなどのイメージがあります。
そのイメージを表現するにはどのようなカラーでどのようなフォントがいいかなどトンマナを決めます。サイトやアプリ全体に統一感を持たせるように一貫性のあるものにします。
女性向けのサービスなので優しい温かみのあるイメージ、富裕層向けのサービスで高級感のあるイメージなど、それぞれのイメージからトンマナを設定し、モックアップに落とし込んでいきます。
その他、よりイメージしやすく、サンプル画像やサンプルテキストを入れていき、モックアップは完成します。
また一方で、多くのwebサービスやアプリに精通しており、UI/UXの知見に長けたプロフェッショナルなディレクターやデザイナーに希望やイメージを伝えた方が、より良いデザインに仕上がる可能性も十分にあるかと思います。
弊社はシステム開発会社ですが、多くのwebサービスやアプリの開発をデザインも含めて一貫して行ってきた多くの実績がございます。柔軟に対応させていただきますので、お気軽にご相談ください。株式会社オプスインご相談フォーム
モックアップを作成・確認するときの注意点
モックアップを作成することで、発注者は、WEBやアプリ、システムが出来上がってくる前の段階で、ビジュアル面のイメージを確認でき、修正点が見つかった場合は修正することができます。ただし、前述のメリットを活かすためには、いくつかの点に注意が必要です。
まず、モックアップを作成する受注者も、モックアップを確認する発注者も、モックアップの時点でデザインを完成させるつもりで臨まなければなりません。モックアップ自体がアバウトで、「後から修正できる」という認識はNGです。
また、モックアップを作成する受注者と、モックアップを確認する発注者は、認識に齟齬が出ないようコミュニケーションを密に取る必要があります。モックアップの段階で、ビジュアルに関する疑問や要望は遠慮なく出し合い、モックアップ後にビジュアルについての修正が発生しないようにしましょう。
例えば、「カラーイメージは合っているか」「デザインはイメージ通りか」「レイアウトで見づらい部分はないか」「使いづらい部分がないか」など、これらの要望はすべて盛り込まれているかをチェックします。
「ワイヤーフレーム」「プロトタイプ」など他の用語との違い
「モックアップ」の他に、「ワイヤーフレーム」「プロトタイプ」も制作の各ステップで作成するものです。一般的にWEBやアプリ、システムを作成する際には、スケッチ、ワイヤーフレーム、モックアップ、プロトタイプの順に工程を進めていきます。
スケッチ
スケッチはWEBやアプリ、システムを作成する際の最初の段階です。日常的にスケッチというと、絵を描く時の大まかな描写や下書きを言いますが、WEBやアプリ・システム開発では、アイデアを描き出す段階といえるでしょう。スケッチの段階では、アイデアを描きながら構想をまとめていきます。スケッチは、手書きではなく、ツールでもOKです。
ワイヤーフレーム
ワイヤーフレームは、スケッチの次の段階です。ワイヤーとは線、フレームは枠組みを意味しますが、WEBやアプリ、システムを作成する段階のワイヤーフレームとは、骨組みや設計図を指します。スケッチでまとめた構想を一旦デザイン的な要素は抜きにして構成や枠組みのみを表したワイヤーフレーム（設計図）にまとめていきます。
発注者目線で見てみると、スケッチでは不明瞭であったWEBやアプリ、システムの構想が、ワイヤーフレームとして視覚的に見ることができます。例えば、WEBサイトのどこに何を置くかといった情報の配置や、どのような動作をさせるのかといった仕様の確認ができます。
ワイヤーフレームの段階で、WEBやアプリ・システム開発の設計図が出来上がるわけですから、発注者としては、WEBやアプリ、システムを制作する目的や方向性が正確に反映されているかどうかを確認していきましょう。
ビジュアル面が気になるところですが、ワイヤーフレームの段階では、基本となる設計図の確認を重視します。
モックアップ
ワイヤーフレームの次の段階の工程が、「モックアップ」になります。先で解説したようにビジュアル面の完成イメージを確認します。
プロトタイプ
プロトタイプは、モックアップの次の段階です。試作品とも言われ、モックアップで作ったビジュアルに、実際の機能を追加して完成に向け機能を実装していきます。プロトタイプは、一般的にもよく使われる言葉です。例えば、自動車メーカーが先行してプロトタイプを発表し、その後、市場に量産モデルを導入するケースがよくみられます。
プロトタイプは、基本的に使用できるレベルで作成されており、最優先の機能のテストを実施して評価し、その結果を反映させた修正を繰り返しながら、機能を追加して、WEBやアプリ、システムを完成させていきます。
まとめ
「モックアップ（mock-up）」とは「模型」という意味で、WEBやアプリ、システムの機能は実装されていませんが、ビジュアル的には外観は本物そっくりに作られたサンプルのことです。WEBやアプリ、システム開発において、デザインやカラーなどのビジュアルは非常に重要なポイントになります。モックアップを制作することで、先にビジュアル面を検討することができます。
モックアップ作成する理由・メリットとしては、デザイン面の完成形を明確にイメージできる点と、クライアントやメンバーとの認識の統一・共有が可能な点、完成後の変更などのリスクを低減できる点が挙げられます。
モックアップを作成・確認するときの注意点は、モックアップを作成する受注者も、モックアップを確認する発注者も、モックアップの時点でデザインを完成させるつもりで臨まなければならない点です。そのためには、認識に齟齬が出ないようコミュニケーションを密に取る必要があります。
一般的にWEBやアプリ、システムを作成する際には、スケッチ、ワイヤーフレーム、モックアップ、プロトタイプの順に工程を進めます。スケッチとはアイデアを描き出す段階。ワイヤーフレームとは、骨組みや設計図を指します。スケッチでまとめた構想を完成したイメージとしてワイヤーフレーム（設計図）にまとめていきます。プロトタイプは試作品とも言われ、モックアップで作ったビジュアルに、実際の機能を追加して完成に向け機能を実装していきます。
モックアップは、実際に商品が完成する前のビジュアル面のサンプルで、WEBやアプリ・システム開発において、非常に重要です。注意点を意識してモックアップのメリットを十分に活かしましょう。
