【Unity道場 2016】モダンなUIの提案と実装 前編

2016.4.28 unity道場 モダンなUIの提案と実装（前編） ユニティ・テクノロジーズ・ジャパン 池和田 有輔

昨今のUI界隈で起きてること フラットデザインなるものの台頭 2013年6月 Apple iOS7でユーザーインターフェイスの一新 2014年6月 Google マテリアルデザインの発表 以降、フラットなデザインが主流に 多様化するプラットフォームとそれらへの対応 モバイル：Android、iPhone、各種タブレット端末 PC：Windows、Mac コンソールハード：PS4、Xbox One、WiiU、3DS、PS Vita... その他：VR、IoT... ワークフロー自体の変化 UI用ラピッドプロトタイピングツールは花盛り InVision, Marvel, POP, Prott, Pixate, Adobe Experience Design, Facebook Origami... COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

昨今のUI界隈で起きてること 進んでいく専門性 技術的な専門性 アートワークを作る上での専門性 よく耳にするようになった謎の言葉：スキューモグラフィック、自己回帰性、身体性、透明性… 旧来のようにプランナーが設計して、アーティストがアートワークを作り、エンジニアが実装する流れでいい の？みたいな話 いっぽう我らがUnity軍 2015年 uGUIの正式リリース もう「UI制作はイケてない」「NGUI頼り」とは言わせない（はず） COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

技術が変わればアートワークも変わる 読みやすいフォントは環境次第 72dpiの頃 ビットマップフォント一択 ABCDEFGH abcdefgh 96 - 250 dpi アンチエイリアスは一般化したが、ある程度のウェイトとX-heightを持つものが主流 ABCDEFGH abcdefgh X-height 250 dpi- やっぱ一般的な紙面で読みやすいフォントがいいよね ABCDEFGH abcdefgh COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

そもそもインターフェイスって何？

そもそもインターフェイスって何？ ほぼ翻訳不可能 最も近い言葉は「境界」「界面」 個人的には「あっちの世界とこっちの世界をつなぐもの」という理解 PCを使うのであれば、インターフェイスの存在は不可欠 「コンピュータ」と「人間」は全く異質なもの 動力が違う。設計思想が違う。得意分野が違う むしろ共通点を見つける方が困難 よって、手を取り合うための手段が必要 それがインターフェイス COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

間にあるのは2つのインターフェイス ヒューマンインターフェイス 広義でのインターフェイス 一般的にはキーボード、マウス、トラックパッド、タッチパネルなどハードウェアを指すことが多い ソフトウェアでは手出しができない領域 グラフィカルユーザーインターフェイス 画面上に表示されているもの いわゆるGUI COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

インターフェイスの理想 デザインの古典的名著「誰のためのデザイン？」の頃からのトピック 超要約 道具をうまく使えなかったら、それは道具のデザインが悪いせい。 デザインはそもそも「問題を解決する」という意味。 問題が解決されてない時点で道具が悪いと言える。 使いにくいのはあなたのせいでも私のせいでもない。 ユーザーが迷わない、理想的なインターフェイスの条件は2つ ヒューマンインターフェイスとユーザーインターフェイスが一致している 正しいアフォーダンスの設計がされている COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

えほん

インターフェイスの理想形とは？ 画面上のキューブを自由に操作するための最も適切なインターフェイスはなんだろう？？ COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

手を突っ込んで直接動かす ヒューマンインターフェイスとグラフィカルユーザーインターフェイスにブレがない COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

できない？よろしい。それなら抽象化だ スクリーンをスワイプで回転、二本指で移動、ピンチで拡大縮小などに落とし込む COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

それも難しい？じゃあこんな感じはどうだ！ 指先のメタファーである「カーソル」を「マウス」で遠隔操作 COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

結果どうなったのか？ 画面に手を突っ込んで直接操作する 画面をなぞったりピンチズームして自由に動かす（タッチデバイス） マウスによるドラッグやクリック、ホイールでコントロールする（マウス） ボタンやキーで操作する（キーボード操作） 抽象の深化 抽象化を挟むごとに、ユーザーインターフェイスとヒューマンインターフェイスに差が生じ、直感性が下がる いわばユーザーの理解してもらうための仕掛けが必要になる。 さらに習熟に時間がかかるようになる 抽象度が上がれば上がるほど、なんらかの工夫が必要になるという話 しかし、生産効率を上げるため、あえて抽象度を上げることもよくあること COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

なんらかの工夫＝デザインの真価

・・・その話の前に Républiqueでの失敗談

