【UX中級編ワークショップ中編レポ】ペーパープロトタイピングを学びました

株式会社おいかぜさんとの合同主催のUX勉強会、
UX中級編ワークショップ「構造化シナリオ法・プロトタイピングを活用したサービス開発」。
4/2（土）に、その第2回目が開催されました。

今回のテーマは「ペーパープロトタイピング」。
前回作ったシナリオやサービス概要を、どんどん目に見える形に変換していきます。



会場はMTRL KYOTOさんの2階。
2階はこんな感じで和室になっているのです。
みんなでちゃぶ台を囲んでワークショップスタート！

まずはストーリーボードなるものをどんどん作っていきます。
ユーザーの観点から、「どんなときにサービスに触れるのか（タッチポイント）」を見いだし、
タッチポイント1つ1つを絵コンテと簡単なテキストで表現していきます。



とにかく描いて描いて描きまくる私たち。


このとき注意するのは「できるだけスマホやPCで検索しているところ」というような姿は描かないこと。
どんなふうに感じ、どんなことを考え、どんなふうに行動をとろうとしているのか、
「検索」と一言で片付けるのではなく、より本質に近づいた「ストーリー」に落とし込みます。


私達のチームでは、この時点で「このサービスいけてんのかなあ」というもやもやがありました。

ユーザーが求めているものって結局何なのかな？
これ何回も使ってもらえるのかな？
本当に儲かるのかな？

こうしてストーリーボードにしてみると、どうも納得がいかない…

そこで浅野先生がおっしゃったのが、
「ユーザーは便利を求めているのではなく、成長を求めている」
という言葉。

その言葉がヒントになり、どんどんサービスが変容しシンプルになっていきました。
それにともない、ストーリーボードもどんどん変化。
それがとってもおもしろかったです。




次は、ワイヤーフレームの作成。
こちらももちろん紙に描いていきます。

前編で作ったインタラクションシナリオをもとに、情報を整理し画面上に設計。


「なるほどー」と思ったのは、TOPにあれがあって、下層にこれがあって〜というように
構造をまず考えるのではなくて、ユーザーの行動からワイヤーフレームを描いていくということ。
だから、ストーリーボード1枚に対してワイヤーフレーム1枚が生まれます。

つまり、ストーリーからワイヤーフレームは生まれるのです。


普段は
「全体の構造（サイトマップ）がどうなっているか」
→「それをユーザーがどう使うか」
の順で考えていたので、これは目から鱗でした。


あと個人的に、いつもPC上でワイヤーフレームを作っているので、
手でワイヤーフレームを描くのがすごく難しかったです。
メンバーの方がさくさく描いてくださったので本当に助かった…。




ワイヤーフレームが描けたら、今度はどんどん切る！



切って切って切りまくり、
ワイヤーフレームを1枚ずつばらばらにします。



切ったら並べます。これが遷移図。
ストーリーボード（コト）が、ワイヤーフレーム遷移図（モノ）に変換されていきます。



遷移図ができたら、ユーザーとして実際に使ってみます。
「あのボタンが足りない！」「この機能じゃま！」などとどんどんブラッシュアップしていきます。



それができたら次はプロトタイピングツール「Prott」への移植。
描いたワイヤーフレームを写真に撮ってこのProttに取り込むと、
手書きのワイヤーフレームにリンクが張れたりクリックして動かしたりできるという
何とも画期的なサービス。これはすごい。



PCに取り込むとこういう感じですね。
「何だこれむちゃくちゃ便利だなー」と思いました。



中編はここまで！
今回は「コト」を実際に「モノ」にしていく作業でした。



最後の後編は4/23（土）、テーマは「体験プロトタイピング」です。
作った「モノ」を体験してもらう、ということでしょうか？？
何はともあれ、各チームからどんなものができあがるのがとても楽しみです。


ご参加された皆様、2日目もどうもありがとうございました。
あと1日、どうぞよろしくお願いいたします！

野田


Photo by  YUMI KURATA