Qpic第四回グラフィック講座デザインとゲームのUIについて考えてみよう。

はじめに

はじめに ①: About me

名前: タクシー

学部: 経済学部経済経営学科

サークル: Qpic,九大祭,ANIMA

興味: 映像,ロゴ,イラスト

グラフィック講座補助Webページpowered by strikingly

はじめに ②: Webページ

第1～5回の講座資料上回生によるドット絵・一枚絵メイキングとかいろいろあるよ

グラフィック講座補助Webページpowered by strikingly

はじめに ②: Webページ

1. レイアウトの話

2. 色遣いの話

3. フォントの話

4. タイトルロゴの話

5. 素材づくりの話

謝罪わかりにくくてごめんなさい

レイアウトの話

❶

ゲームにおける「デザイン」ってなんだろう？

レベルデザインマップや環境、難易度などの設計プレイヤーにどうやって没入感や達成感を与えるか？

レイアウトデザイン情報を画面にどう配置するかゲームプレイの快適さを大きく左右する

前回までの「ドット絵講座」キャラやマップなどの素材をどう作るか

レイアウトそれを画面にどう並べるか

❶ レイアウトの話


どちらがしっくりきますか？


まず最初に考えるべきこと

奇をてらわず、プレイヤーが慣れているであろう既存のゲームのレイアウトに乗っかる


レイアウトとは “情報の整理整頓”

授業ノートや学校のプリントの整理を想像してみよう。

国語算数英語第一章……1枚目

2枚目 3枚目

第二章……1枚目 2枚目 3枚目

第一章……1枚目 2枚目 3枚目




英語


2枚目 3枚目






❶ レイアウトの話レイアウト4要素 1. グループ化 2. 整列 3. 繰り返し 4. 強調

国語英語


2枚目 3枚目







1. グループ化「国語」「算数」「英語」のグループさらにその下の階層に「第一章」「第ニ章」同じグループの情報を近接させ、別のグループは距離を置く

レイアウト4要素 1. グループ化 2. 整列 3. 繰り返し 4. 強調

国語英語


2枚目 3枚目







2. 整列情報に視覚的なつながりを持たせる縦横を揃えるorずらすことで、情報の並列を感覚的に理解できる右揃え、左揃え


国語


2枚目 3枚目







3. 繰り返しデザイン的な特徴（形、色、フォントなど）をつくり、それを繰り返し使用することで統一感UP&グループ化を分かりやすくできる「色のついた四角い枠」


国語英語


2枚目 3枚目






❶ レイアウトの話レイアウト4要素 1. グループ化 2. 整列 3. 繰り返し 4. 強調

4.強調情報の重要度を考え強弱をつける・大きくする・色を変える・他と違うデザイン要素を入れる

❶ レイアウトの話タクシー Lv54 職業魔法使い HP100 MP68 能力値攻撃23 防御10 魔攻45 魔防38 速度32 スキルファイアブリザド

タクシー

職業魔法使い

Lv 54

攻撃防御魔攻魔防速度

2310453832

スキルファイアブリザド

能力値

HP　　100/100 MP　　68/68


UIのルールを決める

戻るボタンの位置を統一する✖

ちなみに基本左端に置く（本のページを想像しよう）


重なりと厚みをつける

影を付ける=浮き出ている＝クリックできるボタンである




画面の上に小さいウィンドウが現れる →ウィンドウを消すと下に見えている画面に戻ると理解できる



重なりと厚みをつける


まとめ

・レイアウトの四要素を意識する・ゲーム全体にUIの統一ルールをつくる

色づかいの話

❷

❷ 色づかいの話

ゲームの雰囲気を決めるめっちゃ重要な要素

ゲームにおける「色」ってなんだろう？

雰囲気づくり画面に使われている全体的な色合いから、ゲームの世界観を作り出す

UIの機能画面の見やすさに関係する、ボタンや文字等の色の使い方





Qpic的色彩ミスあるある

明度高すぎ問題RGB値Max問題


カラーホイールこの中から配色を選ぼうなんて血迷ったことをしてはいけない


色の三原色（加法混色）R,G,Bの3つを混ぜることで、ほぼあらゆる色を表現できる。全部を混ぜると白になる

パソコンのモニターみたいな ”発光するもの”は全部これ

数値で指定できるため機械的選ぶ色が必要以上に明るくなりがち


色の選び方を変えてみよう！RGBワールドからHSBワールドへ


RGB HSB


HSB: 色を三つのステータスで表す

Hue（色相）……色味 Saturation（彩度）……鮮やかさ Brightness（明度）……明るさ

hue/360を使ってみよう



さあ、色を選ぼう

まず、テーマカラー


ゲームを考えるとき、テーマ（カラー）を先に決めておく色から決めてもいいし、ゲームの雰囲気から決めてもいい

ソリッドなかっこいいゲームを作りたい→黒、高コントラスト女の子っぽい画面にしたい→ピンクやパステルカラー赤をメインカラーにしたい→元気で明るいゲーム

黒や紫、明度の低い色を使う→暗い雰囲気or落ち着いた雰囲気

次に、メイン以外の色



画面の統一感をもたせつつ色を決めるコツ三色選んでみる

