こんにちは、やまだたいし( やまだ たいし (@OrotiYamatano) / Twitter )です。
UIを入門したいと思い学んだが、忘れてしまいそうだったので今回は学んだことの備忘録として残しておくことにした。
目次
なぜ？UIを勉強しようと思ったのか
それはゲームを作る上でUIを作るのは必須。
ゲーム制作だけにとどまらず、様々なものを作る上でUIはなくてはならないものだから。
作り方を理解していればもっとより良くスムーズにUIを作れるのではないかと思ったから。
そもそもUIとは
UIそれはUserInterfaceの略でシステムや機械と人間をやり取りするための手段のこと。
ここではUIデザインのことを略してUIと呼称する。
UXとは
UIと似たような言葉にUXという言葉があるが、こちらはUserExperienceの略。
ユーザーの体験のこと。似てるようで全然違う。ここではUXデザインのことを略してUXと呼称する。
UI=UXではないが、UIとUXは切っても切り離せない関係。
見た目が素晴らしいデザインでも体験が良くない、使い勝手が悪いUIというのは意外と多い。
アフォーダンス
環境の中にある情報のことをアフォーダンスという。
例えば、現在の日本人25歳ぐらい以上であればフロッピーのマークを見て、
「フロッピー」、「保存出来る」とアフォーダンスを知覚する。
しかし、25歳より下になると、よくわからないマークという認識になる。
人によって知覚されるアフォーダンスは違う。
25歳以上にも、25歳以下にも分かるようにする場合はどのようなマークが適切だろうか。
最近ではダウンロードを意味する以下(↓)のようなアイコンが一般的になりつつある。
このような誰にでも分かる適切な手がかりのことをシグニフィアというらしい。
制作フロー
UIを作る上で実際には順序というものが存在する。
個人制作、チーム制作どちらも変わらない。
1.素材が必要になる、要件確認
何かしらがあって、UIが必要になる。
ゲーム制作、Web、もしくは何かのアプリかもしれない。
そうした場合、使用用途に応じてデザイン的成約が生まれる。
例えば全年齢対象ならば、漢字は使えない。
海外対応もあるなら、英語や中国語などの複数パターン必要かもしれない。
文字を置き換えるならアラビア語はかなり長くなり、右揃えになる。
余白を多めに取ったり、レイアウトも気をつけなければならない。
はたまた、文字情報は含めずアイコンだけになるかもしれない。
スマホアプリならば規約を守る必要がある。
特にiPhoneは厳しいので事前にチェックしておくと良いだろう↓
developer.apple.com
筆者はノッチの部分のセーフエリアの背景は黒一色ではNGなど、リジェクトになってしまうデザインがありソチラでリジェクトを貰ったことがある。
現在はNGと明記されていないようだが、ガイドラインは更新されるため毎回チェックするのをおすすめしておく。
宣伝用のランディングページなら、スクロールした際にUIが動くようにしないといけないかもしれない。
デザインコンセプトが決められていたり、イチからデザインコンセプトを決める必要があったり……。
なんにしても前提条件の確認は必須だ。
今回はゲーム制作前提で進めていこうと思う。
ゲーム制作の場合、私が思う確認しておくことは以下の通りだ。
・すでにデザインコンセプトがあるか?
・ターゲットは誰か(日本人?小学生は含める?男性?女性?、色覚異常のチェックは必要?)
・ゲームの趣旨(例えば短時間でできるゲームを作りたい場合はゲーム早くアクセスでき、ゆっくりとしたUIアニメーションは適さない)
・今回満たしたいニーズは何か(その画面が何のために必要か、キャラが見栄えするメニュー?)
・動作環境や性能(解像度はいくつか、タップ重視かコントローラー入力か、フレームレートはいくつを担保するか)
・締切はいつか?
2.コンセプトを決める
決まっていない場合は、ターゲットや必要な要件から具体的なコンセプトを決める。
トンマナ(トーン＆マナー)を決めてしまう。
例えば、スプラトゥーンでいえば、「イカ」と「スポーツ」をキーワードにして、
軟体、液体、ゆるい、太い、強い、明解、速さなどを言語化、
更に、イメージを形に落とし込んだ。
careerhack.en-japan.com
チーム内に共有する場合参考画像があると分かりやすい。
3.素材集め
コンセプトが決まったら、素材集めだ。
ゲームであれば、ステージに合ったUIにしたい、世界観にあったUIにしたいという要望が出てくることが多い。
企画が素材を集める場合もある。
特にない場合、素材を集めて、デザインを事前に共有しておくと良いと私は思う。
(素材はチーム内だけにしか見せないのであれば版権画像を使用する場合もあるが、外部共有を考えると出来れば版権画像は避けたほうが好ましい)
私の身の回りではデザインの検索やイメージの共有にはPinterestを使ったり、既存のゲームUIであるゲームUIブログ、GameUIDatabaseなどを使うことが多いように感じるので以下でリンクを共有しておく。
www.pinterest.jp
NGサンプルなど、似ているが、指定とは違うパターンなども用意すると良さそうだ。
4.ガイドラインの策定
UIでデザインをする場合、似通ったUIを使用することが多い。
またフォントなどもゲーム全体で統一する場合もある。
決めておくとよいだろう。
決めるべきことを雑多に下に書き出していこうと思う。
使用ツールやバージョンの決定(ツールバージョンによってデータ形式が変わってしまう可能性があるため)
納品データ形式やフォルダ格納ルール、レイヤー/ファイルの命名規則。解像度。テクスチャサイズルール
メインカラーコード、フォントカラー、テキストルール、フォントサイズパターン、
共通パーツデザイン:ポップアップ、リストビュー、アイコン、バック、バツ印など。
挙動ルール(ボタンをタップしたら彩度を落とす、カーソルフォーカス時はカーソルを明滅させるとか)
テキストメッセージはゲーム上で変更する場合もあるため、テクスチャにベイクするかどうかも相談しておいたほうが良さそうだ。
テキストウィンドウやボタンを9スライス形式で統一する場合もあるのでソチラの検討も必要だ。
他に、ポップアップは何層まで表示を許すか、
またレイヤー構成ルールなども用意しておくと便利かもしれない。
このあたりのレイアウト決めはCygamesが秀逸だった。
責任者・承認フローを決める。
表示など形式がまずいのはエンジニアしかわからない
最終的なレイアウトがOKはプランナーやディレクター
表示崩れはデザイナーしかわからない
各セクションでOKを出す承認フローを決めておきたい。
また、決まった内容についてはWikiなどの資料にまとめて誰でも見れる状態にするべきだろう。
5.プロトタイプを作ってみる
ルール決めたばかりで、いきなりUIをいざ作ると印象と違う、
こうして欲しいといった要望が出ることが少なくない。
また、この時点で良くないゲームフローについては口出ししてしまっても良いかもしれない。
作り込んでからやり直すとなると大変だ。
そのために軽く作ってからフィードバックを貰うのが賢明。
また、仮素材をエンジニアに渡しておくことで、デザイナーが本格的にUIを作っている間にエンジニアが先行して作業を進めることができる。
その後、本格的にAdobiXDでUIを作るプロジェクトもあるが、そこは要相談すると良いだろう。
↓プロトタイピングに使えるツール
www.adobe.com
6.素材を作り込む
プロトタイプもGOが通ったら本格的にUIを作り込む。
ゲームUIではIllustratorで素材を作り、Photoshop詳細なUIを作る方が多い。
アニメーションがあるUIはエンジニア側が作るか、デザイナーが作るかは要相談。
デザイナーが作る場合は、Adobe After Effectsでサンプルを作る場合が多いように感じる。
もちろんUnityのエンジン上のAnimationツールで作る方も居る。
エンジニアにはPhotoshopのPSDを自動的にゲーム上UIに変換するツールをつくる人も居る。
(↓例)
blog.applibot.co.jp
どのようなデータ形式で素材をアップロードするかは相談すると良いだろう。
7.Ta-da!完成!
最終的にデザイン監修が通って、エンジニアの実装も完了すれば終了だ。
エンジニア側でUI差分データが欲しいなど、要望があったりする場合もあるので、そこまで終了したら完了となる。
デザインの基礎
実際にデザインを作る上で、
基本原則がある。
古くから伝わるデザインには適用されていることが多い。
基本原則を覚えておくとデザインがしやすくなる。
レイアウト基礎
1.コントラスト(対照/対比)
違う要素の比較をする場合、似たような要素では互いに衝突してしまう。
「大人と大人」より「大人と子ども」で対比させた方やよりコントラストが強い。
似たような要素ではメリハリがなくなってしまう。
明示的に似せたいのでなければあえて、そういうことはしない方が好ましい。
2.接近
要素の関わりがあるものは近くに配置させるのが常套手段である。
わかりやすい例で言うと漫画のコマ割りなどであろう。
接近したものほど、関連性があるように感じられる。
3.整列
整列させることで統一感、まとまりを表すことが出来る。
中央揃えと右揃え2つを同じ画面やページで行うのは出来れば避けたい。
4.反復
繰り返しである。
ソーシャルゲームでもよく見る。
例えば↓が繰り返しだ。
(版権じゃない画像を用意したかったがめんどくさかった)
このような反復要素があれば一体感や一貫性を加えることが出来る。
ボタン内の文言が違っても同じサイズが揃った物を並べるのも、この反復の応用だ。
UIボタンの種類
UIのタップできるボタンには2パターンある。
タスク型とオブジェクト型だ。
1.タスク型
・やることを選ばせる
・UIが動詞(何がしたいか)→「削除」「参照」などの動詞
・何がしたいかから設定する
・やることが決まっているものについてはコチラのデザインが好ましい
例:ゆうちょのATM
2.オブジェクト型
・オブジェクトを選ばせる
・UIが名詞(オブジェクト)→ゴミ箱フォルダなど
・ファイルや対象を選んでからどうするか決める。[名詞→動詞]
・概要から埋めるようなもの
・なにがどこの要素に含まれるのか整理が必要
例:自動販売機(いらすとや引用)
基本的にはオブジェクト型の方が抽象的でUIとしては良いとされる。
例えばゲームで言うならキャラ一覧画面と、キャラの編成画面を別々で用意するよりも、
キャラ一覧機能からキャラ編成を出来るようにしてしまうのがふさわしい。
色の基礎
色は様々な色選びを擦ることで、大人向け、子供向けそういった印象を与える。
色選びは需要だ。
1.補色
カラーホイールの向かい側の色は補色の関係にある。
どちらかをメインカラーにした場合、もう一方はアクセントカラーにすることで効果を強く発揮する。
2.トライアド
均等に色を選んだ場合、それはトライアドと呼ぶ。
その中でも原色の色(赤黄青)はプライマリートライアドと呼ぶ。
ちなみにGoogleはこの3色の赤、黄、青を使った上で「緑」を追加している。
この緑には常識やルールにとらわれないという強いメッセージが込められているらしい。
3.スプリット・コンプリメント・トライアド
最初に補色関係で色を取得し、その横にずれた色を2つ取得する。
似たような色2つと補色カラーが生成出来る。
4.類似色
ホイール上で隣り合う色のことを類似色と呼ぶ。
親和性が高い。
素材の作り方
素材の作り方については今回詳しく解説しない。
というより作りたい似たUIを他ゲームから探してきて、真似ればよいだろう。
作り方自体は↓リンクのゲームUI演出やGoogleで「How To Making Game UI」などでググったりツール自体の使い方の動画を探せば沢山動画が出てくるはずだ。
個人的所感
1.スマホゲームではフラットデザインをあまり使わない?
最近はフラットデザインUIも増えてきたが、スマートフォンゲームではフラットUIをあまり使わないように思う。
理由としては背景が動き回るゲームでボタンがただの情報の表示なのかボタンなのか分かりづらいからだと思う。
WebUIを触ったことがある層が増えてきたため最近はフラットデザインも増えてきたように思うが、どこがタップできるか分かりづらく、デザインとして遊びが少ないフラットデザインはあまり使われない気がする。
もしフラットデザインを採用するなら決まったボタン、決まったレイアウトで表示することを心がけたい。
ちなみにコンシューマーの場合、選んでいる項目がハイライトされたりするため、気軽にフラットデザインを使うことも少なくなく感じる。
2.ゲームUIの難しいところ
UXとしては見やすく分かりやすいUIが好まれるが、ゲームUIでは「遊び」が求められる。
しかしながら「遊び」を数多く入れてしまうと使い勝手が悪くなってしまう。
今後、アニメーションするUIが増えてくると思う。
例えばペルソナ5↓だが、吹き出しやカーソルが常に動いている。
www.famitsu.com
こういったアーテスティックな側面が強いUIが求められるようになってくるのでは無いかと個人的には思う。
参考書籍
(アフィリンクではないので、やまだたいしに報酬入ってほしくない人も、気軽にクリックできるはずだ)
https://www.amazon.co.jp/dp/B0893RK6WC/
https://www.amazon.co.jp/dp/B09YTRT3KY/https://www.amazon.co.jp/dp/B09YTRT3KY/
https://www.amazon.co.jp/dp/4621300377/https://www.amazon.co.jp/dp/4621300377/
その他、オススメ書籍
https://www.amazon.co.jp/dp/484591834X/
https://www.amazon.co.jp/dp/4788514346/
https://www.amazon.co.jp/dp/4816368698/
https://www.amazon.co.jp/dp/B01G6L9EWQ/
https://www.amazon.co.jp/dp/4802611692/www.amazon.co.jp
まとめ
一旦私が学んだことや知っていることは、大体ここまでなので以上にしておく。
デザインのNGパターンやUXについては様々な書籍で語られている。
更に深いところに踏み込みたい場合、上のその他オススメ書籍の内容を読むと良いだろう。
特に私が紹介したUXの教科書は難しいが網羅的にUXの紹介をしており参考になるのでオススメだ。
他にゲームUIを作る上で参考になる情報があれば教えて欲しい。