ゲームの紹介 米シアトルのCamouflaj社が制作したステルス・アクションゲーム iOS、Android、PC/Mac (Steam)、PS4で展開 PS4版でようやく日本語でも遊べるように！ プロジェクト後半は、プラットフォームごとの差をどういった形で 埋めるかが最大の課題だった。 プレイヤーはOmni Viewと呼ばれるハッキングモードに切り替えて、 監視カメラを乗っ取って様々なデバイスをハックして、少女を出口に 導く役割を担っている。 COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

ピックポケット ダンシトイレ: カンシ2

OMNIビューのモックアップ

65% SECURITY THREAT LEVEL SEVERE HIGH ELEVATED GUARDED LOW 63m HOPE LVL 2 HIGH RISK II

何がダメだったのか？

通常モードとの切り替え ホープが画面外に 出た時に表示されるUI 目的地マーカー 63m HOPE この辺はメーターでタップできない この辺はボタン この辺はボタン II

タップ可能な箇所は黄色いエリアのみ しかし、プレイテストでは全く伝わらなかった 63m HOPE II

紆余曲折を経て、極めてシンプルなものに修正

63m HOPE Pickpocket Inventory Data Find Hope Map View Omni Ver 2.0

タッチデバイスの特性に対する理解度が足りなかった マウスカーソルにあって、タッチデバイスにはないもの オンマウスフィードバック カーソルが乗ると色や形が変わる・光るとか カーソルヒンティング I + 手 カーソル自体の形状が変わる そしてこうなる タップ可能であることが伝わらない ボタンでないところを延々タップされてしまう COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

「クリックできる」ことを伝えるには テキスト これをボタンと認識させるにはどうしたらいいだろうか COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

「クリックできる」ことを伝えるには 1. グラフィックとしてのメタファー（見立て）を使う 物理的なボタンを模した形にすることにより、ボタンとして振る舞うことをユーザーに伝える。 メタファーは、新しいインターフェイス環境の誕生時にはとても有効なアプローチ テキスト テキスト そもそもPCはメタファーの山のような存在 カーソル＝指先 / デスクトップ＝机上 / フォルダ＝フォルダ / ゴミ箱＝消去 COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

「クリックできる」ことを伝えるには 2. ロールモデルを使う アイコンを行頭文字（Bullet）として使えば、プレイヤーは概ねボタンと見なしてくれる 一般的なユーザーであれば「このようなスタイルなものはボタン」という共通認識がある テキスト COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

しかし、この方法が使えない場合もある

このゲームはタップする場所によって行動が変わる METAMORPHOSIS

このゲームはタップする場所によって行動が変わる ボタンを押す ドアに入る 像の後ろに隠れる 壁に隠れる 壁に隠れる ここで立ち止まる 盗む あるいは攻撃 METAMORPHOSIS

タップ後にアイコンを出して行動をユーザーに知らせた いわば事前に知らせることを諦め、事後に知らせるデザインに変更した https://www.youtube.com/watch?v=VZ6csdWoZic COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

ここまでのまとめ 問題点を整理しよう ツールの理想は「ヒューマンインターフェイス」「ユーザーインターフェイス」が近いもの。 あるいは繋がりが深いもの 例えば工具のように「見た目」から「機能」が容易に想像できるもの。 しかし、デジタル製品の多くはそれが難しいために抽象化が行なわれている。 抽象化による理解度の低下はメタファーによって補う。 あるいはロールモデルを提示して理解の足がかりにする。 これにより、正しいメンタルモデルをユーザーに描いてもらい、道具を理解してもらう。 アクションアイコンみたいな方法もあるよ COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

脱メタファーの話

iMacいまむかし COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

OSのUIはどうあるべきなんだろう

Q 見た目の印象を ハードウェアに合わせるべき？

あるいはそれを意識せず存在するべき？

Yugo Nakamura @yugop フォロー中 要するに、スクリーンを「プロダクトの延長の 実平面」と捉えるか、「仮想的な空間を覗く 窓」と捉えるかの違いで、どちらもそれぞれ に、気持ち良い面、気持ち悪い面をもってい る。そこの選択にいつも頭を悩ます。 53 リツイート 142 いいね 9:01 - 2012年2月3日 COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

Apple iOS6の頃 iOS6以前はリアルなテクスチャを模したインターフェイス、いわゆる スキューモーグラフィックが主流だった。 色とりどりのアイコンは、素材感、質感、光、どれを取ってもフェイ クに満ちていた。 一方、ハードウェアは新製品が出るごとに、無駄を極力省いたミニマ ルでシンプルなものになっていった。 両者に乖離が生まれた COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

