---

ニジボックスの案件事例をご紹介！

---

サービス開発や制作の現場で用いられるプロトタイプとはどんな意味でしょうか？

特にWebやUI UXデザイン、開発に携わる人なら知っておきたい、プロトタイプの目的やメリット、種類に便利ツールまで、詳しく解説します。

プロトタイプとは？

プロトタイプとは、日本語で「試作品」を意味します。
試作品、つまり「完成品を作る前に試しに作ってみるもの」は、Webサービスからアプリ、車などさまざまな商品・サービスの開発において作られています。

Webサービスやアプリにおいては、特にシステム・サービス開発の初期段階に作られるケースが多いです。
例えば、クライアントから受注したシステムの開発において、要件定義の次ステップにプロトタイプを作り、早い段階で完成品のイメージ共有に利用されることがあります。

【要件定義→設計→開発→テスト→納品】のフローに沿った「ウォーターフォール型開発」は、プロジェクト全体のスケジュールが組みやすい一方で、テスト段階まで完成イメージが湧きにくいデメリットがあります。

しかし、試作品としてのプロトタイプを作っておけば、テストと検証を繰り返しながら開発を進めることができるので、プロジェクトの後半になって仕様や機能の大幅変更を求められるリスクが軽減されます。

特に現代はVUCA（社会の変化を予測しづらいという意味。Volatility・Uncertainty・Complexity・Ambiguityの頭文字をとった言葉）、つまり先が見えない時代と言われています。

そんな時代において、ウォーターフォール型開発のように、臨機応変な対応が難しい進め方ではリスクが大きくなります。
早い段階で完成品をイメージしつつ、仮説を検証できるプロトタイプの重要性はますます高まっていくことでしょう。

プロトタイプを作る2つの目的

プロトタイプを作る目的について解説します。

1. 実際に作ることで仮説を検証する

プロトタイプを作る目的は、「プロダクトは価値・ベネフィットをもたらすか」「技術的に実現可能か」「仕様が適切か」などの仮説を早い段階で検証することです。

試作品を作らずに完成品を目指して開発を進めると、「思ったよりも使いにくい」「搭載したい機能が実装できない」などのトラブルが起きた際、修正に大きなコストがかかることもあるでしょう。
しかし、プロトタイプを作った段階で機能や仕様を検証しておけば、問題点を改善した状態で比較的スムーズに開発を進めることができます。

しかも、プロトタイプを用いることで、検証を比較的「短時間・低コスト」で実現することが可能です。

このように、プロトタイプを用いて検証や改善を繰り返す手法を「プロトタイピング」といいます。
プロトタイプとはアイデアなどを実体化したもの、プロトタイピングは実体化したもので検証するプロセスという違いがあるので、理解しておきましょう。

2. 社内/社外の関係者と共有し、認識を揃える

商品やサービスの開発において、関係者間での情報共有と認識合わせは非常に重要です。
しかし、プロジェクトマネージャーからデザイナー、エンジニア、クライアントまで、全ての人が同じ認識を持つのは、言葉だけでは困難な場合が多いでしょう。

そこで、実際に視覚化・実体化したプロトタイプを作ることで、関係者感でのスムーズな認識の共有が可能になります。
実際に作ってみることで、機能や仕様の課題も明確になり、「今、プロジェクトチーム全体がどの方向に向かうべきか」のブレを無くすことにも役立つでしょう。

プロトタイプ作成の3つのメリット

プロトタイプを作ることによって、商品・サービスをより良いものとするためのさまざまなメリットがあります。

1.UI UXの検証をユーザー視点でも行うことができる

プロトタイプの良いところは、試作品を「ユーザー視点で実際に使ってみる」ことができる点です。

完成品を作ってからユーザーテストを行うのでは、何かしら問題が発生した時に手遅れとなってしまうこともあります。
一方で、プロトタイプの段階で「機能の使いやすさ」「サービスの体験価値」などを検証できれば、それらを改善した上で開発を進められます。

その結果、開発している商品・サービスの質の向上も期待できます。
プロトタイプを作らなかった場合、完成後に「こんな機能をつけておけばよかった」ということが多々あります。
そんな後悔が少なくなり、完成品の質を高くできるのも、プロトタイプを作る大きなメリットです。

2.社内コミュニケーションの円滑化に役立つ

プロトタイプは、開発に関わる社内メンバー間の積極的なコミュニケーションにも寄与します。

文字ベースの要件を見ながらMTGするよりも、実体化された物を見たり使ったりしながら話をした方が、より具体的な意見も出やすくなることは想像に難くないでしょう。
良質なコミュニケーションが増えることは、より良いアイデアが生まれるきっかけになるかもしれません。

3.少ないリソースで検証できる

「プロトタイプを作る目的」の項でも触れた通り、試作品だからこそ、時間やコストをかけずに検証できることもプロトタイプのメリットです。

プロトタイプをどの程度作り込むかにもよりますが、シンプルな物なら数時間～1日程度で作ることができるため、検証まで数か月かかる進め方に比べるとリソースを大きく減らすことが可能です。

プロトタイプの「3つの種類」と「6つの段階」

プロトタイプには「種類」と「段階」があります。
商品・サービスの何を検証するのかによって用いるプロトタイプの種類が変わります。
段階とは、プロトタイプをどこまで作り込むかの程度のことです。
それぞれ、詳しく解説していきましょう。

機能、デザイン、ストーリーの3種類

ひとくくりにプロトタイプといっても、「何を検証し、共有したいか」によって、作る物は変わります。

1. 機能のプロトタイプ

機能のプロトタイプは、商品・サービスの機能がどのように動くのかを検証するためのプロトタイプです。
例えば、Webサービス上でボタンを押した際の動作をシミュレーションできる試作品などが、機能のプロトタイプにあたります。
多くの商品・サービスにおいて、機能はコアバリューとなるものなので、この検証を早い段階で行うことは重要です。

2. デザインのプロトタイプ

デザインのプロトタイプは、「見た目」に関わるシミュレーションをするためのプロトタイプです。
デザインを完成品に限りなく近づけて作ることで、ビジュアル面のイメージを醸成できます。

3. ストーリーのプロトタイプ

商品・サービスの強みや魅力、ユーザーが実際に使っているイメージなどを、カタログや動画で紹介したものをストーリーのプロトタイプ（又はコンテクスチュアルなプロトタイプ）と呼びます。
特に、今までにない新しい価値を提供する商品・サービスにおいて、その価値を具体化する意味で有効です。

ラフなものから完成品に近いものまでの6段階

次は、種類とは別の軸で、「どこまで作り込むか」を見ていきましょう。

1. ペーパープロトタイプ

紙を用いた、最も短時間で、ラフなプロトタイプです。

仕様や機能を紙に書き出したり、図解したりするだけなので、ほんの数分で完成します。
「こんなイメージのサービスです」ということを伝えるだけなら、言葉だけで伝えるよりも紙に書いて説明した方がわかりやすくなり、かつ短時間で作ることができるのがメリットです。

2. アナログプロトタイプ

機能をアナログ、つまり人力で実現するプロトタイプです。

例えば「旅行の計画を簡単に立ててくれるアプリ」を開発するとします。
その場合、想定ユーザーに旅行の行程や行きたいスポット、予算などをヒアリングし、あとはそれを人力で計画書に仕立てて見てもらう、というやり方がいいでしょう。

これだけでも、アプリを使うメリットや価値を検証することは十分可能です。

3. ツールを用いたプロトタイプ

既存のSNSなどのツールを用いて、サービスの機能を満たすものを作るプロトタイプです。

必要な情報の記述、データ化などは一からシステムを作らなくてもできることがほとんどなので、ツールの組み合わせで疑似的なサービス体験は可能です。

4. ビジュアルプロトタイプ

ツールを用いたプロトタイプに、オリジナルのデザインで装飾したプロトタイプです。

機能は既存ツールを組み合わせて作った物ですが、ビジュアル面がオリジナルになるだけでも、印象は大きく変わります。
サービスの価値を一目で分かるようにすることで、オリジナリティを感じてもらえます。

5. プロトタイプ

この段階が、一般的にイメージされる「狭義のプロトタイプ」です。
いわゆる試作品として、機能面も含め実際に作ってみた物を指します。

6. MVP

「Minimum Viable Product」の略で、「実用最小限の製品」を意味します。

この段階では、プロトタイプを用いて検証したい機能のみ、実際に作ってみます。
サービスのコアバリューとなる部分は完成品に近い形で作るので、より実際に近い形での検証が可能になります。
その反面、作るのに最も大きなコストがかかるので、「何を検証するのか」「それを検証することは今必要なのか」を確認する必要があります。

■関連記事：MVPについては下記の記事でも解説しているので、ぜひご覧ください。

プロトタイプの「適切な種類と段階」を見極める

