🐈

【非デザイナー向け】ノンデザイナーズデザインブックを解説

2021/10/28に公開約1,300字

今回はデザイナー以外の人に向けて書かれたデザインの本である、「ノンデザイナーズデザインブック」について解説しようと思います。

フロントエンドエンジニアであれば、デザインの基礎の基礎はわかっていた方が良いと思うので、この本の内容はとても役に立つかと。

内容


この本では、4つの原則があり、それら全てを適用したものが良いデザインであるとされてます。

そして、その4つとは次の通り、

  1. コントラスト
  2. 反復
  3. 整列
  4. 近接

1つずつ解説していきます。

1.コントラスト

これは、言葉の通りで単調的なデザインではなくしっかりとコントラストを作りましょうと言うことです。

メリットは、どこに注目すべきかがわかりやすくなることです。

読者の目を惹きつけることができるので、特に大事な部分や伝えたい部分にコントラスト作るようにすると良いです。

コツとしては、臆病にならならずにハッキリとしたコントラストを作ることが大事です。

最初は書体、色、大きさなどでコントラストを表現すると分かりやすいです。

2.反復

これは、デザインの何かを意識的に繰り返すことです。

これをすることで、プロっぽい雰囲気が出て次の予測がしやすくなります。

つまり、玄人っぽいデザインを実現できるようになります。

3.整列

これは、全てのものを何かと結びつけて意識的に配置すると言うことです。

例えば、基本中の基本ですがtext-alignを揃えるといったことなどです。

この原則を守ることで、デザインに一体感が生まれ、信頼感を与えることができます。

4.近接

これは、関係ある項目を近づけ、関係ない項目を遠ざけることです。

この原則を守ることで、

  • 目の移動が減る
  • 直感的で分かりやすくなる
  • 空白ができて見やすくなる

と言ったメリットがあります。

コツとしては、

  • 要素を作りすぎない
  • 関係ないものに均等な空白を与えない
  • 空白を埋めようとし過ぎない

と言ったことを意識すると良いです。

まとめ


さて、「ノンデザイナーズデザインブック」について解説してきました。

要は、
1、焦点を決める(コントラスト)
2、情報を論理的なグループにまとめる(近接)
3、強い整列を元に並べる(整列)
4、反復要素を持たせられそうなものを探す(反復)
と言った手順でデザインしましょうと言うことです。

デザイナーではない人にも論理的にデザインの原則について説明してくれているかなりの良書でした。

オススメです。

また、このサイトが実例付きでさらに分かりやすかったので詳しくさらに知りたい方はどうぞ。

https://docodoor.co.jp/staffblog/design-4general-rule/

また、僕のブログではReactエンジニアになるためのロードマップを無料で全て公開しているので、参考にどうぞ。バックエンドエンジニアを目指している方などにも役立つ情報を書いてます。

https://hinoshin-blog.com/react-roadmap/

おわり

Discussion

ログインするとコメントできます