ワイヤーフレームとプロトタイプ。これだけは知っておきたいそれぞれの特徴 | アドビUX道場 #UXDojo

by akihiro kamijo

Posted on 01-16-2018

連載

エクスペリエンスデザインの基礎知識

ワイヤーフレームとプロトタイプは、どちらもUXデザインのデザイン資料としてよく用いられます。デジタルデザインの世界では、「ワイヤーフレーム」と「プロトタイプ」を交換可能な言葉として使う人も少なくありませんが、両者の間には、はっきりとした違いがあります。まず見た目が違います。伝える情報も異なります。そして、異なる目的で使用されます。

この記事では、それぞれの資料が持つ機能、便利な理由、デザインプロセスのどの場面で役立つかなどを解説します。

ワイヤーフレーム

ワイヤーフレームとは何か?

ワイヤーフレームは、制作物を構成するレイアウトを表現した、静的で低忠実度の(本物っぽさが低い)資料です。単純な形状だけを使い、インターフェースを視覚的に表現します(ワイヤー線でつくったように見えることがその名前の由来です)。ワイヤーフレームは、3つのことを伝えるために使われます。まず構造、すなわち要素がどのように配置されるか、次にコンテンツ、何がページに表示されるか、そして機能、どのようにインターフェースが動作するか、です。

ある意味、ワイヤーフレームは未来についての物語です。チームが、現在の状況、将来のビジョン、そこへ至るまでの過程を共有するための助けになります。その点で、ワイヤーフレームは、建物の見取り図に似ています。見取り図を見れば、それぞれの部屋の広さや配置は分かりますが、完成した建物の様子までは分かりません。

ワイヤーフレームの見た目は?

ワイヤーフレームの見た目は完成した成果物とは全く異なります。ワイヤーフレームの視覚的な情報は、ごく限られたものです。画像やテキストなどの、デザイン要素の大半は含まれません。省略された箇所には、画像なら中に×印が記された箱を置く、というように、プレースホルダーが置かれます。こうしたプレースホルダと線(ワイヤー)、そしてグレースケールのカラーパレットが、情報構造、コンテンツ、レイアウトを伝えます。プロジェクトの要件によっては、デザイナーや開発者により分かりやすくなるよう、実際の画像やテキストが使われることもあります。

ワイヤーフレームの視覚的な情報は、通常グレースケールの色使いと、線と、デザイン内の要素を表す図形 出典: Adobe Stock

ワイヤーフレームの主要な目的は何か?

ワイヤーフレームの役割は、デザイン作業を始める基礎となり、方向性の指針となることです。チームが作業を始める前に適切に計画する機会を与え、何かを見逃していたために起こる手戻りのリスクを減らします。

また、ワイヤーフレームは、デザイナーがビジュアルデザインの細部にはまり込む前に、全体的なデザインの方向性をすばやく確認するのに役立ちます。視覚的な要素が限られていることで、細かな点に気を取られずに、主要なデザイン上の決定事項だけに集中することが可能になります。

ワイヤーフレームは、いつつくるべきか?

ワイヤーフレームはプロジェクトの早い時期、ビジュアルの詳細に手をつける前に作成されるべきものです。この段階では、大きな変更もずっと効率的に行えます。ワイヤーフレームは比較的短時間で容易に制作できるため、デザイナーは、コンテンツの位置を変えたり、グループ化してまとめたり、要素を追加したり削除したりと、様々な試みを行えます。

ワイヤーフレームの利点

ワイヤーフレームの持つ制限

ワイヤーフレームはユーザーテスト向きではありません。初期の調査段階で簡単なフィードバックを集める役には立つかもしれませんが、静的な資料でユーザー体験全体を評価することはとても困難です。

また、ワイヤーフレームは、アニメーションを使った効果や、複雑なトランジション、ジェスチャーなど動きのデザインを伝える助けにはなりません。ワイヤーフレームでできるのはインタラクションの開始と終了の状態の記述で、その途中の状態の表現はできません。動的な効果を表現するなら、操作可能なプロトタイプを使い、具体的に見せることで、相手が想像しなくてもすむようにするべきです。

