KNOWLEDGE
KNOWLEDGE

プロトタイプとは? メリットや種類、具体例をご紹介

製品開発の現場でよく耳にするプロトタイプ。完成品ではない試作品、簡易版などということは曖昧に知られていますが、何のために作成するかわからずに工程に組み込んでしまってはいませんか?

この記事では、プロトタイプの概要や制作するメリットなどについて、弊社の事例を交えながらわかりやすく解説します。

プロトタイプとは

プロトタイプとは、試作モデルのことを指し、主に製品開発の文脈で使用され、構想中のアイデアや仮説をコストをかけずにすばやく具体化するために用います。例えば、新規製品やソフトウェアの開発において、初期段階でプロトタイプを作成し、その製品にニーズがあるのか、操作性に問題がないかなどあらゆる課題の検証を行います。また、この一連の検証や改善を繰り返す手法のことをプロトタイピングと呼びます。

プロトタイプでは主に操作性やバランス、機能などを確認し、必要であればユーザーテストも行います。「実際に使いやすいのか」「この機能は実現可能なのか」という、製品のUI/UXに大きく関わる部分の検証を行うことができ、機能や仕様を洗練することができます。また、早期に開発上の問題点を発見することができるため、開発の手戻りを抑えることも可能です。

ユーザー視点での検証など、検証項目によっては誰でも行えるように感じてしまうプロトタイピングですが、多角的な視点と豊富なデザインの知識や経験が必要となり、プロでないと有効な検証を行うことは難しいです。そのため、どのような検証項目の場合でも、専門家に依頼することで、見落としなど将来的なリスクの軽減につなげることが可能です。

プロトタイピング

プロトタイプを作成するメリット

スムーズな開発とコスト軽減

こまめにプロトタイピングを行うことで開発中の製品の問題点を早い段階から洗い出すことができ、開発途中で問題が起きた場合よりエラーを解決する手間も時間も少なく済み、結果的にプロトタイプを挟まず開発に進めた場合よりコストを軽減できることが多くあります。段階ごとに問題がないか都度確認することで、大きなトラブルを減らすことも可能です。

また、開発メンバーに前もって開発イメージを具体的に伝えることができるため、早い段階から機能や実現可能性についてのすり合わせが可能になり、スムーズな開発が実現します。

認識合わせ

まだ形のないプロジェクトにおいて、立場ごとに重視する点や、最終的な製品のイメージが異なる場合が多くあります。

プロトタイプを作成し、実際に目に見える形となることでそれぞれの持っているイメージとの違いが表出し、それらをシェアすることで最終的なゴールの認識合わせがしやすくなります。また、認識の齟齬が既に起きてしまっている場合にもアイデアが可視化されたプロトタイプがあることで、正しく理解してもらうための手助けにもなることでしょう。

認識合わせの対象者としては、クライアントだけではなく、プロジェクトのメンバーや、利用が想定されるユーザー、開発メンバーなども含みます。

ユーザー目線を取り入れられる

操作性がいいのか、システムは分かりやすいのか、バランスは取れているのか、単純に楽しいのかなど、体験にまつわる感覚は感性や個人に大きく左右されるため、社内の評価だけで判断することは難しいです。

そこで、プロトタイプを作成一部のユーザーにテスターとして試してもらい、ユーザーの声をもとに改良・修正を加えていくことで、多角的な視点で製品の質を高めていくことができます。

また、サービスを利用する際の環境やタイミングは、ユーザーごとに異なるため、思いがけない問題を防ぐためにも、プロトタイプを使った検証が有効です。

プロトタイプの種類と役割

製品開発におけるプロトタイプは作成方法や役割などによって、大きく3種類に分けられます。

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

ファンクショナルプロトタイプは、動作や導線を確認するためのプロトタイプです。ユーザーが行った操作に対して正しい動きをするか、問題が発生しないかなどを確認します。また、ユーザビリティの確認も行えるため、操作のしやすさをデザインを詰める前に行うことができます。

低コストで始められ、非常に多くの明確な課題が得られる手法です。

デザインプロトタイプ

デザインプロトタイプは、ファンクショナルプロトタイプにデザインコンセプトやビジュアルを落とし込んだ、より完成形に近いプロトタイプです。機能はもちろんデザイン面も最終的なアウトプットとほぼ同じ状態になります。

限りなく完成品に近づけたデザインプロトタイプでは、ユーザー使用時の視認性や実際の処理速度などを検証します。

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

コンテクスチュアルプロトタイプは、製品の使用イメージを共有するためのプロトタイプです。実際に使用している様子を動画で撮影し公開するなど、共有には動画等のメディアが使われることが多いです。

製品を疑似的に体験してもらうことや、製品が持つ世界観の共通認識を持つことを目的とした場合に使用されます。

体験映像のほか、テレビCMやカタログなどを用いるケースも少なくありません。

プロトタイプの作成ツール

ファンクショナルプロトタイプを作成する際は、紙に手書きのアウトプットを行う簡易的なものでも十分な場合もありますし、コンテクスチュアルプロトタイプで動画作成ソフトを用いて簡単なムービーを作成する場合もあります。

