レイアウトについて

1. 0
レイアウトについて
エスキュービズム・テクノロジー
エンジニア勉強会
Dec. 11, 2015
S-cubism Technology Inc.

2. 目次 - INDEX -
• はじめに
• ４つの基本原則について
– 近接
– 整列
– 反復
– コントラスト
• まとめ
1

3. はじめに
レイアウトデザインの基本書
かっこよさ、キレイさではなく、
見易さ、伝わり易さ重視して
４つのポイントで紹介。

4. ４つの基本原則
Photo credit:abdul / yunir

5. ４つの基本原則

6. ４つの基本原則 - 近接 -

7. 例えば、名刺の場合

9. 頭に情報が入ってこない！

10. 問題点
• 要素がバラバラに配置されているため、どれ
一つとして、他の項目と関連しているように見
えない。
• どこから見ていいか分からず、読み終えても
読んだという実感がない。
などなど

11. では、どうするか？
関連する要素をグループ化し、近接させる。

13. 近接のまとめ
• 基本的な目的は、「要素の組織化」
– 要素を近づけてグループ化するだけ、簡単！
• スペースがあっても良い。
– 詰め込みすぎて要素が近づくと、違う要素でも
関連したものに見えてしまう。
• あまり個別の要素を作り過ぎない。

14. ４つの基本原則 - 整列 -

15. 例えば、WEBページの場合

17. ページに一体感がない！

18. 問題点
• 整列が微妙にズレてしまっているので、視覚
的に混乱してしまう。
• 要素がズレていることにより、デコボコとした
ゴチャゴチャな印象のページになってしまう。
などなど

19. では、どうするか？
意識的に配置して、視覚的つながりをもたせる。

21. 整列のまとめ
• 近接で組織化したものを一体化させる！
– ちらばったおもちゃを箱に片付けるイメージ。
– それにより、全体に一体感が生まれる。
• 「とりあえず置いてみる」をやめてみる。
– 離れていてもどこか揃えてみる。

22. ４つの基本原則 - 反復 -

23. 例えば、アプリ画面の場合

25. 全体に統一感がない！

26. 問題点
• 同じ要素なのに、各画面でルールが違う。
• ルールがバラバラなので統一感がなくなる。
などなど

27. では、どうするか？
反復要素を作り出し、一貫性を作り出す。

29. 反復のまとめ
• 全体を通して、視覚的要素を反復させる。
– 一体化と視覚的面白さを加えることができる。
• 情報を組織化することができる。
– 例えば、上から下まできちんと読んでもらえたり。
• 一貫性が生まれることで、目立たせたい特別
なものを表現できる。

30. ４つの基本原則 - コントラスト -

31. 例えば、WEBページの場合

33. 目を引くものがない！

34. 問題点
• キレイにまとまっているが、異なる要素の差
が少ない。
• 見る人の目を惹きつける要素が足りない。
などなど

35. では、どうするか？
同じでないなら、はっきり異ならせる。

37. コントラストのまとめ
• 面白みを作り出すことができる。
– 面白みがあると、見てもらえる可能性が上がる。
• 情報を組織化を支援することができる。
– 項目から項目への流れ作り出せる。
– ただし、コントラストをつけて視線を迷わせること
がないように注意も必要です（´・ω・｀）

38. まとめ

39. • それぞれやってることは、そこまで難しいこと
ではない。
– まとめて、整えて、統一して、区別する！
• レイアウトの重要性
– どんなに素晴らしい製品でも、見た目が整って
いなければ、良さを理解してもらえない。
– 相手に情報を伝えるためには、レイアウトする
ことは重要！