Webサービスのデザインをペーパープロトタイピングから始めてみた話
先日ペーパープロトタイプを作る機会があり、プロトタイプを作る良さ。を感じたので、そのお話をしたいと思います。
なぜペーパープロトタイプを作ったか
InnovatorJapanでは先月warikanという、ビットコインで割り勘ができるサービスをリリースしました。
そして、warikan立ち上げの際に、担当デザイナーにアサインされたことが、ペーパープロトタイプを作ったきっかけです。
はじめは、最小限の機能でスタートすることになっていたので、プロジェクトメンバーはエンジニア1名とデザイナー1名。 私がアサインされた当初は、サービスは動く状態ではあったものの、そもそも「どんな画面が必要？」といった設計があやふやしていました。
そこで、まずはサイトマップとワイヤーフレームを作ろうと思いました。
しかし、サイトマップもワイヤーフレームも、中々思うように作れません。
というのも、いわゆる「コーポレートサイト」のようなページ移動が少ないサイトであれば、サイトマップ、ワイヤーフレームだけで十分かと思うのですが、
ページ移動をしながら使うWebサービスでは、「ページ移動」もサイトマップ、ワイヤーフレームと一緒に考慮する必要があるからです。
そこで、私はサイトマップ、ワイヤーフレームと同時にページ移動も考える目的で、ペーパープロトタイプを作ることにしました。
やったことは以下です。
- サービス内でユーザーにとって欲しい行動をリストアップする
- 上で挙げた行動をするために、必要となりうるページを洗い出す
- 各ページにどんな要素が必要なのかスケッチする
- そのページを時系列に並べ、不自然な箇所があれば修正する
- ↑で、必要なページと、そのページの要素が決まったら、各ページの写真を撮り、InVisionで実際に動かせる状態にする
です。
ペーパープロトタイプの良い点
実際作ってみて良かったと感じたのは、
- サービス内のページ移動を俯瞰して見れる
- エンジニアと認識を共有することができる
点です。
サービス内のページ移動を俯瞰して見れる
プロトタイプでは、複数のページを一覧して見ることができるので、ページ移動の不自然な部分や不便な部分に事前に気づくことができました。
エンジニアと認識を合わせることができる
そもそも「どんな画面が必要？」といった設計があやふやですと、要件定義も難しくなります。
作ったプロトタイプを、エンジニアと一緒に動かして、認識を合わせることで、一気に要件定義がしやすくなり、後の作業がスムーズになりました。
プロトタイプを作ることで、必要な機能やUIを可視化できるからです。
また、ペーパープロトタイプなので、比較的低コストで上記のことが実現できるのも、魅力だと思います。
プロトタイピングをよりカジュアルに
そんなワケで、Webサービスのようなページ移動も考慮したデザインには、プロトタイピングがとても大事だと感じました。
Webサービス以外でも、お申し込みフォームのように、ページ移動の考慮が必要なことがあるかと思います。
そんな時は、気軽にできるペーパープロトタイプを作ってみてはいかがですか？
必要なのは紙とペン。これだけです！
最後に
冒頭でも紹介しましたが、Innovator Japanでは先月にwarikanというビットコインで割り勘ができるサービスをリリースしました。
飲み会や旅行など、割り勘をする機会はありますが、 現金での割り勘は何かと煩雑になりがちです。
warikanであればビットコインで割り勘できてしまうので、現金よりスマートに割り勘ができます。
ぜひこの機会に使ってみてください o(^_^)o
