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

1. ゲーム開発で使えるかもしれな
い
レイアウトデザイン
2015/4/26 金沢Unity勉強会
@sakura_metal

2. 自己紹介
Twitter:@sakura_metal
所属：金沢大学 機械工学類 4年
ハマってるもの：アイカツ！、アイマ
ス
最近：研究室で今まで避けてきたC++
をやることになりヒイヒイ言ってます。

3. 本
ノンデザイナーズ・デザインブ
ック
http://www.amazon.co.jp/dp/48399
28401
今日話すことはほぼこれ。

4. 今日は
ノンデザイナーズ・デザインブ
ックについて説明しているスラ
イドや、Webページは結構あ
るので、今回はゲーム開発で使
うには・・・ということを考え
てみます。
ほぼUIの配置のお話です。

5. ちなみに・・・
Q.デザイン経験歴は・・・？
A.ほぼない！
（ゲームジャムや個人での開発
の時にする程度）
なので、今回はノンデザイナー
ズ・デザインブックを僕なりに
噛み砕いて話をします。

6. レイアウトデザインの基本原則
基本原則は4つ
● 近接
● 整列
● 反復
● コントラスト

7. レイアウトデザインの基本原則
● 近接
● 整列
● 反復
● コントラスト

8. 近接
● 関連する項目をまとめてグ
ループ化する。
● 知覚的にも視覚的にも組織
化することで情報を明確に
伝える。

9. ゲームで考えてみる 近接1
情報が読み取りづらい。

10. ゲームで考えてみる 近接2
グループ化され見やすくなる。

11. ゲームで考えてみる 近接3
より分かりやすい。

12. ゲームで考えてみる 近接4
項目を離すことで違う種類の情報という印象を与える。

13. 近接まとめ
● 近接の目的は組織化。
● 関連するグループは近接させ
てグループ化させる。
● 直接関係のないものは離す。
● 関係の近さ、重要度を示すた
めに項目間の距離に気をつけ
る。

14. レイアウトデザインの基本原則
● 近接
● 整列
● 反復
● コントラスト

15. 整列
● すべてのものを意識的に配
置すること
● 視覚的なつながりを持たせ
る
● 空間的に離れている場合で
も、整列させることで一体
化しているように見せるこ
とができる

16. ゲームで考えてみる 整列1
中央揃えより、右揃え、左揃えを使う。
OR

17. ゲームで考えてみる 整列2
整列の基準線は揃えるとスッキリとして見える。
OR

18. ゲームで考えてみる 整列3
画像に関しても同様な事が言える。

19. ゲームで考えてみる 整列4
画像も含め整列の線を揃える。

20. ゲームで考えてみる 整列5
画像のもつ線（強い線）を活用して揃えるのも
良い。

21. ゲームで考えてみる 整列6
強い線（本での表現）とは可視化されている線や、
全体的に使われている整列の線である（と考えてい
ます）

22. 整列まとめ
● 整列の目的は一体化と組織化。
● 意図的に要素を配置する。
● 中央寄せより右揃え、左揃え
を使う。

23. レイアウトデザインの基本原則
● 近接
● 整列
● 反復
● コントラスト

24. 反復
● デザイン上のなにかの特徴
を作品全体を通して繰り返
す。
● 反復するものは、見ている
人が視覚的に認識できるも
のならなんでもよい（フォ
ント、罫線、色など）
◆IDOL
天海春香
星宮いちご
●Anime
てーきゅう
アイカツ！
◆IDOL
天海春香
星宮いちご
◆Anime
てーきゅう
アイカツ！

25. ゲームで考えてみる 反復1
同じ要素を何度かくりかえしてみる。
（丸四角で囲む、色）

26. ゲームで考えてみる 反復2
組織化が強化される。

27. ゲームで考えてみる 反復3
反復は重要だが、しつこくならないように
する。
反復はあくまでアクセント！

28. 反復まとめ
● 反復の目的は一体化と視覚
的なおもしろさを加えるこ
と。
● 反復とは一貫性。
● あまりこだわりすぎない。

29. レイアウトデザインの基本原則
● 近接
● 整列
● 反復
● コントラスト

30. コントラスト
● はっきりと異ならせること
で組織化を支援する。
● おもしろみを出し、退屈さ
せない。
Aikatsu NEWS
Hello World.
Aikatsu! Aikatsu!
Aikatsu NEWS
Hello World.
Aikatsu! Aikatsu!

31. ゲームで考えてみるコントラスト1
フォントでコントラストをつける。

32. ゲームで考えてみるコントラスト2
罫線など入れてみる。

33. ゲームで考えてみるコントラスト3
コントラストが強調されたことで、目がとまる
ようになったのでは？

34. コントラストまとめ
● 目的はページにおもしろみ
をだす、情報の組織化を支
援すること。
● コントラストをつけるとき
ははっきりと違うようにす
る。
● 大切なのは強調すること。

35. ゲームでは・・・
Webページと違って表示できる
範囲が限定されていることが多
い。
しかも、情報を見落とされない
ようにしたい。
ユーザーに情報を拾ってもらい
やすいようにレイアウトデザイ
ンを少し気にしてみよう。

36. ご清聴ありがとうございました。

37. 参考
● ノンデザイナーズ・デザインブック
Robin Williams著
● read-a-non-designers-designbook by Kazuhiko
Maeda
https://speakerdeck.com/monoooki/read-a-non-designers-designbook