デザインで作成する「プロトタイプ」とはなに？ワイヤーフレームとの違いについても解説

オンラインサービス、スマートフォンアプリなどのデジタルプロダクトの開発で欠かせないのが、「プロトタイプ」の作成。ウェブサイトやアプリといったデジタルプロダクトのデザインの分野でも、より良いUIやUXの実現のためにプロトタイプの制作が必須となっています。そこで今回は、デザインで作成するプロトタイプについて、その概要や作成方法を紹介します。ワイヤーフレームやモックアップとの違いも合わせて解説。プロトタイプの作成についてもっと良く理解したい方は、ぜひ参考にしてみてください。

プロトタイプとは

プロトタイプとは、「目的の動作ができるか、確認するための試作品」。そこにデザインを加えることで、より完成品に近い試作品となったのが「デザインにおけるプロトタイプ」です。

プロトタイプの役割は「プロダクトの操作性検証」

デザインのプロトタイプは、完成品に近い形で、製品（プロダクト）の操作性を検証する役割があります。検証は、完成品にどれだけ近いかを示す「忠実度」によって3段階に分けられます。

最も忠実度が低い段階での簡易な試作品がローファイ・プロトタイプです。制作会社のデザイナーやディレクター自身の確認や、クライアント企業とのプロダクトイメージのすり合わせなどが主な目的です。この段階では、製品に対するイメージやコンセプトのすり合わせに使用されることが多いです。
中程度の忠実度では、主要となる機能をある程度備えさせた試作品がプロトタイプとして使われます。この段階では、プロダクトについて知っているテストユーザーからのフィードバックを得るために作られます。

そして、最も忠実度が高い段階では、ほぼ完成品に近い形となり、多くの関係者やユーザーに操作性を検証してもらうのです。これをハイファイ・プロダクトと呼びます。この段階のテストでは、プロダクトについて全く知らない第三者の操作に関するフィードバックを得るために行われます。

プロトタイプの作成方法

プロトタイプの作成方法は、主に次の3つです。

・ペーパープロトタイプ
・ビジネスモデルキャンバス
・ツールプロトタイプ

ペーパープロトタイプは、イメージの概要など主要な要素を紙に印刷し、可視化する方法です。さまざまなバリエーションの試作品を短時間で作れる、ユーザーテストでフィードバックをもらいやすいなどのメリットがあります。ビジネスモデルキャンバスは、社内や開発チーム内で共通認識を持ちたいときに活用できる「設計図」。機能やデザインなど、すべての要素を記載するため、主要なデータ分析や課題の抽出がしやすいプロトタイプです。

そして、ツールプロトタイプは、最も完成品に近い試作品といっても過言ではありません。目的の機能を実際に搭載した状態で検証できるため、制作の最終段階に活用されることが多いプロトタイプです。

プロトタイプの作成におすすめなツール

実際にプロトタイプを作成するとき、最近ではツールを使用することが多くなってきています。おすすめツールは、次の4つです。

・Figma
・Adobe XD
・Sketch
・Prott

Figma

Figmaはこれまで業界標準であったAdobe XDを抑えて、新たな業界標準になりつつある、プロトタイプ作成／UIデザイン作成ソフトウェアです。特徴としては、パソコンにインストールするソフトウェアではなく、ブラウザ上で起動するという点です。導入のハードルをとても低く抑えながら、デザイン作成のしやすさ、プロトタイプでのプレビュー出力、機能を拡張する様々なプラグインが揃っている、などの特長からあっという間に多くのUI/UXデザイナーに支持されることとなりました。2023年にはその成長性に注目したAdobeに買収されるなど、今後のソフトウェアの動向にも注目が集まっています。

Adobe XD

Adobe XDはAdobe社が開発した新たなUIデザイン、プロトタイプ開発ソフトウェアです。Adobe XDでは、同社の製品であるIllustratorやPhotoshopのデータを、加工・変換することなく読み込めます。Illustratorで作成したベクターデータを利用できる点も大きなメリットです。Adobe CSのパッケージに組み込まれているため、多くのデザイナーをはじめとするクリエイターに支持されていました。

Sketch

Adobe XDが登場するまでは業界標準となっていたUIデザイン・プロトタイプ作成ツールの老舗です。Sketchでも、ベクターデータを作成可能なため、解像度に煩わされずにデザイン可能。英語のUIですが、操作は直感的にできるため、それほど問題ではありません。

Prott

