リリース後の修正が大幅に減少。Prottは工数削減に効果的なツール - カカクコム
Prottインタビュー Vol.11
2016年12月に取材をさせていただいた記事です
株式会社カカクコム
食べログ本部 メディアデザイン室 UI設計チーム UIデザイナー
井戸亮佑さん
株式会社カカクコム
食べログ本部 メディアデザイン室 UI設計チーム UIデザイナー
吉田征五さん
1年半前にProttを使い始めたという井戸さんと吉田さん。今回、導入のきっかけや具体的な活用方法を伺ってきました。
Prott導入前はリリース後の修正が多かった
──今日はよろしくお願いします！Prottの活用方法などを伺っていければと思っているのですが、ちょっと気になったことが。井戸さんはなぜ作業服を……？
井戸 あぁ、これですか。昨日買ってきました（笑）
自分が子供のころから触れてきたUIといえばテレビゲームで、さらにその中でも任天堂のゲームが好きなんですけど、任天堂の技術者って作業服を着ているんですよ。その想いから、この日のために温めていたスタイルで来ました。補足ですが、社内の皆が着用しているわけではありません（笑）
──そうだったんですね（笑）。ちょっと話を元に戻して、お二人はどのようなプロジェクトに所属されているんでしょうか？
井戸 自分たちが所属しているメディアデザイン室という部署は、ウェブサービスやアプリはもちろん、紙や広告などエディトリアル等のグラフィックデザイン、果てはお店やユーザーに配布するノベルティなど食べログに関する視覚表現を全て担当していて。その中でUI設計チームは企画の立ち上げからUIデザインの設計・決定といったデザインの上流工程を担っています。
──なるほど。ウェブとアプリの両方を担当されてるんですね。
井戸 そうですね、ウェブとアプリは用途は違えど、サービスの体験としてはある程度統一したものを提供したいので。一応、自分はモバイルセクションを担当していて、スマートフォンサイトとアプリのUI全般を見ています。吉田くんはユーザー体験が軸となるプロジェクトのUIデザインや、特集ページなどのグラフィックデザインなどを担当しています。
──御社には2015年8月からProttを使っていただいているのですが、使い始めようと思ったきっかけは何だったのでしょうか？
井戸 2014年頃にアプリのリニューアルを行ったのですが、当時は企画者がワイヤーフレームや仕様などが書かれた企画書を作り、それをもとにデザイン、実装を進めていく状態で。リリース後にUIの課題が見つかる、ということが多くあって。
「この状態のままではダメだ」と思い、プロトタイピングツールを使ってみることにしました。最初は「POP」というツールを使っていたのですが、途中でProttのβ版が登場して。その頃からちょっとだけ使っていたのですが、正式にリリースされたタイミングで使ってみたらUIが洗練されていて使いやすく、トランジションの種類も多かったり機能面も優れていたので、チーム内ですごく話題になったんです。
正式リリース後も使っていたのですが、アップデートのサイクルが早く、細かいところに手が届く。すごく安心して使えました。会社としてProttを導入するのは少し後のことなのですが、国産のサービスというのが大きかったですね。日本語でサポートしてもらえて、すぐに返信が来る。安心して導入を進めることができました。
──ありがとうございます。導入にあたって、周囲の人はどのように説得されたのでしょうか？
井戸 先ほども言った、リリース後の修正が大変ということは多くの人が分かっていたので、プロトタイピングの導入は割とスムーズでしたね。昔はデザイナーが「このプロジェクトはプロトタイピングしておきませんか？」と提案することが多かったのですが、今は完全にデザインのフローとして認められています。
──フローに関して、もう少し詳しく教えてください。
井戸 今年の4月にUI設計チームが発足し、デザイナーが上流工程に入り企画段階からUI設計に携わる機会が増えたんです。今までは企画書ありきのプロジェクトも多かったですが、もっと早い段階からUIを考えられる体制に変わったので、フローとしてプロトタイピングを組み込むことにしました。
プロトタイプは関係者全員に共有。Prottは工数削減に欠かせないツール
──Prott導入後のデザインプロセスにはどんな変化がありましたか？
井戸 全てプロトタイピングしていると時間がかかるので、使用するプロジェクトはある程度絞っています。ユーザーの体験が大きく変わりそうなプロジェクトでは使うようにしていて。その場合はプロトタイピングをする前に、まずユーザーシナリオを作成します。その後、画面遷移に沿ってワイヤーフレームを作っていき、関係者に共有して問題がないか確認するようにしています。
「これでいこう」という共通認識がとれたら、一つひとつのワイヤーフレームにデザインを肉付けしていき、再度Prott上で触ってトランジションなどを確認し、実装に移っていくという感じです。
──理想のデザインプロセスですね！関係者でのレビューはどういった職種の方まで含まれてるんですか？
井戸 理想はProttのコメント機能を使って、職種に関係なく共有できればいいんですけど……。アカウントを持っているのはデザイナーだけなので、実機を持って企画、エンジニア、デザイナーの関係者全員にミーティングで説明するといった感じです。
プロトタイプは説明するだけでなく、実際に触ってもらわないとダメだと思うので、レビューの場はデザインが完成した段階でなるべく設けるようにしています。
──経営レベルの方も入ることは？
井戸 経営レベルといいますか、プロジェクト全体を見ている部門長が決裁権を持っているので、参加してもらうようにしています。その場で確認してもらった方がスピーディーに進められるので。
Prott導入前はデザインカンプを作成し、決裁権を持っている人たちの承認をもらわなければいけなかったので、なかなか大変でした。吉田くんはPrott導入後の入社なので、ある意味うらやましいですね（笑）。
吉田 そうですね、入社したときにはすでに導入されていました。それまでプロトタイピングツールを使ったことはなかったのですが、Prottを使ってみたら、「これはスゴイな」と思いましたね。
画面1枚を作って確認するよりも、画面遷移がつながった状態で俯瞰できると、違和感がある箇所や、フローとしておかしい箇所に気づきやすい。工数削減には効果的なツールだと思いました。
──肌感で構わないのですが、どれくらい工数が削減されたと思いますか？
井戸 実装前に細かく確認できるので、実装後の作り直しは無くせます。そういう意味でエンジニアの負荷は減っていると思います。全員が共通認識を持った状態で進められるので、すごく助かってますね。
プロトタイプを使って意見の吸い上げも
──吉田さんはPrott導入後に入社されたと仰っていましたが、「Prottを使い倒したな」というプロジェクトのエピソードはありますか？
吉田 食べログの『検索機能』のデザインですかね。食べログではヘビーユーザーとライトユーザーの間で使い方にはかなり差があるんです。画面遷移や使い方など、Prottで何度も作っては直してを繰り返すことで精査していき、ユーザーにとって違和感のない作りにしました。
（↑食べログの実際のPrott画面）
──ユーザーのセグメントごとに分けてプロトタイプを作られた、ということですか？
吉田 そうですね。画面別に作り、そのユーザーの画面だとどういう見え方になるのかをきちんと見るようにしています。
──プロトタイプの状態でユーザーテストは行いますか？
井戸 社内にそれぞれのユーザーセグメントに近しい属性の人たちがいるので、彼らの力を借りて社内ユーザーテストを行い、意見を吸い上げるようにしています。
そうすることで、こちらが想定していなかった動きや、機能を知らないまま使っていることを発見できたり、作っている側の視点では得られない情報を手にすることができました。
──なるほど。最初はペーパープロトタイプから始まるんですか？
井戸 いや、最初からSketchを使ってますね。ペーパープロトタイピングはゼロから作る場合には合理的なんですけど、食べログではUIの文脈がすでに作られていて。そのルールに沿ってモノを配置していった方が早いので、Sketchを使うようにしています。ProttのSketch連携機能はすごくありがたいですし、かなり使っています。
コンポーネントはZeplinで共有しているので、デザインするにあたってPrott、Zeplin、SketchさえあればOKですね。
──ありがとうございます。具体的にProttのどういった機能、使い勝手を気に入っていただけてるんでしょうか？
井戸 Sketch連携機能です。ボタンを押すだけでいいですし、アプリにもすぐ反映される。そのスピード感がすごくいいですね。
吉田 Prottは日本のサービスということもあり、使いやすいのがいいですね。エンジニアやデザイナー以外の人たちに共有しやすい。これは日本のサービスならではだな、と思います。
──最後、Prottにメッセージをお願いします！
井戸 国内発のプロトタイピングツールはあまり見ないので、今後も頑張ってほしいと思っています。あと、Macのネイティブアプリが出ることを期待しています！
吉田 デザイナーのプロフェッショナル集団が作っているツールとしての期待感はあるので、今後も開発者が求めている機能を追加してもらえたら、すごく嬉しいですね。