ワイヤーフレームの作成手段

スケッチは、新しいインターフェースデザインのアイデアをすばやく視覚化する 出典: Nicholas Swanson

Adobe Illustratorで作成されたワイヤーフレーム 出典: Mackenzie Child

Adobe XDはワイヤーフレームからプロトタイプに移行できる 出典: Tom Green

ワイヤーフレームを活用するヒント

プロトタイプ

プロトタイプとは何か?

プロトタイプは、インタラクティブな体験を構築することで、アイデアを探求する行為です。プロトタイプは比較的本物に近い見た目を持ち、ユーザーのインターフェース操作を模倣します。プロトタイプは、デザイナーが、自分がデザインするものに実際に触れる最初の段階です。

プロトタイプの見た目は?

ワイヤーフレームの見た目はたいてい似ていますが、プロトタイプの見た目は様々です。プロトタイプは、ペーパープロトタイプから、実際に開発した物まで、様々な形をとります。

プロトタイプは制作物への忠実度によって、。主に、低忠実度(ローファイ)と高忠実度(ハイファイ)の2種類に分けられます。プロトタイプの忠実度は、ビジュアルおよび機能の作りこみの程度を指します。

低忠実度のプロトタイプは、ワイヤーフレームにインタラクションを追加してつくられる。クリック可能になったワイヤーフレームは、ページ間を移動して、遷移の様子を確認できる 出典: Theresa Choi

高忠実度のプロトタイプは、最終的な制作物にできるだけ近い感覚を与えることが目的。見た目や操作性が最終的な体験と十分に似るよう、注意深くつくられるべき

プロトタイプの主要な目的は何か?

プロトタイプは、人が使用するどんな製品にとっても重要です。プロトタイプは、実際に使用することになるものとアイデアの間を埋めます。プロトタイプの目的は、ユーザーが使うインターフェースとのインタラクションを再現することです。プロトタイプはすべてのインタラクションを提供しないとしても、製品の使用感をはっきりさせるための主要なインタラクションは持つべきです。プロトタイプは、デザインのユーザビリティや実現可能性をテストするのに向いています。プロトタイプによるテスト無しでは、実際のユーザーが制作物を使う様子を予測することは困難でしょう。

プロトタイプは、いつつくるべきか?

プロトタイプが必要なタイミングは、制作時のニーズによって異なります。一般的には、実際の開発を始める前に、ビジュアルとインタラクションを同時にデザインしたいときに使われます。

プロトタイプの利点

プロトタイプの持つ制限

プロトタイプは資料としては有効ではありません。使い方の理解に努力を要するからです。

プロトタイプの作成手段

ペーパープロトタイプは、主要なインタラクションの検討に役立つ。ユーザーが紙に描かれた画面をタップしたら、コンピューターの代わりに人がページを取り替える 出典: UX Playground

高忠実度のAdobe XDでつくられたインタラクティブなプロトタイプがiPhoneに表示されている

プロトタイプを活用するヒント

まとめ

ワイヤーフレームとプロトタイプはそれぞれ機能が異なりますが、どちらもチームが良い成果物をつくるのに役立つツールです。デザインを成功させるには、デザインプロセスに投資し、ワイヤーフレームとプロトタイプをワークフローの根幹として使いこなすことが重要です。ただし、その際に忘れてはならないのは、常にユーザーを念頭にワイヤーフレームやプロトタイプをつくることです。ユーザーこそがデザインが存在する理由であるべきです。そうすれば、よりユーザーに愛されるものをデザインすることができるでしょう。

この記事はEverything You Need To Know About Wireframes And Prototypes(著者:Nick Babich)の抄訳です

Topics: クリエイティブ, UI/UX & Web, UI / Web デザイン

Products: