プロトタイプの忠実度。ローファイ・プロトタイプ(簡易版)とハイファイ・プロトタイプ(本物っぽい版)を正しく使い分ける | アドビUX道場 #UXDojo

by akihiro kamijo

Posted on 01-29-2018

連載

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

急成長を続けるデジタル製品業界ではユーザー体験がますます重要になっています。デザインに注力している企業の成長は明らかです。プロトタイプはUXデザインの成功には欠かせないものですが、デザインプロセスの最も混乱しがちな箇所のひとつでもあります。プロトタイプが分かりにくい理由は、それが紙に描いたスケッチから実際に機能する本物そっくりのアプリまで、ほぼ何でもアリなためです。

この記事では、プロトタイプに関する以下の疑問に答えます。

プロトタイプとは何か?

基本的に、プロトタイプはデザインの意図の表現です。プロトタイプを使うことにより、デザイナーはデザインを提示して、それを実際に使う様子を見ることができます。特にデジタル製品では、プロトタイプは、ユーザーとインターフェースのインタラクションの再現を指します。必要性に応じて、アプリ全体や、一部のインタラクションだけを再現するものがつくられます。

プロトタイプは最終的な製品の動作を再現したもの。開発チームが、操作性や機能性を確認できる

多くの人が、プロトタイプを、スケッチやワイヤーフレームやモックアップと混同します。インタラクションの再現がプロトタイプの本質であり、静的な制作物であるスケッチ、ワイヤーフレーム、モックアップは、プロトタイプと区別されるべきです。

なぜプロトタイプが必要なのか

プロトタイプをつくる第一の目的は、デザインまたは製品のアイデアを、実際に制作する前に試すことです。制作物の成功は、事前テストしたかに直接左右されます。いったん製品として公開されれば、人々はそれを使い始め、そして評価します。もしそれが最初の評価の機会なら、否定的なフィードバックは避けられないでしょう。従って、一般公開する前の調査段階でフィードバックを収集するのは、常により良い選択なのです。

以下の2つがプロトタイプが必要な場面です。

忠実度とは何か?

プロトタイプの忠実度とは、最終的な制作物にどのくらい近いかを指します。プロトタイプは完成品のように見える必要はありません。様々な忠実度のプロトタイプが存在します。

忠実度が関係する領域がいくつか存在します。

プロトタイプの忠実度には数多くの種類がありますが、以下の2つがその両極です。

開発チームは、プロトタイプの目的、デザインの完成度、利用可能なリソースに応じて、プロトタイプの忠実度を選択します。

低忠実度のプロトタイプ

低忠実度のローファイ・プロトタイプは、概要レベルのデザイン案を、すばやく手間をかけずに操作できてテスト可能な制作物にする手段です。ローファイ・プロトタイプの最も重要な役割は、見た目の良し悪しの判断ではなく、機能性の確認です。

ローファイ・プロトタイプの基本的な特徴は以下の通りです。

利点

欠点

標準的な手法

ローファイ・プロトタイプの主要なテクニックは、ペーパープロトタイプとクリック可能なワイヤーフレームの2つです。どちらの手法も、可能な限り短期間で関係者が満足するまでデザイン案を繰り返し検証するのに適しています。

ペーパープロトタイプ

ペーパープロトタイプはデジタルツールを使わずにデジタルインターフェースのプロトタイプをつくる手法です。手書きで、制作するインターフェースの様々な画面を表現します。単純な手法ではありますが、チームで様々なアイデアを模索したり、デザインを改善するのに役立ちます。特にデザインの初期に異なる方針を検討しようとするときには有用です。

単純な画面を紙に描く。このプロトタイプを使ってテストするときは、一人がコンピューター役を演じ、ユーザーの選択に応じてスケッチを取り替えるのが一般的なやり方 出典: UX Playground

この手法の利点は以下の通りです。

ユーザーインターフェースは、すばやくプロトタイプ化してテストできる 出典: Vimeo

ペーパープロトタイプはドキュメントになる。メモや履歴が、実際の制作時に役立つ 出典: inesnorman

ペーパープロトタイプをユーザビリティテストに使う際は、以下の制限への考慮が重要です。

これらの利点と欠点を考慮すると、ペーパープロトタイプは、初期のまだ抽象的な案を形にする段階で使用することが推奨されます。デザインプロセスが進行するにつれて、ペーパープロトタイプと最終的な成果物との差が広がります。

クリック可能なワイヤーフレーム

ワイヤーフレームはページの視覚的な表現の一種で、要素の配置の確認に使われます。ワイヤーフレームは、ローファイ・プロトタイプの素材としても利用できます。クリック可能なワイヤーフレームは、静的なワイヤーフレームをリンクして作成する、インタラクティブなプロトタイプの最も単純な形です。

ペーパープロトタイプ同様、クリック可能なワイヤーフレームは最終的な成果物には見えないでしょう。しかし、ペーパープロトタイプには無い利点を持っています。テスト中に、ファシリテーター役の人を別途用意する必要がないことです。

この手法の利点は以下の通りです。

ローファイ・プロトタイプがプレゼンテーション用のツールで作成できます。

PowerPointやKeynoteを使い、異なるページをリンクしてつなげることで、ごく基本的なプロトタイプを作成できる

プロトタイプ専用のツールを使って作成することもできます。そうしたツールを使う場合の大きな利点は、ツールを持ち変えることなく、ローファイ・プロトタイプから、ハイファイ・プロトタイプに移行できることです。

Adobe XDでつくられたローファイ・プロトタイプの例

高忠実度のプロトタイプ

高忠実度のハイファイ・プロトタイプは、最終成果物に近い見た目と機能を持ちます。ハイファイ・プロトタイプをつくるのは、チームがつくろうとしているものをはっきりと理解していて、ユーザーテストの実施か関係者からの承認が必要な場合です。

ハイファイ・プロトタイプの基本的な特徴は以下の通りです。

利点

欠点

標準的な手法

専用機能を持つツールの使用によるデジタルプロトタイプ

デジタルプロトタイプは、ハイファイ・プロトタイプの最も一般的な形です。今日では、数々の特化したソフトウェアが存在し、デザイナーは、リッチな見た目、インタラクション豊富な機能、複雑なアニメーションなどを作成できます。

Adobe XDでつくられiPhoneに表示された操作可能なハイファイ・プロトタイプ

この手法の利点は以下の通りです。

コーディングによるプロトタイプ

コーディングによるプロトタイプは、最終成果物に近いハイファイ・プロトタイプです。ユーザーが様々な機能を試すするためのインタラクティブなプログラムはその例です。このプロトタイプは、コーディングスキルに自信があるデザイナーにお勧めです。

この手法の利点は以下の通りです。

終わりに

もし優れたユーザー体験を提供することがプロジェクトの目的であるなら、プロトタイプはデザインプロセスの一部に必要です。その際、最も効果的なプロトタイプ手法を選ぶことが重要です。必要性に応じて、得られるものを最大化し、かかる手間を最小化するテクニックを選びます。プロトタイプによるテスト結果を反映すれば、全体的に改善されたデザインができあがるでしょう。

この記事はPrototyping 101: The Difference between Low-Fidelity and High-Fidelity Prototypes and When to Use Each(著者:Nick Babich)の抄訳です

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

Products: