qpic第四回グラフィック講座 デザインとゲームのuiについて考えてみよう。
TRANSCRIPT
![Page 1: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/1.jpg)
![Page 2: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/2.jpg)
はじめに
![Page 3: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/3.jpg)
はじめに ①: About me
名前: タクシー
学部: 経済学部 経済経営学科
サークル: Qpic,九大祭,ANIMA
興味: 映像,ロゴ,イラスト
![Page 4: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/4.jpg)
グラフィック講座 補助Webページpowered by strikingly
はじめに ②: Webページ
第1~5回の講座資料 上回生によるドット絵・一枚絵メイキング とかいろいろあるよ
![Page 5: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/5.jpg)
グラフィック講座 補助Webページpowered by strikingly
はじめに ②: Webページ
![Page 6: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/6.jpg)
1. レイアウトの話
2. 色遣いの話
3. フォントの話
4. タイトルロゴの話
5. 素材づくりの話
![Page 7: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/7.jpg)
謝罪わかりにくくてごめんなさい
![Page 8: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/8.jpg)
レイアウトの話
❶
![Page 9: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/9.jpg)
ゲームにおける「デザイン」ってなんだろう?
レベルデザインマップや環境、難易度などの設計 プレイヤーにどうやって没入感や 達成感を与えるか?
レイアウトデザイン情報を画面にどう配置するか ゲームプレイの快適さを大きく左右する
前回までの「ドット絵講座」キャラやマップなどの素材をどう作るか
レイアウトそれを画面にどう並べるか
![Page 10: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/10.jpg)
❶ レイアウトの話
![Page 11: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/11.jpg)
❶ レイアウトの話
どちらがしっくりきますか?
![Page 12: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/12.jpg)
❶ レイアウトの話
まず最初に考えるべきこと
奇をてらわず、プレイヤーが慣れているであろう 既存のゲームのレイアウトに乗っかる
![Page 13: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/13.jpg)
❶ レイアウトの話
レイアウトとは “情報の整理整頓”
授業ノートや学校のプリントの整理を想像してみよう。
国語 算数 英語第一章……1枚目
2枚目 3枚目
第二章……1枚目 2枚目 3枚目
第一章……1枚目 2枚目 3枚目
第二章……1枚目 2枚目 3枚目
第一章……1枚目 2枚目 3枚目
第二章……1枚目 2枚目 3枚目
![Page 14: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/14.jpg)
英語
国語 算数 英語第一章……1枚目
2枚目 3枚目
第二章……1枚目 2枚目 3枚目
第一章……1枚目 2枚目 3枚目
第二章……1枚目 2枚目 3枚目
第一章……1枚目 2枚目 3枚目
第二章……1枚目 2枚目 3枚目
❶ レイアウトの話レイアウト4要素 1. グループ化 2. 整列 3. 繰り返し 4. 強調
![Page 15: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/15.jpg)
国語 英語
国語 算数 英語第一章……1枚目
2枚目 3枚目
第二章……1枚目 2枚目 3枚目
第一章……1枚目 2枚目 3枚目
第二章……1枚目 2枚目 3枚目
第一章……1枚目 2枚目 3枚目
第二章……1枚目 2枚目 3枚目
❶ レイアウトの話
1. グループ化「国語」「算数」「英語」のグループ さらにその下の階層に「第一章」「第ニ章」 同じグループの情報を近接させ、別のグループ は距離を置く
レイアウト4要素 1. グループ化 2. 整列 3. 繰り返し 4. 強調
![Page 16: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/16.jpg)
国語 英語
国語 算数 英語第一章……1枚目
2枚目 3枚目
第二章……1枚目 2枚目 3枚目
第一章……1枚目 2枚目 3枚目
第二章……1枚目 2枚目 3枚目
第一章……1枚目 2枚目 3枚目
第二章……1枚目 2枚目 3枚目
❶ レイアウトの話
2. 整列情報に視覚的なつながりを持たせる 縦横を揃えるorずらすことで、情報の並列を 感覚的に理解できる 右揃え、左揃え
レイアウト4要素 1. グループ化 2. 整列 3. 繰り返し 4. 強調
![Page 17: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/17.jpg)
国語
国語 算数 英語第一章……1枚目
2枚目 3枚目
第二章……1枚目 2枚目 3枚目
第一章……1枚目 2枚目 3枚目
第二章……1枚目 2枚目 3枚目
第一章……1枚目 2枚目 3枚目
第二章……1枚目 2枚目 3枚目
❶ レイアウトの話
3. 繰り返しデザイン的な特徴(形、色、フォントなど) をつくり、それを繰り返し使用することで 統一感UP&グループ化を分かりやすくできる「色のついた四角い枠」
レイアウト4要素 1. グループ化 2. 整列 3. 繰り返し 4. 強調
![Page 18: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/18.jpg)
国語 英語
国語 算数 英語第一章……1枚目
2枚目 3枚目
第二章……1枚目 2枚目 3枚目
第一章……1枚目 2枚目 3枚目
第二章……1枚目 2枚目 3枚目
第一章……1枚目 2枚目 3枚目
第二章……1枚目 2枚目 3枚目
❶ レイアウトの話レイアウト4要素 1. グループ化 2. 整列 3. 繰り返し 4. 強調
4.強調情報の重要度を考え強弱をつける ・大きくする ・色を変える ・他と違うデザイン要素を入れる
![Page 19: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/19.jpg)
❶ レイアウトの話タクシー Lv54 職業 魔法使い HP100 MP68 能力値 攻撃23 防御10 魔攻45 魔防38 速度32 スキル ファイア ブリザド
タクシー
職業 魔法使い
Lv 54
攻撃防御魔攻魔防速度
2310453832
スキル ファイア ブリザド
能力値
HP 100/100 MP 68/68
![Page 20: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/20.jpg)
❶ レイアウトの話
UIのルールを決める
戻るボタンの位置を統一する✖
ちなみに基本左端に置く(本のページを想像しよう)
![Page 21: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/21.jpg)
❶ レイアウトの話
重なりと厚みをつける
影を付ける=浮き出ている=クリックできるボタンである
❶ レイアウトの話
UIのルールを決める
![Page 22: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/22.jpg)
❶ レイアウトの話
画面の上に小さいウィンドウが現れる →ウィンドウを消すと下に見えている画面に戻ると理解できる
❶ レイアウトの話
UIのルールを決める
重なりと厚みをつける
![Page 23: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/23.jpg)
❶ レイアウトの話
まとめ
・レイアウトの四要素を意識する ・ゲーム全体にUIの統一ルールをつくる
![Page 24: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/24.jpg)
色づかいの話
❷
![Page 25: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/25.jpg)
❷ 色づかいの話
ゲームの雰囲気を決めるめっちゃ重要な要素
![Page 26: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/26.jpg)
ゲームにおける「色」ってなんだろう?
雰囲気づくり画面に使われている全体的な色合い から、ゲームの世界観を作り出す
UIの機能画面の見やすさに関係する、ボタンや 文字等の色の使い方
❷ 色づかいの話
![Page 27: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/27.jpg)
雰囲気づくり画面に使われている全体的な色合い から、ゲームの世界観を作り出す
❷ 色づかいの話
![Page 28: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/28.jpg)
❷ 色づかいの話
Qpic的 色彩ミスあるある
明度高すぎ問題RGB値Max問題
![Page 29: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/29.jpg)
❷ 色づかいの話
カラーホイールこの中から配色を選ぼうなんて 血迷ったことをしてはいけない
![Page 30: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/30.jpg)
❷ 色づかいの話
色の三原色(加法混色)R,G,Bの3つを混ぜることで、 ほぼあらゆる色を表現できる。 全部を混ぜると白になる
パソコンのモニターみたいな ”発光するもの”は全部これ
数値で指定できるため機械的 選ぶ色が必要以上に明るくなりがち
![Page 31: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/31.jpg)
❷ 色づかいの話
色の選び方を変えてみよう!RGBワールドからHSBワールドへ
![Page 32: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/32.jpg)
❷ 色づかいの話
RGB HSB
![Page 33: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/33.jpg)
❷ 色づかいの話
HSB: 色を三つのステータスで表す
Hue(色相)……色味 Saturation(彩度)……鮮やかさ Brightness(明度)……明るさ
![Page 34: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/34.jpg)
hue/360を使ってみよう
❷ 色づかいの話
![Page 35: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/35.jpg)
❷ 色づかいの話
さあ、色を選ぼう
![Page 36: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/36.jpg)
まず、テーマカラー
❷ 色づかいの話
ゲームを考えるとき、テーマ(カラー)を先に決めておく 色から決めてもいいし、ゲームの雰囲気から決めてもいい
ソリッドなかっこいいゲームを作りたい→黒、高コントラスト 女の子っぽい画面にしたい→ピンクやパステルカラー 赤をメインカラーにしたい→元気で明るいゲーム
黒や紫、明度の低い色を使う→暗い雰囲気or落ち着いた雰囲気
![Page 37: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/37.jpg)
次に、メイン以外の色
❷ 色づかいの話
![Page 38: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/38.jpg)
❷ 色づかいの話
画面の統一感をもたせつつ色を決めるコツ三色選んでみる
ベースカラー メインカラー アクセント
![Page 39: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/39.jpg)
ベースカラー メインカラー アクセント
メインより薄い色 =メインと色相は同じで
彩度を下げた色
最初に決める テーマカラー 鮮やかなのがいい
❷ 色づかいの話
差し色 メインカラーと彩度と明度は 変えず色相をいじるとか
![Page 40: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/40.jpg)
他の配色方法
❷ 色づかいの話
Qpic webの色。白メインに、彩度と明度は同じ色相違いを3色並列
同じ色相の中で明度だけを変えたグラデーション。
彩度・明度をそのままに色相を変えつつも、近い色でグラデーション
![Page 41: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/41.jpg)
❷ 色づかいの話
もう何が何だかわからないという人へ
Adobe Color CC今説明した全てを全部自動でやってくれます。
![Page 42: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/42.jpg)
ゲームにおける「色」ってなんだろう?
雰囲気づくり画面に使われている全体的な色合い から、ゲームの世界観を作り出す
UIの機能画面の見やすさに関係する、ボタンや 文字等の色の使い方
❷ 色づかいの話
![Page 43: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/43.jpg)
UIの機能画面の見やすさに関係する、ボタンや 文字等の色の使い方
❷ 色づかいの話
色数を増やしすぎないように注意する
![Page 44: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/44.jpg)
❷ 色づかいの話
はい いいえ
HP
たたかう どうぐ にげる
肯定は青、否定は赤
安全は緑、危険は赤
選択できないカーソルは色が薄く
色に役割をもたせる(1)
![Page 45: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/45.jpg)
❷ 色づかいの話
いいえ いいえ
通常時 選択時/マウスオーバー時
色を明るくしたり暗くしたりした差分をつくり プレイヤーの操作に合わせて変化させることで、
プレイヤーは「自分の操作がPCに受け付けられた」という フィードバックを得ることができる
色に役割をもたせる(2)
![Page 46: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/46.jpg)
❷ 色づかいの話
まとめ
●雰囲気作りとしての配色 ・テーマカラーを決める ・彩度、明度、色相のどれか一つを 変えると色のまとまりが出る ●UIの配色 ・使う色にちゃんと意味を持たせる
![Page 47: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/47.jpg)
フォントの話
❸
![Page 48: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/48.jpg)
❸ フォントの話
フォント選びも世界観作り
![Page 49: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/49.jpg)
❸ フォントの話
![Page 50: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/50.jpg)
❸ フォントの話
自作PCゲーのフォントに関する問題
・文字を先に画像素材としてつくっておく →柔軟性がない。
・プログラムからテキストを表示する →プレイヤーのPCに入っている文字でしか表示できない (埋め込みはできるが、質が高く二次配布可能な フリーフォントなんてほとんどない)
画面に文字を出す方法
![Page 51: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/51.jpg)
❸ フォントの話
ゲームで使うフォントにこだわりたい! ↓
頑張って必要な文を画像化してください。
画像で先に作る文と、プログラムで表示させる テキストを使い分ける
![Page 52: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/52.jpg)
❸ フォントの話
フォントの基礎: 明朝体とゴシック体
あ亜あ亜AaAa
![Page 53: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/53.jpg)
❸ フォントの話フォントのいろいろ
![Page 54: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/54.jpg)
❸ フォントの話フォントのいろいろ
![Page 55: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/55.jpg)
❸ フォントの話
使うフォントは3つ程度で十分 増えすぎると統一感を失う
「見出し」と「本文」、「アクセント」
![Page 56: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/56.jpg)
❸ フォントの話
目立つもの、文字数の少ないもの ゲームの世界観に一番合いそうなもの
読みやすいフォント テキスト量が多くなるため、この部分は 素材化せずテキスト表示させる(PCの デフォルトフォント)になりそう
見出しと本文以外で適宜
見出し
本文
アクセント
![Page 57: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/57.jpg)
Windowsプリイン書体を使ってはいけない()
フリーフォントとか色々ダウンロードしてみましょう
❸ フォントの話
コツ
「ガウプラ」 http://www.graphicartsunit.com/
「フロップデザイン」 http://www.flopdesign.com/index.php
![Page 58: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/58.jpg)
ロゴの話
❹
![Page 59: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/59.jpg)
❹ ロゴの話
ゲームの世界観の顔
![Page 60: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/60.jpg)
❹ ロゴの話
レイアウトとか配色は理論で結構なんとかなるが… こればかりはセンスがいる
↓ とりあえず、事例をたくさん見るしかない
MdN EXTRA Vol.1 マンガ&アニメのグラフィックデザイン MdN EXTRA Vol.2 マンガ&アニメのグラフィックデザイン タイポグラフィ編
![Page 61: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/61.jpg)
❹ ロゴの話
ロゴをつくるときに考えるべき3つのこと
1.ゲームのコンセプトを一発で表せているか
ゲームの世界観に合ったモチーフを入れてみる
![Page 62: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/62.jpg)
❹ ロゴの話
ロゴをつくるときに考えるべき3つのこと
2. 形、色、質感は適切か「タイトル画面に置くもの」という前提を忘れずに
・ゲーム内に使ったフォントを使ってみる ・4:3のタイトル画面の真ん中に置く画像 →横長、なるべく左右対称に近いシルエットが望ましい
・ゲームのテーマカラーをロゴに使う
・ただ色を付けるだけではない 立体的なのか、フラットなのか、光沢があるのか
![Page 63: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/63.jpg)
❹ ロゴの話
ロゴをつくるときに考えるべき3つのこと
3. ロゴの特徴を3点挙げてみるそのデザインに必然性はあるか
「重厚な感じで」「ポップに」「シンプルに」etc…
![Page 64: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/64.jpg)
素材作りの話
❺
![Page 65: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/65.jpg)
❺ 素材作りの話
結局今まで色遣いやらロゴやら色々言われたけど、 それ何のソフト使って作るの?EDGE?
![Page 66: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/66.jpg)
❺ 素材作りの話
画像編集ソフト
Photoshop (有料)
GIMP(無料)
![Page 67: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/67.jpg)
まとめ!
![Page 68: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/68.jpg)
・レイアウトの四要素を意識する ・ゲーム全体にUIの統一ルールをつくる
❶ レイアウトの話
![Page 69: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/69.jpg)
●雰囲気作りとしての配色 ・テーマカラーを決める ・彩度、明度、色相のどれか一つを 変えると色のまとまりが出る ●UIの配色 ・使う色にちゃんと意味を持たせる
❷ 色遣いの話
![Page 70: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/70.jpg)
・見出し、本文、アクセントの3種使う
・本当にたくさんのフォントがあるので、 気になるものを探したりフリーフォントを ダウンロードしてみる
❸ フォントの話
![Page 71: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/71.jpg)
❹ ロゴの話
ゲームのコンセプトを一発で表せているか
ロゴの特徴を3点挙げてみる
形、色、質感は適切か
![Page 72: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/72.jpg)
とりまGIMPつかってみてやちなみに僕はPhotoshopユーザーなので GIMPの使い方質問されても分かりません
❺ 素材作りの話
![Page 73: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/73.jpg)
おわり!
![Page 74: Qpic第四回グラフィック講座 デザインとゲームのUIについて考えてみよう。](https://reader033.vdocuments.pub/reader033/viewer/2022061607/55cea42dbb61eb1d768b4568/html5/thumbnails/74.jpg)
ありがとうございました。
2015 九州大学物理研究部