Post Image

プロトタイプとは何か?ファンクショナルUXへの道

By tomotaka@xenon.io on 14th 12月, 2021
What Is a Prototype
プロトタイプはデザインプロセスの中で最も重要なステップの一つですが、デザイナーやプロジェクトチームの中にはプロトタイプに戸惑う人もいます。 よくある誤解はデザイナーがモックアップをプロトタイプと呼んでいることです。プロトタイプとは一連のスケッチでもなければ、発売前のピクセル単位の完璧なインターフェースでもありません。 この記事ではプロトタイピングとは何かを定義し、さまざまなバリエーションを説明します。またクリッカブルなユーザーインターフェースを作る方法、そして最も重要なこととして、プロトタイプがどのようにユーザーエクスペリエンスを最適化するかをご紹介します。

プロトタイプとは何か?

プロトタイプとは、”発売前にUXチームがテストに使用する、最終製品のシミュレーションまたはサンプルバージョン “のことです。 プロトタイプの目的はアイデアをステークホルダーと共有し、最終的に最終デザインをエンジニアリングチームに渡して開発する前にアイデアをテストして検証することです。 プロトタイプはユーザビリティテストで参加者と共にユーザーのペインポイントを特定し、解決するために不可欠です。プロトタイプをエンドユーザーと一緒にテストすることでUXチームはデザインプロセスの中でユーザーエクスペリエンスを視覚化し、最適化することができます。 エンジニアリングにはコストがかかり、最終製品に変更を加えることはチームが予想しているほど簡単ではありません。そのため、デザインプロセス中にエラーを発見し修正することは非常に重要です。 プロトタイプには主に4つの観点における品質があります。
  • Representation(表現) – プロトタイプそのもの、つまり紙とモバイル、またはHTMLとデスクトップ。
  • 精度 – プロトタイプの忠実度、つまりディテールのレベル(低忠実度または高忠実度)。
  • インタラクティブ性 – ユーザーに開放された機能。
  • 進化 – プロトタイプのライフサイクル。あるものはすぐに作られテストされ捨てられ、その後改良されたバージョンと交換される(「ラピッドプロトタイピング」として知られる)。また作成と改良を繰り返し、最終的に最終製品へと進化するものもあります。
また、プロトタイピングはデザインプロセスの最後に1〜2回行えばよいと思われがちですが、そうではありません。 UXPinのモットーの一つは、”Test Early and Test Many “です。 初期の基本的なアイデアであっても、デザインのすべての可能な反復をプロトタイプ化するべきです。プロトタイプの作成は最終バージョンのベータテストだけではなく、製品のあらゆるバージョンをテストするべきです。 プロトタイプをテストすることでエンドユーザーがどのように製品を操作するかについて新たな知見が得られれば、時間をかけてフィードバックを収集し、紙、ローフィデリティ、ハイフィデリティ、HTMLのいずれであっても、イテレートする価値があるのです。
最終製品のような外観と機能を備えた高度なプロトタイプを作成できるデザインツールを手に入れましょう。UXPinのパワフルなデザインおよびプロトタイピング機能をお試しいただける14日間の無料トライアルにお申し込みください。

最も役に立つプロトタイピングの方法論

ここでは、ペーパー、デジタル、HTMLの3つのカテゴリーに分けて、プロトタイピングを探っていきます。

ペーパープロトタイピング

