BLOG

リクルート

by xflag_career

"ユーザーの想像以上"にこだわるUIデザインチームのスタイル。

こんにちは、XFLAG スタジオのキャリア採用担当です。
XFLAG スタジオの各職種がどのような働き方をしているのかお伝えするべく始めた「中の人インタビュー」。
第5回目の今回は、XFLAG スタジオのモンストUIデザイングループでマネージャーを務める高橋さんへのインタビューです。

20170519_takahashi_3.png

XFLAG スタジオのモンストUIデザイングループは、これまで『モンスターストライク(以下、「モンスト」)』において、様々な新機能追加や改修を手がけてきました。今回はマネージャーである高橋さんに、具体的な業務フローや、過去の仕様変更の一例である「一括選択機能」についてのインタビューを敢行。インタビュー中には思わぬゲストの登場もあり、リアルなお話を聞くことができました。

20170519_takahashi_4.png高橋 貴之(たかはし たかゆき)
デザイン事務所にてグラフィックデザイナー、Webデザイナーを経験、アプリ・ゲーム開発会社でのUIデザイナーを経て、モンストのUI設計やバナーなどのグラフィック制作に携わるため、2014年にミクシィへ入社。

中途半端な仕様はリリースしない

――まずは、モンストUIデザイングループのXFLAG スタジオでの役割や、業務内容について教えてください。

高橋:
XFLAG スタジオには複数のデザイングループがあり、主に「モンスト」に関わるUIデザインや演出、グラフィックを担当しているのが「モンストUIデザイングループ」です。UIデザインチームは、その中にあるチームのひとつです。ユーザーの皆さんが、目的をスムーズに達成するための画面遷移や、直感的にわかるボタンをはじめとするグラフィックパーツ作成など、アプリ内における「ユーザーインターフェース」の設計が主な業務です。

20170519_group.png

高橋:
具体的な業務フローは......たとえばバージョンアップの場合ですと、プランナー、デザイナー、エンジニアが集まり、次のバージョンアップ時に実装したい案件を話し合います。いわゆる起案の段階ですね。XFLAG スタジオの特徴の一つですが、このフェーズからデザイナーやエンジニアも参加し議論しています。その後、現実的なスケジュールと照らし合わせながら、各案件の優先順位を決め、メンバーをアサインします。次に、各案件のチームでミーティングを行い、その中で出た意見をもとに情報設計を行います。
ブラッシュアップを重ねた後、エンジニアに仕様の組み込みを依頼し、実機確認やデバッグを経て問題がなければ、晴れて仕様のリリースになる、といった感じです。

20170519_flow_new.png

――「モンスト」でユーザーさんが見ている画面のボタン配置や色といった要素の設計は、まさにUIデザインチームの仕事例というわけですね?

高橋:
それもありますが、レイアウトやカラー選定といった作業はあくまで『起案~リリース』という一連の業務に付随するものです。まず、コンテンツに求められている機能は何なのかを探る、その機能を追加したときに他の画面にはどういった影響があるのか、ユーザーさんはどんな動きをするのか、画面の「遷移図」を書いて考える、といった『情報設計』が、私たちUIデザイナーの腕の見せ所です。

――UI/UXの設計として『ストレスフリー』『快適さ』といったテーマがあると思いますが、それらを決める指標のようなものはありますか。

高橋:
個人的には、ユーザーさんにとって「やらされている感覚」がないようなデザインを心がけています。ユーザーさんが、悩むことなく直感的に目的を達成できることを意識していますね。そのため、QA(品質保証)チームに、新しい仕様を初めての状態でプレイしてもらうことで、ユーザー視点に立った意見をもらう、といった取り組みも行っています。実際にQAチームから出た意見を改善に生かすことも多いです。

――『ユーザー視点に立った意見』というと、やはり感覚的なものなのでしょうか?

高橋:
そうですね。設計の段階でも、そういった感覚的な部分は大事にしているのですが、見落としてしまうこともありますので...。QAチームから返ってくる「使いづらい」「わからない」といった素直なフィードバックは非常に重要です。そういった感覚的な意見をくみとりロジカルな設計に落とし込むのも、UIデザインチームの仕事だと思っています。
先ほど申し上げた遷移図の作成も、「感覚をロジカルに落とし込む作業」の一つです。遷移図の作成はプランナーの担当というのが一般的かと思いますが、XFLAG スタジオではデザイナーを含む関連職種がそれぞれにアイデアを出し合い、詳細かつ具体的な遷移図の設計を行っています。

