400万DLを突破した大人気ゲーム『黒騎士と白の魔王』。開発・保守運用を支えたProttの活用法

株式会社グラニ
コンテンツ制作本部　副本部長
デザイン部　部長
清水愛子さん

株式会社グラニ
CS部
蒲地 奈緒さん

株式会社グラニさんには、スマートフォン向けロールプレイングゲーム『黒騎士と白の魔王』の開発にあたりProttをご活用いただきました。PMからデザイナー、CSまで総勢60名以上がProttでのデザイン管理に関わり、400万ダウンロード（2017年11月現在）を突破した大人気ゲームを支えています。Prottの具体的な活用方法についてインタビューしました。

60名で利用！大人数でProttを導入するまでの経緯

黒騎士と白の魔王 公式サイト

──お二人の役割とチーム構成について教えてください。

清水　私はUIデザイナーとして、『黒騎士と白の魔王』のデザインを担当しています。

蒲地　CS部にてテスト業務を行なっています。具体的には、仕様書を見ながら画面の遷移に相違がないか、ユーザーに伝わりにくい部分がないかをチェックすることが主な役割です。

清水　開発当初は私一人がUIデザイナーで、イラストレーター1人と、企画3人、あとはエンジニアでしたね。CSは開発が進んでからジョインしています。現在（2017年11月）は全ての役割を合わせて60人以上のチームになりました。

──プロジェクトが始まったときに開発面での問題はありましたか？

清水　2年半前（2015年）から開発が始まったのですが、それまで開発したゲームでは全画面のデザインを細かく作っていなかったんですよ。当時は画面の一覧が見られる社内ツールを作ってもらいGitで更新していたのですが、手間がかかって運用に乗らなかったんです。

「作ったデザインを変えよう」となった時、デザイナーやCSが最新の画面を把握できていないのに企画やエンジニアが修正することもありました。

蒲地　チャットや口頭ベースで画面の修正が進んでいて、サービスの最新状態がどうなっているのかわからなくなっていましたね。

──Prottを導入されたきっかけはなんでしたか？

清水　大規模なスマートフォンゲームの開発が初めてだったこともあり、保守運用する時にツールが必要だと考えていました。最適なツールとして社内のエンジニアが見つけたのがProttだったんです。当時は10名くらいのチームで導入してみたところ、浸透していきました。

大規模サービスの保守運用にProttが活躍！

──チームの開発プロセスを教えてください。

清水　企画側が作成したワイヤーフレームをもとにデザイナーが画面を作り、それをProttに反映します。現在はほとんどの画面が出来上がっているので、ゼロからワイヤーフレームを描いてもらうことははあまりなく、既にある画面にパーツの付け足しなどをしてもらってからデザインに移っていますね。以前はPowerPointでラフなプロトタイプを送ってもらっており、それらをPhotoshopでデザインしていました。

デザインしたものをエンジニアと企画に確認してもらい、実装に移ります。実装が済んだらCSにテスト依頼をする、といった流れですね。

──Prottに価値を感じていただいている部分ってどんなところでしょう？

清水　画面遷移やアニメーションを作れるというよりも大規模開発であっても保守運用しやすいのがProttを利用し続けている理由ですね。ドラッグ＆ドロップで簡単にファイルを持ってこられる点や、更新する際も同じファイル名だったら自動で更新される点など。

特に弊社のようなゲームの場合、似たような見た目の画面が数多く並ぶため、目視で全てを把握するのが難しいんです。Prottだと全てを簡単に管理できるので、リリースから半年経ってもProttは常に最新状態が保たれています。Prottが無ければ管理は難しかったと思います。

──画面の保守運用を担当するのは、特定のどなたかの役割として決まっているのでしょうか？

清水　UIデザイナーが保守をしています。UIデザイナーごとに機能担当があって、トップ画面ならこの人という風に領域ごとに担当していて、常にProttの状態を把握しています。

──よく使うProttの機能はありますか？

清水　リリースまではコメント機能を使っていました。デザインの修正をした際に「どこが変わったかわからない」とエンジニアから言われたことをきっかけに、修正を加えた箇所にProttのコメント機能を使ってコメントを残していました。その後、「◯◯画面を修正しました、細かくProttにコメントしています」とチャットで伝えていましたね。

