DMM.comの、一番深くておもしろいトコロ。

デザインでゲームを面白く! DMM GAMES UIデザインの作りかた

デザインでゲームを面白く! DMM GAMES UIデザインの作りかた

  • このエントリーをはてなブックマークに追加

f:id:dmmlabotech:20180919120913j:plain

こんにちは! 人事部・マリえもんです。
最近はユーザーにも“UI”という言葉が認知されはじめてきましたが「もっとゲームのUIについて知ってほしい!」と願うDMM GAMES UIデザイナー2人にインタビューしてきました!

 

f:id:dmmlabotech:20180927151637g:plain

野村 広樹 
DMM GAMES 東京スタジオ所属、リードUIデザイナー。2014年入社。UIデザインに留まらず幅広く活躍できる人材に自身がなるべく邁進中。

 

f:id:dmmlabotech:20180927151613g:plain

柳田 裕向
DMM GAMES 東京スタジオ所属、リードUIデザイナー。2015年入社。学生時代にユニバーサルデザインを学び、ゲームUIを中心とした行動心理などに興味を持つ。

デザインで“おもしろい”を作る

UIとはどういうものですか?

野村:UI(User Interface)っていうのは、縁の下の力持ち的な存在だとよく言われます。僕は遊園地に例えたりするんですが、それで言えばメインであるアトラクションを目立たせるための装飾、インフォメーションカウンターとかがUIの存在に近いかなって思います。

柳田:最近はUIがユーザーにも認知されてきている傾向があるし、できればどんどんクローズアップされてほしいです!

野村:アトラスさんから出てるペルソナシリーズなど、UI先行でコンセプトが考えられているゲームも出ているし、僕らも微力ながらUIの啓蒙をしていきたいなって思ってます。

UIはどうして大切なんですか?

柳田:ゲームで言うとゲーム体験っていうのがUXの役割で、UIは全体の体験ってよりは操作部分にフォーカスしたもの。よいUIがなければUXは成り立たないんじゃないでしょうか。

野村:ユーザーが見て押せる、押せないっていうのをちゃんと主張しないといけないよね。

柳田:ゲームを楽しむ流れを作るのがUIデザイナーなので、大事だしなくてはならない存在だと思います。

f:id:dmmlabotech:20180919121836p:plain

わかりやすさを作る

ゲームの根幹となる部分にUIが強く関わっているんですね。

柳田:ユーザーから見たら地味というか、とくに考える対象ではないと思うんだけど、開発現場では重要な役割なんです。UIデザインってわかりやすさを作る仕事なので、まずは自分がわかってないとわかりやすさは生み出せない。誰よりも仕様を把握するぐらいの勢いで自分が理解して、エンジニアやプランナーと作りこんでいく。楽しい仕事ですよ。

DMM GAMESならでは のUIデザインと言えるようなものはありますか?

野村:DMM GAMESはPCブラウザゲームが多いよね。

柳田:そうですね。ブラウザゲームの豊富さは他社にはない部分だと思います。PCブラウザ、スマホブラウザ、ネイティブアプリなどで画面が違うってのがまず1つ。あと Webアプリとネイティブアプリなどではコンテンツの持ち方が違うので、その重さを考える必要がある。Unity とか WebGL で作る場合はどうしても重くなっちゃうので、軽量化は気にしてます。あ、気にしてる話になっちゃいましたね(笑)。

野村:だね(笑)。今携わっているコンテンツがまさに Unity と WebGL で開発しているゲームなのですが、スマホを考慮したUI設計をすることによって、1つ作ればそれで済むっていう部分を重要視しています。

柳田:ひととおり作って、表示の一番小さな端末で確認したりしますよね。

野村ユーザーからしたら、PCブラウザでなんでこんな字が大きいんだろう?って思ってるかもしれないですね。本来ならばスマホはスマホ、PCブラウザはPCブラウザで分けてつくったほうがいいんですが、そこはあくまでも両方での使いやすさを考えたうえで、読み込み画像の軽量化や制作コストの削減をより重視してます。

柳田:ですね。PCはマウスで操作しますけどスマートフォンは指で操作しますよね。指を乗せた時に隠れて見えなくならないかとか、スクロールで誤タップしないかとか、そういった部分をしっかり確認しています。

