UXデザイン

プロトタイプとは?作成のポイントや効果的な利用法を解説

プロトタイプとは?作成のポイントや効果的な利用法を解説

プロトタイプとは?プロトタイピングの目的は仮説の検証

プロトタイプとは

プロトタイプとは、原型・試作品などの意味を持つ英単語でソフトウェアやWebサービスでは商品やサービスなどの最低限動く状態の試作品を作りリリース前のテストに使用するものです。優れたUXデザインの実現のためにプロトタイプは開発プロセスの中でも様々なタイミングで活用されます。

プロトタイプの目的

プロトタイプの目的は大きく2つあります

  1. 開発計画しているサービス・製品の試作品を早い段階で顧客視点による評価を行い段階を踏み何度もアイデアをテスト検証ながら改善するため

  2. 計画されている案件のステークホルダー(関係者)にプロトタイプを共有し完成した時のイメージに共通認識を作るため

また、UXデザイン視点では大きく3つプロトタイプのフェーズがあります

  1. 構想の検討

  2. 顧客が認知できるか検討

  3. ワイヤーレベルの見た的な検討&細かいデザイン・文言等のブラッシュアップ

デザインの見た目を洗練させるためにもデザインツールを利用したプロトタイプを作成し、問題点を洗い出すためにプロトタイプを利用してユーザビリティテスト(プロトタイプなどを操作しながら操作性を確認していくテスト)などを実施することがあります。

実装前に顧客に対してテストを実施することにより実装後の手戻りを最小限に抑えることができます。早い段階でのバグや考慮漏れ機能を発見することによって開発全体のコスト的なメリットにもつながります。リスク回避のためにも大事な工程と捉えることもできます。

PSFフェーズとPMFフェーズでのプロトタイピングの違い

PSF(プロブレムソリューションフィット)フェーズ

プロブレムソリューションフィットとは?

顧客が抱えている課題を解決する製品を提供している状態のことです。このPSFフェーズでは、主にビジネスが提供しようと考えているソリューションが実際にユーザーが抱えている問題を解決できるのかをプロトタイピングで検証します。

特に新規事業などでは顧客の課題解決にマッチしているのかをリサーチすることが大事なポイントになってきます。すでに市場に同じようなサービスが展開されていたとしても、その中で顧客の不満や課題を洗い出し最適な解決法を提供することができれば新しいサービスを提供するアイデアにつなげることもでき、ビジネスする上で重要な視点です。

また、起業家の方で「特定の人を幸せにしたくてサービスやプロダクトを作りました」などもよく耳にすることがあると思います。これはPSFの時点で顧客課題に向き合っていたからこそ出てくる発話だと思います。

PMF(プロダクトマーケットフィット)フェーズ

プロダクトマーケットフィットとは?

顧客がいる市場に対して課題を満足させる製品を提供し、サービスを適切な形で提供できている状態です。このPMFフェーズでは、ユーザーはそのサービスに価値を感じ、お金などを払ってでも使いたいか(市場価値)をプロトタイピングで検証のようなイメージです。主に価値検証と市場規模検証、ビジネスモデルの検証などをこのフェーズで行います。

先ほどのPSFの後のフェーズで、特定の顧客が持っている課題ではなく多くのターゲットが同じような課題を持っている状態になります。

どんなに良いサービスでも市場がない場合はビジネスとして成功することは難しいので定量的調査を実施し市場に需要があるのかを深ぼっていくことは大事な観点となります。

仮説が検証できるプロトタイプを最小限の労力で作る

プロトタイプを利用し検証するためには時間がかかるように感じますが、最小限の労力で検証することも可能です。プロトタイプは時間の節約になるのですが、一方で作ることに時間がかかります。労力をかけないためにあるひとつの例としてペーパープロトタイプがあります。

