3/29開催「Webナイト宮崎 Vol.3 ～てげデザイン学びたい～」のLT資料です。 愛○会HP等をモデルに、ノンデザイナーズ・デザインブックを読んでどこまでできるか、やってみました！

1. センスゼロエンジニアが
ノンデザイナーズ・デザインブック
を読んでどこまでできるか試す
澤井 友恵
@tomoeine

2. 自己紹介
名前：澤井友恵
趣味：クライミング
経歴
高校中退後（テーブルレイアウト全盛
期）、HP作成にハマる
大学入学、零細Web広告会社で１人システ
ム部門のバイト
卒業後、大手SIerにSEとして勤務
2016年に宮崎へ移住＆転職（自社サービス
開発）
2018年6月にフリーランス化、山の中の平
屋で在宅ワーク中
（最近）好きな技術：AWS、型、SPA

3. いきなり宣伝

4. サービス作りました！
yurusuke.com

5. このLTの対象者
● これからデザインを学ぼうとしている人
● デザインのことも知りたいエンジニアやマーケッ
ター
● 名刺のデザインぐらい自分でできたらなぁ・・・と
思っている人
● いつかゼロから自分のWebサービス作りたい人

6. ノンデザイナーズ・
デザインブック

7. ノンデザイナーズ・デザインブック
デザイナーでない人のための、デザインの定番基本書
※Web前提ではない

8. ４つの基本原則
近接
関連する項目を近づけてグループ化する。近接することで、１個の視覚的ユニットとして認識される。
近接のためには空白も重要。
整列
「右ぞろえ」「左ぞろえ」が洗練された印象のデザインを産む。中央ぞろえは退屈な印象になるが、明
確に意図的な場合は強い印象を与える。
反復
○デザイン上の特徴をを作品全体を通して繰り返す。反復させる要素は色、フォント、線の太さ、テクス
チャー、等。反復は作品の一貫性を生み、情報の組織化にも役立つ。
コントラスト
○同一でない要素ははっきり異ならせる。コントラストによって見る人の目を引き込むとともに、情報の
組織化にも役立つ。
4原則の意識で、デザインをコントロールできる

9. ４つの基本原則
近接
関連する項目を近づけてグループ化する。近接することで、１個の視覚的ユニットとして認識される。
近接のためには空白も重要。
整列
「右ぞろえ」「左ぞろえ」が洗練された印象のデザインを産む。中央ぞろえは退屈な印象になるが、明
確に意図的な場合は強い印象を与える。
反復
○デザイン上の特徴をを作品全体を通して繰り返す。反復させる要素は色、フォント、線の太さ、テクス
チャー、等。反復は作品の一貫性を生み、情報の組織化にも役立つ。
コントラスト
○同一でない要素ははっきり異ならせる。コントラストによって見る人の目を引き込むとともに、情報の
組織化にも役立つ。
4原則の意識で、デザインをコントロールできる
読む気しない！

10. ４つの基本原則
近接
関連する項目を近づけてグループ化する。近接することで、１個の視覚的ユニットとして認識される。
近接のためには空白も重要。
整列
「右ぞろえ」「左ぞろえ」が洗練された印象のデザインを産む。中央ぞろえは退屈な印象になるが、明
確に意図的な場合は強い印象を与える。
反復
○デザイン上の特徴をを作品全体を通して繰り返す。反復させる要素は色、フォント、線の太さ、テクス
チャー、等。反復は作品の一貫性を生み、情報の組織化にも役立つ。
コントラスト
○同一でない要素ははっきり異ならせる。コントラストによって見る人の目を引き込むとともに、情報の
組織化にも役立つ。
4原則の意識で、デザインをコントロールできる
読む気しない！
→「４つの基本原則」
で直してみる

11. 近接
関連する項目を近づ
けてグループ化する。
近接することで、１個
の視覚的ユニットとし
て認識される。近接の
ためには空白も重要。
整列
「右ぞろえ」「左ぞろ
え」が洗練された印象
のデザインを産む。中
央ぞろえは退屈な印
象になるが、明確に意
図的な場合は強い印
象を与える。
反復
デザイン上の特徴を
を作品全体を通して
繰り返す。反復させる
要素は色、フォント、
線の太さ、テクス
チャー、等。反復は作
品の一貫性を生み、
情報の組織化にも役
立つ。
コントラスト
同一でない要素は
はっきり異ならせる。
コントラストによって見
る人の目を引き込むと
ともに、情報の組織化
にも役立つ。
４つの基本原則
4原則の意識で、デザインをコントロールできる

