【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考えられる・設計できるようにならなければならないように感じました。