モックアップとは？
モックアップ (mock-up) とは、英語で「実物大模型」や「モデル」を意味します。
例えば、家電量販店や携帯ショップで、本物のスマホにそっくりだけど実際には使用できない展示品を見たことはないでしょうか？そのような展示品は、一種のモックアップだと言えます。
つまり、モックアップは外見が本物のように作られた「見本品」。携帯電話以外にも建築模型、ウェブサイト、アプリ開発など様々な分野で用いられています。
スマホなどの家電展示では、盗難防止等の観点でもモックアップは役立っています。
弊社Printfulでも、オリジナルグッズ作成に特化したモックアップ作成ツールを導入しています。サンプル品を注文することなく商品イメージ画像を作成することができるため、「想像していた商品と全く違うものが完成した」といったトラブルを回避するのに役立ちます。
モックアップ作成の目的
ここからは、ウェブサイト制作を例にモックアップの目的についてご説明していきます。
モックアップは、クライアントとの間で完成品のイメージに齟齬を生じさせないために行う必須工程です。
ウェブサイト制作においては、クライアントとのプランニングでウェブサイトの目的やコンセプトを定めたとしても、言葉だけでは細かい部分まで正確に伝わりません。
ウェブサイトのコンセプトや世界観を大事にしながら、限られた画面サイズの中でどのレイアウト・色・文字フォントを採用するのかなどを視覚化し、すり合わせを行います。
サイトの印象を決める構成要素を制作者とクライアント両者の間でイメージ共有をするために、モックアップ作成の段階でしっかりと調整する必要があります。
モックアップ作成のメリット
ここまでで、モックアップ作成の目的・重要性についてご理解いただけたかと思います。
では実際にモックアップを作成するメリットはどんなものがあるのでしょうか？
メリット1：視覚的なイメージ確認が可能
「モックアップの目的」でもご説明したように、モックアップは頭でイメージしている完成形を視覚化するための重要なプロセスです。イメージを確認することにより、ユーザー視点で課題を特定し、修正・改善できます。
メリット2：クライアントやチームとのイメージ共有が可能
複数人が携わるプロジェクトでは情報共有・イメージ共有が必要不可欠です。
モックアップの段階で入念にウェブサイトのコンセプトカラー、画像、フォント、ボタンの位置が適切かなど、制作チームのビジョンを明確に共有できます。
メリット3：修正・変更のリスク軽減
モックアップの工程を経なければ、クライアントは実際に納品されるまで最終デザインを確認することができず、納品後にフィードバックで修正を要求してくるでしょう。実際の機能を伴う実装後では仕様変更などのコストが発生してしまいます。
事前にモックアップを作成することで修正・変更が容易になり、最終的な工数やコストを削減できるメリットもあります。
効率的なモックアップ作成方法
モックアップを作るのは大変そう…というイメージがありますが、どんな流れで作るのが効率的なのでしょうか？具体的な作り方を解説します。
ステップ1：スケッチでプランニング
ウェブサイトを作成するにあたり、まず最初に取りかかるのが「スケッチ」です。
スケッチは、その名の通り一枚の紙にフリーハンドでサイトのレイアウトを描いたもの。
次のステップであるワイヤーフレームに繋がる重要な作業となるため、しっかりとアイデアを視覚化していきましょう。
ステップ2：ワイヤーフレームで設計
「ワイヤーフレーム」とは、「サイトの骨組み」を意味します。何を・どこに・どのくらいの面積で配置するのか、というサイトの設計書となります。ユーザーが必要な情報に迷わずにたどり着けるか、ウェブサイトで一番見てほしい情報は適切な位置にあるか、などの構成を検証するために設計します。
ワイヤーフレーム作成段階では、制作者目線・ユーザー目線の両者の目的が達成されるような骨組みを作ることが重要となります。
ステップ3：モックアップ作成
ワイヤーフレームが出来たら、次はモックアップ作成です。
モックアップの段階では、色の見え方や文字の大きさ、レイアウトの見やすさなどユーザー目線で課題を洗い出し、よりデザインを洗練させていきましょう。
ステップ4：プロトタイプ作成
最後に、プロトタイプ作成です。
プロトタイプとは英語で「原型」、「試作品」を意味し、実際の機能を搭載して完成品に向けて改善していきます。
想定していた通りの動きになっているか、ユーザビリティ（使用性）はどうか、といった機能検証においてプロトタイプは重要な役割を持っています。
モックアップ作成ツールの活用
モックアップ作成には専用ツールを活用するのが効率的です。特別な技術や知識がなくても手軽に使えるモックアップ作成ツールが揃っています。モックアップ作成ツールには、オンラインで使うタイプとダウンロードして使うタイプの2種類あります。
モックアップ作成では複数人が共有して使うツールだからこそ、全員が使いやすいものを選ぶことが重要なポイントです。例えば、以下の項目について検討すると良いでしょう。
- 日本語対応している
- 編集履歴が残り、常に最新版を確認することができる
- コメント機能がある
モックアップ作成ツールには無料体験できるものもあります。上記の検討ポイントも加味した上で費用面・機能面をよく比較して、一番適したものを選びましょう。
モックアップ作成で失敗しないためのポイント
前述でモックアップはクライアントと制作者との間でイメージの齟齬を回避するために作成するとご説明しました。モックアップを作成する上で、失敗しないためにこれらのことに注意していきましょう。
ウェブサイト以外での紙媒体やアパレルでの場合になりますが、モックアップツール上での色味や質感と、実際に紙や布地に印刷した仕上がりに差異が生じてしまう可能性もあります。
モックアップはあくまでも外観がそっくりの「見本品」であるということをクライアントに伝える必要があります。このようなリスク回避のためには、デザイナー自身が印刷や製品自体の知識を持っておくことが必要です。
モックアップはデザイン面での修正・改善を行う重要な段階です。
クライアントの完成イメージに少しでも不明な部分がある場合は、しっかりとコミュニケーションを取り合って不明点を明確にし、モックアップに落とし込んでいきましょう。
次のプロトタイプのステップに進んでしまうと、機能面にフォーカスしてしまうため、できればモックアップ段階で細かな修正をすべて行っておきたいところです。
まとめ
モックアップはワイヤーフレームとプロトタイプの橋渡しとも言える重要な工程で、完成形のビジュアルイメージを決定する手助けとなります。モックアップを有効に活用して、デザインをブラッシュアップしていきましょう。
