社内用向けに作った資料です。 ノンデザイナーズ・デザインブック という本をベースに作った資料です。 なるべく自分の言葉で書くようにはしてますが、引用させていただいてる部分が多数あります。 表現等によろしくない等ありましたらコメント等で指摘お願いします。

1. ノンデザイナー向け デザイン講座
１回目 デザインの４つの基本原則を知る

2. はじめに
2

3. N.
glucose inc.
デザイナーやってます
三國・戦国無双シリーズ大好き
自己紹介
3

4. 社内のエンジニア向けの
デザイン講座用に作った資料です
この資料について
4

5. 下記の本をベースに解説しています
ノンデザイナーズ・デザインブック
[フルカラー新装増補版]
Robin Williams (著)
吉川 典秀 (翻訳)
なるべく自分の言葉で書くようには
してますが、引用させていただいてる
部分もあります。
表現等によろしくない等ありましたら
コメント等で指摘お願いします。
参照書籍
5

6. １回目 デザインの４つの基本原則を知る
２回目 近接
３回目 整列
４回目 反復
５回目 コントラスト
６回目 色について
講座予定
6

7. １回目 デザインの４つの基本原則を知る
２回目 近接
３回目 整列
４回目 反復
５回目 コントラスト
６回目 色について
今日の予定
7

8. 今日のプログラム
8
デザインとは ４つの基本原則 基本原則の関連性

9. デザインとは
9

10. デザインは日本語では「設計」にもあたり、
「形態」や「意匠」と訳されてきたが、それだけに限らず、
人間の行為（その多くは目的を持つ）をより良いかたちで
適えるための「計画」も意味する。
wikipediaに聞いてみた
10
- 抜粋 wikipedia

11. デザイン センス
11
デザインとは
情報の整理整頓 > センス

12. デザイン センス
12
デザインとは 情報を設計してあげること。
情報の整理整頓 > センス

13. デザイン センス
13
デザインとは 情報を設計してあげること。
情報の整理整頓 > センス
デザイン センス という考えなので
センスなくてもデザインの仕事はできると思ってます。

14. ４つの基本原則を知る
14

15. ４つの基本原則
15
近接 整列
反復 コントラスト

16. 関連する項目はグループ化
近接
16
項目が左右に散らばっている
その視線が散らばり見づらい。
名前と連絡先でグループ
分けたことで見やすく。
after

17. 配置には意味があり、意図的に整列して配置する
整列
17
配置がバラバラなので
それぞれが孤立している
項目に見えます。
左 えにしてみました。
項目が関連あるように
見えます。
after

18. 文字、色、形など、要素を繰り返すことにより、全体に統一性を図る
反復
18
文字や見出しを
同じ色・大きさにし、
統一感が感じられます
※使用している文章はダミーです
文字の種類・色・大きさ等、
要素がすべて異なり
統一感が感じられない
after

19. 要素が同一でない場合、はっきりと違いをつける。
コントラスト
19
文字も多く、視覚的に
引きつける要素がない。
タイトルと文章は別の要素。
強調させることにより
視覚的にひきつけられる
after

20. 基本原則の関連性
20

21. 基本的にこの４つの原則は関連している
４つの原則は関連している
21
タイトルと本文は
関連する要素として
グループ化されてる
（近接）
端の位置を え、
視覚的に関係させる
（整列）
赤塗りつぶしの部分は
同じ形で繰り返してます
（反復）
見出しを大きくし
差をつけ視覚的に
ひきつける
（コントラスト）

22. この資料も４つの原則を使用
22
関連ある要素は
グループ化されてる（近接）
端の位置を え、視覚的に
関係させる（整列）
基本の形を繰り返す事で
統一感を図る（反復）
見出しを大きい文字にし
差をつけ視覚的にひきつける
（コントラスト）

23. あのアプリも原則抑えてます
23
関連ある要素は
グループ化されてる
（近接）
端の位置を え、
視覚的に関係させる
（整列）
見出しを差をつけ
視覚的にひきつける
（コントラスト）
基本の形を繰り返す事で
統一感を図る（反復）
綺麗なデザインのものは自然と原則を抑えています
画像: Instagramより

24. 今回のまとめ
24

25. • 近接、整列、反復、コントラスト がデザインの４つの基本原則
• ４つの原則は互いに関連している
今回のまとめ
25

26. ありがとうございました。
26