プロトタイプとは: ファンクショナルUXへの道
(原文) What Is a Prototype: A Guide to Functional UX
プロトタイプは、デザインプロセスの中で最も重要なステップの一つですが、デザイナーやプロジェクトチームの中には、プロトタイピングを理解していない人もいます。
プロトタイプとは、さまざまな画面を表現する一連のスケッチから、ピクセル単位で完璧な発売前のインターフェースまで、ほぼあらゆるものを指します。
この記事では、プロトタイプとは何かを定義し、さまざまなバリエーションとプロトタイプの作成方法を説明します。また、最も重要なこととして、ユーザーに焦点を当てたUXデザインを維持する方法についても触れます。
プロトタイプとは何か？
「プロトタイプ」の最も基本的な定義は、「発売前のテストに使用される最終製品のシミュレーションまたはサンプル」。最終製品に多くの時間と費用を費やす前に、製品（および製品のアイデア）をテストすることです。
プロトタイプの作成は、発売前にユーザビリティの問題を解決するためには不可欠であり、改善すべき点を明らかにすることもできます。製品アイデアのドラフトが実際のユーザーの手に渡れば、ユーザーがどのように製品を使いたいのかが見えてきます。そうすれば、最初に推測したことを修正することができます。
プロトタイピングの忠実度の簡単な風景（画像クレジット：Fred Beecher、作者:Boxes＆Arrowsの許可を得て使用）
プロトタイプには主に4つの性質があります。
表現—プロトタイプの実際の形式。紙とモバイル、またはHTMLとデスクトップ。
精度—プロトタイプの忠実度で、詳細/洗練/リアリズムのレベルを意味します。
対話性—ユーザーに公開されている機能。たとえば、完全に機能する、部分的に機能する、または表示のみ。
進化—プロトタイプのライフサイクル。一部は迅速に構築され、テストされ、破棄されてから、改良されたバージョンに置き換えられます（これは「ラピッドプロトタイピング」として知られています）。他のものは、最終的に最終製品に進化して、構築および改善される可能性があります。
プロトタイピングに関するよくある誤解のひとつに、プロトタイピングはデザインプロセスの最後に1、2回行えばよいというものがありますが、それは間違いです。UXPinのモットーの一つは、「早く、多くテストする」です。
最初の最も基本的なアイデアであっても、デザインのすべてのイテレーションをプロトタイプ化すべきです。
プロトタイプとは、最終版の外観を持つ単なるベータテストではなく、テストに使用できる製品のあらゆるバージョンを指します。人々が自然に製品を使用する方法について新たな洞察を得ることができるのであれば、それが紙、低忠実度、高忠実度、HTMLであるかどうかは関係ありません。
最も役に立つプロトタイピングの方法論
上で述べたように、プロトタイプは多種多様なものになります。この記事では、それらを紙、デジタル、HTMLの3つの一般的なカテゴリーに分けて説明します。
ペーパープロトタイピング
ペーパープロトタイピングは、インターネットが普及する以前から行われていた手法です。デザインの初期段階で、主に製品のアイデアをテストするのに適しています。
紙の上にシンプルな画面を描き、デジタルのインタラクションを模倣するように設定します。このプロトタイプをテストするための一般的な方法は、一人の人間に「製品」を演じてもらい、ユーザーの行動に応じてスケッチを入れ替えるというものです。
低視覚/低機能のペーパープロトタイプ(画像提供：Cathy Fisher)
メリット
速さ-ペーパープロトタイプは5分で作ることができます。これが、紙がアイデアのテストに非常に適している理由です。ブレインストーミングの会議中でもすぐに描くことができ、アイデアが失敗しても大きな損失にはなりません。
安価-必要なのは紙と基本的な事務用品だけなので、ペーパープロトタイプは実質的に無料です。(精度を上げたければ、ステンシルや携帯電話のクレードルなどの専用機器を購入することもできますが、これらはオプションです)
チームビルディング-ペーパープロトタイプは作るのが楽しいので、チームの絆を深めることができます。みんなで協力して手を動かすことで、団結力が高まるのです。
ドキュメンテーション-デジタルやHTMLのプロトタイプとは異なり、ペーパープロトタイプは、将来のイテレーションの参考資料として手元に置いておくことができます。メモや修正を書き込むこともできるので、必要なものを一箇所にまとめることができます。
デメリット
非現実的-どんなに技術的に優れていても、ペーパープロトタイプはデジタルシステムの代用にはなりません。収集されるユーザビリティデータには限度があります。
偽陽性-ペーパープロトタイプでは、想定していたものを実際にテストできないことがあります。人々は、プロトタイプが表現するアイデアではなく、プロトタイプ自体にフィードバックするかもしれません（例：ボックスが均一でない）。
直感的な反応が得られない-ペーパープロトタイプは、ユーザーの想像力に頼っているため、刺激を見てから反応するまでに時間がかかります。UXを成功させるためには、この「直感的な」反応が重要です。
これらのメリットとデメリットを考慮して、私たちは、プロジェクトの大半がまだ抽象的である初期段階においてのみ、ペーパープロトタイピングを推奨しています。デザインプロセスが進めば進むほど、ペーパープロトタイピングと最終製品とのギャップは大きくなります。
ペーパープロトタイピングの詳細については、以下の参考資料をご覧ください。
ユーザビリティテスト手法としてのペーパープロトタイピング by Justin Mifsud
UXデザインにおける紙の上手な使い方 by Marcin Treder
iPhoneのユーザーインターフェースデザイン、ペーパープロトタイピングのデザイン（ビデオ)
印刷可能なペーパープロトタイピングテンプレート（提供：Tripwire Magazine)
デジタルプロトタイピング
デジタルプロトタイプは、最も一般的なプロトタイピングの形態であり、ほとんどのインターフェース要素を正確にテストするのに十分なリアリティを備えています。また、HTMLプロトタイプよりもはるかに簡単に作成できます。
デジタルプロトタイプは、プロトタイピング専用のアプリケーションやソフトウェアを使って作成することができます。PowerPointやKeynoteなどのプレゼンテーションソフトを使って、簡単なデジタルプロトタイプを作ることもできます。
Yelpのデザイン変更の際に作成されたUXPinの低忠実度プロトタイプ
メリット
現実的なインタラクション-最終製品に匹敵する環境で、ユーザーがどのようにインタラクションするかをテストすることができます（忠実度によります）。
柔軟性-早期かつ頻繁にテストを行うことができます。初期のプロトタイプから始めてデザインプロセスが進むにつれ、徐々に高度なものにしていくことができます。
スピード-ペーパープロトタイプは有利かもしれません。しかし、コンピュータ化されたインターフェイスが必要な場合は、デジタルプロトタイプの方がHTMLよりも速いです。スピードはアプリによって異なりますが、ほとんどのアプリはユーザーフレンドリーなインターフェースを持ち、インタラクティブエレメントやドラッグ＆ドロップなどの機能を備えています。
デメリット
学習曲線-プロトタイプを作成する前に、ソフトウェアを学習する必要があります。しかし、ほとんどの場合、ユーザーフレンドリーなインターフェイスを備えているので、それほど難しいことではありません。
コードへの移行-ソフトウェアによっては、デザインをコードに変換する際に、互換性のない要素が失われる可能性があるため、ゼロから修正しなければならないことがあります。
プロトタイプの成功はソフトウェアに左右され、デザイナーによって好みが分かれるところです（もちろん、私たちは少し偏見を持っていますが）。より実践的なアドバイスについては、以下のリンクを参照ください。
10分間のラピッドプロトタイピングレッスン by Marek Bowers
PowerPointでインタラクティブなプロトタイプを作成する by Amir Khella
Keynoteでインタラクティブなプロトタイプを作成する by Amir Khella
HTMLプロトタイピング
最後のカテゴリーであるHTMLプロトタイピングは、コーディングに自信のあるデザイナーにのみお勧めします。HTMLプロトタイピングには多くのメリットがありますが、技術的なコストがかかります。
HTMLで作られた低視覚/高機能のプロトタイプ(画像クレジット：Mike Hill)
メリット
最終製品のための技術的基盤-使い捨てのプロトタイプではないことを前提に、HTMLプロトタイプは最終コードのための基礎を最初から提供します。
プラットフォームにとらわれない-ほぼすべてのOSやデバイスでプロトタイプをテストすることができ、ユーザーは外部のソフトウェアを実行する必要がありません。
低コスト-HTMLプロトタイプは、プロセスのステップを省略することができ、プロトタイプソフトウェアを購入する必要はありません。資金に余裕がなく、言語を理解している場合には、最も経済的な選択肢となるでしょう。
デメリット
デザイナーのスキルに左右される-HTMLプロトタイプの出来は、あなたのコーディング能力にかかっています。もし自分に自信がないのであれば、便利なプロトタイピングソフトウェアを利用したほうがいいでしょう。
創造性を阻害する-コードに直接飛び込むということは、基本的にデザインとコーディングの2つの作業を同時に行うことになります。一方、プロトタイピングソフトウェアでは、創造性を発揮する余地があり、内蔵のライブラリを使って新しいアイデアを提案することもできます。
HTMLプロトタイピングについては、以下の記事を参考にしてみてください。
コードでデザインする by Andy Fitzgerald
ラピッドプロトタイピングの利点 by ZURB
プロトタイプ作成のプロセス
プロトタイピングに最適なプロセスはありませんが、いくつかのプロセスが他のプロセスよりも優れていることは確かです。以下に、それぞれのニーズに合った3つの効果的なプロセスを紹介します。
(注：低忠実度から高忠実度に移行する際には、必ずプロトタイプをテストすることをお勧めします。)
ローファイ・デジタル⇒ハイファイ・デジタル⇒コード
これは多くのデザイナーが行っている標準的なプロセスで、UXPinのデザイン変更の際にも使用しました。
ローファイ・デジタル・プロトタイプ（デジタルツールで作成したインタラクティブなワイヤーフレームのような単純なもの）は、ナビゲーションやIAなどの重要な要素を早い段階でテストします。つまり、変更が難しくなる前にフィードバックを組み込むことができるのです。
次にハイファイ・プロトタイプでは、より最終製品に近いものについて詳細なフィードバックを行い、コーディング時にはすべてが整っているようにします。
Yelpのリデザイン演習で作成された高忠実度プロトタイプ(大きな画像を見る)
紙⇒ローファイ・デジタル⇒コード
この方法は、時間とリソースを節約できる非常に効率的な方法であり、特に実験的なプロジェクトに有効な方法です。
手元に関連データがあまりない場合は特に、ペーパープロトタイプはプロジェクトのコンセプトを考える上で大いに役立ちます。軌道に乗るまでには、ローファイ・プロトタイプを使ってコンセプトを実際にテストします。リソースに余裕があれば、ハイファイ・プロトタイプを作成することもできますが、そうでなければ、そのままコーディングに進みます。
Yelpのデザイン変更作業で作成された低忠実度プロトタイプ
HTMLプロトタイピング⇒コード
コーディングをよく知っている人なら、このプロセスは非常に合理的です。
基本的に、プロトタイプはデザインプロセスと並行して進化し、最終製品（またはその主要コンポーネント）にシームレスになります。このプロセスでは、試作品を捨てたり、余分な手順やソフトウェアのコストをかけたりすることなく、無駄を最小限に抑えることができます。
ただし、HTMLプロトタイプのデメリットとして、デザイナーのコーディングスキルに依存することや、クリエイティブな自由度が制限されることなどを覚えておいてください。
参考文献
この記事のポイントは、弊社の無料デザインブック「The Ultimate Guide to Prototyping」から抜粋したものです。
この包括的なガイドでは、プロトタイピングをデザインプロセス全体に組み込む方法から、個々のプロトタイプの追加説明、10のプロトタイピングのベストプラクティス、ユーザビリティテストに関するアドバイス、多くのツールやリソースまで、あらゆるコーナーを網羅しています。さらに、PhotoshopやSketchのファイルをインタラクティブなプロトタイプに変換する方法も紹介しています。
プロトタイプの全容を知りたい方は、無料の電子書籍をダウンロードしてください。
Discussion