その時、インターフェイス＝境界はどこにあったか コンテンツ GUI ハードウェア ユーザー ユーザーはディスプレイという窓から架空の世界を覗き、操作している COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

その時、インターフェイス＝境界はどこにあったか iOS6の頃 コンテンツ GUI ハードウェア ユーザー グラフィカルユーザーインターフェイス ヒューマンインターフェイス COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

理想はこっちだよねって話 2 コンテンツ GUI デバイス ユーザー UIはその時々によって形を変えるが、基本的にプロダクトと同じ実平面にある COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

UIをプロダクトの延長に存在し得るための試み とりあえず見た目を合わせてみる プロダクトがミニマルなデザインなら、ルックアンドフィールも無駄を省くべき 動きを変える 現実の世界と同じルールで動かなくてはならない（摩擦や慣性を含めた物理法則に従うべき） iOS6最後のアップデート後のiTunesの金属つまみはジャイロで光が反射する仕様だった 効率よりもわかりやすさ・自然さを優先させてみよう＝身体に近いもの 結果どうなったか 物理世界の拡張シュミレーションみたいなもんができた ヒューマンインターフェイスとユーザーインターフェイスが確実に近づいた アニメーションは明確な意図を必要とし、「手触りなど」「自然さ」を演出するためのものとなった。 しかしまだまだ発展途上。 COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

スキューモは廃止 COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

フラット以降を学ぶべきテキスト iOS - Human Interface Guidelines https://developer.apple.com/jp/documentation/UserExperience/Conceptual/MobileHIG/BasicsPart/BasicsPart.html 日本語で読める！ GUIの設計はプロダクトデザイナーが行なっていることも明記 Android - Material Design Guidelines http://www.google.com/design/spec/material-design/introduction.html コンテンツを紙のように見立てていく考え方 非常に先進的でガイドラインは読み物としても面白い COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

様々なものの意味合いが変わった マテリアルデザインでの影の意味 左右のオブジェクトは色と形こそ違えど、 同様にタップできるボタンである 違うのは影の深さのみ さて、何が違うのか予想してみよう COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

前述の内容が導くもの スキューモグラフィックとの相性の悪さ 影が重要な意味を持つのであれば、シンプルなUIでないとうまく視認できないなどの要因がある 「全く触れたことのない人」にとっては使いやすい 「ドロップシャドウは飾り」「リッチに見せるための工夫」というロールモデルがあるなら使いにくく感じる 動きには意味がある すいこまれることで、「ここをタップすれば今の画面が開く」ということを伝える 登場時に動くことで「ここはスワイプできる」ということを伝える パラレックスな壁紙だって意味がある アイコンは動かないけど背景が動く→アイコンを見失わない COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

このようなデザインが主流になった理由は他にもある 1.成熟度による要因 ユーザーが慣れた。 わざわざ物理的なボタンの形などに似せる必要がない 2.メタファー自体の限界 「現実世界に似たようなものがないもの」が溢れるようになった Twitterというサービスは「見立て」で表現できない テーブルゲーム以外のゲーム全般にも言える 3.メタファーの弊害が顕著になった ユーザーに類推や先入観を与えてしまい、損をするケースも多々ある 例えば日記帳アイコンのアプリには、「物理的な日記帳」以上の機能がないと見なされる 高機能なメモアプリは独自のシンボル（アイコン）を余儀なくされる さもなくば「メンタルモデルの差を無くす」というインターフェイス設計の目的から遠くなる COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

ゲームのUIはどうなんだ ゲームのUIの現状 現在は「そのゲームの世界観を体現したアートスタイルで作る」という考えが主流 アイコンなどのインフォグラフィックは統一しようという動きが強い 他のアプリやOSのネイティブなUIを意識すべきか？ ゲームが主目的ではない、スマートフォンは特に意識すべきだと感じる 直接ユーザーと対話するUI部分はある程度共通化しないと少々部が悪い 少なくとも違和感を感じさせてはダメ ていうかUnityで作れるの？ 頑張ろう！ COPYRIGHT 2016 @ UNITY TECHNOLOGIES JAPAN

とはいえ高度なスキューモー世界は素敵だ

HOME GAME GUIDE COMMUNITY MEDIA FORUMS 99 Max 100 23 Lurs 12 Easy Normal Hard

さて、皆さんお気付きでしょうか

ここまでUnityの話ゼロ！

後半に続く