ペーパープロトタイピングは、UXチームが協力して多くのコンセプトを迅速に検討するデザインの初期段階に最適です。チームメンバーはシンプルな線や形、テキストを使って手書きでアイデアをスケッチします。美しさではなく、たくさんのアイデアとスピードが重視されます。  
UXチームは紙のスクリーンを床やテーブルの上に置いたりボードに固定したりして、ユーザーフローをシミュレーションします。これらのプロトタイプをテストするための一般的な方法は、一人の人間が「製品」を演じユーザーの行動に応じてスケッチを切り替えることです。
低視覚・低機能のペーパープロトタイプ。 ペーパープロトタイプのメリット
  • 速い – プロトタイプのスケッチは数分でできます。そのため、紙はたくさんのアイデアをテストするのに適しています。ブレインストーミングの会議中であってもすぐにプロトタイプを描くことができるので、アイデアが頓挫しても数分以上は無駄になりません。
  • 安価 – メーカー製のペンと紙があればプロトタイプを作ることができるので、安価で身近なものです。
  • チームビルディング – ペーパープロトタイピングは共同作業であり、多くの場合、チームで楽しく新鮮なアイデアを生み出すことができます。これは素晴らしいチームビルディングのエクササイズであり、これらの自由な発想のセッションはしばしば創造性を刺激します。
  • ドキュメンテーション – チームメンバーは、ペーパープロトタイプの物理的なコピー、メモ、TODOを保管し、将来のイタレーションの際に素早く参照することができます。
ペーパープロトタイプのデメリット
  • 非現実的 – どんなに熟練した技術をもってしても、ペーパープロトタイプはデジタル製品を手書きで表現したものにすぎません。そのためペーパープロトタイプはすぐに描けますが、エンドユーザーとのテストではほとんど、あるいは全く結果が得られません。
  • 誤検出 – ペーパープロトタイプでは、アイデアを正しく検証できないことがあります。紙の上では良いアイデアに見えても、デジタルワイヤーフレームでは効果的に機能しない場合があります。
  • 直感的な反応が得られない – ペーパープロトタイプはユーザーの想像力に頼っているため、刺激を見てから反応するまでに時間がかかります。UXを成功させるためには、この「直感的な」反応が重要です。
これらのメリットとデメリットを考慮すると、ペーパープロトタイピングはデザインの初期段階でのみ行うことをお勧めします。紙からデジタルに移行した後は、同じデザインやユーザーフローのために手書きのプロトタイプを再度作成する必要はありません。 ペーパープロトタイピングの詳細については、以下の参考資料をご覧ください。

デジタルプロトタイピング

デジタルプロトタイピングは、デザイン・プロセスのエキサイティングな部分です。プロトタイプは最終製品に近い形で作成されるため、チームはアイデアをテストし検証することができます。
デジタルプロトタイプには2つのタイプがあります。
  • ローフィデリティ・プロトタイプ:ワイヤーフレームを使用したユーザーフロー
  • ハイフィデリティ・プロトタイプ:モックアップを使用したユーザー・フロー
低忠実度プロトタイプでは、リサーチチームが基本的なユーザーフローや情報アーキテクチャの概要を把握することができます。ハイフィデリティ・プロトタイプでは、より詳細なユーザーインターフェース、インタラクション、ユーザビリティ参加者がどのように製品を操作するかなどをテストします。 デザイナーは、FigmaやAdobe XDなどのデザインツールを使ってプロトタイプを作成します。またデザイナーではない製品チームのメンバーが、パワーポイントやGoogleスライドを使ってユーザー・フローをシミュレーションすることもあります。 UXPinの特徴は、デザイナーが最終製品と同じ外観と機能を持つプロトタイプを作成できることです。 Yelpのデザイン変更作業で作成されたUXPinのローフィデリティプロトタイプ。 デジタルプロトタイプのメリット
  • リアルなインタラクション – ハイフィデリティのデジタルプロトタイプでテストすることにより、UXチームはユーザーが最終製品とどのようにインタラクションするかを見ることができ、ユーザビリティに関する問題を効果的に解決することができます。
  • 柔軟性 – 早期にテストを行い、頻繁にテストを行うことができます。初期のプロトタイプから始めて、デザインプロセスが進むにつれ徐々に高度なものにしていくことができます。
  • スピード – アイデアをテストするにはペーパープロトタイプが一番早いかもしれませんが、ユーザビリティの問題をテストするにはデジタルプロトタイプが一番早いです。製品がエンジニアリングの段階になると、変更にはかなりの時間と費用がかかります。