――そうしたやり取りを経てリリースされてきたのが現在「モンスト」で採用されている仕様というわけですね。

高橋:
はい。やはり、一度リリースした仕様を戻すことは、そう簡単にできません...。やり取りの中で全員が納得できなければ、再度練り直しをしたり、先送りにしたりすることもあります。中途半端な仕様変更はできませんので。

――ユーザーさんからのフィードバックを改修に生かすこともあるのですか?

高橋:
もちろんです。ユーザーの皆さんの声は辛辣でもあり、とても素直なものなので信頼していますね。お客さんというよりも、スタジオ内の人間と同じ「ゲームを良くしていきたいと考えている人の声」として受け止めるようにしています。

「一括選択機能」実装までの経緯とは?

20170519_takahashi_5.png

――ここからは過去の改修事例の一つである「一括選択機能」についてお伺いします。まずは、この機能について簡単に説明していただけますか?

高橋:
従来は、個別にキャラクターを選ぶしかなかったデッキ編成を、複数キャラを一括で選択できるようにした機能です。クエストに入るまでの過程を、よりスムーズにできたのではないかと思います。ユーザーの皆さんにも、そのように感じていただけていると嬉しいです。

――本機能のアイデアはどこから出たものだったのですか。

高橋:
UIデザインチームの一人から発案されたものです。

――プランナーではなくデザイナーの方からの起案だったのですね。

高橋:
はい。改修に関わる起案というのは、プランナーから提出されるのが一般的だと思いますが、XFLAG スタジオの場合そういった垣根はありません。"良いアイデアがあるなら、積極的に意見を出せる"という風土がスタジオ全体の特徴になっています。

――では、もう少し詳しい内容についてお伺いしたいのですが......

???:
ようやく僕の出番ですね。

高橋:
!?

20170519_kashiwazaki_1.jpgのサムネイル画像


――実は今回、一括選択機能の発案者本人であるUI/UXデザイナーの柏﨑さんにもお越しいただいております。ドッキリ企画のようで恐縮ですが、ここからは柏﨑さんも交えて当時のことを振り返っていただきたいと思います。

柏﨑:
実は最初からいたんですけどね、ふふふ。

20170519_kashiwazaki_2.png

柏﨑 那英( かしわざき ともひで)

専門学校卒業後、ガラケー向けのコンテンツ企画・運用・デザイン業務を経験。
その後、スマホコンテンツやアプリ開発会社で経験を積み、2015年末にミクシィへ入社。

高橋:
元はA案・B案という、2つの一括選択機能のアイデアがありました。どちらも一括選択機能としての要件は満たしていましたが、一方でデメリットも存在していて、プランナーに提案するためには今一歩かな? と感じていました。そのため、両方のメリットをかけ合わせ、デメリットを排除するために次バージョンへと持ち越して練り直すようにしたんです。

柏﨑:
ちょっと待ってくださいよ、高橋さん!ドヤ顔で話してますけど、それ僕が出したアイデアですからね!(笑)。リリース直前に「練り直し!」と止めたのは高橋さんでしたけど!(笑)。

高橋:
そうでした!(笑)しかも当時は他チームのリーダーだったのにね・・・・もしかして怒ってる? 

柏﨑:
怒ってないですよ! そんな心配してたんですか(笑)

――よかったです(笑)。ちなみに、本機能はどういったきっかけで起案されたのでしょうか。

柏﨑:
私たちって、社内のメンバーもみんなが一緒に盛り上がって遊ぶ機会も多いじゃないですか。私もその中の一人ですが、以前から漠然と「一括選択機能があったら便利だな」と思っていました。そんなある日、インターネット上で、ユーザーさんが「こういった機能があればいいのに!」と発言しているのが目に入り、実装しようと決意しました。

――なるほど。この機能はプランナーから起案されたのではなく、デザイナーである柏﨑さんからの発信だったということですが、そういったケースは多いのですか?

柏﨑:
はい。本件に限らず、デザイナーが発信したアイデアが実装に至ることは多々ありますよ。スタジオ内における職域の垣根がいい意味で低いので、実現できるとも言えますね。

――では改めて、当時柏﨑さんが提案したA案・B案について、お話を伺えますか?

20170519_planA.png

※画面はAndroidアプリのバージョンです


