スクリーンショット_2019-06-17_11

サイバーUIインターン 『ゲームアプリ制作』を終えて

今年2.3月頃からWEBデザイン/グラフィック/UI.UXと少しずつデザインの勉強を始めたものの、自分の制作物が良いのか悪いのかよくわからない状態でした。

そんな中、twitterで見つけて応募して、サイバーエージェント主催のUIインターンUI Design Academy(UIDA)』に参加しました。


振り返りも含めたnoteで長いので、覗いてくれた方は目次から興味あるところだけ選んで読んでください・・・!
皆さんの為になるオススメは『ゲームUI/UX』の章です!!!


まずはじめに

お題は『斬新さを加えたパズルゲームアプリの制作
事前課題を提出できる機会が2回あり、本番の3日間でインゲーム画面とレベル選択画面などを制作する必要がありました。

事前課題の段階からメンターさんがFBしてくださり、それを元にどんどん改善していって、最終的にアニメーションを含めたモックアップの制作までを、プレゼンで発表し、優秀者などが選出されます。

UIDAの感想

一言で言うと、『精神的に辛すぎた』です。

理由は二つの要素があって、まず一つ目『参加者のレベルの高さ』。
私は今まで、何かに専門的に特化しているわけではない、ごくごく普通の環境(学校など)で生きてきました。
皆、異なる何かしらの特技や才能があり、それぞれの個性を褒め合い評価する環境。
クラスとか周りにたまにいる、絵が劇的に上手かったり、デッサンを描けちゃったり、何も見なくても現実にあるモノをまるで本物のように描けちゃったり、そんなセンスや才能で溢れる人を”天才”という言葉で表現し、「自分にはそういう才能がないから仕方ない」「次元が違う」と近づこう、追いつこうとすらしていなかった。

しかしながら、今回のインターンは自分が今まで”天才”と名付けてきた人たち、デザインを専門で学んできて強烈な武器を持った人たちと、同じ土俵で戦う必要がありました。
課題提出の段階から、皆の作品を見て明らかに自分は劣っていることが明白でした。
なので、自分がまだ武器になりそうなUXの部分は、とことん考え抜こうそう決心していました。


ここで二つ目の要素『スマホゲームをほとんどしたことがない』と言う事実が、自分を窮地に立たせました。

私は『出来るだけ時間を効率的に使いたい』性格なので、無意味にダラダラしたり、インスタのストーリーを見まくったりせず、もはやゲームなんてスマホに一つも入っていない状態でした。
スマホゲームはツムツムを数回やったことがある程度で、LINEで友達からたまに届くゲームの招待などは鬱陶しくさえ思っていました(笑)

なので、ゲームをする人の心理、何のためにするのか、いつするのか、何のゲームが人気なのか、なぜ課金するのか、何のためにコレクションを集めるのか、そのようなことを調べ、友達に聞くところからスタートしました。
そして、ゲームアプリを60-70個入れてひたすらプレイしまくる。
さらに、ゲームのUI/UXについての記事を読みまくる。
(ゲームの初心者すぎて、ルールもわからずに閉じたアプリも何個もありました・・・笑)

画像1

▶︎個人的に面白かったゲームです。Voodoo社のゲームアプリが操作もビジュアルもシンプルなのに、何故かハマってしまう、ヒットゲームばかり生み出していて凄い・・・こういうアプリを作りたかった・・・


この2つの要素から、私は『新しい要素を加えたスマホゲームとして、ある程度成り立つものを作ることに精一杯だった』というのが、結果をさせなかった自分に対して、インターンを終えた今、俯瞰して考えてみた時の答えです。
(具体的に足りなかったことは後で書きます)


全然満足のいくアウトプットも結果も出せませんでした。
ただただ、悔しさと劣等感がこみあげてきます。

このnoteは、振り返りや恥さらしながらも自分の制作物のアウトプットを通して、今後どうすれば良いのかということを、自分が覚悟を決める意味でも綴っていければなぁと思います。

ゲームUI/UXに関して

知られば調べるほど奥が深いゲームアプリのUX

