「ノンデザイナーズ・デザインブック」に学ぶデザイン原則

こんにちは🌝

少し久しぶりの投稿となりましたが、Photoshopの勉強をしてこれからバナーやサイトのトレースに取り掛かろうと思ったときに、

「デザインについて」より深く理解してから手を動かした方が、学ぶことも意識することも多くなるのでは？

と思い、本屋で前から気になっていた「ノンデザイナーズ・デザインブック」を購入しました！

ノンデザイナーズ・デザインブック [第4版]

「webデザイン 本 おすすめ」とかでググると、多くのブログなどで紹介されている本なので、webデザインに関わっている人なら一度は目にしたことがあるのではないでしょうか。

今回はこの本で学んだデザインの原則について、私なりにまとめてみようと思います！

良いデザインには4つのデザイン原則が隠されている！

webデザインの勉強をしてからは、デザインギャラリーサイトなどで多くのサイトデザインをよく見るようになりました。

「このサイト素敵だな」と思うことは多々あっても、「何故いいのか？」は説明できないし、よくわかっていませんでした。

この本では、何故良いデザインなのか、深くデザインを理解するための4つのデザイン原則が紹介されています。

1. 近接

• 近接とは、関連する項目をまとめてグループ化すること。
• グループ化により1つのバラバラだったものが視覚的にひとまとまりになる。
• そうなることで、パッとみたときにそのデザインが伝えたい情報が理解しやすく、また覚えやすくなる。

× 個別の要素を作りすぎない

× 全て均等の空白にしない

× 空白を無理に埋めようとしない

2. 整列

• 整列とは、ページ上のすべての要素の視覚的な繋がりを作ること。
• 繋がりを作ることでページ全体の一体感を作り出すことができ、デザインの情報がより理解しやすくなる。

× 同じページで2種類以上の文字揃えを使わない

× 「なんとなく」という理由で中央揃えを使わない

3. 反復

• 反復とは、デザイン上の何かの特徴を作品全体をとおして繰り返すこと。
• デザインに統一感が生まれ、特に複数ページにまたがるデザインには欠かせない要素。

× 反復させすぎない

4. コントラスト

• コントラストとは、作品の各要素に強弱や違いを作ること。
• コントラストをつけることで情報をより魅力的に見せてくれたり、強調したい部分をアピールできる。また、デザインの情報をグループ化する。
• フォントや線の太さ、色、形、サイズ、スペースなど様々な要素でコントラストはつけることが可能。

× 中途半端にしない。はっきり異らせる。

ノンデザイナーズ・デザインブックを読んでみての感想

ノンデザイナーズ・デザインブックの前半部分「デザイン原則」について一通り読んでみたので、その感想を少しだけ。

良いと思ったところ

• 一つ一つのデザイン原則について丁寧に説明されている
• デザイン例が豊富でイメージしやすい
• ところどころに「デザイナーの目を鍛える」というミニクイズがあり学んだことをすぐ実践できる（もちろん解答もあり）
• 各チャプターにまとめがあり、大事なところが整理しやすい
• 取り上げられているデザインで使用されているフォントが記載されている
• 色についての説明や色同士の組み合わせについてもとてもわかりやすい
• デザインの制作物ごとのチップスが載っている（ポスターや広告、履歴書など）
• 日本語ならではのデザインのチップスについても個別で説明されている

困ったところ

• 元は外国の本なので、少し文章に違和感があったりするかも・・
• 基本は外国のデザインサンプルなのでとっつきにくい

上記の点をみても明らかですが、全体を通して、webデザインの勉強を始めたばかりの方にはとってもオススメできる本でした！

デザインの基本をわかりやすく説明してくれていて、ダメな例と改善例がそれぞれ実際のデザインで確認しながら進められるのは勉強になりました。

これからやること

これからはバナーやサイトのトレースを行っていきますが、今回学んだデザインの原則がそれぞれのデザインでどのように使用され、工夫されているかという点を言語化しながら進めたいと思います！

Twitterもやってます🌟

「ノンデザイナーズ・デザインブック」
いろんなサイトでオススメされててずっと気になっていた本を買ってきたので今夜読みます🥰 pic.twitter.com/l4uDoGYgG5

— Anrin@webデザイン独学勉強中👼 (@anrin_design) September 16, 2019