翠灯舎 | Suitosha Inc. 翠灯舎 Suitosha Inc.

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

2016.4.7



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



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


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


_DSC6915

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


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


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


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

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

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

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

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



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

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


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

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


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


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



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


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


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


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


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


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



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



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


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

野田


Photo by  YUMI KURATA

Offer to Us

to Top Page

Contact

Contact