モックアップとは？基礎知識とデザインフローにおける位置づけ

モックアップの基本

モックアップとは？

記事の後半で詳述しますが、モックアップとはどういったものなのか簡単に解説しておきましょう。

モックアップとは、ウェブサイトやアプリのデザインで使われる方法のことです。何を制作するのかにもよりますが、デザイン業務では画面の要素や機能を固めていくプロセスが共通してあります。このときに使われるのがモックアップで、完成イメージを視覚的に表示して確認していくために使われます。

モックアップは手作業で作っても良いのですが、下の記事にあるようにPrototyperなどのツールを使う方法もおすすめです。

モックアップ作成を強力サポート！Prototyperを徹底解説

モックアップが重要な理由

モックアップはビジュアル面からデザインの仕様を確認するための方法です。紙に書いてある仕様やワイヤーフレームではわからなかった問題点もわかります。

逆にモックアップを活用しなければ、そういった課題や修正点が後になってから発見されます。これだと、たくさんの工数やコストがかかってしまうので非効率です。

モックアップを使用することで、ビジュアル面からの課題や修正点を早期に洗い出すことができるようになるのです。

デザインにおけるモックアップの位置づけ

デザイン検討フェーズにおける、モックアップの位置づけについても確認しておきましょう。

UIやUXのデザインでは、モックアップの他にもワイヤーフレームやプロトタイプなど、よく似た用語が出てきます。それぞれの意味を混同している人も多いので、その辺りの違いについても解説しています。しっかりと用語の意味を理解して、正しく使い分けていくことが大事です。

ここからは、実際にデザイン業務を行う時の流れに沿って解説していきましょう。

アイデアを描き出す「スケッチ」

デザインフェーズにおける最初のステップが、スケッチです。スケッチという言葉から手書きのイメージがありますが、そうでなくても構いません。使いやすく、また共有しやすいツールを使えばOKです。初期段階ではデザインが固まっていないことがほとんどなので、頭に浮かんだアイデアをすぐに描いていけることが大切なのです。

「ワイヤーフレーム」はデザインの骨組み

スケッチで検討したデザインについて、その概要をまとめたのがワイヤーフレームです。言ってみれば、画面デザインの骨組みにあたります。ページには画像やデザイン要素、コンテンツが表示されますが、ワイヤーフレームの時点では仮のものを使うことが一般的です。表示する要素の種類や配置などを固めていくのが、ワイヤーフレームということです。

ワイヤーフレームについては、下の記事でも詳しく解説しています。

Webサイトの設計図「ワイヤーフレーム」とは？

スマホアプリ開発の必需品！厳選ワイヤーフレームツール５選

ビジュアルを確認する「モックアップ」

ワイヤーフレームに続くステップにあたるのが、モックアップです。ワイヤーフレームにはなかった、本番と同じデザイン要素やコンテンツを載せていくステップになります。完成イメージをビジュアルで確認するできるので、全体デザインや要素のアレンジ、課題の洗い出しなどが可能になります。

機能や操作性の「プロトタイプ」

モックアップはビジュアル面にフォーカスしていましたが、プロトタイプは機能や操作性を確認するためのものです。アプリの場合は、画面遷移やボタンを押したときのアクションなど、実機を使ってチェックすることもあります。機能やコンテンツのイメージがわけば良いので、実際にはデータのやり取りなどは行われません。

あとがき

デザインにおいて欠かせないツールであるモックアップについて解説しました。デザイン業界ではよく聞く言葉なのですが、なんとなく使っている方も案外多いようです。デザインフローの中でも重要なステップなので、それぞれの違いについてもバッチリ理解しておきましょう。