【Unity道場05】モダンなUIの提案と実装 に行ってきたよ。レポ

Unity UIで色々やりたいんじゃぁ〜

ということで、本日行ってまいりました。

個人的な印象としてUniteトレーニングデイBコースの拡張版という雰囲気でした。

UIの考えてる方の基本、今主流のスマートフォンUIの思想などに踏み込み

後半からはUnity上でのデモの実演を交えて、いかに実装・実現するか。

という流れだったので、かなり理解しやすかったです。

よければBコースについてはこちらの記事で内容紹介しています。

 会場はdots.

ちょいちょいワークショップでお邪魔してます。綺麗な会場ですね。

あとゴーファーくんもいるので是非、彼を見に・・・（逸脱

dotsに君臨するゴーファーくん pic.twitter.com/Sx8FEqJ1jt

— 宮国ろーさ@自分探しの旅に出ます (@power4game) 2016年4月28日

前半UI思想について

※資料も後日、共有されるようです。

UIの専門性が高くなってきた昨今。
フラットデザインなどワークフローが変わりつつある

環境が変われば読みやすいものも変わってくる
解像度が高くなると印刷物と変わらないものが読みやすいのではという説も

インターフェースとは
ヒューマンインターフェイス
ユーザーインターフェイス

　2方面のものがある（以下著書から引用・要約）

誰のためのデザイン？　増補・改訂版　―認知科学者のデザイン原論

デザインとは問題を解決するためのもの

理想として

ヒューマンインターフェイスとユーザーインターフェイスが一致しているものが優秀なデザイン

最近だとページをめくるのではなく絵本をスワイプする子供がいる。

現実上の実物の操作(ヒューマンインターフェイス)と

デバイス上の操作(ユーザーインターフェイス)をなるべく整合性をとっていかなければ
ギャップが大きくなり、抽象度が上がりユーザーが理解できにくくなる場合がある。

Republiqueの失敗談

Republique

【何がダメだったか】

・テストプレイの際にボタンではないものがタップされてしまう
　└ボタンと操作できないものが同列にある

　└ボタンと気がつかれない

タッチでバイスに対する理解度が低かった
カーソルヒンティング、オンマウスフィードバックがpcにはあり、クリックできることを事前に知らせることができる。

【解決手段】

・メタファーを使う物理ボタン

　└ボタンに凹凸を付ける
・ロールモデル

　└アイコンをボタンに載せる

ただしゲームの性質上、事前に知らせることは難しいため、選択後の行動をアイコンで表した。

何らかの形で補うことでユーザーへのフォローを行った

脱メタファーを考える

フラットデザインなどを考えると主流ではないため

メタファーを取り入れることで先入観で機能が制御されているような印象を受ける

見た目の印象をハードウェアに合わせるべきか。UIをプロダクトの延長線上に考える

シンプルな本体に比べ、画面内のUIが別物であると違和感が発生する。

【実例】iOS6でiTunesがジャイロセンサーでトグルが反射する。

　一見、意味のないものだが現実にあるように感じる

【豆知識】本体の傾きに合わせて音量スライダの光沢が変化する（iPhone/iPod touch/iPod nano）

iOS、AndroidUIデザインガイドライン

iOS、Android各種共にハードウェアとUIの整合性を合わせていく努力をしている

iOS＝フラットデザイン iOSヒューマンインターフェイスガイドライン: UI設計の基本事項

Android=マテリアルデザイン Design | Android Developers

影によってレイヤーの距離を表す。ページに付随したものか、独立したものか。

現実にあるものを踏襲して紙ベースにデザインが変更となり

メタファーが今後、移りゆくのではないか

ゲームの場合はどうか

まだまだそういった部分が追求されているとは言えない。
ただ世界観が独特のものもあるため、デバイスと合わせるべきか

独自のUIを設置すべきか適宜考えなければならない

※後半はデモベースだったため割愛（基本はtweenなどのアセット紹介）

Q&A

※一部抜粋

Q.どういった観点でtweenを使うか。演出ありきで絵コンテを書いたりするのか

A.今の主流として感触など触り心地を優先して
どう効果的に使うかを考えながら作っている。