ペーパープロトタイプとは、その名の通り紙に書き出し設計したものです。アイデアを練り、ユーザーフローを設計することができます。紙とペンさえあれば簡単にはじめることもでき、ペーパープロトタイプを使ってユーザビリティテストを実施することでデザイン前・実装前でも仮説検証をすることができます。実装されたプロトタイプと再現性に違いはあるものの、操作の一連の流れを確認し手戻りを少なくすることができるのはペーパープロトタイプの強みであり、アイデアとスピードが重視される方法です。ただ、デメリットとして直感的な操作性などの反応を確認することはできないのでこの手法は初期段階で行うことをおすすめします。

プロトタイピングと検証を素早く繰り返すことが大事

仮説検証を繰り返すことで、品質の高い製品やサービスを提供できます。プロトタイプはスピード感を持って作り、すぐ変更できることが重要です。

早い段階で検証を何度も繰り返すことによって、新たな発見や不具合、想定外の利用方法などを知る機会が広がりチーム内でのコミュニケーションも促進されます。また、ひとつの案のプロトタイプを作るのではなく同時に複数のプロトタイプを並行して作成し、テストしていくのもスピード感を持って仮説検証を進める上で重要なポイントとなります。

また、プロトタイプを作成する過程で遷移をつけている時などデザイナー自身が考慮漏れ画面があることや懸念点を発見することもあります。プロトタイプを作った後は自分を含めた周りの数人に実際に触ってもらい、問題がないか確認してからテストできるように準備するのが良いでしょう。

プロトタイプの種類とそれぞれの使いどころ

ファンクショナルプロトタイプ

ファンクショナルプロトタイプ

ファンクショナルプロトタイプ(Functional prototype)とは、動作のシュミレーションにフォーカスしたプロトタイプです。ユーザーがサービスを本番に近い状態で利用体験が出来るインタラクティブなプロトタイプです。手法としては先ほどお伝えした「ペーパープロトタイプ」や「オズの魔法使い(ウィザード法)」と呼ばれる、システムを人間がまるで完成しているかのように動かし表現できるプロトタイプ技法などがあります。

オズの魔法使い(ウィザード法)の例を出すと、「AIチャットボットの力を使ってXXな課題を解決するサービス」を考えていた場合、AIを開発するのは大変なので開発を始める前に実際にユーザーに利用してもらうことによってニーズを理解するためにも表面上のみプロトタイプを用意し、被験者にAIチャットボットとやりとりしてもらうことによって価値検証をすることもできます。

この場合は、AIチャットボットとして回答する「人」が別室にいて被験者がプロトタイプを利用して質問してくる内容に対して、別室にいる人間がプロトタイプ上に返信をして被験者の反応を見て価値を感じるか確認していく手法です。

デザインプロトタイプ

デザインプロトタイプ(Design prototype)とは、ファンクショナルプロトタイプにデザインを加えたものです。デザインツールを利用しワイヤーフレームからデザインを忠実に再現していきます。オンラインのウェブサービスなどの場合、わかりやすいインターフェイスになっているか、ユーザーが迷わない表現になっているかなど検討していきます。

サービス対象が商品の場合はこのタイミングで3Dプリンターなど使用してリアルなプロダクトを作成することもあります。デザインが入ることによりユーザビリティ上の課題を改善し、ユーザービリティーテストでの再現度が上がります。

コンテクスチュアルプロトタイプ

コンテクスチュアルプロトタイプ(Contextual prototype)とは、コンテクスチュアル(文脈的)なプロトタイプのことで、ユーザーが認知できるか検討するためのプロトタイプです。

ユーザーがどんなシーンでサービスを使うのかイメージできる動画などを利用して、サービス・製品を理解してもらえるか、どのようなイメージを持つか確認します。ユーザーがプロダクトを疑似体験することで、具体的な問題や解決策、反応が見えてきます。

準備する物の例:

  • 動画

  • ウェブサイトLP

  • 広告

効果的なプロトタイプを作るためのポイント