あと、画面のグルーピングは最高の機能ですね！100画面以上の膨大な画面があったので、ユーザーの行動ベースでグルーピングすることでかなり管理しやすくなりました。

画面のアーカイブや履歴を見ることもよくあります。消した画面を復元するのはGitだと大変でしたし、担当デザイナーが変わった時に過去の変遷を見られますしね。

──担当者の変更の際に、画面履歴はどう役立つのでしょう？

清水　普段、psdデータを社内の共有サーバーで管理しているのですが、たまに更新が漏れてしまうことがあって。新しい担当者がサーバーに入っているデータとProttに入っているものを見て、一致しない時に連絡が来るんですよ。その時、Prottの画面履歴とサーバーを確認し、サーバーの方を更新してなかったことを気付くことがあります。

Prottは必ず更新するというのを決めているので、漏れることはないですね。

──「Prottは更新する」というのはチームで決まっていることなのでしょうか？

清水　そうですね。企画側に対してのデザインの確認はProttで行っているので、日常のプロセスにProttが自然に入っています。

CSのテストもProttで行い、時間短縮になった

──CSの方がProttを使ってくださっているケースは珍しいのですが、具体的にどのように使ってくださっているのでしょうか？

蒲地　新機能の追加時やゲーム内イベントの開催前、画面の改修が行われたときなど、ほとんどの場合でCSがテストを行なっています。Prott上の全プロジェクトを確認する必要があるため、『黒騎士と白の魔王』のCS担当者になった際にはまずProttの契約から始めていますね（笑）。

──いつ頃からCSとして関わられていたのでしょう？

蒲地　開発の着手から半年後くらいからですね。Prottを使ってテストをする際の項目書の作成もおこなっています。

蒲地　これまでは仕様書しか見ていなかったしサーバーに上がった画像を一つ一つ見る流れだったので、Prottを知ったとき「これ以外を使う手はない！」と思い、使い始めました。

今はCS部としてメインでテストを行っているのは4名。ヘルプする人も含め、計10名ほどでProttを使ってテストをしていますね。

──CSチームとしてProttに価値を感じるのはどんな部分でしょう？

蒲地　やはり時間短縮ですね。開発・デザインに関することは細かいことでも全てProttに載せているのでわからないことはまずProttを見るようになり、他のメンバーに直接聞きに行く手間がかからなくなりました。

たまに「実装したものとProttのものが違います」と言われることがありますが、URLを送るだけで済みます。これまでだったらスクリーンショットを撮ってコメントを入れて送らないといけなかったので、手間が省けています。

清水　チーム内のコミュニケーションが変わったと思いますね。企画とCSでなかなか意思疎通を取れていなかった時期があったのですが、Prottで共通のイメージができるようになってから、チーム内の不和は解消され全員がプロジェクトに向き合えるようになってきたんです。

プロトタイピング文化が根付いた理由

──開発で大変だったフェーズはどんなところでしたか？

清水　リリース後は色んな機能にまたがる改修をしたのですが、それはProttを使っても大変でした。各画面にヘルプの導線がひとつも無かった状態から、一つ一つの画面に入れたんです。数えてみたら全部で145画面あって結構大変だったのですが、保守運用できているからやろうとなったわけで、Prottが無かったらそもそもその話が持ち上がらないですね…。

──ひとつのサービスでここまで大々的にProttを使っているケースはあまり多くないと思います。なぜここまでプロトタイピング文化が浸透したのでしょう？

清水　『黒騎士と白の魔王』自体の規模が大きかった上に、Prottの使いやすさがマッチしたからだと思います。規模が大きいと開発期間が長くなるので、デザインをしてから実装するまでが時間がかかるんです。すると、企画担当者以外は実際にどんなものが仕上がるのかがイメージしづらくなる。

蒲地　Prottを介して「だいたいこんな感じだよね」というイメージの共有ができました。何を作っているかわからなくなる期間を埋められたんです。

──CSの方々がコアに使ってくださっている点や60名超のチームでそれぞれの職種の方々がProttを介して開発を進めている点、そして大規模開発で起こりがちなイメージの齟齬を埋める手段としてProttが役立ったという点など、とても興味深かったです。ありがとうございました！

---

ゲームを提供されているグラニさんならではの設備として、UFOキャッチャーがあったのでインタビュー後にプレイしました！

『黒騎士と白の魔王』のキャラクターであるスプリをゲット！

グラニさん、ありがとうございました！