ワイヤーフレーム、モックアップやプロトタイプ、それぞれの定義と役割

Ben Gremillion

Benは、UXPinのコンテンツデザイナーです。ウェブデザインとバックエンドの開発の、両方の仕事をしています。サイドビジネスとして、ウェブコミックの作成者のためのコンテンツマネジメントシステムの構築・保全の仕事をしており、年に1回NaNoWriMoにも参加しています。  。

この記事はUXPinからの翻訳転載です。配信元または著者の許可を得て配信しています。

Between ‘Wireframe’ and ‘Mockup’ Lies a World of Nomenclature (2017-01-25)

プロトタイプを作成するプロダクトマネージャーには多くの選択肢があります。手書きのスケッチをチームに提供することもできますし、PhotoshopやSketchで大まかなビジュアルを作画することもできます。ビジョンを伝えるために完璧なドキュメントを作成することもあるでしょう。

これらすべてに共通することがあります。それは、アイデアや課題から完成品に至るまでの一連の流れを示すということです。残念ながら、このプロセスの統一された呼び方はありません。ある人はローファイと呼びますが、別の人はワイヤーフレームとも呼びます。たとえば「サムネイル」という単語ですら、ざっくりとしたスケッチからデジタルデザインまで、どんな粒度でも同じサムネイルという名称で呼ばれます。どの時点でのデザインをハイファイと呼べばよいのでしょう?

ローファイ、ハイファイ、モックアップ、ワイヤーフレーム。それぞれの用語に異なる定義付けがされています。しかし、それぞれ情報の粒度が異なり、相互に繋がりがあるということは多くの人が認めています。チームの中でそれぞれの名称に共通の定義があれば、デザインプロセスはよりスムーズに実行できるでしょう。

この記事では、多くのデザインチームが共通して認識している一連の定義について追及していきます。

ワイヤーフレーム

「ワイヤーフレーム」は紛らわしい言葉で、「モックアップ」や「プロトタイプ」を指すこともあります。どのように呼ぶにしろ、ワイヤーフレームのデザインは、ページで要素をどのように配置するかを示すシンプルなボックスから始められます。

これらのボックスは実際のコンテンツを表示しているのではなく、それぞれのデザイン要素が周りの要素と比例してどれくらいの関心を集めるかを大まかに表しています。ワイヤーフレームとは静的で忠実度の低いデザインであり、製品の「骨組み」となるものです。

プロダクトマネージャーはワイヤーフレームを用いて、アイデアを視覚的に表現したり優先順位をつけたりします。ワイヤーフレームは、「ヒーローイメージが画面全体に広がっている」ことを表現し、どのように画像がデザインに影響を与えるかを見るためのものです。また、ワイヤーフレームによってほかのデザインを見づらくしてしまう可能性に気づくかもしれません。

ワイヤーフレームを作ることにより興味深い疑問が生まれます。ユーザーは最初にどの情報を見るべきでしょうか? 写真が左側にあることによって、どのようなことが生じるでしょうか? 広告の数を4つから3つにする必要があるでしょうか? ワイヤーフレームを活用すれば、プロダクトマネージャーはWebページやアプリビューの段階ですぐに解決することができます。

モックアップ

モックアップはプロジェクトマネージャーよりもビジュアルデザイナーが使うものです。静的で忠実度の高いデザインであり、製品の「質感」を表します。

ワイヤーフレームと同様に、モックアップはデザインが製品の目標をどのように実現するかを示す必要があります。ワイヤーフレームと異なるのは、モックアップはほとんどの場合、実際のコンテンツを取り入れるという点です。しかし、700×200ピクセルの写真やたった12文字のマイクロコピーだけで、本当に作業を行うことができるでしょうか? そこで、UXやコンテンツについて考える段階になります。

紛らわしいことに、「モックアップ」という用語は忠実度のあらゆる段階において使われます。「ローファイをモックアップする」というように動詞としても使われることもあります。しかし、名詞としてのモックアップはデザインプロセスにおける段階を意味します。実際には、忠実度によっていくつものモックアップがあるのです。

ローファイなモックアップ:コンテンツを含まない略図

