近年、UXデザインが注目されるとともに、プロトタイピングという言葉もあわせて話題にのぼるようになりました。しかし、言葉だけが1人歩きしてプロトタイピングツールの存在は知っていても、その手法が理解できている方はまだまだ少ないようです。そんな方にプロトタイピング手法とはどのようなものなのか、ツールとあわせて詳しく解説します。
UXデザインにおけるプロトタイピングとは一体どんな手法なのか
プロトタイピングとは何を指す言葉なのでしょうか？ まずはそもそもプロトタイプとは何なのか。つづいてプロトタイピング手法について、詳しく順に解説します。
そもそもプロトタイプとは？
プロトタイプとは、優れたUXデザインを実現するための工程の中で作成される試作品のことです。UXデザインの6つの工程は以下の通りです。
UXデザインのための6ステップ
- 目的の設定
- リサーチの実施
- ペルソナ・シナリオの設定
- カスタマージャーニーマップの作成
- プロトタイプの作成
- ユーザーテスト
目的の設定からカスタマージャーニーマップの作成までの4つの段階を経て、それらを反映させた集大成として作られるのが、プロトタイプです。サイト作成でいえばプロトタイプはワイヤーフレームを基に作られるWebサイトの原型で、実際のWebサイトのデザインや機能をほぼ備えた状態のものです。
プロトタイプが完成すると、プロトタイプを用いてユーザーテストを行うことが可能となり、ユーザーテストの内容はまたプロトタイプの修正へとフィードバックされる仕組みとなっています。
UXデザインのためのプロトタイピング手法：ラピッドプロトタイピングとは？
プロトタイピングとは、プロトタイプを作成する作業そのもののことを指す場合と、プロトタイプを作成するための手法を指す場合があります。プロトタイプを作成する作業については後述するとして、こちらではプロトタイピング手法について詳しく解説します。
プロトタイピング手法とは、プロトタイプを作成するための過程や完成後の検証で行うべきもので、上記の6ステップのなかの6番目、ユーザーテストをも含めた検証方法のことです。
なかでも注目されているのが、ラピッドプロトタイピングです。ラピッドとは、素早い、迅速なという意味の言葉です。
ラピッドプロトタイピングとは、ラフなプロトタイプを早い段階で作成する手法のこと。すぐにレビューやユーザーテストを行って、レビュアーやユーザーからリファイン(改善点)をもらい、フィードバックすることでさらにプロトタイプを改善することが可能となります。
このサイクルをプロトタイプの忠実度が高くなるまで、インテレートする(繰り返す)手法がプロトタイピングにおけるラピッドプロトタイピング手法です。
プロトタイピングの注意点とは？
プロトタイピング手法を実践するためのツールにはさまざまな種類があります。紙に書いた青写真的なデザイン画や、大型付箋紙をボードに貼り付けたものなども見受けられます。
WebサイトのUXデザインであれば、デジタルプロトタイピングツールを使うのも1つの方法です。実際にコーディングしてプロトタイプを作るネイティブプロトタイプも、デジタルプロトタイピングの1つに挙げられます。
しかし、ここで注意点となるのは、ラピッドプロトタイピングなど早い段階でプロトタイプを作成するプロトタイピング手法を用いる際には、ネイティブプロトタイプはなるべく用いないということです。
それは、コーディングが必要なネイティブプロトタイプには、かなりのコストがかかってしまうからです。プロトタイプはあくまで試作品のため、改良ありきで5回、6回とインテレートするラピッドプロトタイピングでネイティブプロトタイプを用いると、莫大なコストを要することが予想されます。
プロトタイピング手法の実践に使えるプロトタイピングツール3選
プロトタイピング手法の実践に使えるプロトタイピングツールを3つご紹介します。どれも有料バージョンが用意されていますが、共有回数の制限やフォント数、エクスポートの制限などがある程度で、個人使用なら無料機能だけでも十分に使えるものばかりです。まずは無料で使用してみたのち、有料バージョンを検討してみてはいかがでしょうか。
Adobe XD
IllustratorやPhotoshopを提供するAdobe社がリリースしている、UI/UXデザインのためのプロトタイピングに特化したツールです。業界ではIllustratorやPhotoshopを使えるデザイナーがほとんどで、Adobe CCに登録していれば無料で追加が可能です。
アドビ社のツールがパッキングされたAdobe CCに登録していたり、デザイン事務所はCreative Cloudを導入していたりする会社が多いため、自然とシェアがあります。
Adobe XDの何よりの利点は、プロトタイプとデザインの両方を作ることができる点。ほかのプロトタイピングツールとデザインツールを連携させて使う旧来のやり方では反映作業が面倒でしたが、その工数が省けるので大変便利です。
そのほかにもIllustratorやPhotoshopで加工した画像などが簡単にインポートできたり、ショートカットがAdobe共通なので手が覚えていたりと、親和性が高い点も魅力となっています。
https://www.adobe.com/jp/products/xd.html
Prott
Adobe XDが登場するまでの日本のプロトタイピングを支えてきたといっても過言ではないのがPrott。こちらとデザインツールでもあるSketchを、プラグインで連携させて使う方法が一般的です。
Prottの良さは機能が豊富な点で、紙にかいたフレームワークを読み取り、画面遷移やジェスチャーを設定するだけで、プロトタイプが完成します。ほかにも、デザイン一覧がダウンロードできたり、コメントが残せたりといったプロトタイプ作成に必要な機能はひととおりそろっています。
1ユーザーで1プロジェクトを作成する場合には、無料でできる点も魅力です。
InVision
InVisionは細部の機能は異なるものの、ほぼProttと同じようなプロトタイピングツールです。世界ではProttよりもInVisionの方が広く使われています。
InVisionの良い点は、ライブシェア機能があることです。たとえばユーザーテストの際に、ユーザー自身やインタビュアーが直接コメントを書き込むとそれが共有者全員にリアルタイムで反映されたり、音声通話を行ったりすることも可能です。
Prottと同じようにSketchとの連携も可能、UserTesting.comと連携すると、ユーザーテストを広く行うこともできる多機能ツールとなっています。
こちらも、1ユーザーで1プロジェクトなら無料で使用が可能です。
ラピッドプロトタイピングでプロトタイプを作成しよう
UXデザインにおけるプロトタイピングとは何か、具体的なプロトタイピング手法、とりわけラピッドプロトタイピングの実践方法と、注意点について詳しく解説しました。また、ラピッドプロトタイピングの実践に使えるプロトタイピングツールについてもご紹介しました。この記事を参考にして、プロトタイプを作成しUXデザインを実現しましょう。
