ワイヤーフレームとプロトタイプが試作品づくりで特に重要な理由とは
Webサイト構築やアプリ制作を成功させるために、最初に全体像が見渡せる設計図を作っておくことは非常に重要です。実制作に入る前のひな形づくりとしては「スケッチ」「ワイヤーフレーム」「モックアップ」「プロトタイプ」などがあります。それぞれなんとなく違いはわかるものの、きちんと違いを答えられる人はそれほど多くないかもしれません。打ち合わせや制作の現場で混乱しないように、それぞれの意味と役割を把握しておくことが大切です。
この記事ではそれぞれの違いを把握した上で、特に、ワイヤーフレームとプロトタイプについて詳しく解説します。
「スケッチ」「ワイヤーフレーム」「モックアップ」「プロトタイプ」の順番に完成度がUPします
Webサイト構築やアプリ制作を進めるための試作品である「スケッチ」「ワイヤーフレーム」「モックアップ」「プロトタイプ」は下記のような要素を加えていくことで、完成品一歩手前になっていきます。
1.スケッチ
アイディアを手書きで書き留めるような段階で、何度もやり直しをして頭の中のモヤモヤを整理していきます。
2.ワイヤーフレーム
Webサイトの遷移やアプリの操作の流れなど、バラバラのスケッチに流れを作る作業です。
3.モックアップ
ワイヤーフレームでつかめたサイトやアプリの全体的な流れに色やアイコン、写真やロゴなどを追加します。
4.プロトタイプ
ユーザーがボタンをクリックした時の動きや、システムからのダイアログなど、ポイントとなるUX（ユーザーエクスペリエンス）に関わる部分の機能を実装します。
もちろんこの順番通りに、各段階の試作品を必ず作らなければいけないというわけではありません。1のスケッチは会議の席上ホワイトボードに書いてみせるだけでも良いかもしれませんし、3のモックアップと4のプロトタイプはUXが加わっているかどうかだけですので、予算や時間が許せば4のプロトタイプまでやってしまった方がより完成のイメージを共有できるでしょう。
ワイヤーフレームは企画の確認、プロトタイプは外注範囲をはっきりさせることができる
先ほどの1.2.3.4の流れの中で、2のワイヤーフレームと4のプロトタイプをおさえておくと、社内の打ち合わせと外注先との打ち合わせがスムーズにいきます。
つまり１のスケッチだけでは全体の流れが分かりませんので、画面のアイディアは出て来てもそれが全体としてどういう目的を果たすのかが分かりません。画面遷移やアプリの流れという部分にまとめることで「このサイト/アプリはこういう目的で制作する」という企画の部分がはっきりします。
また、プロトタイプで動きの部分を含めて完成形イメージを作っておくと、外注先に制作や開発を依頼するときに間違いがありません。もしWebサイトやアプリが、インタラクティブな部分を全く含まない静的なものである場合は、色やアイコン、写真やロゴなどを追加したモックアップだけでいいかもしれません。しかし最近のWebサイトではただ見せるだけという作りのものは少ないですし、アプリにしてもUXが関係ない紙芝居のようなものはちょっと考えにくいでしょう。
つまり、UXを含んだ試作品を作ってしまえば、発注側のイメージが大きくずれることなく制作、開発が完了する確率が非常に高くなるわけです。
【まとめ】
以上、「スケッチ」「ワイヤーフレーム」「モックアップ」「プロトタイプ」のそれぞれの違いを確認しながら、ワイヤーフレームとプロトタイプの重要性について解説しました。もちろん試作品を作るにも時間やコストがある程度かかってしまいます。しかしWebサイト制作やアプリ開発を成功させるために、条件が許す範囲で試作品をきっちり作ることをおすすめします。
株式会社キャパでは、アプリの企画・開発についてご相談を承っています。
アプリを作りたいので、具体的な提案が欲しい。頭の中にあるアイデアを本当に実現できるのか知りたい。予算内に収まるのか？
などのお客様のご相談に、親身に応じます。