デジタルプロトタイプのデメリット
  • 学習曲線 – プロトタイプを作成する前にソフトウェアを学び、理解する必要があります。しかし、ほとんどのデザインソフトウェアには同じツールが搭載されているため、ソフトウェアの切り替えは比較的簡単です。
  • コスト – ローフィデリティからハイフィデリティのプロトタイピングへと移行するにつれ、時間と労力のコストが増加します。
プロトタイプが成功するかどうかは、チームが各ユーザビリティ・スタディの明確な目的とKPIを示すかどうかにかかっています。適切な計画がなければ、デザイナーは余計な機能やインタラクションを追加してしまう可能性があります。 デジタル・プロトタイプの作成に役立つリソースをいくつかご紹介します。

HTMLとJavaScriptのプロトタイピング

まれに、より正確な結果を得るためにHTMLとJavaScriptのプロトタイプを作成することがあります。この方法の欠点は、コーディングにかなりの時間と技術的コストがかかることです。 しかしUXPin Mergeではそのようなことはありません。 デザイナー(および非デザイナー)は、最終製品のような外観と機能を持つ、コードベースのハイフィデリティ・プロトタイプを作成することができます。 例えばUXPin Mergeでは、チームはGitリポジトリから取り出したReactコンポーネントやStorybookコンポーネントを使用して、完全に機能するハイフィデリティ・プロトタイプを作成することができます。UXPin Mergeではプロトタイプが最終製品のように機能するため、参加者はボタンやドロップダウンの動作を「想像」する必要がありません。
HTMLを組み込んだ低視覚・高機能のプロトタイプ。(画像提供:Mike Hill氏) HTMLプロトタイピングのメリット
  • 最終製品の機能性 – HTMLプロトタイプは、最終製品の正確なモデルを参加者に提供します。
  • 最終製品の技術的基盤 – HTMLプロトタイプの構築は、研究者に貴重な研究ツールを提供し、開発者に最終製品を構築するための基盤を提供します。
  • プラットフォームにとらわれない – ほぼすべてのOSやデバイスでプロトタイプをテストすることができ、ユーザーは外部のソフトウェアを実行する必要がありません。
HTMLプロトタイピングのデメリット
  • デザイナーのスキルレベルに左右される – HTMLプロトタイプは、あなたのコーディング能力に依存します。コード化されていないプロトタイプは、UXデザインとは関係のないユーザビリティの問題を引き起こす可能性があります。
  • 創造性の阻害 – 使えるプロトタイプを作るために、コーディングには時間と集中力が必要です。デザイナーは、使い慣れたデザインツールを使うのと同じレベルの革新性や創造性を達成できないかもしれません。
HTMLプロトタイピングに関する参考資料をご紹介します。

プロトタイピングのプロセス

プロトタイピングに最適なプロセスというものはなく、製品や用途によって異なります。以下に、最も効果的な3つのプロトタイピング・プロセスをご紹介します。 (注:ローファイからハイファイに移行する際には、必ずプロトタイプをテストすることをお勧めします。)

紙⇒ローファイ・デジタル⇒ハイファイ・デジタル⇒コード

ほとんどのデザイナーは、紙⇒ローファイ・デジタル⇒ハイファイ・デジタル⇒コードのプロセスでプロトタイピングを行いますが、これは私たちがUXPinをデザインした方法でもあります。) UXPinをデザインしたときもそうでした。チームで協力して多くのアイデアを練り、紙の上でワイヤーフレームをスケッチし、デジタルに落とし込む前にユーザーフローを作成します。ここでUXチームは、クレイジーエイトや「どうしたらいいか」という質問など、一般的なブレーンストーミングの手法を用いて、エンドユーザーの気持ちになって考えます。 デジタルプロトタイプ(ワイヤーフレーム)は、デザインプロセスの早い段階で、ナビゲーションや情報アーキテクチャなどの重要な要素をテストします。モックアップに移行する前に、フィードバックをもとにワイヤーフレームを素早く調整することができます。 ナビゲーションや情報アーキテクチャが完成したら、デザイナーは、色やコンテンツ、インタラクション、アニメーションなどを追加して、最終製品に似せたモックアップを作成します。 リサーチャーによるテストが終了したら、UXチームはエンジニアにデザインを引き継ぎ、最終製品を開発します。  