このように、一口にプロトタイプと言っても、その種類や段階はさまざまです。
だからこそ、ケースに応じて「どんなプロトタイプを作るか」を見極めることが重要です。

例えば、社内で企画をブレストするMTGをするために、MVPのような手間のかかるプロトタイプを作っても、「そもそもその機能は必要？」となれば無駄になってしまいます。
この場合は、最低限の機能とビジュアルイメージを説明する企画案を、手書きで作って持ち込む程度で十分です。

逆に、クライアントへの最終プレゼンを行う際などは、しっかりと作り込んで、完成品を具体的にイメージできるプロトタイプを用意した方がスムーズに進む場合もあります。

プロトタイプと類似する概念

プロトタイプの他にも、開発の初期段階で試作することを意味する方法があります。

例えば、Webサイトの設計書であるワイヤーフレームも試作品の一つと言えます。
「ここのグローバルナビが入って、ここは広告のスペース」など、全体の構成を説明できるので、これをもとにデザインを作ることで、発注側と制作側での内容に関する認識齟齬を避けられます。

ワイヤーフレームにビジュアル要素を加えたモックアップも、プロトタイプと似た概念です。
最終的な完成品のイメージ共有に使われるもので、TOPページなど主要な部分のみ作って、問題無ければ他ページも展開していく、という進め方が一般的です。

他にも、紙に書いた絵でイメージを共有するラフスケッチは、ペーパープロトタイプの一種と言えます。

■関連記事：ワイヤーフレームについては下記の記事で解説しているので、ぜひ併せてご覧ください。

プロトタイプがサービス開発の成功に大きく寄与した事例

ニジボックスでも、サービス開発においてプロトタイプを用いた経験が多数あります。

例えば、ユーザーが製品やサービスを購入したあとに、支払い料金を自分で決めることができる決済の新しい仕組み「あと値決め」のUX、VI、UIデザインを担当した際に、ストーリーボードを用いてユーザーインタビューを行いました。

「あとで値段を決める」という、ユーザーが今までに無い体験価値を早い段階で検証するため、プロダクトを実際に作る前にそのプロトタイプとなる9コマのイラストを作り、インタビュー対象者に視覚的に理解してもらい、正確な声を集めようと試みました。
結果、対象者全員があと値決めを使ってみたいとの回答が得られ、その新しい価値への確信を持ち、UI UXデザインに良質なフィードバックを行うことができました。

このときに私たちが作ったプロトタイプは、「6つの段階」で言うところのペーパープロトタイプです。
プロトタイプの中でも、短期間でできるもので行った検証でしたが、「サービスの価値を検証する」上では十分な効果を発揮してくれました。

このように、「必要なときに」「必要な完成度の」プロトタイプを作れば、商品・サービスの成功に大いに役立つ、ということを覚えておきましょう。

プロトタイプを作るのに便利なツール3選

最後に、プロトタイプを作るのによく使われるツールを紹介します。

1. Adobe XD

Webサービスのワイヤーフレームやデザインカンプだけではなく、ページ遷移などブラウザ上での動きの再現までできる、近年多くのWebデザイナーが使っているツールです。
Photoshopとの連携も可能で、よりスムーズなプロトタイプ制作に大いに役立ちます。

■関連記事：Adobe XDについては下記の記事で解説しているので、ぜひ併せてご覧ください。

2. Sketch

UIデザインに便利な機能が多数盛り込まれたツールです。
各デバイス向けのテンプレートが用意され、より効率的にデザイン面のプロトタイプを作ることができます。
iOSアプリを通して、すぐに実機確認をして検証ができる点も便利です。

■関連記事：Sketchについては下記の記事も、ぜひ併せてご覧ください。

3. Figma

UIデザインをブラウザ上で作成できるツールです。
2名までなら無料で共有しながら使うことができるので、チームでのプロトタイプ制作に向いています。

■関連記事：Figmaについては下記の記事で解説しているので、ぜひ併せてご覧ください。

まとめ

ここまで、プロトタイプとは何かについてご紹介してきました。

ニジボックスではプロトタイプを用いたユーザビリティ検証の実施・分析をご支援しています。
これまでも、クライアントの課題に寄り添ったユーザビリティ検証を、実際にリクルートや大手クライアント様の新規/既存事業で実践してきました。

下記資料にて、ニジボックスのユーザビリティテストのご支援内容や、これまでの実施例を一部ご紹介しています。

ご興味のある方はぜひお気軽に、下記リンクより資料を無料ダウンロードください！