Q.2Dのゲームの場合、処理をspriteかUIにするべきか
A.激しく動くものはspriteのが良いかもしれない

Q.ゲームの場合のデザイン視点は？
A.グラフィックデザインと基本的に変わりない

Q.アニメーションのさじ加減は？
A.ゲームの方向性によりけり

Ｑ.NGUIとUGUIはどちらが良い？

A.同じようなもの作ると機能的にNGUIになるかもだが
UGUIはそれを想定としたアセットがストアが豊富にある

Ｑ.UIを勉強するにあたっておすすめなものは？

A.インターフェースデザインの心理学、他の書籍と比べ視点が面白い。

Unityのパーティクルであれば、Shurikenの本がおすすめ

インタフェースデザインの心理学 ―ウェブやアプリに新たな視点をもたらす100の指針

Unity ゲームエフェクト入門 Shurikenで作る！ユーザーを引き込む演出手法

まとめ

前回のトレーニングデイの際にも感じたことではありますが

uGUIが使用できたとしても、効果的で使い心地の良いUIを作るにはUIの基本を知らなければいけません。

むやみやたらとアセットを使いアニメーションをしたとしても、ゲームとの整合性やデバイス上の入力と不一致であれば

ユーザーには理解しがたいUIに成り果ててしまいます。

改めて、UIデザイナーはPhotoshop上で作業を完結するのではなく

操作方法。触った際の感触やフィードバックなどを含めて

ゲームにマッチした心地よいUI考えられる・設計できるようにならなければならないように感じました。 

【UI考察】クラッシュロワイヤル【遊びたい奴が触って覚えろ】

クラクラのSUPERCELLの新作ゲームのUIを調査！

最近また首都圏駅での広告が目立ってますが。。。

クラッシュオブクランではなく、同開発会社の新作ゲームのUIについて考察したいと思います。

クラロワ概要

キャラクターについては前作クラクラから引き継いでおり、作品の雰囲気等を考慮しても続編・スピンオフのようなゲームです。

以下、詳しくは公式サイト・動画を参照ください。

カードゲーム言うけど、あれですタワーディフェンスゲームです。

clashroyale.com

「紹介動画」クラッシュ・ロワイヤルってどんなゲーム？

一言で言えば、シンプルでよくまとまっているUI

まさにやることは一つしかないぜ！！

と言わんばかりの”バトルボタン”の大きさ。

テーマカラーは青。グリッドデザインで整っている。

ポップなイラストアイコンでテキスト情報は最小限にこそぎ落としている。

読むことによる認識ではなく直感で操作させることを意識しているのだろう。

ページ間の操作も左右のスワイプで読み込みが発生することなく

それこそスマホのように遷移が行える。

ゲームの遊び以外の部分での操作にフラストレーションがたまりにくい。

（この操作はけっこうゲームの中では画期的なのでは）

裏を返せば説明不足で情報が足りない

実はシンプル。とは言っても見た目がシンプルに見えるようで情報量は多い。

画面中央の、右側の2つのアイコンは何を指しているのか検討はつくだろうか？

実は、上が「練習バトル」で下が「達成項目」

触ってみないとわからない。

左下の「ショップ」は実はページへ行くとゲーム内通貨・ガチャ・カード購入と1ページにまとめられてしまっている。

が。よく整理されていて、上記のボタンの大きさを調整し操作できそうな箇所を絞る。目につくようにさせる。

そうすることで意図的にユーザーの行動を誘導しているように思う。

そこで情報量が足りなくとも遊ぶことができ支障がないことによって、さほど気にならないのだろう。

ゲームのコアパート(メインの遊び部分)のUIもいたってシンプルだ。

・ゲージが溜まったら、その消費数のキャラクターが召喚できる。