ローファイモックアップは、ワイヤーフレームやスケッチを完成品に似せたデザインに変えたものです。簡単なボックスや図形はまだ使われていますが、ローファイな段階では、情報やビジュアルの配置を固定します。そして、ローファイモックアップはアプリやサイトの公式な設計図となります。デジタルローファイでは、それぞれのリンクを組み込んで製品フローをシミュレーションすることもあります。

また、ローファイモックアップはステークホルダーからのフィードバックをもらうのに最適です。デザインプロセスにおけるそれぞれの段階でフィードバックを集めるのが理想的で、スケッチの段階でもフィードバックを得られると良いでしょう。しかし、ローファイであればデザイナーでない人のほとんどが完成品がどのように動くかを「理解する」ことができるようです。場合によって、実際の状況下で製品がどのように動くかをテストするために、ローファイに実際のコンテンツが組み込まれることもあります。しかし、多くの場合それはハイファイの段階で行います。

デザイナーにとっては、ローファイやそれ以上の段階がもっとも理解しやすい場合が多いです。しかし、プロダクトマネージャーがローファイのせいでハイファイを見たときに理解しづらくなってしまわないようにしなくてはなりません。

ハイファイなモックアップ:コンテンツのためのデザイン

次に、ビジュアルを取り入れる段階です。ハイファイモックアップでは、見た目の美しさやデザインシステムが加わえられます。また実際に使うコンテンツやそれに近いものを適用します。

コンテンツは変更されることがあるため、コンテンツの適用はデザインにとって重要なテストです。短いこともあれば長いこともあります。また計画していた通りに写真が合わないこともあるでしょう。ボタンの名称を「送信する」や「登録すると30%オフで利用できます」に修正したりする必要があるかもしれません。コンテンツ量の多いハイファイでは、前段階が現実の世界でどのように機能するかを発見することができるでしょう。

プロトタイプ

インタラクティブなモックアップとも呼ばれるプロトタイプは、完成品の機能をシミュレーションするものです。

通常では、インタラクションやアニメーション、別のページやビューへのリンクが含まれます。画面サイズやブラウザ設定の急な変化に対応することも多いでしょう。プロダクトマネージャーは正式なコーディングをチームに依頼する前に、コンセプトを確認するためにプロトタイプを使います。

ローファイプロトタイプはユーザーフローを素早く検証するのに役立ちます。一方で、ハイファイなプロトタイプは、ビジュアルデザインやインタラクションデザインがまとまっているのを確認するのに役立ちます。

プロトタイプには、PhotoshopやIllustrator、Sketch、そのほかのビジュアル作成アプリで作ったビジュアルが含まれるかもしれません。また、完成品ではないかもしれませんが、実際のコードが統合されることもあります。

プロトタイプをプロトタイプたらしめるのは、完成品が運用されるプラットフォームにおいて、ステークホルダーが操作できるかどうかなのです。Webサイトを作るならば、そのプロトタイプはさまざまなタイプのブラウザでより良く機能するでしょう。また、スマートフォンのアプリを作るならば、そのタッチの対象はより良く機能するでしょう。

デザインプロセスを昇華させよう

ほとんどのデザインルールは、実はルールではないのです。ワークフローを特定化して、チーム内のコミュニケーションを向上させるためのガイドラインなのです。誰かの「モックアップ」のアイデアに対して納得できないこともあるでしょう。しかし、チームでの合意があればよりスムーズな開発が行えるでしょう。

これはまた、あなたやあなたのチームがどのレベルからでも始められることを意味します。自分のワークフローに必要ないレベルは省きましょう。スケッチが好きでないのなら、すぐにワイヤーフレームを作り始めましょう。すべてをワイヤーフレームと呼びたいなら、そうしてください。

スケッチからワイヤーフレーム、プロトタイプやモックアップへと発展していく背景には、アイディアが固まったときにだけ詳しい段階を追加していくというものがあります。すぐに始めて、改良し、推敲してください。そして構築していきましょう。私たちの無料電子書籍『Prototyping for Product Managers』からもさらに学んでください。


イベント

2017/12/05(火)
Design Thinking Square