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

2. はじめに

3. はじめに ①: About me 名前: タクシー学部: 経済学部経済経営学科サークル: Qpic,九大祭,ANIMA 興味: 映像,ロゴ,イラスト

4. グラフィック講座補助Webページ powered by strikingly はじめに ②: Webページ第1∼5回の講座資料上回生によるドット絵・一枚絵メイキングとかいろいろあるよ

5. グラフィック講座補助Webページ powered by strikingly はじめに ②: Webページ

6. 1. レイアウトの話 2. 色遣いの話 3. フォントの話 4. タイトルロゴの話 5. 素材づくりの話

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

8. レイアウトの話 ❶

9. ゲームにおける「デザイン」ってなんだろう？レベルデザインマップや環境、難易度などの設計プレイヤーにどうやって没入感や達成感を与えるか？レイアウトデザイン情報を画面にどう配置するかゲームプレイの快適さを大きく左右する前回までの「ドット絵講座」キャラやマップなどの素材をどう作るかレイアウトそれを画面にどう並べるか

10. ❶ レイアウトの話

11. ❶ レイアウトの話どちらがしっくりきますか？

12. ❶ レイアウトの話まず最初に考えるべきこと奇をてらわず、プレイヤーが慣れているであろう既存のゲームのレイアウトに乗っかる

13. ❶ レイアウトの話レイアウトとは情報の整理整頓授業ノートや学校のプリントの整理を想像してみよう。国語算数英語第一章……1枚目 2枚目 3枚目第二章……1枚目 2枚目 3枚目第一章……1枚目 2枚目 3枚目第二章……1枚目 2枚目 3枚目第一章……1枚目 2枚目 3枚目第二章……1枚目 2枚目 3枚目

14. 英語国語算数英語第一章……1枚目 2枚目 3枚目第二章……1枚目 2枚目 3枚目第一章……1枚目 2枚目 3枚目第二章……1枚目 2枚目 3枚目第一章……1枚目 2枚目 3枚目第二章……1枚目 2枚目 3枚目 ❶ レイアウトの話レイアウト4要素 1. グループ化 2. 整列 3. 繰り返し 4. 強調

15. 国語英語国語算数英語第一章……1枚目 2枚目 3枚目第二章……1枚目 2枚目 3枚目第一章……1枚目 2枚目 3枚目第二章……1枚目 2枚目 3枚目第一章……1枚目 2枚目 3枚目第二章……1枚目 2枚目 3枚目 ❶ レイアウトの話 1. グループ化「国語」「算数」「英語」のグループさらにその下の階層に「第一章」「第ニ章」同じグループの情報を近接させ、別のグループは距離を置くレイアウト4要素 1. グループ化 2. 整列 3. 繰り返し 4. 強調

16. 国語英語国語算数英語第一章……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. 強調

17. 国語国語算数英語第一章……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. 強調

18. 国語英語国語算数英語第一章……1枚目 2枚目 3枚目第二章……1枚目 2枚目 3枚目第一章……1枚目 2枚目 3枚目第二章……1枚目 2枚目 3枚目第一章……1枚目 2枚目 3枚目第二章……1枚目 2枚目 3枚目 ❶ レイアウトの話レイアウト4要素 1. グループ化 2. 整列 3. 繰り返し 4. 強調 4.強調情報の重要度を考え強弱をつける・大きくする・色を変える・他と違うデザイン要素を入れる

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

20. ❶ レイアウトの話 UIのルールを決める戻るボタンの位置を統一する ✖ちなみに基本左端に置く（本のページを想像しよう）

21. ❶ レイアウトの話重なりと厚みをつける影を付ける=浮き出ている＝クリックできるボタンである ❶ レイアウトの話 UIのルールを決める

22. ❶ レイアウトの話画面の上に小さいウィンドウが現れる →ウィンドウを消すと下に見えている画面に戻ると理解できる ❶ レイアウトの話 UIのルールを決める重なりと厚みをつける

23. ❶ レイアウトの話まとめ・レイアウトの四要素を意識する・ゲーム全体にUIの統一ルールをつくる

24. 色づかいの話 ❷

25. ❷ 色づかいの話ゲームの雰囲気を決めるめっちゃ重要な要素

26. ゲームにおける「色」ってなんだろう？雰囲気づくり画面に使われている全体的な色合いから、ゲームの世界観を作り出す UIの機能画面の見やすさに関係する、ボタンや文字等の色の使い方 ❷ 色づかいの話

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

28. ❷ 色づかいの話 Qpic的色彩ミスあるある明度高すぎ問題 RGB値Max問題

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

30. ❷ 色づかいの話色の三原色（加法混色） R,G,Bの3つを混ぜることで、ほぼあらゆる色を表現できる。全部を混ぜると白になるパソコンのモニターみたいな発光するものは全部これ数値で指定できるため機械的選ぶ色が必要以上に明るくなりがち

31. ❷ 色づかいの話色の選び方を変えてみよう！ RGBワールドからHSBワールドへ

32. ❷ 色づかいの話 RGB HSB

33. ❷ 色づかいの話 HSB: 色を三つのステータスで表す Hue（色相）……色味 Saturation（彩度）……鮮やかさ Brightness（明度）……明るさ

34. hue/360を使ってみよう ❷ 色づかいの話

35. ❷ 色づかいの話さあ、色を選ぼう

36. まず、テーマカラー ❷ 色づかいの話ゲームを考えるとき、テーマ（カラー）を先に決めておく色から決めてもいいし、ゲームの雰囲気から決めてもいいソリッドなかっこいいゲームを作りたい→黒、高コントラスト女の子っぽい画面にしたい→ピンクやパステルカラー赤をメインカラーにしたい→元気で明るいゲーム黒や紫、明度の低い色を使う→暗い雰囲気or落ち着いた雰囲気