・破壊対象　・制限時間　・コメント機能(スタンプ）　・優劣

必殺技やらもない。行動としてはキャラを選んでタップすればいいだけ

遊び自体も先に相手のメイン塔を破壊すれば勝ち。

という単純明快なので、

説明がなくても、とりあえずタップすれば動くし。遊べる。

という点でカジュアルなゲームという立ち位置にいるのだろう。

とにかく遊んでくれるユーザー優先。実際に触って覚えろスタンス

これはチュートリアル中のマイページ画面である。

通常のマイページとは違い、必要のないものは触れないのではなくそもそも非表示になっている。

これはユーザーのプレイ状況によってUIの表示を変えているのだ。

一見、親切に見えるが。

そもそもそのプレイ状況にならなければ表示されないということは、

そのレベルになるユーザー、インストールした中からそこにたどり着いた人に対してのみスポットを当てているのだ。

（チュートリアル突破率や総DL数からのDAUが知りたいところ）

ユーザー数を確保したい運営にとっては、これはリスクに思える。

同様に、メインメニューの右側二つの「クラン」「クラロワTV」についても最初から閲覧することはできず、代わりに開放条件は記載されているが

果たしてそれが一体何で何の役に立つのかは説明がなされていない。

結局、遊んでみてユーザーが試すしかないのだ。

大分勇気のいる選択をとったUI

クラクラでも同様ではあったが、情報量が少ないUIは

ゲーム初心者やカムバックユーザーに対して操作に迷いをもたせてしまう。

が、そこはそもそもこのゲームをプレイする層をきちんと把握した上でUIを設計しているのではないだろうか。

www.gamebusiness.jp

上記、記事によると売り上げの50％を中国と米国が占めているそう。

そもそも個人的なイメージだが、欧米ではゲームに対する熱量が高い。

そのためその熱量の高さがあれば情報をユーザーは自ら取得していくため、

情報はどこかにおいてはおくが、一度にすべてを見せようとするわけではなく

遊びに必要なものだけを表示するUIになっているのではないだろうか。

上手くユーザーとUIがかみ合った例だろう

少し話がそれるが、テキストを抑えなるべく記号化させることでローカライズの労力も減り、一定のクオリティを保ったままほぼ同時期に世界展開ができたのだろう。

まとめ

遊んでくれる人はちゃんと見てくれている。

どうしても日本のゲームでは1〜10を説明しなければいけない呪いにかかっているような気がする。

それはクレーマー対策なのか、それともおもてなしの国民性なのか。

どちらなのかはわからない。

作り手があれもこれも！！見せたい性分で、実はゲームの売りをわかっていないのかもしれない。

クラロワはゲーム性から考えて、何がメインか。を重きをおいた、わりきったUIだ。

遊んでいるうちに気がついたのだが、案外と人は情報がなくてもそれが楽しめるならばあまり不満を抱かない。ようだ

あーだ、こーだ。と作り手が説明をして価値観を押し付けるよりも

ユーザーが実際に遊んでみて評価を下す。

というのは正常なフローで健全なことだと思う。

いつかこんな風に設計されたUIを自分も作れればと思う。（遠い目

ロマサガ2、日比谷バーコラボ行ってきた

実はロマサガやったことないけど行ってきた。

www.famitsu.com

4月1日-15日まで実施していた日比谷バーコラボに行ってきました。

日比谷バー自体も行くのも初めて。

同じくプレイしたこともない友人を唐突に誘っていざ新宿へ

（いつも付き合ってくれてる友人、ありがとう！！）

平日で早い時間帯だったため、お店の人にもろにロマサガ目当てとバレる。

特別メニューどーん。

店内にはロマサガの広告？などが飾られていました。

Barでロマンシングな出逢いをしてみたいですね（真顔

まずはオリジナルメニューを一人ひとつづつ頼む。

青いドリンクは、クロスクレイモア

紫は新宿店限定のソウルスティール

剣に刺さった鴨肉とニシンはバレンヌ帝国

うーむ。厨二病感たっぷり

ちなみにソウルスティールの上の泡は何ですか？と聞いたところ

カルピスと桃シロップと生クリームのムース。とのこと

焼酎ベースでしたが甘くて飲みやすくクリィミィで美味しかったです。

メニューにも1個1個に何が使われているのかや何をイメージしたのかが記載されてて親切でした。

ウィスキーの飲み比べて銘柄を当てて限定グッズを当てよう

そりゃ、やるに決まっているでしょう。

ということで頼む

量がわからなかったので、1つを2人で分けて〜と頼むと

店員さんが気を利かせてくれてグラスも分けてくれました。親切対応

内容はこちらの三種類！　ラベルは描き下ろし。かっこいいですね！！

そしてさらに気を効かせてくれて、瓶もテーブルに持ってきてくれました！！

プレミアがついて、瓶だけで10万円だそうです（ヒエー

中身含めると40万とか・・・いやはやロマサガ力ぱない・・・

ファイヤーブリンガーは医薬品の匂い。

ということでわかりやすかったですが。。。

ジェラールとイスカンダルの差がとてもわかりにくい…！

パイナップルとアプリコットとか被ってるし…！！

あと香りと味わいの雰囲気がたくさんありすぎてどっちやねん・・・！！

リコリス知ってるよ・・・！あの世界一不味いグミと噂のサルミアッキの原料だよね！

アルコール度数が高すぎて、鼻が…！

と普段酒飲みなれてないことが露骨に分かってしまう体たらく

そしてウィスキー飲んでると確かに甘いものがたべたくなる。

ということでサガ マリアージュセットを注文。

めちゃくちゃ充実してますね…！！確かにウィスキー飲んでると欲しくなるわ！！

とチョコレートをぽりぽり。そして飲み比べはまだまだ続く…！！

果たして結果は？！？！

友人が味ではなくアルコール度数で判断。

という偉業を行い、見事正解。

私はというと自分の舌を信じた結果、あえなくハズレ。。。

正解した人にはオリジナルコースターがプレゼントされました。

イラストかっこいい。

【結果】ロマサガ分かんなかったけど、楽しめた。

日比谷バーの店員の方は、本当に親切で

オリジナルカクテルについての説明やウィスキーの解説などなど

気を利かせてくださっていて、ゲームオタクにとても居心地のよい空間を提供してくださいました。

コラボしてなくても普段使いで行ってみたいですね。

え、ロマサガ？

長く愛されるゲームって良いですよね。（遠い目

そっちもちょっと遊んでみたくなりました。

おまけ

時間も早いし新宿だし！！てことで同じゲーム系列ということで・・・

アルトリアも行ってきました！！新宿楽しい！！

東新宿に突如現れる白いカプセル

エリクサーはまじ草。だった

あのクラウドの大剣をパフェにぶっ刺す。

という衝撃ビジュアル

勇者の行動選択が「たべる」になってるのがいいね！

食後のラテアート

ということで、コラボバーて意外とたくさんあるので。

皆さん是非。小さい頃に遊んでたゲームのBGMとか流れると懐かしい気持ちになります。

初Uniteまとめ

行ってよかったUnite

まとめ遅いですが、個人的なまとめ。

恥ずかしながら、Unityは本格的に触って慣れ始めたのが2015年7月頃から

NGUI、uGUIをいじれるようになって、丁度いいタイミングで

トレーニングデイもありなかなかためになりました。

お土産も豊富

サンプルデータとオリジナルTシャツ

正直5,000円てちょっと高いんじゃね…？

とか思ったけど

このデータとお土産もってことも考えると結構お得じゃないかな

講演も展示も楽しめる

1、2日目は

ユニティちゃんのライブモデリングあり、各デバイスの展示ではミニゲームありで

ちょっとしか遊べなかったですが

2日間行けばもっと楽しめたかなぁ・・・

別のお部屋でゲームコーナー？もあったので

話題の"Back in 1995"を遊んで、操作方法に悪戦苦闘してギャーギャー騒いでたらスタッフの人に笑われた。

各セッション前に流れるゲームタイトルが面白そうだった件

Made with Unityに載ってるゲームタイトル一覧を誰か…！
面白そうだからプレイしたいけど、情報どこ#unite2016tokyo

— 宮国ろーさ@求職中 (@power4game) 2016年4月5日

て呟いたら思いの外、同じこと思ってた人がチラホラいたようだ。

情報提供してくれた人もいたけど、はっきりした情報がほしかったので結局スタッフさんに聞いてきた。

Made with Unityの映像、中の人に聞いてみたら
まだできたばっかりの動画なので
今後公式でyou tubeで配信される。
かも
とのこのらひい#unite2016tokyo

— 宮国ろーさ@求職中 (@power4game) 2016年4月5日

誤字乙

ちょっと調べてみたらGDC2016verとさほど内容は変わらないようなので、ここに貼っておきます。

要チェックや…！！

Unity GDC 2016 Game Showreel

まとめ

2年くらい前から該当イベントは名前だけは知っていて、ただ会社でデザイナーがいくようなものじゃない。という雰囲気だったんですね

今年はたまたまセクション限っての募集ではなく、広く募集していたので講演決定とかも待たずに申し込んでみたら行けたという顛末

申し込んでた事実も忘れてしまうっていう

行けてよかったな。と思う反面、GDCの経験をしてしまったせいか

日本のカンファレンスってまだまだおとなしいよなぁと感じました。

座った瞬間に隣の人が挨拶してくるって、なかなか日本じゃないよね。

運営として良いなって思ったのは

資料公開すぐするから！！撮らなくていいよ！アナウンスはなかなか親切でしたね。

去年のCEDECは、シャッター音がうざい。と不評でしたからね…

あとアンケートが紙ってイケてない。書く暇ないしデジタル化してほしい

色々言ったけど、来年以降も行けたら行きたいな。

今後、Unityでもっとゲームを作れるよう努力してきたいですね

Unite Training Dayに行ってみたよ[後編]

ゲームアプリのUI考え方と実装

皆様、お待たせしました…Unite2016 Tokyoトレーニングデイの後半レポ始まるよ！！

残り3時間がっつりは皆んな大好き(!?) uGUIを学びます！！

講師は同じくUnityの中の人、池和田有輔氏です。

uGUIを学ぶ際には、こちらの書籍には本当にお世話になりました。はい。

UnityゲームUI実践ガイド 開発者が知っておきたいGUI構築の新スタンダード

前半はuGUIの基本的な機能の説明に

uGUIはunity4.6から実装された、割と新し目の機能です。

会社で勉強しろや〜と言われてもなかなか資料がなかったり

あと皆んな、NGUI使ってたりで。まだまだ普及していないかな…？という印象

イケてないと連呼されるかつてのUnity UI

— 宮国ろーさ@求職中 (@power4game) April 3, 2016

それは自虐なのか？と思ってしまう解説がチラホラw

若干、uGUIの基礎知識がある人にとって前半の基本の説明のみというのは辛いかなぁという印象

周りでは「Anchorがサッパリわからん…」という声が聞こえたので、触りながら覚えるのが一番だろうなと感じました。

HTMLなどWeb知識があれば"float段組"って思っておけば良いんじゃないかな

個人的にはそこ聞きたかったんだけど…

気になったのは講師の経歴。

関わっていたプロジェクトがスマートフォンとコンソールのマルチプラットフォームだったらしい

「コントローラーをどうするかとか、落とし込むのに苦労しました。

　今日はその話をすると長くなるので割愛します・・・」

割愛しないで！！

後半はいよいよ実践へ

Sprite素材をいただいて、RPG風のキャラ選択とマップ遷移を作りました。

イラストはオインクゲームズ所属の平岡氏

絵本に出ててきそうな可愛いイラストです。

oinkgms.com

講師の制作したアセットもサンプルでいただき活用したりしました。

Fugaku

Typeface Animator Demo

だからこそ聞きたかったUIの考え方

テキストのちょっとしたアニメーションなんて一体どこで使えばいいんだ？

「New」マーク程度で、多用したらダサくなっちゃうだろ…

としか考えられなかったのですが、別のサンプルのデモを見せてもらうことで

ああ、こういう使い方もあるのだな…と思い直しました。

（ちょっとした操作に対するフィードバックとしてスパイス的に使用する感じ）

実際に言葉での説明はなかったので、講師の方はどういう思考でこのアニメーションを使用しようと考えるのか

それこそ、タイトルにするからには説明していただきたかったなぁと

2Dゲームでレベルデザインの話があったので、ある程度踏み込んでもらえると嬉しかったです。

こういう表現技法って結局、UIの基本を押さえてから有効活用できるんじゃないかなぁと思うわけです。

UIって難しいなぁ…

もらったサンプルで色々いじいじするしかないですね…！！

てか…youtube漁ってたら、Global Game Jam2015で同じ会場にいた人や…orz

惜しいことをした…！

Unite2016 Tokyo講演覚書き/2D新機能・個人ゲーム開発〜

ビルディング・2Dワールド in Unity ～2D機能のあれやこれや～

※講演資料なし・デモのみ

【9スライスについて】

2Dゲームにおけるspriteの配置や設定などがより便利に。

通常では並べてコピーして…の繰り返しだったが、

uGUIやNGUIの人にはお馴染みの9スライス対応。

drow modeで繰り返しの仕様が可能。サイズ比を変えずストレッチすることも。

回転や引き伸ばしても自由自在

コーナーを変えずに中の部分をストレッチさせることが可能

【タイルマップについて】

タイルマップを作成するとグリッドを表示できる

セルサイズ、数や形（菱型など）は自由に設定できる

グリッドにspriteが吸着するので、ポジショニングができる

スプライトは差し替え可能

パレット上で設定可能しペイント可能

→photoshopのブラシ、パターン登録に似ている

描画したタイルだけに色を反映できる

レイヤーも分けて設定できる

グリッドに沿わなくてもできる→動かせる

回転も可能

アニメーション登録可能

プログラム、スクリプトを追加できる

タイルマップでも重ねて描画していくと空間などが作成可能。

大きさに応じて壁が自動生成される。パイプや地下空間などに仕様できそう

illustratoeのブラシににている

【マスク】

マスクインタラクション

ハイドなど調整可能

グレースケール 、アルファを調整可能

囲ったことを表示可能

【カプセルコライダー2Dについて】

キャラにカプセルコライダー

エッジコライダーに沿わせてカプセルコライダーを合わせられる

キャラクタにいちいちボックス、サークルコライダーを設定しなくて済む

所感

本講演の前にできたばかりのデモを見せながら機能を説明したため

会場の反応もあり、盛り上がりながらとてもワクワクしたものになりました。

実際に実演するため機能も分かりやすく、まるで絵を描くようにUnity上で2Dのスクロールゲームが作れるので

今後、プランナーが2Dゲームのレベルデザインなどを考えるときに使えそうだなと感じました。

デザイナーでもグラフィックを先行したもの・モックを作れるのではないかと感じます。

感覚的にはマリオメーカーのようなものでした。

これからもっと2Dのゲームは時間が短縮して作れるように感じました。

Unityを使った個人ゲーム開発における「収益化」の現状と未来

発表資料

http://japan.unity3d.com/unite/unite2016/files/DAY2_1700_Room2_IchijoTakaaki.pdf

www.4gamer.net

所感

Uniteの中でかなり盛り上がった部類の講演に感じました。

何より内容にメリハリがあり途中と途中に笑いをはさみ、真面目な話もある。

プレゼンがかなり上手いこともあり、観衆の熱量も自然と高まった印象でした。

受けたあとは、「そうだ、個人制作しよう！！」という気持ちになります。

ただ例に出された「Back in 1995」はまだ開発中のゲームであり、収益化の成功については未確定の要素が大きいため今後の動向は注視したく思います。

また個人で名前は聞いたことはあったが、まさか日本のゲームとは思いませんでした。

Kotakuという海外メディアに取り上げられたのが一番大きいところでしょう。

こういった個人制作を取り上げてもらうというのは、なかなか例が少なく稀で難しく感じるところです（言葉や文化の壁など）

そういった点を考えると登壇者の経験のみを一概にマネできるかというとそうでもなさそうであります。（簡単にできるわけでもなく

ただ今後、この講演をキッカケにして、日本の個人制作・インディーズがどう盛り上がるか楽しみではあります。

関東ゲーム制作部、ちょっと覗いてみようかなぁ

Unite2016 Tokyo講演覚書き/FGOのUnity活用術

Fate/Grand Orderにおける、ディライトワークス流Unity活用術

※講演資料・映像共に非公開

【メディア記事】

演出が光る「Fate/Grand Order」のバトルシーンの秘訣とは - GAME Watch

gamebiz.jp