初心者のUnity道場備忘録 ~モダンなUIの提案と実装~

Unity道場へ行ってきました。

今の僕の能力では、セミナーの内容を十分に理解できませんでしたが、

個人的に参考となった内容を備忘録がてらまとめます。

kenjin.unity3d.jp

Unity道場の内容

f:id:ktg6:20160429125425p:plain

題材のとおり、UIに関する事を中心とした講義内容でした。

前半:Unity一切関係なしのUIに関するお話

後半:Unityのサンプルを用意してアセットなどの説明、質疑応答など

前半部

UIの推移について

72dpi → 96~250dpi → 300dpi
といった具合で推移した経緯がある。
300dpiとなると、紙の印刷物に匹敵するほどの質となる。
dpiとは、主にプリンタイメージスキャナなどで使われる解像度の単位で、幅1インチ(約2.54cm)を何個の点(ドット)で表現できるかを表す値。この値が高いほど、より精細な印刷や読み取りが可能となる。

インターフェイスについて

  • 境界、界面などに近い意味

→(対象とするIFの意味合いはあくまで「近い」という位置付け)

  • 解釈として、あっちの世界とこっちの世界をつなぐもの
  →(実際の人間の手とタッチパネルとか)
  • 大きくわけて2種類に分類
  →ヒューマンインターフェイス(HIF)、ユーザーインターフェイス(UIF)
※広義のインターフェイスではハードウェアも指す

デザインに対する考え方(本の要約)

とある道具があった。だが、使いづらい…
道具が使いづらいのはなぜ?
自分のせいでも誰かのせいでもなく、デザインのせいだ!
参考文献:誰のためのデザイン?(本)
  • ヒューマンインターフェイス(HIF)、ユーザーインターフェイス(UIF)が一致
  • アフォーダンスが設計されている
アフォーダンス(affordance)とは、
環境が動物に対して与える「意味」のことである。

インターフェイスの抽象化について

  • 抽象化をはさむとHIF、UIFに差異が発生する
  • ユーザーの理解を得る工夫が必要
  • そこでUIデザインが必要となってくる

ゲーム開発の事例紹介

Republique というゲームを作ったが…

タップパネルの配置が悪く、
テストではユーザーに各種タップパネルの機能が伝わらなかった
↓ なぜだろうか??
見た目にこだわり、ユーザーが使い方を理解できなかった
↓ どう対応したのか?
  • シンプルに直した
  • タップできることを伝えるため、グラフィックとしてメタファーを使う
  • アイコンなどを活用し、ロールモデルを使う

どこをタップすれば、どう行動するか事前に伝えるには… 

  • 事前周知は諦めた
  • タップした瞬間に説明、アイコンが出るようにした

簡単なまとめ

  • HIF、UIFの近いUIが至高
  • 繋がりが深いものを目指す
  • 見た目から機能が想像できるようにすると良い

PCの進化から考えてみる

・imacの場合はどうか?
 →年々シンプルになっている
・OSのUIはどうあるべきか?
・見た目の印象をハードに合わせるべき?

ios6の事例から考えてみる

  • アイコンが質感、素材感、光、どれもフェイクに満ちていた
  • ハードはシンプルなデザイン
  • アイコンのスキューモは廃止 → フラットデザインへ移行
  • アイコンがとてもシンプルになった
スキューモーフィズム(skeuomorphism)とは、
他の物質に似せるために行うデザインや装飾のこと
  ※このあたりは色々な考え方があり、一概にスキューモーフィズムが✖️
 フラットデザインが◯という事ではなく、主観も混ざっている。
 というのが僕の見解です。(僕はフラットデザインの方が好きです)

機能の伝え方

ここをタップすれば画面が開く、という意味合いを伝えたい
アイコンロック機能の意味合い
アイコンが動かず、背景だけ動く

→ アイコンを見失わない為

フラットデザインに移行した理由

A.ユーザーがPCの画面や、アイコンをタッチするスマホの画面になれた為

ゲームはどういう方向性になっている?

  • 世界感を体現したアートスタイルで作る という考えが主流
  • アイコンのグラフッィックは統一しようという動きが強い
他のアプリ、OSのネイティブUIは意識すべきか?
 →スマホ向けは特に意識すべき

後半部(アセット紹介)

dotweenについて

  • フラッシュ文化から生まれ、特色を色濃く踏まえたアセット

typefaceanimator

  • テキストをアニメーションさせるアセット
  • 文字を回転させたり、波状に動かしたり、といろいろ調整が可能

image deformer

  • 画像を変形させるアセット
  • フォースによって引っ張った画像にする事が可能

タッチによる動きについて

  • 縦の動きと横の動きを同時にできないようにしている
  • 片方はロックしておく

質疑応答

オススメのアセット

UGUIとNGUIの比較

 →動くものの場合、動作性、重さの観点からは現時点ではNGUIの方が良さげ

懇親会について

  • 立食式で参加者と交流できる
  • 質問コーナーもあり、不明点をユニティージャパン担当者に聞く事ができる
  • 飲み物(水、オレンジジュース、など)食べ物(ピザ)が無料

所感

  • Unity道場のレベルは、完全に実務でやっている人向けに感じた
  • 参加者の多くは実務でUnityを活用しているプロ

→気軽に交流をとれるので、人脈形成、情報収集の場として価値が高い

  • これだけメンツが集まる中、無料なのが大きい

→しかも、飲食代込み!

  • 懇親会では孤立して途方にくれる人が多かった

→慣れてないと、見知らぬ人に話しかけるのは中々勇気がいるもの

→運営側で何か仕掛け(自己紹介させるとか)があれば打ち解けやすいのでは?と感じた

まだまだ、満足についていけるレベルではないのですが、

どんどん参加してついていけるようになってやろうと意気込みが出ました!