ヒット製品は偶然生まれるものではありません。慎重に調査された結果の産物です。製品開発プロセスの重要な段階のひとつに、モックアップと呼ばれる製品の表現があります。モックアップは、製品マネージャーや関連者を最終デザインに関する意思決定に巻き込むための強力な手段です。また、デザインチームがフィードバックを得る手段になるほか、今後の製品発表に向けてオーディエンスの興味を引きつけるマーケティングツールにもなります。
モックアップとは?
モックアップは、デザインコンセプトを形にした視覚的な草案です。モックアップは完成品の見た目を中程度から高度の忠実度で表現します。つまり、主な視覚的要素を描写しますが、完成品の全機能を反映するわけではありません。デザインソフトウェアやオンラインテンプレートを使ってデジタルで生成され、アプリやウェブページから物理的な製品まで、さまざまなプロジェクトを表現できます。
ワイヤーフレームとモックアップ
ワイヤーフレームとは、ウェブページやアプリ画面を手描きまたはデジタルアプリで描いたものです。ワイヤーフレームとモックアップは、機能性を除いた製品コンセプトを視覚的に表現するという点では同様の目的を果たします。ワイヤーフレームはデザインプロセスの初期段階で作成するため、製品の全体的なレイアウトに関するフィードバックを迅速に行うことができます。一方、モックアップは詳細な批評ができるため、最終的にデザインを決定する前に変更を加えることができます。
プロトタイプとモックアップ
プロトタイプとは、製品の初期段階の未公開バージョンです。プロトタイプとモックアップはどちらも製品を高い忠実度でリアルに表現したものですが、モックアップが製品の見た目を表すのに対し、プロトタイプは機能が備わっており実際に使用できます。プロトタイプの目的は製品の機能性に関するフィードバックを得ることであり、モックアップは概念的なフィードバックを得るために使用されます。
モックアップの種類
業界によってバリエーションはありますが、一般的なモックアップの種類には以下が含まれます:
物理的な製品のモックアップ
製品のモックアップを作成すると、プロトタイプを作る前に製品を視覚化できます。また、製品の設計目的をイメージするのにも役立ちます。たとえば、新しい靴のデザインのモックアップを作成する場合、靴自体の外観を表す立体的なモックアップと、靴を履いたときの外観を示す画像のモックアップを作成できます。
モックアップの中には、製品そのものの物理モデルとなるものもあります。これはプロトタイプとは異なり、完全な機能を提供しません。たとえば、家具デザイナーが椅子を作成する場合、フルサイズの椅子を作成する前にデザインの1/10スケールモデルを作成することがあります。これにより、最終製品を作成するために必要な時間とコストをかけずに、デザインが実現されたときの見た目を確認できます。
アプリやウェブサイトのモックアップ
アプリやウェブサイトのモックアップは、ユーザーインターフェースを視覚的に参照する役割を果たします。モックアップを使用すると、アプリやウェブサイトを公開前にプレビューできます。モックアップ版にはインタラクティブな機能がないかもしれませんが、ユーザー体験を把握することはできます。
たとえば、ECストアのアプリ版を設計する場合は、リリース前に機能がないバージョンのアプリを作成することが一般的です。このモックアップを使用して、さまざまなデバイスにフィットするように画像やボタンのサイズを調整できます。
ブランディングのモックアップ
ブランディングのモックアップとは、開発中のさまざまなブランディングデザインを表す画像です。名刺、パッケージ、アパレルなどの素材を、実際に製造する前に検査して改良できる印刷モックアップを含むことが多いです。ブランディングのモックアップは、デザイナー、関係者、製造業者が連携して作業し、最適なデザインを作成するのに役立ちます。
モックアップ作成ツール
ニーズやスキルレベルに応じて、手頃なモックアップテンプレートか、より洗練されたデザインソフトウェアのいずれかを選択することが一般的です。
オンラインのモックアップジェネレーター
使いやすいオンラインモックアップジェネレーターが多数あり、効率的にモックアップを作成できます。パーカーのモックアップテンプレートが必要な場合も、ウェブサイトのモックアップのもとになるものが必要な場合も、既存のテンプレートをオンラインで見つけることができます。
たとえば、新興スキンケア企業がブランドパッケージのモックアップを必要としている場合、Canvaのようなクラウドベースのデザインツールを利用すると、アイデアをブレインストーミングし、最終的に製造業者に送るパッケージモックアップを作成できます。
手頃な価格のオンラインソフトウェアは、ウェブサイトやアプリのデザインを考えるのに役立ちます。こうしたソフトウェアは、ロゴ、グラフィック、コピーなどの視覚要素を挿入できるように構造化されたコンテナを提供します。オンラインのモックアップジェネレーターを選択すると、使い方を簡単に学ぶことができ、通常はサブスクリプションベースのデザインソフトウェアを購入するよりもコストが低く済みます。また、無料のものもあります。他のアクセスしやすいモックアップジェネレーターには、Placeit(英語)などがあります。
プロフェッショナルなデザインソフトウェア
デザインソフトウェアでモックアップを作成することは、デザイナーなら業界標準の方法です。しかし、モックアップ作成が初めての方や、専任のデザイナーがいない会社の場合、このオプションは一般的にオンラインテンプレートを使用するよりも習得が難しく、価格も高くなります。しかし、挑戦する準備ができているなら、FigmaやAdobe XDなどのデザインソフトウェアを使用して、ゼロからモックアップを作成できます。
モックアップに関するよくある質問
モックアップはデザインプロセスのどこに入りますか?
高忠実度のモックアップは、デザインプロセスの終盤に登場します。最終段階の直前に重要な情報を提供し、製品を確定するために役立ちます。
モックアップの例は?
たとえばTシャツのモックアップがあります。企業は、アイデアを現実世界でどのように実現できるかを確認し、ブランディングの特定の要素に関する意思決定を容易にするためにモックアップを作成します。Tシャツの場合は、実際にTシャツに印刷する前にデジタルでモックアップを作成します。
モックアップはどこで使用し、どこに投稿できますか?
モックアップは、デザイン要素について議論するために、社内チームや関連者とのビジネスプレゼンテーションで使用できます。また、マーケティング戦略の一環としてSNSにモックアップを投稿することもできます。
モックアップはなぜ重要なのですか?
プロフェッショナルな見た目のモックアップは、製品がプロトタイプ作成や生産に移行する前にフィードバックを収集するためのツールであるため、重要です。初期の修正は、開発の後期段階や製品が生産された後に行う調整よりもコストが低くなります。また、モックアップは、デザイナー以外のメンバーも含む開発チームの意見を最終バージョンに向けてまとめるためにも重要です。