実際に自分で考えてアウトプットしてみて、「ゲームアプリのUI/UX共に難しすぎる・・・」って素直に感じました。
UIは自由度が高い上に世界観を作り込むので、細部までビジュアルにこだわる必要があり、またUXも、どうしたら何度もプレイしてハマってもらえるか、どういうギミックが必要かなど、考えるべきことが、設計すべき体験が多すぎる・・・


サイバーエージェントの鷲山さんが
そもそもゲームとは『インタラクティブというエンターテインメント
=行為に対してリアクションが返ってくること
とおっしゃっていました。

また、ゲームアプリにおける直感的とは、
メンタルモデル(こう操作するのだろうという推測)と概念モデル(実際の操作方法に対する認知)の乖離がないこと』と。

画像2

【ゲームアプリ制作をする上で考えるべき要素】

◼︎ビジュアル/インターフェイス
(初級)見やすい/分かりやすい/直感的▶︎最低限のライン
(中級)操作しやすい/遊びやすい▶︎少しプラスな感情
(上級)ワクワクする/ドキドキする▶︎ここにならないと何度もプレイしてくれない
◼︎ゲーム性/ゲームシステム
・ゲームルール
◼︎世界観
・ストーリー(場所/環境/時代/キャアクター/ラベリング)
・ディティール(形/書き込み量/トンマナ)
・色(HSL/組み合わせ)
◼︎演出
・サウンド
・フィードバック
【ゲームプレイヤーの4タイプ】

◼︎アチーバー(達成者)
目標を達成することに満足感を感じる
◼︎エクスプローラー(探検家)
探検に満足感を感じる
◼︎ソーシャライザー(社交家)
社会的な他者との関わりに満足感を感じる
◼︎キラー(殺人者)
他者と比較して他人よりも勝つと満足感を感じる
【インターンを通して痛感したゲームアプリ制作で大事な要素】

◼︎遊びやすさ(シンプルな操作性×ユーザービリティ)
・マニュアルやチュートリアルがなくても直感的にプレイできる
・ヒントを提示してアシストしなくても段階的にルールを学習できる
・文章でルールを綴るマニュアルより、動画のチュートリアルの方が分かりやすい(チュートリアルは見せるだけではなく、実際に操作してもらうとなお良い)
◼︎ステージ難易度の工夫
◼︎プレイヤーが達成すべき目標が明快かつ魅力的
◼︎何度もプレイしたくなる仕掛け作り/演出
◼︎ゲームで設計したストレス以外の外的ストレスを与えないこと
操作に悩む/アイコンを探せない/ルールがわからない/迷わずにボタンを押せない
◼︎ストレスを設計してストレスに見合う報酬を用意すること
◼︎素直に楽しいか/プレイしていて気持ち良いか
◼︎さりげないおもてなし
◼︎起動後〜プレイまでの時間や操作回数を少なくする
◼︎ステージ1/レベル1で基本アクションをさせて覚えさせる
◼︎親指ゾーンマップを意識
◼︎アイコンなどは常に表示すべきものか、必要な時だけ見せるべきか考える
◼︎ゲーム中に誤操作しないようなボタンやアイコンの配置
◼︎世界観をとことん作り込む/トンマナの統一
影の向きや、3Dの度合い
◼︎ターゲットに対する適切な難易度設定
◼︎スマホの画面は小さいので最大限画面を生かして設計
◼︎混乱や勘違いさせない設計
意味合いが違うのにフォントやカラーが同じだと混乱する
◼︎現実世界との乖離を減らす
ゲームで作られた世界観だとしても、現実世界ではありえないこと(私のアプリの場合はバスケコートが背景でバスケゴールが横にあるなど)はユーザーを混乱させてしまう

▼為になった面白い記事


自分の制作物

〜提出1回目〜
画像3

1つ目が、街でたまに見かけるけど、意外と覚えていない標識とかマークを使ったパズルゲーム(本当は企業ロゴでやりたかった)。

私自身の思想として「1あるものをプラスにする」(例えば、もっと日常生活をワクワクにするとか、エンタメよりの思想)ではなくて、「マイナスをプラスにする」(誰かが抱えてる悩みを解決する、温かい気持ちになる、困っていたことが便利になるとか、にやり甲斐を感じる)なので、いざゲームを作るってなった時に、『ただ楽しい』とか『ストレス発散になる』っていうゲームをどうしても作れなくて、『誰かの役に立つもの』っていう視点ばかりから考えてしまっていました。

その結果、何の面白みもないごくごく普通のゲームアプリに・・・

画像4

2つ目が、『錯覚×ゲーム』で心理学が好きなのでそんな視点からゲームを考えていたら、こんなゲームに・・・
3枚目のUIの目と口が面白すぎて自分で見ててツボる・・・
どうぞ笑ってください・・・!

先日、twitterで靴が何色に見えるかっていうのがバズっていたと思うんだけど、そういう、「誰にでも話題として当てはまるけど人によって見え方、捉え方が異なる」みたいなことをゲームにしたかった(できなかった)

(そして0.5個目の案として、友達とか恋人、家族に普段は言えない感謝の気持ちだったりを送ることができるアプリを考えていました。最近リリースしたoshidori×パズルみたいな・・・送り手は、写真を選択して文字を入力して一つの画像を作り、パズルとして送ることができる。貰い手はパズルを解くという体験と何が隠されてるのか分からないっていうドキドキを味わいながら、メッセージを受け取ることができるっていうようなアプリ。小学生の時に、ブラックライトで照らすと文字が浮かび上がってくる透明ペン流行やりませんでした?!あの時のドキドキをゲームにしたかったけど斬新さのかけらもない・・・)

〜提出2回目〜
『iphoneの多様な操作性(フリックとかダブルタップとか長押しとか)×音ゲー×ストレス発散』を掛け合わせたゲーム

画像5

画像6

画像7

画像8

画像9

画像10

画像11

画像12

画像13

画像14

明らかに性格の悪いゲームですね(笑)
パズルゲームで一番ユーザーの多い主婦層をターゲットに、ストレスを溜めやすい主婦のストレス発散ツールになればと、自分的には考えて作ったつもりだったのですが、色々と問題ありでした・・・笑

twitterでボロクソに言われたって書いてた案がこれです(笑)
何がダメか一言で言うと、そもそもゲーム=ストレス発散のツールだから、このアプリをストレス解消のためのアプリと定義するなら、+αが必要だということ。

単純にゲームをやる意味を履き違えていた私が悪いです・・・
すぐに何が悪いか理解できなくて、何人もモックを見てFBいただいてやっと納得できました、まじでありがとうございました・・・
あとエンジニア目線で、iphoneの操作の回転はやめろということです(笑)



〜提出3回目〜

なんとなく求められていることが分かってきて、「誰かの役に立つ」とかそう言う視点は一切考えずに、とにかく『面白い』ゲームを作ろうと考え、またもやゲームをしまくり、その中で私的に気に入った『HITアロー』に世界観と斬新さを加えたアプリを作ろうと試行錯誤しました。
あと、提出2回目の『iphoneの多様な操作性』はどうしても含めたくて(blackboxっていうアプリの視点が好きだった)、そこを残しつつ考えたのがこれ。

画像15

画像16

画像17

画像18

画像19

画像20

ボールなんて使わずに『色の違い×iphoneの操作方法』でもよかったのですが、そうなるとゲーム性が鍵だなって思って、そこまでのゲームを作り込める自信がなかったから、"似てるけど異なるモノ"としてボールにしました。

バスケを選択したら、シュートを決めるっていう動作が伴い、同じ意味を持つボールとしてバスケットボールとサッカーボールを扱うゲームになっています。(スマッシュだったら卓球やテニスやバレー)
また、バスケットボールにはシュートを決めるような操作として上スワイプが割り当てられていて、現実世界と結びついたゲームになっています。

本当は、上から落ちてくるボールの速度も現実世界に合わせたかっけど、難易度が高くなってしまい、やめました・・・

画像21

▶︎左がなんかダサいと言われた(笑)改善前で、右が改善後
ロゴ一つ作るだけで難しい・・・・

画像22

▶︎インゲーム画面の変遷で、左から順に古い→右が最終盤

