Webデザインに重要なモックアップとは？用語の違いやポイントを解説
Webサイトやアプリ開発と言った場でよく耳にする「モックアップ」ですが、もしかしたら、「なんとなく知っているけれど、しっかりとした説明はできない」と思われる方もいらっしゃるかもしれません。
今回の記事では今さら聞けない「モックアップ」の意味や重要性などを詳しく解説していきます。「スケッチ」「ワイヤーフレーム」「プロトタイプ」などの混同されやすい単語との違いも解説しますので、「モックアップ」に関する理解に不安がある方は参考にしていただければと思います。
モックアップとは
モックアップとは「模型」を意味しており、機能はしませんが本物そっくりの見本品のことを言います。自動車産業や建築業界などさまざまな業界でモックアップは活用されています。
身近なところですと、例えば携帯ショップや家電量販店に置いてある製品サンプルなどもモックアップに該当します。
このように、モックアップは実機をイメージしやすいように手に取れる形で作られており、デザイン・サイズの把握に用いられます。
同じようにWebサイトやアプリ開発のデザイン制作の段階でも用いられており、頭の中で思い描いた完成形のイメージを視覚的にわかりやすく表すためにサンプルとして作成します。
なお、モックアップはあくまでも静的なデザインの模型となるため機能や動作を確認するものではありません。
モックアップと混同されやすい3つのワークフロー
モックアップは「スケッチ」「ワイヤーフレーム」「プロトタイプ」という3つのワークフローと混同されることがあります。
簡単にまとめると、モックアップも含む4つのデザインフローは以下のような流れになります。
上記の図のように、それぞれのデザインフローは異なる役割を持ちます。
- スケッチ
- ワイヤーフレーム
- プロトタイプ
上記3つとプロトタイプとの違いについて解説します。
スケッチ
スケッチとは、アイディアを描きだす工程です。デザインフローでは最初に行う作業となり、言葉を並べるだけではなく実際に描きだして構想を練ります。
モックアップは細かくデザインを考案しますが、スケッチではアイディアを表現・整理しまとめていく作業になります。
ワイヤーフレーム
ワイヤーフレームとは、前工程で検討したスケッチの構成部分となります。モックアップでは配色や形、フォントなどのデザイン部分を決めますが、ワイヤーフレームではどこに何を配置するのか大まかな枠組みを決めていきます。
複数人で作成する場合は、お互いのイメージのズレを解消できるためWebサイトやアプリ開発では重要な部分と言えるでしょう。
プロトタイプ
プロトタイプとは、モックアップに動作などを確認するための機能を追加した試作品です。
モックアップは画像挿入や配置、配色などビジュアルを確認するための静的な「模型」を指すことに対し、プロトタイプはモックアップを改善し動作を確認するための動的な機能も含めた「試作品」となります。
モックアップ作成のメリット
モックアップを作成することで
- 完成形を視覚的に表現できる
- 課題を可視化することができる
- 仕様変更のリスクを回避することができる
以上のようなメリットが挙げられます。
それぞれについて、具体例を挙げながら解説していきます。
完成形を視覚的に表現できる
モックアップでは、文字の大きさ・配色・ボタンの位置・写真の配列を視覚的に確認することが可能です。
実際に開発者が依頼者に完成形を共有することで、依頼者との円滑なコミュニケーションを図ることができ、効率よく作業を進めることが可能となります。
課題を可視化することができる
モックアップはビジュアルでの課題を可視化することが可能です。
例えば、UIデザインのブラッシュアップの際にモックアップを活用します。UIデザインはユーザーがスムーズに利用できることをゴールとしているので、ユーザーファーストを意識した際に重要な要素となります。
実際のUIが表現できるモックアップは、ユーザー目線に立ち返るためにも必要なフローと言えるでしょう。
仕様変更のリスクを回避することができる
モックアップを事前に作成することで、イメージの齟齬による修正や変更のリスクを抑えられます。相手とのコミュニケーション不足による完成間近の修正や変更点の発見を防ぐため、仕様変更による余分なコスト・工数の発生を回避することができるでしょう。
モックアップを作る際の注意点
ここからはモックアップを作成する際のポイントをご紹介します。代表的なポイントは、以下の4点です。
- アイディアスケッチやワイヤーフレームの作成から行う
- ユーザー目線でデザインを検討する
- 作成が必要な画面を網羅する
- 関係者間で認識のズレが生じていないか確認する
それぞれの項目について、詳しく見ていきましょう。
アイディアスケッチやワイヤーフレームの作成から入る
いきなりモックアップ作りに着手せず、まずはラフの段階からモックアップを作成しましょう。ラフなアイディアから徐々に形にしていき、ステップを踏んでいくことで、当初の予定や希望とのズレを最小限にできます。
ユーザー目線でデザインを検討していく
モックアップを作成する際に、ユーザー目線でデザインを確認することも重要です。色合いやレイアウトに違和感（使いにくさ）はないか、当初の希望に即しているかなどをチェックしましょう。画面サイズによって印象も変わるため、それぞれのデバイスで確認する必要があります。
作成が必要な画面を網羅する
必要な画面を網羅することも必要です。TOPページから遷移する画面に合わせて、それだけモックアップを作成しなければなりません。そのため遷移先のページ数とモックアップの数が合致しているかを事前に確認しましょう。
関係者の中で認識のズレがないかをチェックする
また関係者間で認識のズレが生じていないかをチェックしておくことも欠かせません。作成段階が進むにつれて、具体的なイメージを使って確認を入れるとよいでしょう。大きな変更が生じた場合は特に注意が必要です。こまめに確認依頼をすることで、イメージのすり合わせがうまくいきます。
モックアップ作成を行う方法
ここからはモックアップを作成する方法をご紹介します。具体的な方法としては、以下の方法があります。
- 社内で作成する
- システム開発会社に委託する
それぞれについて詳しく見ていきましょう。
社内で作成する
社内のデザイナーと連携を行い、スケッチから作業を行います。ワイヤーフレームまでの作業を終えた後、以下のようなサービスやツールを使って実際にモックアップを作成します。
- モックアップジェネレーター
- モックアップ作成ツール
モックアップジェネレーター
モックアップジェネレーターとは、モックアップ用の素材をダウンロードできるサイトを指します。
Webページやアプリの画面といったデジタルデバイス上の表示を表現する素材の他、製品のパッケージや名刺といった印刷物用の素材など、多種多様なシーンで使用できる素材を入手することが可能です。
素材はPSDデータで配布されていることが多く、対応している編集ソフト上で任意のデータと組み合わせて用います。他にもMockupPhotosのようにホームページ上で素材と組み合わせ、jpgやpngなどといった画像形式で出力できるサービスもあります。
ただし、素材サイトによって、
- 著作権表記が必須
- 個人のみ利用可能、商用利用不可
などの規定があります。すべて利用規約に記載されているので、必ず確認し正しく使用しましょう。
モックアップ作成ツール
モックアップ作成ツールとはコーディングやデザインの知識がなくても簡単に作成することができるデザインツールです。
動作環境に関しては、ブラウザ上で動作するものやダウンロードして使用するものが存在します。
機能はツールによって異なりますが、基本的なデザイン機能の他に
- フィードバックができるコメント機能
- 作成したモックアップをURLにてチームで共有し同時に編集できる機能
など、複数人がプロジェクトに携わる際に便利な機能が搭載されているのも特徴の一つです。
制限はあるもののほとんどが無料でダウンロードができるので、まずは無料版を使用し有料プランを検討することをおすすめします。
システム開発会社に委託する
自力で作成するのが困難な場合は、社外に委託するという方法もあります。UIやUX、Webデザインに関する専門的な知識や経験がなくても、簡単で確実に作成できるうえに、プロの視点からデザインを制作してくれます。プロに依頼・委託することで、Web制作やアプリ制作を成功へと導いてくれます。
モックアップを用いたデザイン制作の流れ
ここからはモックアップを作成する際のポイントをご紹介します。代表的なポイントは、以下の4点です。
- アイディアスケッチやワイヤーフレームの作成から行う
- ユーザー目線でデザインを検討する
- 作成が必要な画面を網羅する
- 関係者間で認識のズレが生じていないか確認する
それぞれの項目について、詳しく見ていきましょう。
アイディアスケッチやワイヤーフレームの作成から入る
いきなりモックアップ作りに着手せず、まずはラフの段階からモックアップを作成しましょう。ラフなアイディアから徐々に形にしていき、ステップを踏んでいくことで、当初の予定や希望とのズレを最小限にできます。
ユーザー目線でデザインを検討していく
モックアップを作成する際に、ユーザー目線でデザインを確認することも重要です。色合いやレイアウトに違和感（使いにくさ）はないか、当初の希望に即しているかなどをチェックしましょう。画面サイズによって印象も変わるため、それぞれのデバイスで確認する必要があります。
ユーザーにとっての使いやすさを調べるには、ユーザビリティテストを行うことも有効です。外部の協力者にデザインを評価してもらうことで、ユーザーの視点やデザインの課題が明らかになります。
作成が必要な画面を網羅する
必要な画面を網羅することも必要です。TOPページから遷移する画面に合わせて、それだけモックアップを作成しなければなりません。そのため遷移先のページ数とモックアップの数が合致しているかを事前に確認しましょう。
関係者の中で認識のズレがないかをチェックする
また関係者間で認識のズレが生じていないかをチェックしておくことも欠かせません。作成段階が進むにつれて、具体的なイメージを使って確認を入れるとよいでしょう。
モックアップはあくまでも外側の完成イメージであるため、動的な要素は実装されません。そのため、モックアップだけでは伝えられない部分については口頭での説明をすることで、認識の共有を行います。
こまめにコミュニケーションをとることで、イメージのすり合わせがうまくいきます。
モックアップを活用したデザイン制作のポイント
ここからはモックアップを活用したデザイン制作のポイントをご紹介します。主なポイントは、以下の3点です。
- ファーストビューの見た目にこだわる
- ユーザーに利用してもらいたい導線は目立たせる
- 狙い通りに行動しているかツールを利用して分析する
それぞれの項目について、詳しく解説します。
ファーストビューの見た目にこだわる
ファーストビューとは、ユーザーがサイトなどを訪れた際に一番最初に目に入る領域です。ユーザーは、表示したサイトが自分に必要かどうか、ページにとどまるかどうかを瞬時に判断します。その判断に大きな影響を与えるのがファーストビューです。ファーストビューでサイトを離脱してしまうユーザーを生まないために、モックアップ作成時には、
- 誰に／何を伝えるのかが意識された設計になっているか
- ファーストビューの中にCTA（Call To Action）は入っているか
以上の2点を意識してください。
ユーザーに利用してもらいたい導線は目立たせる
ユーザーに利用してもらいたい導線を目立たせることは、ユーザーの行動を効果的に促すことができるので、ランディングページのコンバージョン率の向上などを期待できます。CTAや他のページに遷移するポイントを、ユーザーが認識しやすいようなデザインにします。具体的なポイントとして、モックアップ作成の時点から
- 色やデザインは目立っているか
- クリックできることは伝わるか
以上の2点を意識してください。
狙い通りに行動しているかツールを利用して分析する
モックアップを用いながらデザインをしても、狙った通りのユーザーの行動がなければ意味がありません。デザインの完成後でも、ユーザーの行動を分析して、それをもとにデザインをブラッシュアップする、という流れを作ることがより良いデザインのためには重要です。分析の際は、GoogleAnalyticsのようなアクセス解析ツールや、Clarityのようなヒートマップツールを活用してください。
まとめ
今回はさまざまな業界で活用されているモックアップの基礎知識や重要性についてご紹介しました。モックアップを作成することで、言葉だけでは伝わりずらい部分を視覚的に表現し双方の認識のズレを解消することができます。よりよいデザインを考案し魅力の高い製品づくりにお役立ていただけましたら幸いです。最後までお読みいただきありがとうございました。
この記事をシェア
