プロトタイピングツールを使ったFamiポートアプリの機能開発プロセスとは？
ファミマ・ドット・コムさんでは『Famiポートアプリ』の開発にあたり、立ち上げ段階からProttを活用してワイヤーフレーム制作・プロトタイピング・ユーザーテストまで行っていたそうです。今回は、開発プロセスの中でProttがどのように使われたのか、どんなところにメリットを感じていらっしゃるのか、そしてProttを通して得られた嬉しい体験などについてお話しいただきました。
株式会社ファミマ・ドット・コム
サービス事業本部 物流サービス事業部 物流サービスグループ
熊谷 崇
株式会社ファミマ・ドット・コム
サービス事業本部 物流サービス事業部 物流サービスグループ
菊地伸太郎さん
経営管理本部 情報システム部 システム開発第2グループ マネージャー
栗城貴光さん
情報システム部 システム開発第2グループ
柴田裕太さん
Prottはまさに欲しかったサービスだった
──本日はよろしくお願いします。まずは簡単に会社の概要を教えていただけますでしょうか？
栗城 ファミマ・ドット・コムの事業は、ファミリーマートの小売業以外の領域です。ネットショッピングや店舗内での広告事業、決済サービス、物流サービス、複合プリンター、チケット販売など多岐に渡っています。例えば、店内放送での広告や宅配便やフリマアプリでの商品の発送ですね。
──Prottをお使いいただいたのは『Famiポートアプリ』だったと伺っておりますが、どのようなアプリなのでしょうか？
栗城 プリペイド（電子マネー）購入やファミマフォト（写真プリントサービス）、あとはファミマ買い取り便（ゲーム/DVDの買取）の申し込みなど、ファミリーマートでの買い物を便利にするアプリです。
菊地 店舗に置いてあるFamiポートでしか操作ができなかったことをアプリでもできるようにしようというのが着想のきっかけでした。もちろんFamiポートも現役ですが、誰でもスマートフォンを持っている時代なのでアプリでできたら便利だと思い、昨年の9月にローンチしました。
Famiポート (右) とFamiポートアプリ (左)
──Prott導入のきっかけを教えてください。
菊地 IT業界の友人がProttのことをFacebookでシェアしていたので気になってサイトを見たら、まさに欲しいと思っていたサービスだったんです。まずは無料で使ってみましたが、すぐに稟議上げて有料で使い始めることにしました。
──「こんなものが欲しい！」というイメージがあったのですね。
菊地 最初は紙に描いて作っていたのですが、上長に見せるときはPowerPointでスライドを作っていました。しかし、PowerPointだと実際の姿がイメージしにくいようで、わからないと言われることも。モックを作ろうという話になったのですが、モックのための仕様書を作る必要があって時間がかかることが煩わしかったんです。だから、外部のベンダーに渡す前に自分で簡単に作れたらいいなと思っていました。Famiポートアプリの多くの機能はProttを使って作りましたよ。
Prottによって視点を作り手から使い手へ切り替える
──『Famiポートアプリ』では、Prottはどのように使われていたのでしょうか？
菊地 まずはハンドスケッチを作りました。
栗城 これが最初の原型ですね。
菊地 紙に描いたものをPowerPointで作ってみて、Prottに入れて画面遷移を作りました。
──おお、すごい！以前からペーパープロトタイピングの文化があったのでしょうか？
菊地 Prottを使う前からiPhoneのサイズの紙を作ってやっていましたね。むしろ、Web上でプロトタイピングするのはProttが始めてでした。
──Prottで画面遷移を作った後、開発実装までやられていたのでしょうか？
栗城 我々の役割は機能設計までで、開発行程はパートナー会社にお願いしていました。今回は始めてのアプリだったこともあり、私たちはユーザーインタビューを繰り返して機能を作り込みました。
菊地 アプリの詳細を伝えずに社内の人にテストをお願いして、アプリを使う中でその人の動きが止まる時があったら「何がわかりづらかった？」と聞くことで改善点を洗い出していましたね。
──チームはどれくらいのメンバーがいらっしゃったのでしょうか？
菊地 プロジェクト規模は20人くらいでした。加えて、親会社のファミリーマート、中古買取を担っているパートナー企業、物流会社など、ステークホルダーが多かったので、Prottを共有して問題ないか見てもらっていました。紙やPowerPointを見てもらってもイメージが湧かない人もいたので、スマートフォンでProttを見せて説明しました。
──実際にProttでプロトタイピングやユーザーテストを行ってみて、得られた効果はありましたか？
菊地 視点を作り手から使い手に切り替えて、アプリを客観視できたことですね。作っているときは良かれと思ってやっていても、実際に使ってみるとイマイチなこともありました。エンジニアに実装のお願いする前の段階で私たちの中で戻せたので、手戻り工数を削減できました。
実際にProttを使ってアプリを触ってみると、一つの機能を使うのに5、6画面くらい遷移があってめんどうくさく感じる機能があったんです。不要な画面を消してみたり複数の画面にまたがっていたものを一つにまとめてみたりしたら、どんどん遷移をシンプルにしていくことができました。
栗城 作っているとひとつひとつの画面の最適化に気を取られてしまうんです。だから、一つの機能を使うには何画面を挟んでいるのかといった全体の流れを意識しきれていませんでした。紙やPowerPointだと、画面レイアウトや要件を抑えていても操作感までは再現できないですよね。
Prottを使うと、タップや画面の多さに気付けたんです。「ボタン多いよね」「確認画面のポップアップに対応しないといけないよね」というように、親指を動かす数の多さを気づけたのは一番大きかったですね。実際に、当初作っていた画面数からかなり減らせました。
──元々どれくらいあったものが、どれくらいに減ったのでしょう？
菊地 調べてみたら、37枚あった画面から25枚減らしていました。チームで使ってみたり社内でユーザーテストをしたりしたことが役立ちましたね。
事業会社でもSIerでも使えるツール！
──Prottによってチームに変化はありましたか？
菊地 そうですね、通常は営業・企画と開発のメンバーはスパッと分かれているのですが、今回はProttによって職種の壁を壊せたんです。私はPMO (プロジェクトマネジメントオフィサー) 役割として、プロジェクトマネージャーとメンバーの間に立ってプロジェクトを進めていました。
栗城 普段は職種ごとに動きが分かれていますが、この案件に限っては横断的に動けました。菊地さんはプロダクト作りに精通していたので、窓口になってくれていたんですよ。よく話しかけてコミュニケーションを取っていましたね。
──Prottを導入してみて良かったことは何でしょうか？
菊地 社内承認しやすかったのは間違いないです。PowerPointで見せるのかProttで見せるのかだと、明らかに違いましたね。その時に工夫していたのは、色味を入れずにあえて白黒のワイヤーフレームに戻して見てもらっていました。色やデザインなどの見た目のところに対して焦点が当たると、画面遷移や操作性といった本当に見てもらいところがぼやけてしまう可能性があるからです。
あと、Prott内のチャットから問い合わせをしたときに、すぐにレスが来たのがめちゃくちゃ嬉しかったです！右下に女性がずっと出ていて、botなのかなと気になっていますね。
──実在の人間が対応しています（笑）。栗城さん、いかがでしょう？
栗城 便利だと思いますよ、本当に。システム側の人間とは想像の世界で話せるけど、事業部の人や上長と話すときには目に見えるものを介さないと共有しにくいし、触れるものがないとイメージを伝えられないことがよくあります。Prottは作り込まなくても伝わるので、ちょうどいいところだと思います。
菊地 プロトタイピングってまだまだ新しい手法なのでウォーターフォール型開発でやってきた人たちにとっては浸透していないですよね。彼らも含めて「こっちの方がやりやすいよね」という考えが普通になったらいいなと思います。
──ありがとうございます。さいごに、Prottを使ってみての感想を伺えたらと思います！
熊谷 一度自分で作ってみると直感的にできるので、専門知識はいらないですよね。
菊地 熊谷さんはITに詳しいわけではないけど、「Prottで画面遷移図を作って」と頼んでもできますもんね。
熊谷 言葉にしづらいことでも簡単に作って見せられるので、営業職の人でも気軽に使えると思います。
菊地 そうですね、サービス提供側が、ユーザーの視点になって作れますね。
栗城 事業会社に合っているんですよね。
菊地 事業会社もそうですけど、SIerでも使えると思います。マジメに要件定義通りに作ったとしても鶴の一声で一気にひっくり返ることがあるんです。せっかく作ったけれどやっぱり戻してください、というのは往々にしてあります。手戻り工数がかかるんですよね。
ベンダー側で疑問に思っていたけどきちんと伝えられていないことを「ここ、こうじゃないですかね？」と言えるツールでもあると思います。
──仰るとおり、事業会社でもSIerさんでも使えるツールです。とても先進的な開発手法を取り入れられていて、大変勉強になりました。本日はありがとうございました！