「プロトタイピング」という用語を耳にする方も増えてきたのではないでしょうか。しかし用語は聞いたことがあっても、どんな意味なのか／どういった場面で使われる言葉なのか分からない…そういった方にオススメの、プロトタイビングの概要をわかりやすく解説した記事です。
「プロトタイピング」とは
「プロトタイピング」とは、仮組みされたモデル・試作品（プロトタイプ）を使って検証や改善を繰り返す手法のことです。
「プロトタイプ」と「プロトタイピング」は混同されがちですが、前者は試作品やアイデアを視覚化・実体化したもの、後者は試作品や実験品などを用いた検証の手法やプロセスをさします。
この手法を使うことで、「この機能が本当に搭載できるのか」「実際に使いやすいか」という、商品のUI/UXに関わる部分の検証をおこなうことができ、機能や仕様を洗練することができます。
- UI（ユーザーインターフェース）
- ユーザーが商品やサービスを使用する際の画面や見た目、操作、表示。
例）ウェブサイトやアプリのアイコン・ボタンなど - UX（ユーザーエクスペリエンス）
- ユーザーが商品やサービスを通じて得られるすべての体験。
プロトタイピングでは、ユーザー視点で検証を行い、多角的な視点でフィードバックすることがより重要です。
これにより改善点や問題が早期に見つかり、よりよい製品やサービスを生み出す一助になります。
プロトタイピングをいつ・どう使う？
プロトタイピングはシステムやプロダクト、サービスなどの開発・デザイン段階で使われる手法です。
近年、生活者のニーズが多様化し、把握が難しくなってきています。ユーザー視点でのデザインや開発をおこなうための有用な手段として、より製品に近い形で検証できるプロトタイピング手法が注目されています。
プロトタイピングのやり方に決まったものはなく、ペーパープロトタイプから実際に動くアプリ／システムなど様々なプロトタイプを作成します。
例えばウェブサイトやアプリ制作では、ワイヤーフレームでコンテンツの大枠を確認した後に、完成形に近いデザイン（ビジュアル）で実際の動きを検証できるものを作ります。これがプロトタイプです。この段階でプロトタイピングを行う場合が一般的です。
プロトタイピングをおこなうメリット
プロトタイピングをおこなうメリットとして、全体の方向性だけでなく細かな動作も検証できるという点があります。
たとえば、ウェブサイトでアイコンを押したら全面に画像が表示されるようなUIを作りたいとき、ゆっくり表示させたいのか？表示させる画像の大きさはどれくらいか？どこを押したら閉じるのか？など、ユーザーがより見やすい・使いやすいものを検証することができます。
また、ユーザーに近い立場の人に使ってもらうことで、「ボタンが小さすぎて押しにくい」「このヒーローイメージだとチカチカして気になる」といった細かいフィードバックを得ることができます。
プロトタイピングツールの紹介
プロトタイピングができるツールは近年たくさん出てきていますが、ここでは代表的なツールを3つ紹介します。
Adobe XD
アドビ製の、UI/UXデザイン・プロトタイプ・共同作業用ツールです。
https://www.adobe.com/jp/products/xd.html
- XDの特長
デザインをされている方なら、Adobe IllustratorやPhotoshopを使っている方がほとんどではないでしょうか。Adobe XDは、IllustratorやPhotoshopで作ったデータ（.ai/.psd）をそのまま読み込めたり、Illustrator上で作ったベクターデータをコピー&ペーストして使うことができます。
参考：https://blogs.adobe.com/japan/web-faster-together-opening-illustrator-files-in-adobe-xd/
また、Adobe IDがあれば無料で利用できます。無料版はいくつか制限がありますが、機能に差はないので、ぜひ実際に使ってみることをお勧めします。
※無料版…共有が1回まで、クラウドストレージが2GB、Adobe Fontsの使用できるフォントが制限されます。
Prott
Goodpatch社の提供するプロトタイピングツールです。
https://www.too.com/product/software/prott.html
- Prottの特長
-
- 紙にかいたスケッチを読み込み、そのまま使える
- モバイルでも編集可能
- Webブラウザーで作成できる
Prottの特長は、紙にかいたスケッチやデザインデータを読み込み、画面遷移のトランジションやジェスチャーを設定するだけでプロトタイピングができてしまうところです。
デザイン関連のツールをあまり触ったことのない方でも簡単に使うことができます。また、iOSアプリやAndroidアプリでも編集が可能なので、「誰でも」「どこでも」が実現するツールです。
こちらも無料で使えるFreeプランが用意されていますので、気になる方はぜひ登録をしてみてください。
Sketch
オランダのBohemian Coding社が開発・販売するUIデザインツールです。
https://www.sketch.com/
- Sketchの特長
-
- ベクターデータによる制作のため、解像度の変化に強い
- 低価格で買い切り
- CSS書き出しに対応
ベクターベースのデザインツールなので、解像度に左右されずにデザインを作ることができます。作ったデザインはそのままCSSで書き出すことができます。
※Windowsでsketchファイルが編集できる無料アプリもあります（Lunacy https://icons8.com/lunacy）
UIは英語ですが、直感的に操作することができます。mac OSのみ対応しています。
Sketchも30日間無料で使用できるので、ダウンロードしてみてはいかがでしょうか。
プロトタイピングにぜひチャレンジを！
作業工程としては一つ増えますが、手戻りの削減で無駄な作業時間を減らすことができます。何よりユーザーに高品質な体験を提供するためにも、プロトタイピングを実施することをお勧めします。
ウェブやアプリデザインの仕事をしていてまだ使ったことがないという方は、ご自身の仕事にあてはめて一度考えてみてはいかがでしょうか。