Prottは、UI/UXの会社であるGoodpatchが提供しているオンラインサービスです。Prottでは、紙に書いたデザインなどを読み込めるため、デザインツールに不慣れな方でも使いやすいメリットがあります。PCだけでなく、スマホでも編集可能な点もうれしいところです。また、Figmaもプロトタイプ制作によく使われるツールです。ブラウザ上で動作し、クラウドでデータ管理でき、共同編集をすることもできるため、チーム間でのコミュニケーションコストも抑えられます。

このように、プロトタイプを作成するツールは複数あり、それぞれに特徴的なメリットがあります。自身や開発チームに合ったツールを見つけてみてはいかがでしょうか。

プロトタイプ作成のポイント

プロトタイプの役割を存分に発揮させたいときには、次に挙げる3つを作成時に意識すると良いでしょう。

修正しやすいプロトタイプを作る

プロトタイプはより良いデザインを作り上げるために、検証と修正を繰り返します。このとき、修正に時間がかかるようなプロトタイプでは、スムーズな検証ができませんまた、ユーザーや関係者からの正確なフィードバックを得たいがために、プロトタイプを作りこんでしまうケースもあるでしょう。

しかし、1つのアイデアにこだわって試作することは、サンクコストが発生して修正を受け入れにくくなったり、開発の初期段階では対応しきれないようなフィードバックによってコンセプト設計が揺らいだりする恐れがあります。そのため、プロトタイプを作成するときには、修正しやすい簡易的なものから作るようにしましょう。

UIやUXの改善検証はプロトタイプ以外でもできる

UIやUXの改善検証は、「プロトタイプでないとできない」と考えてしまいがちです。しかし、UIやUXの改善検証は簡単なイラストや、コンセプトムービーでも検証可能です。

例えば、サイトを公開してしまった後にユーザ導線が機能しているかを検証したい場合を考えましょう。この場合、一回一回テストバージョンのプロトタイプを作るのは手間になってしまいます。

そこで、ヒートマップやアイトラッキングシステムを活用することで、手軽にテストを繰り返すことができます。これらは、ユーザの実データを集計し、実データをもとにしたテスト検証ができるため、より効果的な改善施策に関する示唆を得られます。開発の初期段階で、「本当にこの方向性でいいのか」をサクッと知りたいときには、プロトタイプ以外の方法で検証することも視野に入れましょう。

チーム外の第三者からフィードバックを必ずもらう

「修正しやすいプロトタイプを作る」でも紹介したように、試作段階ではさまざまなアイデアを試すことが大切です。しかし、実際に制作している社内や開発チーム内だけでは、新たなアイデアや改善策を生み出すのには限界があります。そのため、プロトタイプを作成したときには、チーム外の第三者からのフィードバックを必ずもらうようにしてください。思いもよらなかった改善点が見つかることで、より良いデザインや製品の誕生に繋がるでしょう。

プロトタイプとワイヤーフレームの違い

プロトタイプと似た言葉として、「ワイヤーフレーム」があります。2つの役割や作成方法は、次のとおりです。

ワイヤーフレームは名前のとおり、線（ワイヤー）や枠（フレーム）を使って、デザインの配置を検証します。操作性を検証するプロトタイプの前準備、ともいえる段階です。

作成方法に大きな違いはありませんが、どちらかというとワイヤーフレームの方が簡易的な作りとなります。そのため、はじめは手書きで書き、要素が固まるにつれてツールを使用するケースが多いようです。

プロトタイプとモックアップの違い

プロトタイプに似た言葉には、もう1つ、「モックアップ」があります。2つの役割や作成方法は、次のとおり。

モックアップでは、色や装飾といったビジュアル面の要素を追加して検証します。ワイヤーフレームよりは完成形に近づくものの、機能は搭載していない段階。いわば、「操作を伴わないプロトタイプ」ともいえる試作品です。実務では、デザイン確定後に作成した機能組み込み前のHTMLファイルを指すことが多いです。

プロトタイプの作成では完璧を目指しすぎない

プロトタイプの作成は、製品やデザインに対するユーザーの満足度アップを目指して試行錯誤する際に必須です。しかし、はじめから完璧を目指しすぎては、逆にユーザーの希望に応えられなくなる可能性もあります。プロトタイプを作成するときには、複数回の修正を前提として作業しやすい形にすることはもちろん、第三者の意見を十分に取り入れながら検証するようにしていきましょう。