37. 次に、メイン以外の色 ❷ 色づかいの話

38. ❷ 色づかいの話画面の統一感をもたせつつ色を決めるコツ三色選んでみるベースカラーメインカラーアクセント

39. ベースカラーメインカラーアクセントメインより薄い色 =メインと色相は同じで彩度を下げた色最初に決めるテーマカラー鮮やかなのがいい ❷ 色づかいの話差し色メインカラーと彩度と明度は変えず色相をいじるとか

40. 他の配色方法 ❷ 色づかいの話 Qpic webの色。白メインに、彩度と明度は同じ色相違いを3色並列同じ色相の中で明度だけを変えたグラデーション。彩度・明度をそのままに色相を変えつつも、近い色でグラデーション

41. ❷ 色づかいの話もう何が何だかわからないという人へ Adobe Color CC 今説明した全てを全部自動でやってくれます。

42. ゲームにおける「色」ってなんだろう？雰囲気づくり画面に使われている全体的な色合いから、ゲームの世界観を作り出す UIの機能画面の見やすさに関係する、ボタンや文字等の色の使い方 ❷ 色づかいの話

43. UIの機能画面の見やすさに関係する、ボタンや文字等の色の使い方 ❷ 色づかいの話色数を増やしすぎないように注意する

44. ❷ 色づかいの話はいいいえ HP たたかうどうぐにげる肯定は青、否定は赤安全は緑、危険は赤選択できないカーソルは色が薄く色に役割をもたせる(1)

45. ❷ 色づかいの話いいえいいえ通常時選択時/マウスオーバー時色を明るくしたり暗くしたりした差分をつくりプレイヤーの操作に合わせて変化させることで、プレイヤーは「自分の操作がPCに受け付けられた」というフィードバックを得ることができる色に役割をもたせる(2)

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

47. フォントの話 ❸

48. ❸ フォントの話フォント選びも世界観作り

49. ❸ フォントの話

50. ❸ フォントの話自作PCゲーのフォントに関する問題・文字を先に画像素材としてつくっておく →柔軟性がない。・プログラムからテキストを表示する →プレイヤーのPCに入っている文字でしか表示できない（埋め込みはできるが、質が高く二次配布可能なフリーフォントなんてほとんどない）画面に文字を出す方法

51. ❸ フォントの話ゲームで使うフォントにこだわりたい！ ↓ 頑張って必要な文を画像化してください。画像で先に作る文と、プログラムで表示させるテキストを使い分ける

52. ❸ フォントの話フォントの基礎: 明朝体とゴシック体あ亜あ亜 AaAa

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

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

55. ❸ フォントの話使うフォントは3つ程度で十分増えすぎると統一感を失う「見出し」と「本文」、「アクセント」

56. ❸ フォントの話目立つもの、文字数の少ないものゲームの世界観に一番合いそうなもの読みやすいフォントテキスト量が多くなるため、この部分は素材化せずテキスト表示させる（PCのデフォルトフォント）になりそう見出しと本文以外で適宜見出し本文アクセント

57. Windowsプリイン書体を使ってはいけない（）フリーフォントとか色々ダウンロードしてみましょう ❸ フォントの話コツ「ガウプラ」 http://www.graphicartsunit.com/ 「フロップデザイン」 http://www.ﬂopdesign.com/index.php

58. ロゴの話 ❹

59. ❹ ロゴの話ゲームの世界観の顔

60. ❹ ロゴの話レイアウトとか配色は理論で結構なんとかなるが… こればかりはセンスがいる ↓ とりあえず、事例をたくさん見るしかない MdN EXTRA Vol.1 マンガ&アニメのグラフィックデザイン MdN EXTRA Vol.2 マンガ&アニメのグラフィックデザインタイポグラフィ編

61. ❹ ロゴの話ロゴをつくるときに考えるべき3つのこと 1.ゲームのコンセプトを一発で表せているかゲームの世界観に合ったモチーフを入れてみる

62. ❹ ロゴの話ロゴをつくるときに考えるべき3つのこと 2. 形、色、質感は適切か「タイトル画面に置くもの」という前提を忘れずに・ゲーム内に使ったフォントを使ってみる・4:3のタイトル画面の真ん中に置く画像 →横長、なるべく左右対称に近いシルエットが望ましい・ゲームのテーマカラーをロゴに使う・ただ色を付けるだけではない立体的なのか、フラットなのか、光沢があるのか

63. ❹ ロゴの話ロゴをつくるときに考えるべき3つのこと 3. ロゴの特徴を3点挙げてみるそのデザインに必然性はあるか「重厚な感じで」「ポップに」「シンプルに」etc…

64. 素材作りの話 ❺

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

66. ❺ 素材作りの話画像編集ソフト Photoshop (有料) GIMP（無料）

67. まとめ！

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

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

70. ・見出し、本文、アクセントの3種使う・本当にたくさんのフォントがあるので、気になるものを探したりフリーフォントをダウンロードしてみる ❸ フォントの話

71. ❹ ロゴの話ゲームのコンセプトを一発で表せているかロゴの特徴を3点挙げてみる形、色、質感は適切か

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

73. おわり！

74. ありがとうございました。 2015 九州大学物理研究部

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

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

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente(20)

Destacado

Destacado(20)

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

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

Más de 九州大学物理研究部2015

Más de 九州大学物理研究部2015(6)

Último

Último(12)