野村:DMM GAMESは移動中スマホでプレイして、帰宅後PCでプレイする人が多いんです。同じところにボタンがないとスムーズにPCで続けられないし、そこもDMM GAMESならではですね。

初公開!? DMM GAMES UIデザインの作りかた

実際にどうやってUIデザインを考えていくんですか?

野村:これは開発中のゲームでの実例なんですが、メインであるバトルのUIを制作していた時、僕のほうで仕様に目を通して設計したら、チーム内から分かりにくいという意見が多くて(苦笑)。とにかくUIデザイナーとプランナー間で最適な形はなにか?を考え抜いて作っています。柳田さんはどうやって作ってる?

f:id:dmmlabotech:20180919122149p:plain

位置や色合いを少し変えてみるだけで使いやすさがガラリと変わる

柳田:僕は、ユーザーに反応をもらえた時に「これか!」ってみんなで手応えを掴むのが楽しいし、もっと面白くしたいって気持ちで考えてます。「戦国プロヴィデンス」というゲーム内の築城という機能での事例を紹介します。

f:id:dmmlabotech:20180919122323j:plain

柳田:表示しなければならない要素が多かったのでまずは情報整理。そこで、ただ更地が目の前に広がっているだけでは面白みが薄かったので「ここにナビキャラ立たせてヘルプにしちゃおう」とアイデアを出して実装しました。リリース後は「更地に旗一本とナビキャラが立っている状態がシュールで面白い」と話題になっていると聞いて嬉しかったですね。

野村:これ、確かに面白かった(笑)。

柳田:もうひとつは、さっき言ったUIから考える「軽量化」の話で、キャラクター投票確認画面の例ですね。これは同じパーツをキャラの体数分表示させるので画像の量がとても多いんです。改善前のデザインではメインで使うUIパーツから汎用パーツを使用して節約しているものの、とても重くなってしまっていました。

f:id:dmmlabotech:20180927125535p:plain

クオリティを落とさず半分のパーツ数で構成

柳田:そこで汎用パーツは切り捨て、一つのパーツのスライス対応で補えるようにデザイン、パーツ構造を見直しました。テキストはシステムフォントに使用する文字装飾(デコレーションタイプ)を削除。テキストの色のみで見やすくなるようにUIパーツを調整。数字はビットマップフォントを流用して、最低限のリソースで改修しました。フロントエンドエンジニアとUIデザイナーで相談をしながら設計し直した例です。データ読み込み方法にも見直しをかけ、全体的に三分の一以下の軽量化を実現させました。

DMM GAMESのUIデザイナーとは

DMM GAMESのUIデザイナーに求められる力を教えてください。

柳田:DMM GAMESではゲーム全体をどう設計していくかっていう部分に携わる要素も強いので、もちろんすごく綺麗なボタンを作るスキルもありがたいですが、さらに外側のユーザーの導線も意識して、ゲームがおもしろいとはどういう状況なのかを俯瞰して考えられる力が大切だと思います。野村さんはどう思いますか?

野村:UIって正解がないんですよ。1+1が2にも3にもなる。使いやすいと思ってもらえるユーザーをいかに増やせるか、それを考え抜けることですね。他社さんが何かを真似してくれたりすると実は結構嬉しいんですけど(笑)、そういう心境にまで至れると楽しさの大きい仕事と思います。

柳田:仕様の根幹部分について発言ができて、時にはゲームの遊び方を左右する重要な提案ができるという、おもしろい仕事ですよね。

野村:あとは、エンジニアやプランナーなどほかのセクションとのコミュニケーションがすごく大事ですね。

柳田:DMMはゲームや他の事業に関わる人が近くにいるのが強みだし、僕はそれを魅力に思って入社を決めました。自分からガンガン動ける人にとっては、とにかくチャンスしかない環境なんじゃないかなと思います。

なるほど。野村さん、柳田さん今日はどうもありがとうございました!

f:id:dmmlabotech:20180919122439j:plain

最後に

最後までご覧いただきましてありがとうございました。DMM GAMESではUIからゲームを楽しませたいという思いを持つあなたのエントリーをお待ちしております。

DMM GAMESの採用情報

https://dmmgames.co.jp/recruit/entry/job18/

DMM Group Recruit [ゲームデザイナー] 採用情報

その他の採用情報

DMM Group Recruit ◯◯◯も、やってるDMM