デザイナーの工数が削減。Prottはルック・アンド・フィールが良く、使いやすいツール - ドワンゴ
Prottインタビュー Vol.13
2017年1月に取材させていただいた記事です。
株式会社ドワンゴ
ニコニコ事業統括本部 企画開発本部 第七企画開発部 企画開発セクション
宮下啓之さん
株式会社ドワンゴ
ニコニコ事業統括本部 企画開発本部 第三企画開発部 動画企画セクション
高橋憲司さん
ドワンゴでは【配信専用】ニコニコ生放送の開発にProttを活用していただいています。今回は導入に至った経緯、導入前後の変化について伺ってきました。
2~3年前からプロトタイピングの必要性を感じていた
──まず、お二人の職種、業務内容について教えていただけないでしょうか？
宮下 二人とも職種はデザイナーです。基本的な業務内容はUIデザインですが、その他にプロトタイピングツールの使用に関するサポートを行っています。
具体的には、自分たちが収集したプロトタイピングツールの情報提供です。弊社はPrott以外のツールも使用していることもあって、何か良いツールはないか、定期的に調べるようにしていて。もし導入の要望があれば、検討を行っています。
高橋 全社的にプロトタイピングの必要性は感じていて、2〜3年前くらいから積極的に活用していくことになったんです。それで自分たちがプロトタイピングツールの使い方のサポートをしています。
宮下 XcodeやHTML5、JavaScriptでプロトタイプを作成するなど試行錯誤を繰り返していた時期を経て、今はようやく落ち着いた感じですね。
──2015年からProttを導入していただいていると思いますが、そのきっかけは何だったのでしょうか？
高橋 先ほど申し上げたように2〜3年前からプロトタイピングツールの導入を推し進める動きがあって、いろんなツールを見ていたんです。そうしたら偶然、Prottブログに行き当たって。まず、二人でトライアル版を使用してみることにしました。
実際使ってみたら、わかりやすいインターフェイスで、初めてでもすぐ使えるようになりそう、日本語対応しているといった部分が良かったので、正式に導入してみることにしたんです。
宮下 いろんなツールを検討していく中で、日本語サポートに対応しているのは大きかったですね。問い合わせにも、すぐに返信が来るので驚きました。
Prottの導入で工数が削減。プレゼンがやりやすくなった
──Prott導入前は、どのようなデザインプロセスだったのでしょうか？
高橋 大体は仕様書がおりてきて、それをすぐデザインする。カンプを起こし、それをHTMLやCSSで作って、それを確認してもらうといった感じですね。
宮下 そうですね。特にインタラクティブなものに関しては、XcodeやJavaScriptでモックアップを作り、ある程度、工数をかけて確認することが多かったと思います。
画面遷移図に関しては、当時、画面デザインのみしか行っていませんでした。社内でドキュメントを共有する『Confluence』というツールを導入していたこともあり、それをメインに静的な画面を貼り付けて連続で見せていき、あとは遷移図をもとに説明していました。
──その状況からProttを導入し、どのような変化がありましたか？
宮下 デザイナーとしては、いろんな意味でラクになりましたね。『Sketch』と連携しているので、工数はかなり削減されたと思います。
高橋 導入前は資料やモックアップの作成に時間がかかっていたので、確認に至るまでのプロセスが非常に長かったんです。そういった意味では、Prottを導入することで確認までの時間短縮につながっているのかな、と思っています。
宮下 やっぱり、プレゼンテーション（以下：プレゼン）がやりやすくなった、というのはありますね。プロトタイプを実際に触ってもらい、検証していくことを本当はやっていきたいのですが、上層部への提案となるとそうもいかない。そういった場合はプレゼンをしなければならないので、ブラウザでのプレビュー機能があるのは助かりました。
高橋 上層部にプレゼンができる土壌があるので、デザインしたものをすぐにProttに入れて持っていき、その場で判断してもらう。プレゼンも行いやすくなりましたし、確認・判断までのスピードはかなり早くなりましたね。
──それまではどのようにプレゼンを行っていたのでしょうか？
宮下 プロジェクトによって千差万別なのですが、レガシーなやり方ですと“構成書”がPowerPointで作られていて。それをもとに企画が立ち上がり、より詳細な画面が出来上がっていくのですが、その途中でデザイン案をプレゼンするといった流れでした。
Prottを導入することで、今までよりも早い段階でプレゼンをできるようになりました。
高橋 実際、Prottの使用者にアンケートをとってみたところ、「認識の共有ができ、実装までのスピードが早くなった」という声が一番多く挙がっています。
フォルダ機能を活用し、認識合わせを行う
──現在はどういったプロジェクトでProttを使っていただいているのでしょうか？
高橋 ほぼ全てのプロダクトでProttを使っていますね。
宮下 どれがアクティブなプロジェクトかは判断が難しいのですが、常時10個くらいのプロジェクトで使われていると思います。
──30名くらいで使われているかと思うのですが、具体的な内訳はどのような感じですか？
高橋 デザイナーが7割くらいで、その他はエンジニアとディレクターが使っています。
宮下 ディレクターは新しいサービスのプレゼンのために使っているパターンも意外と多くあって。遷移図の作成はけっこう使われていますね。
(↑【配信専用】ニコニコ生放送の実際のPrott画面)
高橋 ディレクターがワイヤーフレームや遷移図を作り、それをデザイナーやエンジニアに発信し、平行でコンポーネントを作り、ページを完成させていく感じです。
──なるほど。お二人が関わったプロダクトでは、どのようにProttが使われていましたか？
宮下 とあるアプリ開発の企画だったのですが、初期の段階で主となる機能とターゲットユーザーを明確にし、主要画面3枚の要件を抽出していきました。その段階ではプロトタイピングは行っていなかったですね。そこは画像＋提案書で進めていました。
そのあとユーザーストーリーマッピングを行い、主要な機能とMVP（Minimum Viable Product）のラインが決まった段階でProttを利用し、必要な画面を1プロジェクトの中で全て作っていき、その過程で詳細度をあげていく。そんな感じで進めていきましたね。
ただ、そのやり方はあまり上手くいかず、課題も多く見つかりました。
──その課題とは……？
宮下 一言で表現するのは難しいのですが……カスタマージャーニーマップで作成するようなユーザーフローのドキュメント化と、出来ているプロトタイピングを同時に一つの案として成長させていくことが、アプリ全体になると膨大な数になってしまう。そこの管理コストが大変になってしまったのが課題ですね。
──高橋さんはいかがですか？
高橋 自分は要件などを書き出した後、手書きでモックを作り、それをProttを使ってプロトタイプに落とし込み、適宜アップデートしていく感じです。
──アップデートというのは？
高橋 例えば、手書きのものに「コンセプトカラーをつけたい」となったときに、ピンポイントで対応し、認識を合わせるために使っています。ちょっとしたサムネイルの変更についてもすぐProttにあげて、それをSlackに共有し、チームメンバーに確認してもらっています。
──コンセプトカラーを入れるときはPrott内でプロジェクトを複数パターン作りますか？
高橋 Prottのスクリーンで何パターンか作ってますね。少し前にスクリーンのグループ機能が追加されたので、提案用のグループを作り、そこにいくつかパターンごとのデザインをいれてコメントをもらう。そして、そのコメントをもとに修正しFIXしたデザインは別のグループに入れるようにしています。
それでボツになったものは、どんどんアーカイブしていき、仮に戻したくなった場合は履歴から戻しています。
──デザイナーとエンジニアのコミュニケーションにおいて、プロトタイプはどのように役立っていますか？
宮下 認識合わせですね。ただ、自分が関わったプロジェクトですと、プロトタイプを随時アップデートしていき、仕様について承認がとれた段階で、プロトタイプでの作業から、デザインの仕上げへと切り替えて進めていきます。仮に新たな機能変更が生じた場合だけ、プロトタイプに戻る。そんな感じです。
振り返ってみると、最初は使い方が間違っていたなと思っていて。仕様書として完全にキープしようとしたため、コストがかかってしまったりしたのですが、今は状況に合わせて使っていくスタイルになっています。使い終わったら、仕様書としては扱わず、捨てていく。
──あらかじめ検証することをチーム内で決めておき、そこの領域に達したら、認識がとれた状態で破棄するイメージですか？
宮下 そうですね。それ以降の細かいことはProttでやらずに、直接プロダクト上でやっていく感じです。
Prottはルック・アンド・フィールが良く、使いやすいツール
──ちなみにProttで一番使っている機能は何ですか？
宮下 Sketchとの連携機能ですね。SketchのMirrorアプリで見ることもできるのですが、カジュアルに全部同期できるのでデザインを確認するためにも使っていますね。
高橋 コメント機能ですね。自分はエンジニア、ディレクターと関わっている状況が多いので、話した内容をデザインに対して残しておきたいので、Prottにコメントしてもらっています。
──それはレビューとして使われているのか、それともオフラインのミーティングのログとして使われているのか、どちらでしょうか？
高橋 両方ありますね。オフラインのミーティングのログとして使う場合はスクリーンにコメントを残し、レビューとして使う場合はポイントで書くなど、ケースバイケースによって使い分けています。
──最後にProttへのメッセージがあれば、お願いします！
高橋 最初の印象ですごくデザインが良く、「これは使いやすいだろう」と思ったので、他のツールをオススメされてもProttを使い続けていくと思います。
宮下 Prottかわいい！キャラクター含め、ルック・アンド・フィールが良いですね。メインの機能であるプロトタイピングもシンプルで使いやすいですし、パフォーマンスも上がってきているのでさらにかわいい感じがしますね（笑）。
──ありがとうございます！今後ともProttをよろしくお願いします！
今回取材をしたドワンゴさんではデザイナーも積極的に採用しております！