ベースカラーメインカラーアクセント

ベースカラーメインカラーアクセント

メインより薄い色 =メインと色相は同じで

彩度を下げた色

最初に決めるテーマカラー鮮やかなのがいい


差し色メインカラーと彩度と明度は変えず色相をいじるとか

他の配色方法


Qpic webの色。白メインに、彩度と明度は同じ色相違いを3色並列

同じ色相の中で明度だけを変えたグラデーション。

彩度・明度をそのままに色相を変えつつも、近い色でグラデーション


もう何が何だかわからないという人へ

Adobe Color CC今説明した全てを全部自動でやってくれます。

ゲームにおける「色」ってなんだろう？






色数を増やしすぎないように注意する


はいいいえ

HP

たたかう　どうぐ　にげる

肯定は青、否定は赤

安全は緑、危険は赤

選択できないカーソルは色が薄く

色に役割をもたせる(1)


いいえいいえ

通常時選択時/マウスオーバー時

色を明るくしたり暗くしたりした差分をつくりプレイヤーの操作に合わせて変化させることで、

プレイヤーは「自分の操作がPCに受け付けられた」というフィードバックを得ることができる

色に役割をもたせる(2)


まとめ

●雰囲気作りとしての配色　・テーマカラーを決める　・彩度、明度、色相のどれか一つを　　変えると色のまとまりが出る ●UIの配色　・使う色にちゃんと意味を持たせる

フォントの話

❸

❸ フォントの話

フォント選びも世界観作り



自作PCゲーのフォントに関する問題

・文字を先に画像素材としてつくっておく　→柔軟性がない。

・プログラムからテキストを表示する　→プレイヤーのPCに入っている文字でしか表示できない　　（埋め込みはできるが、質が高く二次配布可能な　　　フリーフォントなんてほとんどない）

画面に文字を出す方法


ゲームで使うフォントにこだわりたい！ ↓

頑張って必要な文を画像化してください。

画像で先に作る文と、プログラムで表示させるテキストを使い分ける


フォントの基礎: 明朝体とゴシック体

あ亜あ亜AaAa

❸ フォントの話フォントのいろいろ

❸ フォントの話フォントのいろいろ


使うフォントは3つ程度で十分増えすぎると統一感を失う

「見出し」と「本文」、「アクセント」


目立つもの、文字数の少ないものゲームの世界観に一番合いそうなもの

読みやすいフォントテキスト量が多くなるため、この部分は素材化せずテキスト表示させる（PCのデフォルトフォント）になりそう

見出しと本文以外で適宜

見出し

本文

アクセント

Windowsプリイン書体を使ってはいけない（）

フリーフォントとか色々ダウンロードしてみましょう


コツ

「ガウプラ」 http://www.graphicartsunit.com/

「フロップデザイン」 http://www.flopdesign.com/index.php

ロゴの話

❹

❹ ロゴの話

ゲームの世界観の顔

❹ ロゴの話

レイアウトとか配色は理論で結構なんとかなるが… こればかりはセンスがいる

↓ とりあえず、事例をたくさん見るしかない

MdN EXTRA Vol.1 マンガ&アニメのグラフィックデザイン MdN EXTRA Vol.2 マンガ&アニメのグラフィックデザインタイポグラフィ編

❹ ロゴの話

ロゴをつくるときに考えるべき3つのこと

1.ゲームのコンセプトを一発で表せているか

ゲームの世界観に合ったモチーフを入れてみる

❹ ロゴの話


2. 形、色、質感は適切か「タイトル画面に置くもの」という前提を忘れずに

・ゲーム内に使ったフォントを使ってみる・4:3のタイトル画面の真ん中に置く画像　→横長、なるべく左右対称に近いシルエットが望ましい

・ゲームのテーマカラーをロゴに使う

・ただ色を付けるだけではない　立体的なのか、フラットなのか、光沢があるのか

❹ ロゴの話


3. ロゴの特徴を3点挙げてみるそのデザインに必然性はあるか

「重厚な感じで」「ポップに」「シンプルに」etc…

素材作りの話

❺

❺ 素材作りの話

結局今まで色遣いやらロゴやら色々言われたけど、それ何のソフト使って作るの？EDGE？


画像編集ソフト

Photoshop (有料)

GIMP（無料）

まとめ！

・レイアウトの四要素を意識する・ゲーム全体にUIの統一ルールをつくる


●雰囲気作りとしての配色　・テーマカラーを決める　・彩度、明度、色相のどれか一つを　　変えると色のまとまりが出る ●UIの配色　・使う色にちゃんと意味を持たせる

❷ 色遣いの話

・見出し、本文、アクセントの3種使う

・本当にたくさんのフォントがあるので、　気になるものを探したりフリーフォントを　ダウンロードしてみる


❹ ロゴの話

ゲームのコンセプトを一発で表せているか

ロゴの特徴を3点挙げてみる

形、色、質感は適切か

とりまGIMPつかってみてやちなみに僕はPhotoshopユーザーなので GIMPの使い方質問されても分かりません


おわり！

ありがとうございました。

2015 九州大学物理研究部

Technology

Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。

Qpic第四回グラフィック講座デザインとゲームのUIについて考えてみよう。