プロトタイプの プロダクトデザイン – ９つのヒント

プロトタイプ開発において、適切なツールの使用とベストプラクティスに従うことはUX（ユーザーエクスペリエンス）に影響を与えるため重要になります。本記事では、UXのためのツールを使ってプロトタイプを作成する上でのヒントをご紹介します。

製品開発のデザインワークフローで、デザイナーがエンジニアとの連携を強化するために、UXPin Mergeでインタラクティブなプロトタイプを構築してみませんか？Mergeについてご覧になりたい方はこちら。

１．プロトタイプでテストする機能を把握する

プロトタイプが上手くいくためには、製品の主な特徴を知ることが不可欠です。それには、デザインプロセスの前に以下のようなステップを事前に確認しましょう：

• MVP（最小実行可能製品）でプロトタイプの機能を決定する。
• ステークホルダーの期待値を設定し、コメントを集め、優先順位を特定する。
• 開発者と早くから連携し、機能を検討する。製品作りを難しくするような技術的な制約があれば話し合う。
• デザインプロセスでユーザーのニーズ、ペインポイント、目標が配慮されることを考慮する。

最初から製品の特徴を明確にしておきましょう。これにより、プロトタイプのデザインは最初から明確な方向性を持つことができます。

２．プロトタイプのテスト方法を計画する

 

まずは、セッション１回につき３～５個のタスクをテスト目標にしてください。最初のラウンドでは、全体的なコンセプトとコア機能に焦点を当てましょう。その後に、不可欠ではないけど小さな機能や特定のタスクに移るといいでしょう。

適切なものにまず集中することで、最も重要な質問に対する答えがわかってきます。そのような質問で、テストの目標を確定でき、どこに焦点を当てる必要があるのか分かりやすくなります。

• What（何を）：セッションでテストする要素や目標を選ぶ。
• How（どのように）：合格・不合格のテストベンチマークをはっきりと確定して数値化する。
• Why（なぜ）：プロトタイプの使いやすさ、実現可能性、規模に関する仮説と仮定を確立する。
• Who（だれが）：具体的なテストフェーズの役割と責任を割り当てる。
• When（いつ）：確実に計画通りに進むように、期限とタイムラインの目標を確認する。

多くの人は価値のある機能に集中すべきときに、気づいたら製品全体のプロトタイプを作成していたという状況になりますが、今全体を見なくても、重要でない部分は後でケアすることができますからね。

３．時間がない場合は “ラピッドプロトタイピング” を検討する

ラピッドプロトタイプは、５日間のデザインスプリントを１回で終わらせることができます。このプロトタイピング戦術は、時間的なプレッシャーがあるチームにとって効果的です。つまり、最初のプロトタイプのイテレーションは少し基本的なものかもしれませんが、チームは以下のようなことができるということです：

• １週間ではなく１日で、基本的な製品のプロトタイプを製作する。
• 時間を節約して、次のフェーズに素早く移行する。
• 同じ空間で、急ピッチで、一緒にアイデア出しをする。
• ほとんど速攻テストを開始する。

製品開発チームとデザインチームのメンバーが、１つのホワイトボードで一緒に作業することで生産性が上がり、ツール間を行き来する代わりに１つのデザインツールで共同作業を行うことで、基本的なプロトタイプやテストを記録的な速さで行うことができるのです。

４．製品のプロトタイプの忠実度を決める

プロトタイプが最終製品にどれだけ近いか（高忠実度または低忠実度）を判断する場合、製品開発のどの段階にあるのかを把握しておくことが重要です。製品プロトタイプの忠実度は、デザインするプロトタイプの種類によって違ってきます。

低忠実度（Lo-Fi）プロトタイプは、デザインチームが、どのようなアイデアにもコミットすることなく、低コスト・低労力で可能なソリューションをブレインストーミングするためのものであり、紙、デジタル、またはホワイトボードで出来ます。