12. 近接
関連する項目を近づ
けてグループ化する。
近接することで、１個
の視覚的ユニットとし
て認識される。近接の
ためには空白も重要。
整列
「右ぞろえ」「左ぞろ
え」が洗練された印象
のデザインを産む。中
央ぞろえは退屈な印
象になるが、明確に意
図的な場合は強い印
象を与える。
反復
デザイン上の特徴を
を作品全体を通して
繰り返す。反復させる
要素は色、フォント、
線の太さ、テクス
チャー、等。反復は作
品の一貫性を生み、
情報の組織化にも役
立つ。
コントラスト
同一でない要素は
はっきり異ならせる。
コントラストによって見
る人の目を引き込むと
ともに、情報の組織化
にも役立つ。
４つの基本原則
4原則の意識で、デザインをコントロールできる
近接
見出しと説明文を
近づけ、
他の原則の間に
スペースを作った

13. 近接
関連する項目を近づ
けてグループ化する。
近接することで、１個
の視覚的ユニットとし
て認識される。近接の
ためには空白も重要。
整列
「右ぞろえ」「左ぞろ
え」が洗練された印象
のデザインを産む。中
央ぞろえは退屈な印
象になるが、明確に意
図的な場合は強い印
象を与える。
反復
デザイン上の特徴を
を作品全体を通して
繰り返す。反復させる
要素は色、フォント、
線の太さ、テクス
チャー、等。反復は作
品の一貫性を生み、
情報の組織化にも役
立つ。
コントラスト
同一でない要素は
はっきり異ならせる。
コントラストによって見
る人の目を引き込むと
ともに、情報の組織化
にも役立つ。
４つの基本原則
4原則の意識で、デザインをコントロールできる
整列
左でそろえた

14. 近接
関連する項目を近づ
けてグループ化する。
近接することで、１個
の視覚的ユニットとし
て認識される。近接の
ためには空白も重要。
整列
「右ぞろえ」「左ぞろ
え」が洗練された印象
のデザインを産む。中
央ぞろえは退屈な印
象になるが、明確に意
図的な場合は強い印
象を与える。
反復
デザイン上の特徴を
を作品全体を通して
繰り返す。反復させる
要素は色、フォント、
線の太さ、テクス
チャー、等。反復は作
品の一貫性を生み、
情報の組織化にも役
立つ。
コントラスト
同一でない要素は
はっきり異ならせる。
コントラストによって見
る人の目を引き込むと
ともに、情報の組織化
にも役立つ。
４つの基本原則
4原則の意識で、デザインをコントロールできる
反復
コントラスト
上下に青い帯をつけた
見出しは大きく、色をつけた
強調する部分を太字にした
フォントの使い分け

15. デザイン修正
やってみた

16. モデル

17. 愛生会のHPを直してみよう！
※現在はリニューアル済です
※著作権関係でキャプチャ削除
http://web.archive.org/web/20000422010752/http://www.aiseikai.or.jp/
にて当時のページを閲覧可能です

18. まず掃除から始めましょう
（P.92）

19. まず掃除から始めましょう
● 色を削る
● 以下を削除
- 院長の個人的なMicrosoftへの
クレーム
- 招き猫
- midi音源

20. 近接

21. 近接
● スタッフ紹介ページ、外部リン
クをグルーピングした

22. 整列

23. 整列
● 左ぞろえと右ぞろえのライン
を作った

24. 反復・コントラスト

25. コントラスト＆反復
● 上下に帯をつけ、
病院名にも同じ
色を使った
● 病院名のフォント
をメニューでも
使った
● 病院名を大きく目
立たせた

26. Before
※現在はリニューアル済です
※著作権関係でキャプチャ削除
http://web.archive.org/web/20000422010752/http://www.aiseikai.or.jp/
にて当時のページを閲覧可能です

27. After

28. もう一度宣伝

29. 「誘うほどじゃないけど、他にも誰か行くかな？」
というとき・・・
yurusuke.com

30. ご清聴ありがとうございました！
澤井 友恵
@tomoeine
センスゼロエンジニアが
ノンデザイナーズ・デザインブック
を読んでどこまでできるか試す