msksgm’s blog

msksgm’s blog

Webエンジニアです。日々の勉強記録、技術書感想、美術観賞感想を投稿します。

ノンデザイナーズ・デザインブック 感想 まとめ

「ノンデザイナーズ・デザインブック」[2016, Robin Williams]を読みました.

感想

言わずとしれたデザイン入門書です.

デザインの4大原則はパワポなどをつかった発表資料にすぐに適用できるため,学生だったり発表する機会が多い人ほど早く知った方がいい知識です.
むしろ,すでにデザインの四大原則についてネット上でわかりやすい解説があるため,先に学んだ方が答え合わせのように理解が進んでいいと思います.
自分はこの資料で初めてデザインの四大原則について知り,実践していました. (2021 年 6 月 27 日最終確認)
カラーホイールとタイポグラフィについては,デザイナー以外は日々の実践が難しいため,カラーホイールはお気に入りのカラーパレッドを見つけて,タイポグラフィは世の中のテンプレートを参考にした方がいいと思います.

この本は,デザイン改善前後の比較があり,具体的な問題もあるため,問題集のように使うことも可能です.
デバックがプログラミングのスキルが向上する手段の一つであるよに,デザインもゼロから作成して学ぶだけでなく,改善によって向上する技術だと思っています.
慣れてくると世の中の広告が洗練されたデザインであることに気がつき,わかりにくい資料がどのようなもので,脳を疲れさせやすいものだとにも気がついてきます.

Web エンジニアは,CSS の使い方を覚えても,具体的にどのようにしたら見やすくなるかわからない人が大半だと思います.
そのため,この本を読むことで Web デザインに限らないデザインの原則について学ぶことができると思います.
もう少し Web デザインについて適用できる内容が欲しければ,他の書籍を1冊選ぶといいと思います.(自分も知りたい)

概要・まとめ

全体感

タイトル通り,非デザイナーのためのデザイン入門書.
チラシや広告を作りたいひとだけでなく,エンジニアが Web デザインに適用できる内容が多く記載されています.
内容は大きく分けて,デザインの四大原則,カラーホイール,タイポグラフィについてです.
具体的なデザインに対して改善前後の比較によって,解説が進みます. 基本的に英語を用いたデザインについての解説ですが,第4版(それ以前も?)には訳者による日本語への適用があります.

簡単なまとめ

デザインの四大原則

近接

  • 目的
    • 組織化
    • 情報が組織化すれば読んでもらえる可能性が高くなり覚えてもらえる可能性が高くなる
  • 実現方法
    • 視線が止まった数を数える.3~5 回に抑える
  • 避けること
    • 増やしすぎないこと
    • 要素ごとに均等の空白を作らないこと

整列

  • 目的
    • 一体化と組織化
  • 実現方法
    • 意図的に要素を配置する.
    • 物理的に離れていても,そろえることができるほかの要素を見つける
  • 避けること
    • 同じページで2種類委譲の文字揃えを用いないこと(中央揃えと右揃えを両方用いるとか)

反復

  • 目的
    • 一体化と視覚的なおもしろさを加えること
  • 実現方法
    • すでに存在する一貫性を,もう一歩進める
    • 一貫性のある要素を,意識的なグラフィック・デザインの一部に変える
    • ただ反復を作り出すためだけに,要素を加えることを考える
  • 避けること
    • 要素を,うるさく強迫的に感じるほどに反復させるないように,コントラストの価値を意識する

コントラスト

  • 目的
    • おもしろみを作り出すこと
      • ページがおもしろそうに見えれば,読んでもらえる可能性が高くなる
    • 情報の組織化を支援する
      • ある項目から次の項目への論理の流れが一瞬でわかるようにする
  • 実現方法
    • 線の太さ,色,形,サイズ,空きなどでコントラストを付ける
  • 避けること
    • コントラストを付けるなら,力づくつくる
    • よく似た書体を複数使ってはいけない

カラーホイール

原色(プライマリーカラー)

他の色から作れない色

2次色(セカンダリーカラー)

  • 緑(黄+青)
  • 紫(赤+青)
  • オレンジ(黄+赤)

3次色(テリタリーカラー)

  • イエローオレンジ(黄+オレンジ)
  • オレンジ+赤
  • 赤+紫
  • 紫+青
  • 青緑(青+緑)
  • 緑+黄

補色

カラーホイールの反対に位置する色

トライアド

3つの組み合わせ,心地よい色のトライアドを必ず作れる
カラーホイールで 120 度ごとに結ぶ

  • プライマリートライアド
    • 原色によるトライアド
  • セコンダリートライアド

スリットコンプリメントトライアド

1つの色の補色に隣接する2つの色によるトライアド

類似色

隣り合う3つの色の組み合わせ

シェードとチント

シェードとチントを使うことで,色に幅が生まれる

  • ヒュー
    • カラーホイールの色
  • シェード
    • ヒューに黒を加える
  • テント
    • ヒューに白を加える

トーン

  • トーン
    • ある色のヒューの濃淡の特定の質を示す言葉
    • 色が近すぎるとみづらくなる

暖色対寒色

  • 寒色は背景に「引っ込む」
  • 暖色は画面に「出る」

タイポグラフィ

あまり理解できなかったのと,再現できないため省略...

日本語と英語のタイポグラフィの性質は大きく異なる
英語を大文字にするとみづらくなるのは,文字の大きさが揃って,塊がみづらくなるため