高忠実度（Hi-Fi）プロトタイプは、通常、ステークホルダー、スタートアップの投資家、製品をテストするユーザーなどに見せるものであり、最終製品に似た静的なモックアップや、クリックで移動できる機能的なプロトタイプの形をとることが出来ます。

コンポーネントベースのプロトタイプは、見た目が洗練されているだけでなく、完全に機能的でインタラクティブであるため、高い忠実度で、コード化されたデザインライブラリからのインタラクティブなコンポーネントでつくられています。

いいプロトタイピングツールだと、低忠実度から高忠実度までのプロトタイプバージョンをデザインすることができます。つまり、さまざまな忠実度のプロトタイプを提示できるというのは、テスト中に多くのフィードバックや色々な視点を得られるということです。

５．実際にプロトタイプをユーザーにテストしてもらう

 

プロトタイプをテストすることで、問題を早期に発見することができますが、プロトタイプの評価を誰にやってもらうかで、効果的なテストができるかどうかが決まります。デザインチームや製品開発メンバーは、テスト（検証）からインサイトを提供してくれますが、最も重要なフィードバックや意見、そして最も重要な「ユーザーがどう思うか」まではわかりません。

そのため、実際にユーザーに最終製品のプロトタイプのテストをしてもらえば、その製品に何が必要かが明確にわかるでしょう。

• テスト目的を適切に設定すべく、プロトタイプのテストは低忠実度で行くのか、高忠実度で行くのかを早めに決めておく。
• どこでどのようにテストを実施すべきかを把握すべく、ペルソナや想定されるユーザーシナリオを設定しておく。
• 対面でのモデレーター付きテストやユーザビリティテストは、仮説の検証に最適。また、対面式のテストでは、より正確な結果を得ることができ、ユーザーテストプラットフォームを利用することで、幅広い市場へのアクセスができる。

扱うプロジェクトによって、忠実度の度合いが決まります。低忠実度テストは、製品アイデアや新しいスタートアップの開発など、ゼロから始める場合には有効ですが、デザインシステムがすでにある場合、既存製品の新機能のプロトタイプを作るのであれば、UIコンポーネントですぐにテスト可能なプロトタイプを組み立てるといいでしょう。

６．プロトタイプを実際のコンテンツで埋め尽くす

プロトタイプは、より現実的であればあるほどいいです。最終製品で想定される実際のコンテンツで機能や製品のアイデアをテストすることで、より良いフィードバックが得られ、理解が深まり、いいやり取りができますからね。

完成品に組み込まれる可能性のあるコンテンツの多くは、まだ準備が整ってないでしょうが、その代わりに、少なくとも最終製品のコピーやイメージに近いコンテンツを使うことを検討しましょう。

• プレースホルダの文字の使用を避けなければ、ユーザーがわかりづらく感じてしまい、曖昧でただの見本みたいになってしまうので、もし「Lorem ipsum（ロレム・イプサム）…」という言葉をどこかで見かけたら、他のものに置き換える。
• 特にテスターに馴染みがない場合は、画像や視覚的要素を適切に使う。必要なロゴ、画像、アイコンを入手できない場合は、似たような要素を代わりに盛り込むなど、できることはしておく。
• テスト用の文章を作成する人が見つからない場合は、関連するコピーを配置する。関連商品を見てみたり、似たような商品カテゴリのテンプレートコンテンツを利用する。

包括的なテストには、現実的なコンテンツを使ったデザインとプロトタイピングのツールが必要です。テストユーザーに、製品の UI要素をあまり一般的でない形で体験してもらいましょう。そしてその性格を知るヒントを提供し、テストをより簡単に、より効果的に行えるようにしましょう。

７．反復とテストをする

プロトタイプとは、何度も何度も動作を繰り返すことであり、その繰り返しで毎回新たなことがわかり、問題が見つかり、それが改善されていきます。テストを重ねれば重ねるほど、正しい方向に進んでいるという確信がより持てるようになるでしょう。