柏﨑:
まずはA案について。現行バージョンに近い形ですね。「一括選択」というボタンがデッキ編成画面に追加されているので、違いが分かりやすいのがメリットです。また、デッキ編成を一括で替えることもできますし、一体のみ替えることもできます。
反面、変更したいモンスターを一度タップした後に、新しくデッキに反映するモンスターを選ばなければなりません。一手間あるというところがデメリットとして挙げられます。

20170519_planB.png

一方、B案は順番にタップをしていけばそれがデッキに反映される仕組みです。A案に比べて手間がありません。ただ、入れ替えるモンスターの比較ができないという点と、デッキがリセットされてしまうというデメリットがあります。一応、モンスターが確定されていない状態で「OK」をタップすれば変更前の状態は維持されるのですが、そのことが分かりにくいですね。

また、A案に比べてデッキ編成画面に「一括編成ボタン」がないので、デッキを組む際に「必ず一括編成をしなくてはならないのか?」と捉えられてしまう懸念もあります。

――なるほど。A案は分かりやすい反面手間があり、B案は簡単だけれども直感的でない、ということですね。

20170519_final_plan_bulk.png

柏﨑:
はい。そこで、A案とB案それぞれのメリットを掛け合わせ、デメリットを最小限にしたのが現在のバージョンです。A案の「一括編成ボタン」を採用することで"分かりにくさ"をクリアできたと思っています。また、選択した順に番号が表示できるようにし、3体目をタップした時点で、入れ替え確認画面に進むようにしています。これにより、「OK」をタップする手間がひとつ減ります。さらに、最後の画面で確認を行うことで、入れ替えたモンスターの比較ができなかった点と、デッキがリセットされてしまう点をクリアできたと思います。

20170519_final_plan_individual.png

柏﨑:
通常(個別)選択はこれまで通りのフローを維持。ただし、「一括選択ボタン」が追加された関係で「キャラタップ=変更」という操作が少し分かりにくくなる可能性がありました。そこで、両方を同じカラー(青)やテイストにまとめ、タップができることを直感的に分かるよう工夫しています。

――まさに、2案の掛け合わせですね。

高橋:
この最終案によって、通常(個別)選択と一括選択が並列的なレベル感になったと感じています。どちらかが前に来るような設計は、本当の意味での"便利さ"ではないと思いますので。あくまでも、"どちらの機能が便利なのか、優先順位を付けるのはユーザーさん"ということを意識した結果が、この2案の掛け合わせにつながりました。

――柏﨑さんにとっても、よりよい仕様をユーザーさんへ提供するために必要な練り直しだったというわけですね。

柏﨑:
そうですね。高橋さんからもありましたが、「中途半端なものはリリースしない」という考えを貫くためには、本当に大切なプロセスだと思います。そして、その実現のためにディスカッションを重ね、よりよい改善のために時間を使えるというのはXFLAG スタジオの良いところだとも思います。

UIデザインチームのやりがいと求める人物像

20170519_photo.png

――柏﨑さんは、デザイナーでありながら、ユーザーさんにとって重要な機能のプランニングを行い、且つ、その設計にまで携わっていますよね。その事実はやりがいにつながっていますか?

柏﨑:
そうですね。実際リリースされた仕様は、自分でも"良い仕事ができた"と思っています。ユーザーさんにとっても、便利な機能に仕上がっていればうれしいです。もちろん、先ほどの事例のように、アイデアの練り直しが必要な時もありますが、より良いサービスを届けることに拘っていきたいです。

――職種の垣根を越えてアイデアを発信できるのは、XFLAG スタジオならではかもしれませんね。今後、XFLAG スタジオのUI/UXデザイナーとして求められるのも、やはりそうした人物像になるのでしょうか。

高橋:
はい。アイデアを出しやすい環境だからこそ、一括選択機能のように「ダメ出し」をすることもあるのですが、そこで柏﨑さんのように色々な可能性を考慮した練り直しができるといいですね。それは、入社後の努力や教育では伸ばすことが難しい、「XFLAG スタジオから発信するコンテンツを良くしていこう」という熱意に起因している部分だと思います。先に述べたような「感覚をロジカルに落とし込む能力」とあわせて、こうした熱意を持っていていただきたいと思っています。

***

今回お話を伺った中で印象的だったのは、UIデザインチームがいかにユーザーさんのニーズを理解し、それを理論的に捉えて実装へと進めていくのかという"こだわり"でした。
その実現のために、デザイナーやプランナーが垣根を越えて意見を出し合うという環境も、XFLAG スタジオならではだと思います。

この記事をシェアする