メンターさんのアドバイスをもとに変えた改善点

・バスケコートの上半分だけ黒い違和感をなくした
・ゴールが左にあるのが現実世界と乖離してる違和感をなくした
・画面下で操作するので、停止ボタンなどがあると誤操作しやすいから上へ
・ゲーム中の視線は上画面にあるのに、下画面にタイムやケージがあると見にくいから上へ
・一時停止とヒントを分ける必要ないので一つにまとめた
・出来るだけ画面を最大限使えるように、ボールが落ちてくるエリアを広げた

▼結果として、このゲームに何が足りなかった点

・インゲーム画面をアニメーション付きで少ししか作る時間がなくて、やりたいことを伝えられなかった
→このゲームの楽しさや気持ち良さを第三者がイメージできなかった
・ゲームルールにもっと工夫ができた
(今は正しい操作+1、間違えたら-1、障害物NO TAPで上からスムーズに落ちてくるモノたちに対して、操作を間違えるごとに動きが停止する状態になっているが、リズミカルに落ちてきて、間違えても動きが停止しない方が面白い&気持ち良かったかなぁって思ってます・・・文章で上手に伝えられない・・・)
・斬新さが足りない
・プレイヤーに対する思いやりが足りない
→もっとプレイヤーが楽しめるギミックや、満足する演出があればよかった


時間あればもっとできたとかそういう感情よりも、単なる実力不足です。
次の章で細かく触れます・・・

インターンを通した気付き/課題

【ゲームアプリ制作を通した気付き】

・『時間かけて調べながらなんとかできる』ではなく『すぐにできる』じゃないと意味がない
これは私のイラレとAfter Effectの使用に関して感じたことです。両方基本操作はできるけど、「これやりたい!」に対して毎回調べて時間かけないとできないので、今回は時間がなく発展的なことは何もアウトプットできなかった。
例えば、自分でキャラクターを描いたり、アニメーションを細かく付けたり、やったことがないことをこの三日間で実践する余裕が全くなかった。私の経験不足です。

・自分のできる範囲でのアイディア出しに止まってしまった
1つ目と付随する部分のあるのですが、アイディアを出す段階で、「こんな複雑なゲーム作れないからやめよ」「キャラクターかけないからキャラクター登場させないゲームにしよ」と、可能性を狭めてしまっていた。
出来る範囲でやるのは正しいことかもしれないですが、もっと挑戦していれば、アウトプットの質も高まったかなぁと・・・

動画付きパワポ本番ぶっつけはやめよう
「動画を挿入したパワポ&発表者ツール&動画をところどころ停止しながら発表する」のが初めてで、本番で操作をミスって失敗経験を積んでしまった
次からは絶対同じ失敗をしないと思いますが、練習の段階で挑戦すべきでした(同じようなことする人は私みたいにならないように事前に練習してほしい)

ゲーム用語やiphoneについてもっと調べるべきだった
市場とかユーザーのこととかばかり調べて、肝心なゲームに使える機能、例えばジャイロ機能などを引き出しとして増やしていれば、もっとアイディアの幅が広がったんじゃないかなって思った


【ゲーム考えるにあたって難しかったこと】

自分の視点と他者の視点をどう絡めるか
└自分が面白いと思うゲームであっても、他者にとって面白いかわからない/ターゲットに刺さるかわからない
└ゲームを続けるモチベーションも、私はコレクションを貯めるとかスコアを上げるとかは全くモチベーションにならず、タイムを競うことが、数値で目に見えて、分かりやすくて好きだったので、今回のゲーム設計もそのようにしたが、これが多くの人にも当てはまるのかわわからない

意思決定の判断軸
ゲームのルールとして、達成すべきカウントを固定して時間を競うか or 時間を固定してカウントを競うかみたいな、細かい部分の意思決定の連続で、迷うことが多かった
その時の判断軸がまだまだ足りないことを痛感した

インターンを通した気付き】