• プロトタイプテストは、はじめは広い心で受け止める。期待に添えないことも想定し、自分自身を過度に批判しないこと。
• 情報を集め、フィードバックを細かく分析する。テスト結果を細かく見ることで、より早く目標に到達できる。
• 変更を迅速に行い、任意的な修正に振り回されるのを避ける。
• そして、テストを繰り返す。必要であれば何度でも、製品がユーザーのニーズを満たしていると確信できるまでテストを続ける。

８．デベロッパーと連携する

現代のプロトタイプ製品のデザインプロセスでは、デザイナーとデベロッパーの作業が重なることがよくあるため、それが摩擦やトラブルにつながることも少なくありません。なのでここでの最大のポイントは「連携」です。プロトタイプがうまくいくには、製品のデベロッパーと共通の認識を持つことが非常に重要です。

• 特に、デザインの決定やテストの結果が既存のアプリに影響を与える可能性がある場合は、タイムラインの予想を立てる。デベロッパーにいつ回答が得られるかを伝えることで、チームはそれに応じて計画を立てることができる。
• コミュニケーションチャネル、役割、コンタクトポイントを確立することで、当初から効果的なやり取りをする。
• デザイナーとデベロッパーの間で、何があっても「信頼できる唯一の情報源（Single source of truth）」を元に進めていき、これを変更する場合は、全員が認識し、同意した上で進める。「信頼できる唯一の情報源」の確立の仕方を確認する場合はこちら。

良いプロダクトデザインというのは、いつも良い連携によって生まれます。協力と効果的なコミュニケーションは、良いプロトタイプのプロセスの鍵ですが、ありがたいことに、プロダクトデザインや開発プロセスでコードベースの UI 要素を使えるデザインツールがあり、そのツールで、スムーズな連携が実現し、インタラクティブなプロトタイプへの道がひらけます。

そしてこれが最後のポイントに繋がります。

９．適切なプロトタイピングツールを選択する

多くのデザイナーは、プロトタイプのプロセスでツールを複数採用するという間違いを犯していますが、これは、静的なデザインからインタラクティブでコード化されたものへと移行する際にどうしても上手くいかない可能性があります。

UXPin の特徴やリソース、機能により、デザイナーもデベロッパーも、デザイン、プロトタイプ、テストを「オールインワン」で行うことができます。プロトタイプの製品デザインを簡単にするツールなので、一部UXPinの機能をご紹介します：

• 完成品に非常に近い実物そっくりのプロトタイプ
• 高度なインタラクション、変数、またはステートによる、全マイクロインタラクションの提示の実現。
• 製品の外観に似せるだけでなく、デザインシステムに沿った機能を持つ、完全にインタラクティブなプロトタイプ。

UXPinのフィードバックなどの詳細な分析結果を収集、管理、提示できる機能・操作性は革新的なものです。つまり、プロトタイプのテストがより効果的になり、よりターゲットのユーザーが持つニーズを反映できるのです。

プロトタイプのプロダクトデザインを正しく理解しよう

デジタル製品のデザインでは、プロトタイプの効果的なテストが求められますが、プロトタイプは、単に見栄えの良いものよりも、インタラクティブな機能を持つものの方が、うまくいきやすいです。

製品の特徴を理解し、プロトタイプのスキルを上げませんか。製品のデベロッパーとともに、プロトタイプの重点分野を定め、範囲を当初から設定しましょう。そして適切な被験者を集めてテストを行い、現実的なプロトタイプのコンテンツの適切なバランスとともに最適な忠実度を表示します。その製品のプロトタイプに満足できるまで、再テストと反復を繰り返し、あなたやチーム、デベロッパーにとって有効なツールを見つけてください。

デザイナーにとって、デベロッパーに渡す前のテストでは、このインタラクティブなプロトタイプが頼りです。そこで、インタラクティブなプロトタイプを最初から作成するのに役立つツールの１つが UXPinであり、Mergeの技術を搭載することで、デザインプロセスと開発プロセスを思いもよらない方法でつなげることができます。UXPin Merge をご覧になりたい方はこちら。