Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ゲーム開発で使えるかもしれないレイアウトデザイン

10,681 views

Published on

ゲーム開発で使えるかもしれないレイアウトデザイン

Published in: Design
  • Dating direct: ❶❶❶ http://bit.ly/2Qu6Caa ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ❶❶❶ http://bit.ly/2Qu6Caa ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

ゲーム開発で使えるかもしれないレイアウトデザイン

  1. 1. ゲーム開発で使えるかもしれな い レイアウトデザイン 2015/4/26 金沢Unity勉強会 @sakura_metal
  2. 2. 自己紹介 Twitter:@sakura_metal 所属:金沢大学 機械工学類 4年 ハマってるもの:アイカツ!、アイマ ス 最近:研究室で今まで避けてきたC++ をやることになりヒイヒイ言ってます。
  3. 3. 本 ノンデザイナーズ・デザインブ ック http://www.amazon.co.jp/dp/48399 28401 今日話すことはほぼこれ。
  4. 4. 今日は ノンデザイナーズ・デザインブ ックについて説明しているスラ イドや、Webページは結構あ るので、今回はゲーム開発で使 うには・・・ということを考え てみます。 ほぼUIの配置のお話です。
  5. 5. ちなみに・・・ Q.デザイン経験歴は・・・? A.ほぼない! (ゲームジャムや個人での開発 の時にする程度) なので、今回はノンデザイナー ズ・デザインブックを僕なりに 噛み砕いて話をします。
  6. 6. レイアウトデザインの基本原則 基本原則は4つ ● 近接 ● 整列 ● 反復 ● コントラスト
  7. 7. レイアウトデザインの基本原則 ● 近接 ● 整列 ● 反復 ● コントラスト
  8. 8. 近接 ● 関連する項目をまとめてグ ループ化する。 ● 知覚的にも視覚的にも組織 化することで情報を明確に 伝える。
  9. 9. ゲームで考えてみる 近接1 情報が読み取りづらい。
  10. 10. ゲームで考えてみる 近接2 グループ化され見やすくなる。
  11. 11. ゲームで考えてみる 近接3 より分かりやすい。
  12. 12. ゲームで考えてみる 近接4 項目を離すことで違う種類の情報という印象を与える。
  13. 13. 近接まとめ ● 近接の目的は組織化。 ● 関連するグループは近接させ てグループ化させる。 ● 直接関係のないものは離す。 ● 関係の近さ、重要度を示すた めに項目間の距離に気をつけ る。
  14. 14. レイアウトデザインの基本原則 ● 近接 ● 整列 ● 反復 ● コントラスト
  15. 15. 整列 ● すべてのものを意識的に配 置すること ● 視覚的なつながりを持たせ る ● 空間的に離れている場合で も、整列させることで一体 化しているように見せるこ とができる
  16. 16. ゲームで考えてみる 整列1 中央揃えより、右揃え、左揃えを使う。 OR
  17. 17. ゲームで考えてみる 整列2 整列の基準線は揃えるとスッキリとして見える。 OR
  18. 18. ゲームで考えてみる 整列3 画像に関しても同様な事が言える。
  19. 19. ゲームで考えてみる 整列4 画像も含め整列の線を揃える。
  20. 20. ゲームで考えてみる 整列5 画像のもつ線(強い線)を活用して揃えるのも 良い。
  21. 21. ゲームで考えてみる 整列6 強い線(本での表現)とは可視化されている線や、 全体的に使われている整列の線である(と考えてい ます)
  22. 22. 整列まとめ ● 整列の目的は一体化と組織化。 ● 意図的に要素を配置する。 ● 中央寄せより右揃え、左揃え を使う。
  23. 23. レイアウトデザインの基本原則 ● 近接 ● 整列 ● 反復 ● コントラスト
  24. 24. 反復 ● デザイン上のなにかの特徴 を作品全体を通して繰り返 す。 ● 反復するものは、見ている 人が視覚的に認識できるも のならなんでもよい(フォ ント、罫線、色など) ◆IDOL 天海春香 星宮いちご ●Anime てーきゅう アイカツ! ◆IDOL 天海春香 星宮いちご ◆Anime てーきゅう アイカツ!
  25. 25. ゲームで考えてみる 反復1 同じ要素を何度かくりかえしてみる。 (丸四角で囲む、色)
  26. 26. ゲームで考えてみる 反復2 組織化が強化される。
  27. 27. ゲームで考えてみる 反復3 反復は重要だが、しつこくならないように する。 反復はあくまでアクセント!
  28. 28. 反復まとめ ● 反復の目的は一体化と視覚 的なおもしろさを加えるこ と。 ● 反復とは一貫性。 ● あまりこだわりすぎない。
  29. 29. レイアウトデザインの基本原則 ● 近接 ● 整列 ● 反復 ● コントラスト
  30. 30. コントラスト ● はっきりと異ならせること で組織化を支援する。 ● おもしろみを出し、退屈さ せない。 Aikatsu NEWS Hello World. Aikatsu! Aikatsu! Aikatsu NEWS Hello World. Aikatsu! Aikatsu!
  31. 31. ゲームで考えてみるコントラスト1 フォントでコントラストをつける。
  32. 32. ゲームで考えてみるコントラスト2 罫線など入れてみる。
  33. 33. ゲームで考えてみるコントラスト3 コントラストが強調されたことで、目がとまる ようになったのでは?
  34. 34. コントラストまとめ ● 目的はページにおもしろみ をだす、情報の組織化を支 援すること。 ● コントラストをつけるとき ははっきりと違うようにす る。 ● 大切なのは強調すること。
  35. 35. ゲームでは・・・ Webページと違って表示できる 範囲が限定されていることが多 い。 しかも、情報を見落とされない ようにしたい。 ユーザーに情報を拾ってもらい やすいようにレイアウトデザイ ンを少し気にしてみよう。
  36. 36. ご清聴ありがとうございました。
  37. 37. 参考 ● ノンデザイナーズ・デザインブック Robin Williams著 ● read-a-non-designers-designbook by Kazuhiko Maeda https://speakerdeck.com/monoooki/read-a-non-designers-designbook

×