凄い人ほど影での努力量がえげつない
役員の佐藤さんが、アプリをスマホに何百も入れていて、毎週400個ほど溜まるアプリのアプデ文章をappstore で見るということを毎週欠かさず行っているとのことで、衝撃を受けた
凄い人ほど努力しているのに、何者にもなれていない私が努力しなくてどうするんだってなった

・ゲーム業界の厳しさ
前述したことに加えて、ゲーム制作って1つのプロジェクトに2.3年かかっているそうで、「2.3年先の未来を予測して制作する難しさ」「何億も投資するので簡単に失敗できないプレッシャー」「長期スパンで計画を立てる難しさ」「リリース日に遅れないようにするスケジュール管理の難しさ」など、本当に厳しい世界だなと・・・
【逆に出来るようになったこと】

性格上、自分の課題ばかり見えてしまうので、出来るようになったことも考えてみました。
XD→protopie / XD→after effectで書き出して、簡単なアニメーションを作れるようになった
自分の考えた複雑なゲームをどのように分かりやすく伝えるかっていうプレゼンの工夫を考えられるようになった
└動画を見て理解してもらうことと口で伝えるべきことの掛け合い
└考えていることを全て伝えるのではなく、相手の理解を助けるもの&衝撃を与えることのみを伝える
└当たり前のことは言わなくてもわかる
└ダラダラとルールを説明するのではなく、一文に一つのルールを短く分かりやすく伝える
自分の課題が明確に見つかった
自分が他者の何に凄さを感じて、何に劣等感を感じているのか、考えて課題を見つけることができた
→次の章で触れます


今後私はどうすれば良いか


私の課題は以下の3つ

ツールを素早く幅広く使いこなせるようになる
AE / protopie / イラレ / photoshop

②手を動かして色んなものをサクッとイラレで描けるようになる
トレースでも、お手本見ながらでも何でもよくて、描けるって言う自信をつけないと、「できない」って今回のように挑戦すらできなくなってしまう

③色の扱いが慣れていない
「綺麗なグラデーションの作り方」「4色以上の色の組み合わせ」「テクスチャ」にもの凄く課題意識を感じたので、色に着目して生きていこうと思います
そして冬にある色彩検定を受けようと思います
2.3級でどっちとれば良いかわかりませんが、とりあえず3級から勉強してみます

画像23

画像24

▼一つ目の写真が、他の参加者の「凄い」って思った&劣等感を感じた部分を抽出して(グラデーションと色の組み合わせ)真似してみました笑
(インターン参加者に見られてたら恥ずかしい)

グラデーションの作り方とか特にめちゃくちゃ勉強になった・・・
ボタン一つでも真っ白 or 軽くグラデーション付けるで印象が全く違ってびっくり!

▼二つ目の写真が、劣等感を感じた部分の一つ「イラストのテクスチャ」
ベタ塗りorグラデーションしかできなかったから、調べてテクスチャつけれるようになってハッピーです!



【7月から今後習慣化すること】

何事も習慣化すれば勝ちだなって思うので、通常のやるべきことに加えて、電車の通学時間や寝る前などに無駄にケータイいじってる時間を減らして、空き時間で以下の項目を7月から頑張ります。


①毎日1つアプリを触って細かく観察する
&そのアプリの1画面トレースする(2時間以内)

②pinterestで毎日3つピンして考察&色を抽出

③毎日1つWEBサイトをパソコンで見てアニメーションなどを考察

④1ヶ月単位でやること
1週目 キャラクターなどトレース
2週目 バナー or ロゴトレース
3-4週目 モックアップも含めた1アプリ制作


⑤ツイッターでバズっている記事は幅広く読む


万が一サボっていたら、ぶっ倒してください!!!!

読んでいただいているかわからないですが、本当にメンターの方が思ったことは全部ハッキリ言ってくださって、筋の通ったアドバイスで、どんな質問に対しても自分の意見を持っていて、人として尊敬できて、素晴らしかった、あんな上司の元で働きたいなぁって思う方でした・・・

UIDA興味ある方は夏2回開催するみたいなので、ぜひ応募してみてください!


ここまで読んでくれたなんて素晴らしい・・・すきです!!!!!
仲良くしましょう!!!


この記事が気に入ったらサポートをしてみませんか?