「プロトタイピングって何？」
「どうやって始めたらいいの？」
こんな疑問をお持ちではありませんか？
プロトタイピングとはアイデアを具体化した試作品を作成し、ユーザーの反応を早期に確認する手法です。サービスや製品開発における課題や改善点を発見し、チームメンバー間の認識を合わせるためにも非常に重要なプロセスと言えるでしょう。
しかしプロトタイピングの手法はさまざまあり、どのように進めていけば良いのか悩んでいる方も多いのではないでしょうか。
そこで本記事では、サービスの設計・開発を行っているFlowzが開発の現場で培われたノウハウをもとに、以下の内容について詳しく解説します。
- プロトタイピングの意義と目的
- プロトタイピングの手法と進め方
- プロトタイピングツールの選び方
- プロトタイプを活用した事例
プロトタイピングに取り組むことで、ユーザーにとって価値あるサービスや製品を生み出せるはずです。
なお、Flowzではデジタル領域でのサービス設計、プロダクト開発の視点からお客様のビジネスをサポートしています。お困りごとがある方はぜひお気軽にご相談ください！
目次
プロトタイピングとは？言葉の意味を解説
まず、プロトタイピングについて言葉の意味や概要を解説します。
- プロトタイピングとは試作品を作って検証すること
- プロトタイピングとプロトタイプのちがい
- プロトタイプ開発とアジャイル開発のちがい
1. プロトタイピングとは試作品を作って検証すること
プロトタイピングとは、試作品を作成することでアイデアを具体化し、検証や改善を繰り返すプロセスのことです。製品やサービスの開発において、早期にユーザーの反応を確認し改善点を見つけるために行われます。
「使いやすさは問題ないか」「UX/UIデザインにおいて改善すべきポイントはないか」などのポイントを洗い出す際に、プロトタイピングは有効な手法です。
近年はIT業界においてプロトタイピングの手法が浸透しており、サービスをユーザーニーズに合わせて開発するために、欠かせない手法と言えるでしょう。
2. プロトタイピングとプロトタイプのちがい
プロトタイピングは、プロトタイプを作成し検証するプロセス全体を指す言葉です。一方プロトタイプは、プロトタイピングの過程で作成される試作品のことです。
アイデアを具体的に表現したプロトタイプは、ユーザーの反応を確認するために用いられます。プロトタイプは最終製品ではないため、必要な機能や情報のみが盛り込まれた簡易的なつくりにとどめられるのが特徴です。
3. プロトタイプ開発とアジャイル開発のちがい
プロトタイプ開発は、アイデアを試作品に落とし込んだうえで製品の検証やサービスに重点を置いた開発手法です。ユーザーの反応を公開前に確認し、改善点を見つけるために実施されます。
対してアジャイル開発は、短期間で開発を進めてユーザーのフィードバックを得ながら都度改善することを重視した手法です。製品やサービスを早い段階でユーザーに提供し、継続的な改善を行うことが特徴です。
プロトタイプ開発は、実装する機能や仕様が明確なプロジェクトに適しているのに対し、アジャイル開発は詳細が決まっていない場合に向いていると言えます。
プロトタイピングのメリット
ここでは、プロトタイピングのメリットについて解説します。
- メンバー間で認識を共有できる
- クライアントの意向を汲みつつ調整できる
- 大幅な手戻りを防げる
それぞれ詳しく見ていきましょう。
1. メンバー間で認識を共有できる
プロトタイプを作成すれば、デザイナーやエンジニアなどの異なる専門性を持つメンバー間で認識がずれることを防げます。
プロトタイプを中心に議論することで課題や改善点を明確にし、スムーズにコミュニケーションが取れるでしょう。また新しいメンバーが加入した際にも、プロトタイプはプロジェクトの理解を促進するためのツールとして活用できます。
プロトタイプを作成し認識を一致させることで、メンバーが同じゴールに向かって開発を進められるため、プロジェクトの成功確率が上がるでしょう。
2. クライアントの意向を汲みつつ調整できる
プロトタイプを作成しクライアントに共有すれば、相手の要望や懸念点を早期に把握できます。
プロトタイプを見ながら議論することで、クライアントとの認識のズレを解消できるでしょう。書面でクライアントとやり取りをしてOKをもらっていても、実際の制作物を見せないと共有できないことは珍しくありません。
クライアントの意見を反映しながら段階的にプロトタイプを改良すれば、満足度の高い成果物が生み出せます。クライアントとの信頼関係を構築するためにも、プロトタイピングは有効な手段です。
3. 大幅な手戻りを防げる
プロトタイピングの手法を開発のプロセスに取り入れれば、開発の早い段階で製品やサービスの問題点や改善点を発見できます。プロトタイプをもとに機能や設計の見直しを行うことで、大幅な手戻りを防げるでしょう。
やり直しを未然に防げれば、開発コストの削減や納期の遅延防止につながります。プロトタイピングは制作期間が長期化するなどのリスクを管理する観点からも、重要なプロセスと言えるでしょう。
プロトタイピングの手法5選
次に、プロトタイピングの手法を5つ紹介します。
- ワイヤーフレーム
- オズの魔法使い
- ストーリーボード
- ペーパープロトタイピング
- コードプロトタイピング
ひとつずつ見ていきましょう。
1. ワイヤーフレーム
ワイヤーフレームは、Webサイトやアプリにおけるレイアウト・構造を視覚的に表現する手法です。紙やデジタルツールを用いて作成され、初期段階のアイデア検証に適しています。
「どこに何をどのように配置するのか」を表現し、アプリやWebサイトの構造を概念的に示せます。また、簡易的な線画で構成されデザインの詳細は省略されているため、全体の構成を把握しやすいのも特徴です。
ワイヤーフレームは、情報設計やユーザーフローの確認・ステークホルダー間のコミュニケーションツールとしても活用されます。デザインの方向性を決定する際に活用できるプロトタイピングの手法と言えるでしょう。
2. オズの魔法使い
オズの魔法使いは、ユーザーに実際のシステムを使っているような感覚を与えるプロトタイピング手法です。あたかもシステムが機能しているかのように、プロトタイプの背後で人間が操作します。
オズの魔法使いのメリットは、システムの構築やプログラミングが不要であるため、迅速かつ低コストでプロトタイプを作成できることです。ユーザーの反応や要望を直接観察できるため、初期段階でのユーザビリティの評価に適しています。
オズの魔法使いの手法を用いれば、詳細なシステムを構築する前にユーザーにとって使いやすいデザインになっているかを評価できるでしょう。
3. ストーリーボード
ストーリーボードは、製品やサービスを利用するユーザーのシナリオを絵コンテ形式で表現する手法です。コマ割りイラストと簡潔な説明文で構成し、ユーザーの行動や感情の変化を表現します。
以下のような着眼点でストーリーを表現すると、顧客体験が詳細に見えてくるでしょう。
- 顧客はどのような課題を抱えているのか
- どのようなタイミングで製品やサービスに対する需要が発生するのか
- 製品やサービスを利用することで、ユーザーはどのような気持ちになるか
ストーリーボードは、チームメンバーやステークホルダーとのコミュニケーションツールとしても有効です。
4. ペーパープロトタイピング
ペーパープロトタイピングは、紙を使ってプロトタイプを作成する手法です。シンプルな材料で手軽に作成できるため、アイデアの早期検証に適しています。
紙に描いたUIパーツを組み合わせることで、ユーザーがどのような操作を体験するのかについてシミュレーションできます。低コストかつ短時間で作成できるため、複数のアイデアを比較検討するのにも有効です。
ただしペーパープロトタイプは実際にユーザーに試すのではなく、チーム内でUX体験を検証するために使われます。そのため、ユーザーからのフィードバックを得るためのプロトタイピング手法ではない点だけ注意が必要です。
5. コードプロトタイピング
コードプロトタイピングは、実際のプログラミング言語を使ってプロトタイプを作成する手法です。機能的なプロトタイプを作成できるため、ユーザビリティテストに適しています。
プロトタイプを作成する工数を削減するため、実装する機能は必要最低限に絞るのがポイントです。
コードプロトタイピングは、ユーザーにとって使いやすいシステムの構築に向けて、段階的に検証するためのプロトタイピング手法と言えるでしょう。
プロトタイピングのやり方
ここでは、プロトタイピングのやり方について詳細に解説します。
- 要件を定義する
- 設計する
- プロトタイプを作成する
- プロトタイプを評価する
- プロトタイプを改善する
プロトタイピングの進め方について疑問がある方は、ぜひ参考にしてみてください。
1. 要件を定義する
プロトタイピングを始める第一歩として、まずは製品やサービスの要件を明確に定義します。
とはいえ詳細に定義する必要はなく、プロトタイプが作成できるだけの内容が決まっていれば問題ありません。定義した要件をもとに、プロトタイプの目的や範囲を決定します。
要件定義の段階で、プロジェクトの方向性を関係者間で合意形成しておくことが大切です。
2. 設計する
要件定義をもとに、プロトタイプの設計を行います。
ワイヤーフレームやストーリーボードを作成し、UIやUXの設計を具体化します。情報設計やインタラクション設計・ビジュアルデザインなど各領域の設計を行いましょう。
設計段階ではユーザーの行動や心理を考慮し、使いやすさを意識するのが大切です。なお、あくまでプロトタイプを開発するための工程であるため、厳密さよりスピードを優先しましょう。
3. プロトタイプを作成する
設計をもとに、プロトタイプの開発に着手します。エンジニアがHTMLやCSSで作成するケースもあれば、デザイナーがFigmaなどのツールを用いて形にする場合もあります。
この段階でデザインの評価も行うため、デザイナーによる落とし込みは必要です。ただし、プロトタイプは改善することが前提であるため、完成形を目指す必要はない点だけ押えておきましょう。
4. プロトタイプを評価する
開発したプロトタイプは、ユーザーテストや社内レビューを通じて評価します。ユーザーテストでは、実際のユーザーにプロトタイプを使ってもらい、フィードバックを収集しましょう。
社内レビューでは、チームメンバーやステークホルダーからの意見を集めます。評価の際は「要件に沿っているか」「ユーザビリティに問題がないか」を重点的に確認しましょう。得られた評価結果を整理すれば、改善点や課題を明確にできます。
5. プロトタイプを改善する
評価で得られたフィードバックをもとに、プロトタイプの改善を行います。優先順位の高い改善点から順に対応し、プロトタイプの完成度を高めましょう。
プロトタイプをブラッシュアップする際は、要件や設計を再確認し整合性を保つことが重要です。改善したプロトタイプは再度評価を行い、問題がないか確認します。
改善と評価のサイクルを繰り返し、最終的なプロダクトの品質を高めていきましょう。
プロトタイピングを活用した事例
弊社Flowzには、ニューロマジックさんがパートナーとなって新入社員向けのオンボーディングサービスの「SPI-OnBoarding」を共創した事例があります。
実現したい体験をデジタルプロダクトに落とし込むには、ユーザーがどのような情報をどのようなフローで活用するかを理解する必要があります。そのために、以下の2点を作成することにしました。
- ユーザーが活用する情報を設計するための情報のモデル
- プロダクト上での体験を可視化したプロトタイプ
実現したい体験をUIに落とし込むために、情報のモデル化とプロトタイプの作成に取り組むことで、チームやエンドクライアントと共通認識を構築することに貢献しました。
プロトタイプを作成することで、プロダクト開発にかかわるメンバー全員のなかで認識がずれることを防げます。
本事例の詳細については「【実績公開🎊】「SPI-OnBoarding」設計の裏側を公開！〜パートナーと伴走してアイデアを形にした事例〜」をご覧ください。
Flowzではデジタル領域でのサービス設計、プロダクト開発の視点からお客様のビジネスをサポートしています。お困りごとがある方はぜひお気軽にご相談ください！
プロトタイピングのツール
最後に、プロトタイピングに活用できるツールを3つ紹介します。
- Figma
- Origami Studio3
- UXPin
プロトタイプを作成する際は、ぜひ活用してみてください。
1. Figma
Figmaは、ブラウザベースのUIデザインツールです。リアルタイムのコラボレーション機能が付いており、複数のメンバーが1枚のページを同時に編集できます。
無料プランから始められ、スタートアップや小規模チームにも導入しやすいでしょう。クラウドベースであるため、どこからでもアクセスできリモートワークにも最適です。
2. Origami Studio3
Origami Studioは、Mac専用のプロトタイピングツールです。
ドラッグ&ドロップで簡単にインタラクティブなプロトタイプを作成でき、アニメーションやリアルタイムプレビュー・コラボレーション機能も充実しています。
加速度センサーやデバイスカメラの情報も取得できるのが特徴です。Fifmaなどのデザインシステムとの連携もスムーズな点も魅力的でしょう。
3. UXPin
UXPinは、コードベースのプロトタイピングツールで、リアルなインタラクションの再現が可能です。まるで最終製品のように感じられるプロトタイプ構築を実現できます。
リモートでもデザインを共有できるため、チーム間での意見出しやフィードバックなどもスムーズに行えるでしょう。
また無料プランが提供されていることも、UXPinの魅力的なポイントです。
プロトタイピングを活用してアイディアを形にしよう！
プロトタイプを作成すれば、メンバー間の共通認識を構築しクライアントとのコミュニケーションを円滑に進められるため、開発の手戻りを防げます。
また、プロトタイプを評価・改善するサイクルを繰り返すことで、ユーザーのニーズに沿った製品・サービスを実現することにつながります。Figma・Origami Studio3・UXPinなどのプロトタイピングツールを活用し、効率的に開発を進めましょう。
