ユーザー体験を最高のものにするため、ユーザーの本質的な潜在ニーズを知り、ユーザーが「こうあればもっと良いのに」の斜め上をいく、つまり期待を超えた感動に到達するための”プロセス”は必要不可欠である。
UX JUMPではUXデザインの根幹にある人間中心設計（HCD）やデザイン思考の概要や細かなプロセスについても説明してきた。
今回は、HCDとデザイン思考双方のプロセスにもある「試作（プロトタイプ）」について深掘りしていきたいと思う。
具体的にはプロトタイプの概要、プロトタイピングを行うメリットやコツ、はたまた代表的なプロトタイピングツールの紹介と網羅した内容を紹介する。
もちろん、分かりやすい言葉を用いて説明するつもりなので、幾つにも折り重なった風呂敷を開いていくように読者の皆さんとともに、”プロトタイプ”の本質を明らかにしていこうと思う。
プロトタイプとは？
プロトタイプと聞いて、ロボットアニメ好きならピンとくる方もいるだろう。
いわゆる「試作モデル」というもので、開発の初期段階から積極的に作成することが多い。
今の説明だと、皆さんの脳内では潜在的に「モノを作るために必要なプロセスなんだな」と思われた方も多いと思うが、UXデザインをテーマにお話しているので、その限りではない。
“モノ”だけではなく”コト”にも大いに活用できるものだということを覚えておいてほしい。
プロトタイプは大きく分けて２種類
プロトタイプは２つの種類に分けることができる。
それは、「体験型プロトタイプ」と「実現型プロトタイプ」だ。
体験型プロトタイプ
その名の通り、体験を試作（プロトタイプ）することを指す。
具体的には、どういうサービス／プロダクトを作ったことによってどういう「体験」ができるのか？を試作によって見極めていく。
UXデザインをする上では欠かせないプロトタイピングである。
代表的な方法は以下の通り。
映像や写真などを使った間接的なプロトタイプ
映像や写真にCGやイラスト挿入などの技術を用い加工・編集し、客観的に体験できるようにする手法を指す。
もう少しわかりやすく説明しよう。
少し例えが古くて恐縮だが、日本の伝説的コメディアングループであるドリフターズの映像コント「もしも〜だったとしたら」シリーズなどが近いだろう。
実際に体験しているのは映像の中の人なので、ディスプレイ越しに見ている我々は客観的に「もしも〜だったとしたら」を体験していることになる。
本人に体験してもらう直接的な体験
本人を直接的に体験してもらう手法を指す。
この手法は映像や手紙などを使わなくてもできる手法だ、こちらも例えを使って説明してみよう。
あなたは意図的な笑顔を作って写真を撮られるのが苦手だ。だから、自然に笑顔になったとき、スマートフォンのカメラが笑顔を認識してシャッターが切られるフォト系アプリを作りたいとする。
しかし、人が笑った顔を認識する仕組みを開発していないのだが、実際にユーザーに必要とされているか？体験を試作し評価してもらう必要がある。
この体験には…
- 体験する人
- オペレーター
- スマートフォン
- シャッター音や笑顔を認識する音
が必要だ。
何をするかというと、アプリを起動したとして、体験する人の自然な笑顔をスマートフォンのカメラレンズ越しに向けてもらう。その笑顔に反応し、オペレーターが笑顔に反応した際に発する音を出し、カメラのシャッターを切る音を出す。（カシャッという音としておこう）
以上。これも間接的なプロトコルを説明する際に例としてあげた「もしも〜だったとしたら」を体験する人本人参加型の寸劇をやっているようなものだ。
原始的に聞こえるかもしれないが、これがタメになる。
事前に必要とするものが少ないので、直ぐにプロトタイピングに取りかかることができる。プロトタイプを体験し、評価を受けて出た問題を早い頻度で改善に繋げるのが、主観的に体感できるこの手法だ。
実現型プロトタイプ
実際に体験型プロトタイプの検証によって評価され、次のフェーズに進むとなった場合に、実際にどうやって作成するのか？現在の技術やアプローチを用いて検証・試作していく。
こちらのプロトタイピングはエンジニアなどの技術職をもつ人が行う場面が多いのではないだろうか？
外観を試作する
プロトタイプを体験してもらったことにより、一定の評価を得て次のフェーズへとコマを進めたら次は外観を作っていこう。ここでいう外観とは、広い意味を持つ。
WEBやアプリケーションのデザインであればCSSやJAVAに当たる分野だろうし、お菓子やアイデア商品などの有形サービスであればパッケージデザインなど（イラストやフォントなど）も当てはまる。
無形サービスにあたるものであれば、メディアや消費者に向けてローンチした際に露出するデザイン（ポスター、バナーデザインなど）などもそうであろう。
このプロトタイピングで分かることは、中身（体験したこと）と外見がアンバランスになっていないか？違和感はないか？予想していたことに解離はないかを検証することだ。
ここでのプロトタイピングについてはエンジニアだけではなく、デザイナーも、セールスも、プロジェクトリーダーも、多くの方々が大いに関わる部分だろう。
技術的な試作
実際に体験してもらい、外観も違和感がないと評価されれば更に次なるフェーズへと進もう。それは、いよいよ”仮想的体験”を”現実的体験”にする為の試作になる。
ここでは採用する予定の技術などを実装し、不具合がないか？なども含めて精査していく。
総合的な試作
さて、ここがプロトタイプの最終局面に当たる。
「総合的」と書いている通り、このプロトタイピングでは外観、技術的な試作を合体させ、一つのプロトタイプへと仕上げていく。
この段階で初めてユーザーテストを試せるようになってくる。
あとは人間中心設計でもデザイン思考でも同じことだが、試作を評価し、ユーザーの声を反映・改善し、より良くしていくことを繰り返す。
そうして初めて人間社会にとって価値のあるモノ・コトへと仕上がっていく。
プロトタイプとプロトタイピングの違いとは？
本記事を読んでいて気になることはなかっただろうか？
「プロトタイプ」というワードのほかに「プロトタイピング」というワードもちらほら出てきていたのだ。しかし、大きな違いはないので安心してほしい。
プロトタイプは試作モデルのことを指し、プロトタイピングは早期に試作する過程を指す。いくら天才でも頭に思い浮かべた完成品を一発で作ることはできない。
かの発明王エジソンもこう言っている。
「私は失敗したことがない。ただ、1万通りの、うまく行かない方法を見つけただけだ。」と。うまくいかない部分の改良を重ねることで、完成品に近づけていけるのだ。
プロトタイピングを活用する場面とは？
プロトタイプ・プロトタイピングの種類について説明してきたが、具体的に「どういう時に使用すればいいんだ？」と思う方も多いだろう。
一概にこのタイミングで使えます！というものではないので、代表的な活用場面を記載しよう。
- WEBデザイン
- アプリ開発
- 製品の開発・改善
などがイメージがつきやすいだろうか？
また、プロトタイピングに至る経緯（入口）としては以下の２パターンが想像しやすいと思う。
- 新規開発（デザイン思考のプロセス”アイデア創造”から発展するなど）
- ユーザーのフィードバックを基にする
新規開発については、デザイン思考から生まれることが多い。革新的なアイデア創造から始まり、プロトタイピングへと進むパターンが多い。いわゆる”発明”というやつだ。
もう一つは”ユーザーからのフィードバックを基に改善し、新たな改良版をプロトタイピングする”というものだ。こちらは人間中心設計を活用した事例が多いように思う。
【関連記事】
人間中心設計(HCD)とデザイン思考の違いを徹底的に解説｜保存版
プロトタイピングのメリット
「プロトタイピングの手法やプロセスは分かったけど、とにかく試作しまくれば、いつかは完成品に近づくんだから、あんまり気にしなくてもいいんじゃないの？」と、そう筆者は思ったことがある。
しかし、堅実な段取りでプロトタイピングを行うメリットは大いにあるのだ。あらゆるビジネスにおいては非常に重要なことなので、必ず目を通してほしい。
クライアントとのずれを防ぐ
顧客から依頼された案件の場合、良くあることの一つが”認識のずれ”だ。何をしてほしいのか？どれぐらいのクオリティを求められているのか？などは打ち合わせだけでは判断できないことが多い。
プロトタイピングにより、案件のイメージを可視化すること顧客のニーズに気づくことができ、透明性を保つことができる。
チーム内でのずれを防ぐ
クライアント然り、チーム内で案件のイメージを可視化できれば開発・試作をスムーズに進めることができるだろう。まさに「百聞は一見にしかず。」である。
必要・不必要なものを洗い出せる
精密な設計をしたにも関わらず、実際に開発してみると仕様が肥大化してしまい、改善する箇所が多くなってしまうなんてことは非常に良くあることだ。
早々に体験型プロトタイプや外観を試作してみることで、必要・不必要な部分をあぶり出すことができる。
プロトタイピングのおすすめツール
こちらではWEBデザインやアプリケーション開発をする方向けに、定番から注目されているものまで、おすすめのプロトタイピングツールを紹介したいと思う。
よく使われているプロトタイピングツール
【Origami Studio】
＜出典＞Meta
https://origami.design/
Facebookが提供している「Origami Studio」はUIからアニメーションにこだわったデザインをしたい方にはおすすめのプロトタイピングツールだ。
フォトショップにあるようなレイヤーにアニメーションの制御を行うパッチを複数組み合わせていくと、自由度の高いデザインができる。
【Adobe XD】
Adobe社が提供する「Adobe XD」はUI/UXデザインを包括的に行うことができるバランスの良いプロトタイピングツールだ。
同社のフォトショップ、イラストレーターほどのクオリティは作成できないが、ワイヤーフレーム、カンプなどのプロトタイプをデザインするには最適だ。
最近注目されているプロトタイピングツール
【Figma】
＜出典＞Figma
https://www.figma.com/
FigmaはチームでUIデザイン化するのに適したプロトタピングツールだ。windowをはじめ、Mac、Linux、ChromebookなどのOSにも柔軟に対応しているので非常に使い勝手が良いのも魅力だ。
【ProtoPie】
＜出典＞ProtoPie
https://www.protopie.io/
ProtopPieは滑らかな偏移アニメーション、他のデザインツールを使用したことがある方なら直感的に分かるような操作性、そして素早くデザイン作成し、共有ができる。
早期な試作が求められるシーンにおいて、非常に活用できるプロトタピングツールだ。
まとめ
プロトタイプやプロトタイピングと聞くと、WEBデザインやアプリケーション開発をすること、のような印象が強いだろう。
しかし、プロトタイプそのものにテンプレートはないが裏を返せば、どんな問題・課題や案件にも活用できるのだ。そのためには人間中心設計やデザイン思考のマインドセットやプロセスを知ることが重要である。
是非、まだ読んでないのであれば目を通していただきたい。そうすれば本記事の内容がより深くお分かりいただけるはずだ。
【関連記事】
人間中心設計とは？HCD資格保有者が難しいことばを使わず徹底解説