プロトタイピングをする最適なタイミングとは

ProttインタビューVol.1 ザッパラス様

Jun Saso-04 / 14 / 2015-Interview

株式会社ザッパラス
事業開発グループ ゼネラルマネージャー野村さん
デザインセンター デザイナー角方さん
-------------------------------------------------------------------------------------------------------------------------

3日間でアプリを作るところから始まった。

—— Prottを利用したアプリ開発のストーリーをお聞かせください。

野村 Prottでプロトタイピングをしてアプリ開発をしたものでいうと超運2015というアプリがあります。毎年、年末年始にかけて芸能人で誰が運勢1位か、血液型×星座×干支であなたは何位っていう占いをやっているのですが、今年はWEBだけでやる予定だったんですけど、協議をした結果、アプリもやろうとなりました。リリース日から逆算すると、企画から開発までたった3日でアプリを作らなければならない!という状況になりまして(笑)

—— たった3日、ですか…!

野村 ウチは、まずディレクターがワイヤーフレームと仕様書を書いて、それがデザイナーとエンジニアに渡ってプロダクトが作られていくという動きを今まではしていたのですが、この件に関しては3日という制限があったので、僕がその場でホワイトボードでバーっとUIを書いて、そのUIをデザイナーとブラッシュアップして、どんなスタイルで行くか決めたんですよ。

角方 アプリのUIは最初に紙で描いたものをProttにどんどん上げていって、デザインデータでクリエイティブができたものから差し替えていくという流れで使いました。

野村 自分の座席のすぐ隣にエンジニアがいるんですが、Prottでプロトタイプを作るとエンジニアも大体の機能の想像はできるのでそこから裏側をコーディングしていって、都度パーツをデザイナーから渡すという流れですね。
Prottの何が良かったかって、やっぱりエンジニアにProttを渡せば動きが理解できる部分ですね。もう今はウチの部署の全案件にProttを展開しています。
近々リリースするWebのサービスがあるんですけど、そこでもProttを使っていますね。

—— では今回の案件は仕様書を作ったりワイヤーフレームを作ったりっていうプロセスはなしでProttを使ってプロトタイプを通して、エンジニアに開発を依頼するという流れだったんですね。

野村 はい。ただ最初は一旦こんな感じでイメージしてますって言ってProttをエンジニアに見せていて、UIの変更は随時やっているので最終的なアウトプットはだいぶ違うものになることもありますね。また最近だと手書きで描いたものをそのまま外注先に見せて大体の見積もりをもらっています。ただ足りないのが、機能としてどんなものがあるのかはUIだけ見てもわからないので、結局機能リストを作っちゃってますね。

—— 社内のエンジニアさんとはどのようなやりとりでアプリ開発が進むんですか?

野村 エンジニアはサーバーサイドから開発を進めるのですが、クライアント側の開発に取り掛かる時にProttの画面を一旦見て、動きを確認した上で開発をしてもらっています。

角方 あとはProttを使うことでエンジニアが画面数をスクリーン一覧表示で把握できるとろも便利でした。あとコメント機能はタスク管理ツールのように使ってましたね。

—— Prott導入する前と後でどう変わりましたか?

野村 やっぱり今までディレクターが仕様をパワーポイントに起こすという手間は確実に減ってますね。

角方 あと実際に実装して、やっぱりなんかイメージと操作感が違うっていう手戻りが減りましたね。

—— 実際それで3日間でアプリできたんですか?

野村 金土日使って一応できました。そしたら3日でできるんだ!と、社内はある意味微妙な空気になりましたね(笑)一応それで事業開発グループの月次MVP取ったんです。全部で4人くらいでやりました。

—— Prottがなかったらどうなってたと思います?

角方 デザイナーの負担が大きくなっていたと思いますね。「これどうですか?(デザイナー)」→「OK(エンジニア)」 っていうコミュニケーションが大変で、Prottがあると「流れも含めてこれでどうですか?」って見せられるので先方もその場で判断できるようになりました。やっぱり手戻りが少なくなったのはいいところですね。今までは身振り手振りで、この画面からこういって〜ってあったのが「Prott見ておいてください!」とだけで済むようになったのがよかったですね。

スケッチの前にリーンキャンバスを書く

野村 今回の超運プロジェクトは時間も限られていたので短期間で作ったんですが、他のプロジェクトだと、まずはリーンキャンバス書いて、UI Flows(米Basecamp社のインタラクションデザイン手法)を全部書いて、MVPを作るために機能を削ぎ落としていって最終的に何を載せるかがそこで決まってから、初めて手書きのスケッチを始めるんですよ。その手書きをやるのはウチだとディレクターもやるし、デザイナーもやるしみたいな感じですね。結局最初の段階では誰が書いても意見を言い合うことになるんで。

—— 最初にワイヤー書いてProttに放り込んでやっぱり違うみたいな戻りがある時期ってどれくらいあるんですか?ワイヤーフレームを作ってすぐProttに取り込むのか、ワイヤーフレーム段階で十分に細かな点を検討していくんですか?

野村 いや、ワイヤーフレーム段階ではそんなに細かな検討はしないですね。

角方 まずProttを使って実機で見てみようってなりますね。今回の超運だと本当に時間がなかったので、最初にワイヤーフレームをホワイトボードに書いてそれを紙に書き起こして、Prottに取り込んでいく途中で遷移が切れてることに気づくこともありましたね。Prottでリンク遷移の設定に抜け漏れがないか整理できるんで。

野村 どこに戻るボタン置くんだっけ?みたいな。

—— こういうプロトタイピングツールってProttを導入する前から使っていたんですか?

