デザイナー

プロトタイピングとは?重要な理由やその方法をご紹介

デザインの現場で「プロトタイピング」という言葉を聞いたものの、いまいちピンとこずに困っている…とお悩みではありませんか?

プロトタイピングはスタートアップや新規サービスを打ち出す際などに取り入れられている工程のことで、IT業界をはじめさまざまな業種で取り入れられています。

今回はプロトタイピングの概要とその重要性や方法、気を付けるべきポイントについてご紹介します。

プロトタイピングとは

プロトタイピングとは実装したいサービスや製品の試作品を作り、それを使って検証・改善することで、よりよいものを作り出そうとするプロセスのことを言います。

デザイン面だけのプロトタイピングもあれば、機能面だけのものもあり、実装の形も多岐にわたります。

共通しているのは、実装することでこれまで見えなかった課題や気づきが得られるということです。

例えばWEBサイトを作ろうとしている場合、企画書ベースで話をするのと、実際にデザインを起こしたり、テストサイトを作って確認したりするのとでは、見えてくる課題は大きく異なります。

またプロダクトデザインの場合、実際に触ってみて感じることも少なくないでしょう。

このように、実装することで多角的にサービスや商品について評価するためのプロセスをプロトタイピングといいます。

デザインにおいてプロトタイピングが重要な理由

特にデザインにおいて、プロトタイピングは重要な役割を果たすといわれています。

その理由を大きく3つご紹介します。

使い勝手がわかる

プロトタイピングの大きな利点の一つは、企画書ベースの内容を実際に触って使い勝手を確かめることができるという点にあります。

プロダクトデザインでもWEBサイト制作においても、実際に仕上がりをみて触ってみなければわからないことがたくさんあります。

それはクライアントやユーザーも同じです。

「希望は伝えているけれど、実際にどんなものが出来上がってくるか全く想像がつかない」というクライアントは、実は少なくありません。

そのため、最終のテスト段階になって「こんなものを作ってと言った覚えはない」など、認識の違いに直面し、一からやり直したという苦い経験を持つ方もいらっしゃるのではないでしょうか。

プロトタイピングであれば、試作品の段階である程度機能やデザインについて確認ができます。

そのため最終段階での修正を最小限にすることができるのです。

問題の早期発見・対応ができる

企画書通りに作ったものの、実際に触ってみて初めて分かる問題点もあります。

例えばWEBサイトの場合、ほかのページに遷移する場所がわかりにくかったり、アイコンが小さすぎて押しにくかったりすることもあるでしょう。

プロダクトデザインの場合なら、実際の触り心地や生活の中で不自然な導線で使用するようになっていないかなど、実物がないとわからないことは多々あります。

プロトタイピングを行うことで、こうした問題点を早期に発見し、対応することができます。

認識のずれを防ぐ

また試作品を作ることで、クライアントとの認識の違いを発見することもできます。

口頭や企画書など、実物がない状態でやり取りをしていると、知らぬ間に認識の違いが生まれることがあります。

プロジェクトの期間が長ければ長いほど、またかかわる人数が多ければ多いほど、認識の違いは起きやすいものです。

もちろん未然に防ぐ方法もありますが、最もわかりやすいのが、実際にモノを作り、それを見ながら話すことです。

試作品を見ながら話すことで、相手がどのようなことを望んでいるのか、何を問題ととらえているのかを明確に理解することができます。

プロトタイピングの主な方法

さまざまなメリットがあるプロトタイピング。

実はその方法は一つではありません。

ここでは代表的なプロトタイピングの手法を5つご紹介します。

ペーパープロトタイピング

主にWEBサイトやアプリ制作などで用いられる方法です。

その名の通り、インターフェースを紙に書くことで見える化していきます。

「試作品を作る」というと、コーディングやデザインの専門的な知識が必要なイメージがあるかもしれません。

しかしペーパープロトタイピングなら、だれでも好きなように書くことができるので、特にクライアントとのやり取りや、ワイヤーフレームを立ち上げる前の前工程として行われることが多いようです。

ペーパープロトタイピングのポイントは、細かい表記を気にせずに書くことです。

実際にどのようにデザインするかはプロの仕事です。

ここでは装飾などにこだわらず、ボタンや画面の配置、項目の数などを俯瞰して確認することで、デザイナーやクライアントのイメージを膨らませることに注力しましょう。

ワイヤーフレーム

デザイナーが専用ソフトを使って骨組みを組んだものです。

こちらもWEBサイトやアプリ制作などで用いられる方法の一つです。

フォトショップなどソフトもありますが、最近では専門的な知識がなくても取り扱えるものもあるので、だれでも作成することができます。

ただ、ここで作成したボタンや画面などの大きさは、そのまま実装後のシステムにも採用されるため、できればデザイナーに作ってもらうのがよいでしょう。

ワイヤーフレームでは使い勝手などを確認することができます。

ペーパープロトタイピングの段階で入れていた機能や装飾も、実際に当てはめることで難しくなることもあります。

これらをクライアントとの間ですり合わせながら、実際のサイト制作に向けたデザインの最終確認が行えます。

モックアップ

デジタルではなく、実際に模型をつくるプロトタイピングの方法で、主にプロダクトデザインに用いられます。

素材はさまざまで、針金などで作ることもあれば、粘土で組み立てるという人もいます。

また最近では3Dプリンタを使って製作する人も増えているようです。

モックアップはあくまで見た目の部分の確認だけなので、機能は伴いません。

ただ、ライトを実装する場合は実際に電飾を付け、ボタンを押すと実際に光るようにする、といったことも可能です。

大きさやどのような動きをするのかを見るときには、モックアップが便利だといえます。

コードプロトタイピング

コーディングによって実装に近いものを作る方法です。

ただ、機能などは完全なものではないことが多く、最低限の機能でどのような動きをするのか、またデザインの確認などに使用されます。

専用ツールを使用する

近年ではプロトタイピングのための専用ツールが登場しており、より簡単に試作品を作れるようになりました。

その一例をご紹介しますので、気になる方は是非チェックしてみてください。

Adobe XD:UX/UIデザイナー向けのソフトです。比較的使いやすいという特徴があります。

CACOO:ワイヤーフレーム作成に便利なツールです。基本の形を動かし、感覚で作ることができるので、手書きよりも具体的な情報を伝えたいときに便利です。

プロトタイピングで気を付けるべきポイント

メリットの多いプロトタイピングですが、気を付けるべきポイントもあります。

それはゴールを設けないで、際限なく行わないということです。

プロトタイピングは試作を繰り返すことでより良いものを目指す工程です。

しかし施策の回数が多すぎると、開発自体が遅れてしまったり、発売に至るまでの目標が高くなりすぎたりします。

どの段階で、何回プロトタイピングを行うかなど、ある程度ゴールを設けておいたほうがよいでしょう。

プロトタイピングとは?重要な理由やその方法をご紹介 まとめ

プロトタイピングにはさまざまな方法があります。

ぜひ貴社の目標に合った形で導入し、よりよい商品を作るために活用してみてはいかがでしょうか。