紙⇒ローファイ・デジタル⇒コード

ローファイプロトタイピングからコードに移行することは、最近ではほとんどのチームが使用しない古いアプローチです。ローファイ・プロトタイピングはコストが安い反面、ハイフィデリティ・プロトタイピングで明らかになるユーザビリティ上の問題の多くを捕らえられません。 デザインのスキルを持たない開発者は、デザインツールの使い方を学ぶよりもコーディングをした方が早いという理由で、紙⇒ローファイデジタル⇒コードの方法を使うかもしれません。 このプロセスは上記の例と全く同じですが、チームはハイファイ・デジタルのステップを省略します。
Yelpのデザイン変更作業で作成されたローフィデリティ・プロトタイプ。
Yelpのデザイン変更作業で作成されたハイフィデリティ・プロトタイプ。

HTML プロトタイピング => コード

一人で開発をしていると、初期のプロトタイピングの方法を省略してすぐにコードに取りかかることがあります。アイデアを出し合う相手がいない中で、開発者がいきなりコードに取り組むのは理にかなっていると言えます。 基本的にプロトタイプは基礎を作り、最終製品へと進化していきます。このプロトタイピングの方法は、効率的なワークフローを持つ熟練した開発者にのみ有効です。 優れたデザインスキルを持つデザイナーでも、このプロトタイピング方法は避けた方がいいかもしれません。ローフィデリティ・プロトタイピングとハイフィデリティ・プロトタイピングは、コードを構築・編集するよりも圧倒的に速いからです。  

紙⇒UXPin Merge – ハイフィデリティプロトタイピング⇒コード

UXPin Mergeを使えば、ラピッドプロトタイピングによってUXプロセスを加速することができます。UIコード・コンポーネントを使用して完全に機能するハイフィデリティ・プロトタイプを作成し、最終製品の実物に近いモデルを参加者に提供します。 UXチームは、上述のような標準的なペーパープロトタイピングのプロセスに従います。次に、デザイナーはUXPin Mergeを使って、準備の整ったインタラクティブなUIブロックをキャンバスにドラッグ&ドロップするだけで、ハイフィデリティ・プロトタイプを構築します。その結果、”想像する “必要はありません。プロトタイプは最終製品と同じように動作します。UXPin Mergeのようなコードベースのデザインツールでプロトタイピングを行うことで、エンジニアはベクトルベースのデザインを扱うよりもはるかに早く最終製品を作ることができます。

その他の記事

この記事は無料のeBookからまとめました。The Ultimate Guide to Prototyping. このプロトタイピング入門がお役に立ちましたら、プロトタイプに関する完全な電子書籍をダウンロードされることを強くお勧めします。 The Ultimate Guide to Prototypingには以下の内容が含まれています。 
  • How prototyping fits into the overall design process(プロトタイピングがデザインプロセス全体にどのように影響するか)
  • Additional descriptions of individual prototypes(個々のプロトタイプの追加説明)
  • 10 prototyping best practices(10種類のプロトタイピングのベスト・プラクティス)
  • Advice on usability testing(ユーザビリティテストに関するアドバイス)
  • Tons of tools and resources(膨大なツールとリソース)
Still hungry for the design?

UXPin is a product design platform used by the best designers on the planet. Let your team easily design, collaborate, and present from low-fidelity wireframes to fully-interactive prototypes.

Start your free trial

These e-Books might interest you