野村 ここ3ヶ月くらいで様々なツールとフレームワークを導入しているんですけど、だいぶプロセスが変わってきましたね。Prottも使いつつ、Slackと連携しているんで、そっちに通知が行くように設定しているのと、GithubもSlackと連携しています。それとQiita:TeamとTrelloなど全ての通知がSlackに飛ぶようにしていますね。それぞれ役割分担をつけて運用しています。
開発フェーズはGithubでコミュニケーションするようにしていて企画フェーズではTrelloでコミュニケーションするようにしています。あとは社内でカンバンを使っています。

—— Trelloとカンバンってどのように使い分けてるんですか?

野村 Trelloだけ使っているチームも、基本的に対面でコミュニケーションするようにしていて、Trelloの項目をカンバンに貼っています。それを元に夕会でコミュニケーションが発生するように意識的にしています。

エピソード的UXの検証

—— リーンキャンバスとProttの間ってどうやってつなげているんですか?

野村 いわゆるUXデザイン定義をして、そこからまずユーザーシナリオを書いています。そこでユーザーが何をやるかを全て出してそれに紐づく機能を全部出して、それを優先度順に並び替えています。もちろんキーとなるUXはいるんですけど、そのために必要なMVPとしての機能を洗い出したあとに、UI Flows作って、そこからProttですね。

—— 理想的な使い方ですね!最近社内のデザイナーと話してたんですけど、UXの時系列ってりますよね。予期的UX、一時的UX、エピソード的UX、累積的UXという。1枚で見せてしまうと予期的UXしか分からないですよね。そして、一時的UXもわからない部分もあればエピソード的UXはもう完全にわからない。今まではそれを全て検証できずに最後にあれ?ってなって手戻りが発生していたと思うんですよ。でも野村さんが実践されているフローはそれを解決していますね。

野村 そうですね、そこでPrott使ってよかったなって思ったのは、今まではパワポにワイヤーフレームを書いてその説明をするじゃないですか。それだとやっぱりストーリーが伝わらないんですよね。でもProttを使うと、この流れだとこうだよね、っていうストーリーも説明できるので、Prottはもうやめられないですね。
逆に悩んでいるのは、アニメーションですね。超運を作ったときも、心臓の鼓動をアニメーションで表すっていうのをエンジニアと話していたんですけど、これを仮に外注先でこれを表現しようとするとコミュニケーションが難しいんですよね。それをどうしようかっていうのが課題ですね。

角方 Prottにgifを入れたいですね。

—— 実はWEBではgif対応しているんですよ。アプリの方はブラウザではなく完全にネイティブで動かしてるのでgifに対応していないのですが、そこは今後なんとかしたいと思っています。特に動画の埋め込みはゲーム業界からのニーズが強いですね。ただ、Prottで細かいアニメーションを作るところまでは現在は考えていません。

野村 Prottは機能を付け加え過ぎてもよくないですよね。

角方 確かに、Prottに機能が増えたら逆にデザイナーの負担が重くなりそうですよね。本来はオフラインのコミュニケーションで解決するものが、とりあえずProttで作って、ってなりそう。

—— Prottはプロトタイプを作るサービスというよりも、プロトタイピング文化を導入する手段として使って欲しいんですよね。

2泊3日のアイデアソン「習慣形成の追求」

野村 この前ウチの会社で2泊3日のアイデアソン / ハッカソンの合宿をしてきたんですよ。全部自分たちでプログラム組んで、12人くらいで熱海行ってやりました。AチームとBチームに分けてやったんですけど、途中からずっとPrott使ってましたね。Prott見てコメントして作り変えて、隣ではエンジニアがバックエンドを書いていくみたいな。実際その合宿から2つアイデアを持って帰ってきたんですけど、2泊3日でやってるので、市場性や利益率の検討など事業の側面の検討が不足していたので今それを詰めています。

—— お題はなんだったんですか?

野村 「習慣形成の追求」ですね。今事業開発グループのWHYを「習慣形成の追求 〜We Enrich Your Life〜」に置いているんですよ。今までも課題解決ってあったと思うんですが、これからのプロダクトはより色んなものを置き換えて、その人の習慣に入っていかないといけないと思っていますそれを追求していきましょうというテーマです。
内容としては、最初にマンダラートで、真ん中にキーワードを置いて拡げていきました。そこからスピードストーミングというのをやって、前の人とアイデアを見せ合って、ブラッシュアップします。そのあとアイデアスケッチをして、タイトルと機能紹介を書いて何十枚も机の上に置いて、みんなで歩き回って投票をして何をこの合宿の中でアウトプットするか決めました。

—— それって、変化を嫌うような人からの反発は起きなかったんですか?

野村 まずは自分のものづくりのチームから導入しているので、特にないですし、別にやり方を押し付けているわけではないので問題ないですね。ちなみに合宿は4半期に1度やっていこうと考えていて、コスト面を考えると合宿の方が効率いいんじゃないかって思いますね。

ワイヤーフレーム機能開発中

—— 現在ワイヤーフレーム機能を開発していまして、まずは簡単なドローイングができるようになっていて、今後は自分のコンポーネントをアップしてそれをプロジェクト内で共有できるような機能も考えています。

角方 なるほど。今ディレクターも紙に書いてくれてるんですけど、Prottを使ってディレクターができるのってそれをアップして遷移つけるとこまでなんですよね。なのでワイヤーフレーム機能があればディレクターのできることが広がるのかなと思います。

—— 今後ぜひワイヤーフレーム機能のフィードバックをいただければと思います!野村さん、角方さん、本日はありがとうございました。