全ての人にとって「最適」なプロトタイプツールはありません。世の中にはたくさんのプロトタイプツールが存在しそれぞれ皆さんにあった物を選ぶ必要があります。

ソフトウェアを作る場合

実現したい忠実度やツールの操作性、コーディングの知識が必要か、それとも視覚的なデザインだけで再現できるかなど理解してツールを選ぶことも大切なポイントです。

Figma

無料で初心者にも始めやすく、リモート状況で共同作業も可能。動作も軽くwebベースでも利用できるのでアプリをダウンロードしないメンバーとのコミュニケーションもしやすいのでノンデザイナーでも扱いやすいです。

Sketch

Mac用のネイティブアプリツールで、プラグインが充実しており、活用することでアニメーションや仕様書作り、画面遷移図の確認などをSketch上で作成することができます。

Adobe XD

Adobeの他のデザインツールと親和性が高く、PhotoshopやIllustratorをよく利用している場合は直感的に操作がしやすいです。Adobe Creative Cloudコンプリートプランを既に契約している場合はすぐ利用開始ができるのでダウンロードしてみてください。

InVision

SketchやPhotoshopなど外部サービスと連携でき、リアルタイム共同編集も可能でレビュー機能が秀でています。

Origami Studio

Facebookが作ったプロトタイピングツールです。かなり細いインタラクションやアニメーションをUIに付けることが可能ですが、パッチという分岐機能を使いこなす為に学習コストがかかります。プログラミング経験者で学習時間がある方は使いこなせるようになると表現の幅が広がります。

ProtoPie

マイクロインタラクション・プロトタイピングツールです。実装スキル不要でインタラクションやアニメーションを付けることが可能です。

ハードウェアプロダクトの場合

ソフトウェアやWEBサービスではなくハードウェアプロダクトを伴うプロトタイプの場合は厚紙などを利用して形のある物を作り、ユーザーが利用イメージができるようなプロタイプを活用します。忠実度の高いプロトタイプを作るためには3Dプリンターがあると便利です。

3Dプリンターは以前に比べると価格が安くなってきてはいますが、高価な製品であることは変わりないので、利用できるカフェやコワーキングスペースなどを利用してみるのも良いのではないでしょうか?3Dプリンターの利用方法は事前に記事を読んでから確認しに行けると良いですね。

まとめ

まとめ

本記事では、プロトタイプとは何かについて解説してきました。プロトタイプ自体は導入するコストが低く、開発の手戻りリスクを大幅に削減することができます。開発の手戻りとは実装最中や実装後に仕様やデザインを変更する必要が出てしまうことで、人的コスト・品質・スケジュールに大きな影響を与えるため、最悪の場合リリースタイミングや納期を遅らせることが必要になることです。それを防ぐためにはプロトタイプを利用しながら段階に合わせてユーザーの声を確認していくことは極めて重要です。

しかし、プロトタイプを作って検証したら終わりではなく結果によって検証を繰り返し反復し修正を重ねてより良いアウトプットに繋げることが重要です。ユーザーに提供する前の調査手法としてサービスの品質向上のために役立ててみてください。

byAsami Kihara

製薬会社のエクスペリエンスデザイナー。 ボランティアでFriends of Figma TokyoのCommunity Advocateとして活動しています。

Share

Share on TwitterShare on FacebookShare on LinkedIn

関連記事

Related Articles

最新の記事

Latest Articles

デジタルデザインの最新情報をお届け!

unprintedのメールマガジンにご登録いただくと、デジタルデザインの最新情報をメールで受け取ることができます。今までに配信したバックナンバーも公開中!

unprintedニュースレター登録

unprinted(アンプリンテッド)は、「デジタルデザイナーの毎日をもっと楽しく」するためのコンテンツを発信するWebメディアです。 unprintedへのお問い合わせ、コンテンツ制作に関わってみたいという方は、コンタクトフォームよりご連絡ください。