スマホ向けゲームのUIデザイナーになるための一歩
こんにちは。とあるスマホ向けのゲーム会社でUIデザイナーをしていますミア(@mia_missun)です。
今回はスマホ向けのゲーム会社のUI/UXデザイナー志望の方のために、学生の内に何をしておくべきかについてアドバイスできればなーと思いこの記事を書きました。ゲームUIデザイナー初心者にも参考になるかもしれません。
はじめに
そもそもUI/UXとは？とかその辺りは割愛します。いろいろ詳しい記事は世に出ているので調べてください。学生の内にガンガン調べよう！調べる力もすごい大事！(決してめんどくさいとかじゃなく)
あくまで一人のデザイナーの考え方というだけですので、そのつもりで読んでいただければ。
まずはとことんアプリを触れ！
皆さんは今までスマホアプリまたはスマホゲームをいくつ遊んできましたか？一般的な人でも2桁いけばいい方だと思います。ゲーム好きなら3桁は遊んでますよね？と聞くと大体渋い顔されますw 案外やってないもんなんですよね。(3桁以上遊んでる！と自信たっぷりに言える方はほんとにゲームが好きな方でしょう)
ほとんどの人が自分が好きなゲーム、やりたいゲームを遊んできただけ。そりゃそうだ。私も学生の頃にいくつ遊んだかというと多分30前後だったと思います。
で、なんでアプリを触れって言うのかというと、「デザインの引き出しを増やすため」なんですね。
私が入社して最初につまづいたのは、レイアウトやモチーフなどのデザインパターンの幅の狭さでした。それを増やすにはもう見まくるしかないんですよね。知らないデザインを。嫌いだったり苦手なデザインも。
で、そこで重要なのが「何を見るのか」
見る時は量より幅
入社当初、大手企業のアプリを片っ端からインストールして遊んでみたんですよ。スクエニとかLINE系列のゲームとか。ここで気をつけてほしいのは同じ制作会社だとレイアウト似てるまたはなんとなく同じってこと。そうすると時間かけて遊んでも結局得るものが一緒なんですよね。
例えばRPG系やカードバトル系のやつってチュートリアル長いし、いろいろな機能が解放されるまでしばらく遊ばなきゃいけないからUI見に行くには不利だったりする。もちろん大事なんだけど。でもそれを10個やっても得られるものがそんななかったりする(自分はそうだった)。
ってなると同系統のアプリ見るより幅広いアプリを遊んだ方が得られるものは多いと思うんです。だってやらなきゃいけないデザインってRPGやカードバトル系とは決まってないし。
もちろん結果的に数多く見る方がいいんだけど、最初の内はできる幅が広い方が重宝されやすいかと。いずれこれが得意とか好きとかで幅狭めるのはいいけど、最初はね、最初は。
他社アプリのココを見ろ！
次に実際アプリ遊ぶ時に何を見るのかについて。これが実は意識しないと見れてなかったりします。
単純に遊ぶのは誰でもできるんですけど、遊ぶだけだと意味ないんですよ。実際にレイアウトとかデザインする時には役立ちません。だってメニューアイコンがどこにあるのが一般的なのか、ローディング中にどういった情報を置いておくといいのかなんて意識しないと見ないもん。いざ組むぞ！って時にどこに置こうかな～と考える時間がもったいない。
だから最初は、大体のUIがどこらへんに配置されているもんなのか、どういった情報が必要なのか、を中心に見て「よくある配置」を知ることから始めるのがいいかと。
例えば、メッセージウィンドウの閉じるボタンはどこにあるのが一般的なのか。別に正解はないんですけど、私が落ち着くのは右上なんですよね。完全にWindowsの影響なんですけどｗ でもMacユーザーって左上に閉じるボタンがあるんですよね。(この記事でも紹介されてて面白かったのでぜひ)
じゃあとりあえず上のどっちかに置いとけばいいのか？というとそうでもなくて、例えば大手企業だとウィンドウの下側に置いてあることも多いんですよね。なんでかというと(多分)スマホだから。片手で操作する人もいることを考えると下側にある方が触りやすいからかな～と勝手に思ってます。あとは単純にボタンという要素の距離を離さないためかな？上に行ったり下に行ったり指が疲れる！
正解も意図も、本当のところどうなのかまではわからずとも、「どうしてこうしているのか？」「何故ここにこのボタンがあるのか？」「どうしてこんな色なのか、サイズなのか？」みたいにひとつひとつのUIの存在理由を考えながら見ると、また新しい発見があるかと思います。
細かい演出や表示情報を見ろ！
UIに気を取られてしまいがちですが、ボタンを押した時どのUIがどう反応するのかを意識して見たことありますか？
個人的に直近でおぉっと思ったのはドラガリアロストのボタンですね。押したらコマアニメするんですよ。今までも同じような表現は見たことありましたが、かわいいなぁとか面白いなぁという直感的な楽しさに繋がったので一例として。
私が普段ユーザーとしてゲームを遊ぶ時は、「行動に対する反応がほしい」と思って遊んでます。
どういうことかと言うと、ボタンを押したら押したとわかるアクションがあったり、データダウンロード中にローディングバーや進捗の％が表示されたりなどなど。これがないと不安なんです。行動したけど何もない＝反映されてない？と感じるので。
例えば課金しようと思い、購入ボタンを押したとしましょう。押したけどボタンが光ったり暗くなったりもなく、購入しましたという確認ウィンドウも出ない。でも見てみたら確かにダイヤの数は増えている。
いやいやいや、怖いわ！ちゃんと増えたよって教えて！と思いませんか？
ということは「購入ボタンを押した」という表現と、「ダイヤを何個何円で入手しましたよ！」という通知ウィンドウがあった方がいいですよね。
こんな風にユーザーとして遊ぶとしたらどうしてほしいのかを意識することで、どこに演出を入れるのか、どういった情報を表示すべきかを逆算して考えて用意することができます。
更新された箇所を比較しろ！
スマホアプリの良いところは、リリースしてからも更新でブラッシュアップや追加機能ができるところなんですよね。(まあ最近はPS4やSwitchも更新できますが)
そこで見てほしいのが何が変わったのか！
追加機能もいいですが、特にブラッシュアップされた箇所にフォーカス当てて見てみてほしいです。パッと分かるレベルの変更じゃない限り気づきづらいのですが…
理由は改善理由の想定をすることで、レイアウトを組む際に気をつけるべき点がわかるから。
可能なら修整前のスクショと修正後で比較できるとベストですね。私は新規でアプリを触る時はスクショとプレイ動画を撮りまくって後で見返せるようにしています。(一期一会の表示もあったりするので)
例えば、課金ショップ内の購入ボタンが緑色だったのに更新されて赤色になったとしましょう。「何故ボタンの色を変えたのか？」疑問に持つ人はほぼいないでしょうが、そういった細かいことい疑問を持ってほしいのです。
もちろん色が変わった理由は知る由もありませんが、一般的に「赤」は購買意欲を高める色だそうです。セールの時なんかは積極的に赤色が使用されますよね。ならそういう意図があるから？とか、背景の色に対して緑より赤の方が目立つから？とか、もしかしてこうかな？を考えるとそれについて調べたりするので知識が増えるんですよね。(調べなくても考えるだけで勉強になりますが)
実際上記の情報とかは私が課金ショップの配色に悩んでいる時に、「購入ボタン 色」とかで検索して得た知識だったりします。でもその時にへぇ～となれば次回から参考にできるわけですね。
他にも前はあったボタンがなくなっていたり、文字の色が変わっていたり、画面触るとキラキラエフェクトが出るようになっていたり、細かい細かい変化があります。
これは一般人見つけられんだろ！っていう細かい変化を見つけることができた時は楽しいですよw
まとめ
・まずはアプリをたくさん遊ぶ
・量より幅を広げる
・基本的な配置を知る
・細かい演出を観察する
・変更された箇所の理由を追求する
たくさん書きましたが、結局はたくさん遊んでたくさん見てね！ってことです。入社当時は1日1アプリ調査をして知識を深めていました。描くという実践ももちろんですが、見て学ぶ時間も同じくらい大切です。
学生の内からたくさんのゲームを遊ぶことで視野が広がり、表現の幅も増えるのではないでしょうか。よくポートフォリオでゲームUIを制作しました！ってページを見ますが大体が自分がよく遊んでるゲームを参考に見ているだけで浅いことが多いです。(RPGとかカードゲームが多いｗ)
ポートフォリオでゲームUIを見せる時はどういう風にまとめるといいのか、についてはまたいずれまとめてみようと思います。興味があればフォローお願いします！
ではでは、長文を最後までお読みいただき、ありがとうございました。