ワイヤーフレームとプロトタイプ。これだけは知っておきたいそれぞれの特徴 | アドビUX道場 #UXDojo
エクスペリエンスデザインの基礎知識
ワイヤーフレームとプロトタイプは、どちらもUXデザインのデザイン資料としてよく用いられます。デジタルデザインの世界では、「ワイヤーフレーム」と「プロトタイプ」を交換可能な言葉として使う人も少なくありませんが、両者の間には、はっきりとした違いがあります。まず見た目が違います。伝える情報も異なります。そして、異なる目的で使用されます。
この記事では、それぞれの資料が持つ機能、便利な理由、デザインプロセスのどの場面で役立つかなどを解説します。
ワイヤーフレーム
ワイヤーフレームとは何か？
ワイヤーフレームは、制作物を構成するレイアウトを表現した、静的で低忠実度の（本物っぽさが低い）資料です。単純な形状だけを使い、インターフェースを視覚的に表現します（ワイヤー線でつくったように見えることがその名前の由来です）。ワイヤーフレームは、3つのことを伝えるために使われます。まず構造、すなわち要素がどのように配置されるか、次にコンテンツ、何がページに表示されるか、そして機能、どのようにインターフェースが動作するか、です。
ある意味、ワイヤーフレームは未来についての物語です。チームが、現在の状況、将来のビジョン、そこへ至るまでの過程を共有するための助けになります。その点で、ワイヤーフレームは、建物の見取り図に似ています。見取り図を見れば、それぞれの部屋の広さや配置は分かりますが、完成した建物の様子までは分かりません。
ワイヤーフレームの見た目は？
ワイヤーフレームの見た目は完成した成果物とは全く異なります。ワイヤーフレームの視覚的な情報は、ごく限られたものです。画像やテキストなどの、デザイン要素の大半は含まれません。省略された箇所には、画像なら中に×印が記された箱を置く、というように、プレースホルダーが置かれます。こうしたプレースホルダと線（ワイヤー）、そしてグレースケールのカラーパレットが、情報構造、コンテンツ、レイアウトを伝えます。プロジェクトの要件によっては、デザイナーや開発者により分かりやすくなるよう、実際の画像やテキストが使われることもあります。
ワイヤーフレームの視覚的な情報は、通常グレースケールの色使いと、線と、デザイン内の要素を表す図形 出典： Adobe Stock
ワイヤーフレームの主要な目的は何か？
ワイヤーフレームの役割は、デザイン作業を始める基礎となり、方向性の指針となることです。チームが作業を始める前に適切に計画する機会を与え、何かを見逃していたために起こる手戻りのリスクを減らします。
また、ワイヤーフレームは、デザイナーがビジュアルデザインの細部にはまり込む前に、全体的なデザインの方向性をすばやく確認するのに役立ちます。視覚的な要素が限られていることで、細かな点に気を取られずに、主要なデザイン上の決定事項だけに集中することが可能になります。
ワイヤーフレームは、いつつくるべきか？
ワイヤーフレームはプロジェクトの早い時期、ビジュアルの詳細に手をつける前に作成されるべきものです。この段階では、大きな変更もずっと効率的に行えます。ワイヤーフレームは比較的短時間で容易に制作できるため、デザイナーは、コンテンツの位置を変えたり、グループ化してまとめたり、要素を追加したり削除したりと、様々な試みを行えます。
ワイヤーフレームの利点
- コミュニケーションを助ける
一枚の絵は千の言葉に勝ります。ワイヤーフレームは、アプリやサイトがどんな画面を持つのかを、関係者に明確に伝えます。ワイヤーフレームがプレースホルダーだらけの状態でも、関係者はどのようなデザイン上の決定が行われたのかを、見て知ることができます - 仕様書として使える
ワイヤーフレームは、機能仕様を参照する目的でしばしば使用されます。デザイン資料として全てのチームメンバーに共有して、認識を揃えることができます
ワイヤーフレームの持つ制限
ワイヤーフレームはユーザーテスト向きではありません。初期の調査段階で簡単なフィードバックを集める役には立つかもしれませんが、静的な資料でユーザー体験全体を評価することはとても困難です。
また、ワイヤーフレームは、アニメーションを使った効果や、複雑なトランジション、ジェスチャーなど動きのデザインを伝える助けにはなりません。ワイヤーフレームでできるのはインタラクションの開始と終了の状態の記述で、その途中の状態の表現はできません。動的な効果を表現するなら、操作可能なプロトタイプを使い、具体的に見せることで、相手が想像しなくてもすむようにするべきです。
ワイヤーフレームの作成手段
- スケッチ
ワイヤーフレームは手書きで簡単に作成できます。手書きのスケッチはすばやく何種類も描くことができます。スケッチは、様々なアイデアをすばやく視覚化し、異なるレイアウト等を検討する必要があるブレインストーミングに特に向いています。たくさんのアイデアを紙に描くほど、デザインをスムーズに始められるでしょう
スケッチは、新しいインターフェースデザインのアイデアをすばやく視覚化する 出典： Nicholas Swanson
- グラフィックデザインツール
ワイヤーフレームをPhotoshopやIllustratorのようなソフトウェアを使って制作するのは簡単です
Adobe Illustratorで作成されたワイヤーフレーム 出典： Mackenzie Child
- UXデザインツール
UXデザインに特化したツールを使う利点は、ワイヤーフレームからプロトタイプへの移行の容易さです。Adobe XDは、ツール内でワイヤーフレームを低忠実度のプロタイプに即座に変換します。
Adobe XDはワイヤーフレームからプロトタイプに移行できる 出典： Tom Green
ワイヤーフレームを活用するヒント
- 単純さを心がける
ワイヤーフレームが単純であることは、とても重要です。ワイヤーフレームの目的はページの構造を示すことで、詳細は後から追加します。ワイヤーフレームは素早くつくるべきものです - 短く的確な説明文
ワイヤーフレームは最も参照される資料です。チームに見せる前には説明文を追加しましょう。説明文は、デザインの背景を示し、重要なアイデアを素早く伝えます - フィードバックを求める
ワイヤーフレームを共有したら、チームからのフィードバックを催促しましょう。ワイヤーフレームを確実に改善することができるでしょう
プロトタイプ
プロトタイプとは何か？
プロトタイプは、インタラクティブな体験を構築することで、アイデアを探求する行為です。プロトタイプは比較的本物に近い見た目を持ち、ユーザーのインターフェース操作を模倣します。プロトタイプは、デザイナーが、自分がデザインするものに実際に触れる最初の段階です。
プロトタイプの見た目は？
ワイヤーフレームの見た目はたいてい似ていますが、プロトタイプの見た目は様々です。プロトタイプは、ペーパープロトタイプから、実際に開発した物まで、様々な形をとります。
プロトタイプは制作物への忠実度によって、。主に、低忠実度（ローファイ）と高忠実度（ハイファイ）の2種類に分けられます。プロトタイプの忠実度は、ビジュアルおよび機能の作りこみの程度を指します。
- 低忠実度のプロトタイプは、コンセプトを大雑把に表現したもので、デザイナーが作業の早期に確認するのに役立ちます。低忠実度のプロトタイプは、一般的に機能が限定されています。スケッチやワイヤーフレームをクリック可能にしたものは、低忠実度のプロトタイプの例です
低忠実度のプロトタイプは、ワイヤーフレームにインタラクションを追加してつくられる。クリック可能になったワイヤーフレームは、ページ間を移動して、遷移の様子を確認できる 出典： Theresa Choi
- 高忠実度のプロトタイプは、実際のアプリやサイトのような見た目と振る舞いを持つ、操作可能なプロトタイプです。高忠実度ののプロトタイプは、ユーザーにデザインを本物のように感じさせることができます
高忠実度のプロトタイプは、最終的な制作物にできるだけ近い感覚を与えることが目的。見た目や操作性が最終的な体験と十分に似るよう、注意深くつくられるべき
プロトタイプの主要な目的は何か？
プロトタイプは、人が使用するどんな製品にとっても重要です。プロトタイプは、実際に使用することになるものとアイデアの間を埋めます。プロトタイプの目的は、ユーザーが使うインターフェースとのインタラクションを再現することです。プロトタイプはすべてのインタラクションを提供しないとしても、製品の使用感をはっきりさせるための主要なインタラクションは持つべきです。プロトタイプは、デザインのユーザビリティや実現可能性をテストするのに向いています。プロトタイプによるテスト無しでは、実際のユーザーが制作物を使う様子を予測することは困難でしょう。
プロトタイプは、いつつくるべきか？
プロトタイプが必要なタイミングは、制作時のニーズによって異なります。一般的には、実際の開発を始める前に、ビジュアルとインタラクションを同時にデザインしたいときに使われます。
プロトタイプの利点
- アイデアを提示する
操作可能な簡易プロトタイプは、仕様書や文章よりも、アイデアを売り込むのに適しています。プロトタイプを試して制作物の感覚を体験した関係者には、売込みが容易になるでしょう - 制作するものを学ぶ
プロトタイプを制作することで、チームは解決しようとしている問題の理解を深めることができます - コミュニケーションに役立つ
プロジェクト関係者であれ、エンドユーザーであれ、デザイナーの考えと戯れることで、意味のある意見や評価を提供できるでしょう - 使い勝手を検証する
ワイヤーフレームは構造を扱いますが、プロトタイプはユーザビリティを扱います。ユーザーにプロトタイプを見せ、基本フローを実行させると、驚くほどの洞察を得られます。デザイナーは、早い段階から、フローを通じて起こる可能性がある問題を見つけられます - ユーザー調査に役立つ
プロトタイプは対象ユーザーの嗜好をあらわにします。初期にテストすれば、望まれていない解決案を開発してしまって無駄になる時間や予算を削減できます。早い段階で調査をして、ユーザーに最も共感される機能を特定できれば、正しい方向にデザインと開発を進めるのに役立つでしょう
プロトタイプの持つ制限
プロトタイプは資料としては有効ではありません。使い方の理解に努力を要するからです。
プロトタイプの作成手段
- ペーパープロトタイプ
このアナログな手法は紙にページを描きます。インタラクションは、ユーザーの選択に合わせて、人の力で紙を変えて対応します。こうしたプロトタイプは素早く簡単につくることができますが、ユーザーの想像力に大きく頼ることになります。また、インタラクションが持つ問題はあまり発見できないかもしれません
ペーパープロトタイプは、主要なインタラクションの検討に役立つ。ユーザーが紙に描かれた画面をタップしたら、コンピューターの代わりに人がページを取り替える 出典： UX Playground
- プレゼンテーションツール
PowerPointやKeynoteのようなツールを使って、ページ間を遷移するごく基本的なプロトタイプを作成できます。提供できる操作性は限られます - UXデザインツール
UXデザインに特化したツールはプロトタイプ構築用の様々な機能を提供します。多くのツールは、更にコラボレーション機能も提供します。すなわち、チーム内の異なるメンバーが同じドキュメントに対してコメントして、お互いにフィードバックを交換できます
高忠実度のAdobe XDでつくられたインタラクティブなプロトタイプがiPhoneに表示されている
- ネイティブのプロトタイプ
ネイティブのプロトタイプとは、コーディングしてつくるプロトタイプです、AndroidアプリならJava、iOSアプリならSwift、WebならHTML/CSS/Javascriptを使うということです。従って高い技術的習熟度が必要とされます。ネイティブのプロトタイプは、可能な限り、実機で実際のデータを使って行うべきです。GPSを使うモバイルアプリのように、デザインツールのプロトタイプでは対応が困難な技術を使用する場合に、ネイティブのプロトタイプは有効です
プロトタイプを活用するヒント
- ひとつのアイデアにしがみ付かない
最初に良さそうなアイデアが見つかったら、それを磨き上げるのは魅力的にみえるでしょう。しかし、それは最適なプロトタイプの手法ではありません。プロトタイプをつくるときは、できるだけ多くの異なるアイデアを試すのが重要です。種類が増えると、チームは問題領域についてより多くを学ぶことができ、見つける解決案も増えます - 適切な忠実度を選択する
ジャレド・スプールは彼の記事Five Prevalent Pitfalls when Prototypingの中で、誤った忠実度で作業することは、プロトタイプで陥りやすい過ちだと述べています。忠実度の選択は、テストの目的や、デザインの完成度や、利用可能なリソースに応じて行うべきです - 改良を繰り返し積み重ねる
プロトタイプのひとつの手法は、低忠実度の簡易プロトタイプから始め、少しずつ高忠実度へと変えていくことです（このような手法はアップルでも採用されています）。制作過程がユーザーからのフィードバックに直接影響されるため、最終的な成果物がより洗練されたものになる可能性が高まります - 再利用可能なプロトタイプをつくる
一部の例外を除けば、プロトタイプの作成は時間もコストもかかるデザイン作業です。そのため、再利用可能なプロトタイプの作成を心がけることが望ましいでしょう
まとめ
ワイヤーフレームとプロトタイプはそれぞれ機能が異なりますが、どちらもチームが良い成果物をつくるのに役立つツールです。デザインを成功させるには、デザインプロセスに投資し、ワイヤーフレームとプロトタイプをワークフローの根幹として使いこなすことが重要です。ただし、その際に忘れてはならないのは、常にユーザーを念頭にワイヤーフレームやプロトタイプをつくることです。ユーザーこそがデザインが存在する理由であるべきです。そうすれば、よりユーザーに愛されるものをデザインすることができるでしょう。
この記事はEverything You Need To Know About Wireframes And Prototypes（著者:Nick Babich）の抄訳です