Web/アプリのデザインを行う上で作成する機会が多いプロトタイプ。プロトタイプを作成することで、メンバー間の認識合わせや、改善箇所の早期発見が可能になります。
この記事では初めてデザインプロトタイプを作成する方向けに、プロトタイプについてや、作成の意義、作る上でおすすめのツールをご紹介します。
目次
プロトタイプとは
プロトタイプとは完成品を作るにあたって経過段階を確認するための試作品のことを言います。プロトタイプと聞くと車のプロトタイプなど、物に対するイメージがありますよね。
実はWebサービスやアプリなどでもプロトタイプを活用します。プロトタイプを使用することで、言葉では表現しづらいアウトプットを表現することができます。コミュニケーションが円滑になったり、プロトタイプを活用して新たら議論を生んだり、様々なシチュエーションで活躍します。
プロトタイプとワイヤーフレームの違いとは
デザイン業務においてよく混同してしまうのが、プロトタイプとワイヤーフレームの違い。この2つは目的が異なります。
ワイヤーフレーム：
要素や機能ベースで要件を満たしているか、構造の破綻がないかを確認するために作成します。
そのため、ワイヤーフレームにビジュアルは全く関係ありません。極論、テキストベースで『お気に入りボタン』などと説明しても良いのです。
プロトタイプはワイヤーなどで決まった要件をある程度作り込み、完成品に近い状態で体感できることが目的です。デザインにおけるプロトタイプの具体例をあげると、ワイヤーフレームのレイアウトを行い、画面遷移をつけた状態です。
要件ベースの漏れはワイヤーフレームで担保できますが、その要件の表現は問題ないか、そもそもその要件は必要かの担保はプロトタイプを作らなければ担保できないのです。
デザインにおけるプロトタイプを作成する意義
プロトタイプはデザインを進めるにあたって必要不可欠です。なぜプロトタイプ作成が必要なのか、作成する意義をご紹介します。
「こんな感じ」のイメージを具現化するため
頭の中にある感覚的なイメージは文章で表現しづらいですよね。特に画面遷移やアニメーションなど、動きが伴うイメージは難しいです。この様な漠然としたイメージをプロトタイプで表現することで、イメージを膨らませたり整合性を確認することができます。
個人的にも、平面上で考えるとなかなか自分のアイデアが膨らまず手が止まってしまいますが、プロトタイプを作ることで思考を整理することができました。まずイメージが浮かんだらプロトタイプで作成してみて検証、を行うとうまく作業が進むのでおすすめです。
「こんな感じ」のイメージを他人に的確に伝えるため
企業によってはこの作業をパワーポイントで作成→文章で説明しています。ただ、頭の中で思い描いているイメージを紙やテキストで説明するのは難しいですよね…
そこで、プロトタイプを作成することで、伝えたい相手にイメージを的確に伝えることができます。
イメージを的確に伝えることで、認識のズレをなくしたり、イメージを元により良い実現方法に向けて議論が生まれるなど、相乗効果が生まれます。
個人的な感覚値ですが、パワーポイントやテキストで伝えることに比べて、5倍ほどコミュニケーションが早くなります。それだけ平面で見るのと構造で見るのとでは違いがでるのです！
失敗を重ねられる
1の成功を掴むためには10,100とたくさんの失敗をしながら試行錯誤することが重要です。
完成まで作り込んでしまうと時間や費用がかかり、失敗できない、失敗の回数が減ってしまいます。
プロトタイプを作ることで、体験設計は適切か早期にテストすることができます。また、プロトタイプ段階ではいくらでも作り直しができるので、早くサイクルを回しながらプロダクトの仮説検証を行うことができます。磨き上げた状態で完成させることができるのです。
デザインプロトタイプツール
最後にプロトタイプを作る上でおすすめのツールをご紹介します。デザインの知識がなくても、テンプレートを使って完成イメージを作成できるので、是非活用しましょう！
Invision
世界で一番使われているプロトタイピングツール。画像や用意されたテンプレートを元に簡単に画面や遷移を作成可能。作ったものをシェアすることもできます。デザインができないかたからプロユースまで、幅広い利用が想定されています。
Prott
Prottの強みは国産サービスで日本語対応していること。大手日本企業の導入も多く、セキュリティー周りなどもしっかりしています。安心したツールを使いたい方におすすめです。
プロトタイプについてや作る意義についてご紹介しました。プロトタイプを作成することで、自分の整理やチームとのコミュニケーション、新しいアイデア創出など、様々なメリットがあります。
自社サービスでデザインを進める際にぜひ試してみましょう。
UXUIデザイン支援資料
セブンデックスのUXUIデザインプロセスと実績詳細が解説されている資料を無料でダウンロードできます。