このように、プロトタイプの種類と用途によって利用するツールは様々ですが、この項目では製品開発の際に使用するメジャーなプロトタイピングツールを特徴と料金を交えてご紹介したいと思います。

Figma

Figma

Figmaは、昨今多くのクリエイターが使用しているデザインツールの一つです。デザインの民主化を掲げ、無料で使い始めることができます。

画面のデザインを作成することはもちろん、プロトタイピング機能が内蔵されており、アプリをダウンロードした様々なデバイスでリアルタイムにプロトタイプの確認を行うことができます。

また、チームでの編集や検証にも長けており、スピード感を持って検証・改善を行うことが可能です。

  • 料金:0円/月~

Figmaについてより詳しく知りたい方は以下の記事もおすすめです。

Adobe XD

Adobe XD

Adobe XDは、デザインソフトで有名なAdobe社が提供しているデザインツールです。

Adobe社が提供しているIllustratorやPhotoshopは広告業界のビジュアルデザインに強く、XDに紐付けることでデザイン性の高いプロトタイプを容易に作成することが可能です。

画面遷移、インタラクション、ワイヤーフレームをオールインワンで作成でき、動作が軽いといった特徴があります。

  • 料金:1,298円/月~ 

Sketch

Sketch

Sketchは、プロトタイピングツールとデザインツールが一体化しているため、作成・管理・修正がスムーズに行えることが特徴です。

作成したプロトタイプは、URLを生成して簡単に共有できます。

連携できるツールも多いため、利用するシステムを一本化し、作業効率化を成し遂げたい企業や個人におすすめといえます。

  • 料金:$9/人・月〜

Prott

Prott

Prottは日本製のプロトタイピングツールです。テンプレートが豊富に揃っているため、「画面を取り込み」「つなぎ合わせ」「画面遷移時のアニメーションを指定する」の3ステップで素早くプロトタイプを作成できます。

平易な操作や、日本語対応などの面で初心者の方におすすめです。

  • 料金:0円/月~

プロトタイプを作成する際の注意点

検証したい項目や目的が曖昧なままプロトタイプを作ってしまうと、検証したい軸がぶれてしまい、結果的にプロトタイピングの工数が膨大に膨れ上がってしまうため、無駄なコストがかかってしまいます。

例えば、ファンクショナルプロトタイプで十分だったにも関わらずデザインの検討も同時に起こってしまう、という例があります。そういった場合には検証項目が複雑になり、本来検証すべきだった項目が見過ごされてしまう可能性もありますし、デザインプロトタイプを作成するのにはそもそもそれなりの工数がかかってしまいます。

プロトタイプの制作で重要なのは、できるだけコストをかけずに素早く行うことです。プロトタイプを作成する際は何を検証すべきなのか、その目的を達成するためだけの最低限のモデルは何なのかを正しく見定めることが重要です。

また、クライアントやユーザーに対してそのプロトタイプの目的を正しく伝達し、余計な検討が入らないように配慮することも大切です。今は機能を検討するフェーズなのでグラフィックの部分は検討しない、などと伝えておくといいでしょう。

プロトタイプの活用例

セブンデックスでは、UI/UXの豊富な知見をもとにプロトタイプ制作を行います。また、最適な検証項目の選定や、ユーザーテストにも長けており、プロトタイプの作成から検証・改善まで一貫して行うことが可能です。

事例:ライトオン

ライトオン

アパレルECサイトと、アプリのフルリニューアルを行ったライトオンさんの案件では、コンセプト策定やターゲット定義などの戦略部分からサービスに関わり、本質的な課題解決をもとにしたUIデザインを作成いたしました。

UIデザインを作成する際、前段で策定したコンセプトや、専門家によるヒューリスティック評価から見つかった課題がユーザーからみて正しく解決されているか、正しく伝わっているかを判断するため、プロトタイプ作成と、ユーザーテストを行いました。ユーザーテストの結果はレポートとして報告を行い、その結果と考察をもとに最終的なUIデザインの改善や修正も行います。

早い段階から検証と改善を行い、UIの品質向上に努めたこちらの案件では、売上やKPI向上にも繋がっており、リニューアルによる効果を実感いただいております。

まとめ

プロトタイプを作成することで、コストをかけずにステークホルダー感の認識合わせや、重大なエラーの早期発見、製品の品質向上など多数のメリットを得ることができます。

スムーズな製品やサービスの開発を行いたい、多数のステークホルダーと円滑にプロジェクトを進めたいと思われている方は、ぜひセブンデックスに相談してみてください。

UXUIデザイン支援資料

セブンデックスのUXUIデザインプロセスと実績詳細が解説されている資料を無料でダウンロードできます。

UIデザイナー
東京藝術大学卒業後、映画配給会社にてデザイナー、広報などを担当。その後制作会社で雑誌やSNS、アパレルのアートディレクションなど様々なメディアのデザインに携わる。表層だけではなく、課題解決のデザインで企業支援をしたいと考え、セブンデックス にUIデザイナーとして入社。