プロトタイプの忠実度。ローファイ・プロトタイプ（簡易版）とハイファイ・プロトタイプ（本物っぽい版）を正しく使い分ける | アドビUX道場 #UXDojo
エクスペリエンスデザインの基礎知識
急成長を続けるデジタル製品業界ではユーザー体験がますます重要になっています。デザインに注力している企業の成長は明らかです。プロトタイプはUXデザインの成功には欠かせないものですが、デザインプロセスの最も混乱しがちな箇所のひとつでもあります。プロトタイプが分かりにくい理由は、それが紙に描いたスケッチから実際に機能する本物そっくりのアプリまで、ほぼ何でもアリなためです。
この記事では、プロトタイプに関する以下の疑問に答えます。
- プロトタイプとは何か？それはいつ必要か？
- プロトタイプの忠実度とは何か？低忠実度と高忠実度のプロトタイプの違いは何か？
- プロトタイプ構築に役立つテクニックは何か？
プロトタイプとは何か？
基本的に、プロトタイプはデザインの意図の表現です。プロトタイプを使うことにより、デザイナーはデザインを提示して、それを実際に使う様子を見ることができます。特にデジタル製品では、プロトタイプは、ユーザーとインターフェースのインタラクションの再現を指します。必要性に応じて、アプリ全体や、一部のインタラクションだけを再現するものがつくられます。
プロトタイプは最終的な製品の動作を再現したもの。開発チームが、操作性や機能性を確認できる
多くの人が、プロトタイプを、スケッチやワイヤーフレームやモックアップと混同します。インタラクションの再現がプロトタイプの本質であり、静的な制作物であるスケッチ、ワイヤーフレーム、モックアップは、プロトタイプと区別されるべきです。
なぜプロトタイプが必要なのか
プロトタイプをつくる第一の目的は、デザインまたは製品のアイデアを、実際に制作する前に試すことです。制作物の成功は、事前テストしたかに直接左右されます。いったん製品として公開されれば、人々はそれを使い始め、そして評価します。もしそれが最初の評価の機会なら、否定的なフィードバックは避けられないでしょう。従って、一般公開する前の調査段階でフィードバックを収集するのは、常により良い選択なのです。
以下の2つがプロトタイプが必要な場面です。
- デザイン案が意図したとおりに受け入れられるか確認したい
大抵の場合、実際のユーザーに案を試すのは容易です。操作可能なデザイン案をユーザーに渡せば、それをどのように使いたがるかを確認できるでしょう。フェードバックに基づいて、最初の案を調整できます。 - 人々が使いこなす上で問題が無いかを確認したい
プロトタイプは、操作性の問題の発見と解決にも役立ちます。テストは改良の必要な箇所を明らかにするでしょう。プロトタイプの制作とテストを繰り返し、十分に使いやすくなるまでデザインを修正します。
忠実度とは何か？
プロトタイプの忠実度とは、最終的な制作物にどのくらい近いかを指します。プロトタイプは完成品のように見える必要はありません。様々な忠実度のプロトタイプが存在します。
忠実度が関係する領域がいくつか存在します。
- ビジュアルデザイン
- コンテンツ
- インタラクション
プロトタイプの忠実度には数多くの種類がありますが、以下の2つがその両極です。
- 低忠実度（ローファイ・簡易なもの）
- 高忠実度（ハイファイ・本物に近いもの）
開発チームは、プロトタイプの目的、デザインの完成度、利用可能なリソースに応じて、プロトタイプの忠実度を選択します。
低忠実度のプロトタイプ
低忠実度のローファイ・プロトタイプは、概要レベルのデザイン案を、すばやく手間をかけずに操作できてテスト可能な制作物にする手段です。ローファイ・プロトタイプの最も重要な役割は、見た目の良し悪しの判断ではなく、機能性の確認です。
ローファイ・プロトタイプの基本的な特徴は以下の通りです。
- ビジュアルデザイン
要素の形や、基本的な視覚的階層など、デザインの一部の視覚的な要素のみを含む - コンテンツ
画面に含まれる主要な要素のみを含む - インタラクション
人手を使って動きを再現する。デザインを理解している人がコンピューターの代わりをし、デザインの状態をその場で置き換える。PowerPointやKeynoteのようなアプリが使われることもある
利点
- 低コスト
ローファイ・プロトタイプは、低いコストで作成できる - 短時間
ローファイ・プロトタイプは数分で作成可能。いくつもの案を試すのも容易 - 協業しやすい
グループ作業に向いている。特別なスキルを必要としないため、デザイナーでなくてもアイデア形成に積極的に参加できる。デザイン作業に多くの人を巻き込める - 明確化
関係者が、プロジェクトの方向性を明確に把握できるようになる
欠点
- テスト時の不明瞭さ
ローファイ・プロトタイプを使ったテストは、どこが操作可能か参加者に分かりにくい。ローファイ・プロトタイプはユーザーの想像力に大きく頼るため、テスト結果が制限される - 限られたインタラクション
ローファイ・プロトタイプでは、複雑なアニメーションやトランジションの再現ができない
標準的な手法
ローファイ・プロトタイプの主要なテクニックは、ペーパープロトタイプとクリック可能なワイヤーフレームの2つです。どちらの手法も、可能な限り短期間で関係者が満足するまでデザイン案を繰り返し検証するのに適しています。
ペーパープロトタイプ
ペーパープロトタイプはデジタルツールを使わずにデジタルインターフェースのプロトタイプをつくる手法です。手書きで、制作するインターフェースの様々な画面を表現します。単純な手法ではありますが、チームで様々なアイデアを模索したり、デザインを改善するのに役立ちます。特にデザインの初期に異なる方針を検討しようとするときには有用です。
単純な画面を紙に描く。このプロトタイプを使ってテストするときは、一人がコンピューター役を演じ、ユーザーの選択に応じてスケッチを取り替えるのが一般的なやり方 出典： UX Playground
この手法の利点は以下の通りです。
- 標準的なデザインスキルの活用
スケッチは誰でもできる（自分は出来ないと主張する人でさえも）。そのためペーパープロトタイプは誰もが作れる - 初期のテストを可能にする
後になって対応が困難になる前、早い段階で情報設計などの根本的な問題を発見できる - すばやく実験できる
様々なUI要素を書いて切り抜き、コピーして複製を作り、新しい紙の上に配置して、いろんな案を試せる
ユーザーインターフェースは、すばやくプロトタイプ化してテストできる 出典： Vimeo
- ドキュメントとして利用可能
ペーパープロトタイプは後から参照して利用できる。コメントや修正をページに直接書いたり、上からノートを貼り付けることが可能
ペーパープロトタイプはドキュメントになる。メモや履歴が、実際の制作時に役立つ 出典： inesnorman
- 調整の容易さ
ペーパープロトタイプはテスト実施中の変更も可能。必要だと感じたら、デザインの一部への追加や削除が簡単
ペーパープロトタイプをユーザビリティテストに使う際は、以下の制限への考慮が重要です。
- コンピューター役が必要
ユーザーに加えて、コンピューター役のファシリテーターが必要 - 複雑な操作の再現が困難
見た目やインタラクションが高度なインターフェースでの使用には不向き
これらの利点と欠点を考慮すると、ペーパープロトタイプは、初期のまだ抽象的な案を形にする段階で使用することが推奨されます。デザインプロセスが進行するにつれて、ペーパープロトタイプと最終的な成果物との差が広がります。
クリック可能なワイヤーフレーム
ワイヤーフレームはページの視覚的な表現の一種で、要素の配置の確認に使われます。ワイヤーフレームは、ローファイ・プロトタイプの素材としても利用できます。クリック可能なワイヤーフレームは、静的なワイヤーフレームをリンクして作成する、インタラクティブなプロトタイプの最も単純な形です。
ペーパープロトタイプ同様、クリック可能なワイヤーフレームは最終的な成果物には見えないでしょう。しかし、ペーパープロトタイプには無い利点を持っています。テスト中に、ファシリテーター役の人を別途用意する必要がないことです。
この手法の利点は以下の通りです。
- 既存の資料を再利用できる
デザインプロセスのある時点で、ワイヤーフレーム、もしくはUIデザインを表現した画像が作成されれば、それを利用してクリック可能なフローを作成できる - レイアウト変更が容易
フィードバックに応じてワイヤーフレームを変更するのは容易。プロトタイプへも時間をかけずに反映できる
ローファイ・プロトタイプがプレゼンテーション用のツールで作成できます。
PowerPointやKeynoteを使い、異なるページをリンクしてつなげることで、ごく基本的なプロトタイプを作成できる
プロトタイプ専用のツールを使って作成することもできます。そうしたツールを使う場合の大きな利点は、ツールを持ち変えることなく、ローファイ・プロトタイプから、ハイファイ・プロトタイプに移行できることです。
Adobe XDでつくられたローファイ・プロトタイプの例
高忠実度のプロトタイプ
高忠実度のハイファイ・プロトタイプは、最終成果物に近い見た目と機能を持ちます。ハイファイ・プロトタイプをつくるのは、チームがつくろうとしているものをはっきりと理解していて、ユーザーテストの実施か関係者からの承認が必要な場合です。
ハイファイ・プロトタイプの基本的な特徴は以下の通りです。
- ビジュアルデザイン
インターフェースのすべての要素が含まれ、配置やグラフィックスが実物のように見える - コンテンツ
本物かそれに近いコンテンツを使用する。最終的に表示されるほぼすべてのコンテンツを含む - インタラクション
実際に近いインタラクションが提供される
利点
- ユーザビリティテストから意味のあるフィードバックを得られる
ハイファイ・プロトタイプは実物のように見えるため、参加者が実際の画面を操作しているかのように振舞う可能性が高い - 特定のUI要素やインタラクションのテストが可能
グラフィック要素の分かりやすさ、トランジションやマイクロインタラクションの確認に使用できる - クライアントへの売込みに使える
関係者へのデモに使用して、最終的に実現される動作を明確に伝える。ハイファイ・プロトタイプは、見た人に期待を抱かせる力がある
欠点
- コストが高い
ローファイ・プロトタイプと比べ、ハイファイ・プロトタイプの作成には時間もお金もかかる
標準的な手法
専用機能を持つツールの使用によるデジタルプロトタイプ
デジタルプロトタイプは、ハイファイ・プロトタイプの最も一般的な形です。今日では、数々の特化したソフトウェアが存在し、デザイナーは、リッチな見た目、インタラクション豊富な機能、複雑なアニメーションなどを作成できます。
Adobe XDでつくられiPhoneに表示された操作可能なハイファイ・プロトタイプ
この手法の利点は以下の通りです。
- デバイス用の最適化
多くのソフトウェアが、デスクトップ上のブラウザ内やモバイルデバイスでのプレビューをサポートする。デザイナーが様々な種類のデバイス上での最適なレイアウトを模索するのに役立つ - ユーザビリティテスト時の分かりやすさ
ハイファイ・プロトタイプを使ったテストでは、デザイナーは観察に集中できる。画面コンセプトの説明に時間を割くことは不要になる
コーディングによるプロトタイプ
コーディングによるプロトタイプは、最終成果物に近いハイファイ・プロトタイプです。ユーザーが様々な機能を試すするためのインタラクティブなプログラムはその例です。このプロトタイプは、コーディングスキルに自信があるデザイナーにお勧めです。
この手法の利点は以下の通りです。
- 実行環境の制限の確認
コーディングにより、デザイン対象のプラットフォームの実際の性能や制限を知ることができる - 効率
コーディングによるプロトタイプは、最終的に開発するアプリのベースとして利用できる場合がある。もし、プロトタイプのコードを再利用できたら、開発に必要なコストと時間の削減につながる。ただし、プロトタイプは速度（人々が試せるものを短時間でつくること）が重要で、コードの再利用が目的ではない点には留意
終わりに
もし優れたユーザー体験を提供することがプロジェクトの目的であるなら、プロトタイプはデザインプロセスの一部に必要です。その際、最も効果的なプロトタイプ手法を選ぶことが重要です。必要性に応じて、得られるものを最大化し、かかる手間を最小化するテクニックを選びます。プロトタイプによるテスト結果を反映すれば、全体的に改善されたデザインができあがるでしょう。
この記事はPrototyping 101: The Difference between Low-Fidelity and High-Fidelity Prototypes and When to Use Each（著者:Nick Babich）の抄訳です