Michi's Tech Blog

一人前のWebエンジニアを目指して

【書評】『ノンデザイナーズ・デザインブック』を読んでみた

こんにちは!
スマレジ テックファームのMichiです!

今回の記事は『ノンデザイナーズ・デザインブック』という本を読んでみた書評になります。

『ノンデザイナーズ・デザインブック』とは?

『ノンデザイナーズ・デザインブック』とは、デザイナーではない人向けに書かれたデザインの入門本です。発売から25年以上経っていますが、いまでもデザインを学ぶ世界中の人々に読まれています。

「初心者でデザインのことを勉強したいんですが、何から始めればいいですか?」という人がいれば、ほぼ間違いなく「まずこれを読め」とおすすめされるデザインの鉄板本です。

私も最近、フロントエンドを触ることが多いのでデザインの知識が欲しいなと思い、読んでみました。

要約

  • 良いデザインには必ず存在する4つの基本原則がある

デザインの基本4原則

近接

  • 互いに関連する項目は近づけてグループ化する
  • グループ化することで、一つ一つのブロックに意味を持たせる
  • グループ化するには空白のコントロールが重要。均等な空白は情報の組織化を阻害する。

ファーストフード店のメニューの例。左側はすべての空白が均等なので、情報のグループがわかりにくい。一方右側はグループごとに近づけているので、メニューがどのカテゴリーに属しているのか一目でわかる。

整列

  • ページ上の要素には明確な意図をもって、他の要素と視覚的なつながりを持たせる配置をする
  • 一つのページの中で、複数の配列方法(たとえば中央揃えと右揃え)を使わない
  • なんでもかんでも中央揃えにしない。中央揃えはフォーマルであるが、少し弱い印象を与えることがある。

左揃えにすることで、読みやすくスッキリとした見た目になる

反復

  • デザイン上の何かの特徴を作品全体を通して繰り返す
  • 一貫した反復は作品全体に一体感と視覚的なおもしろさをもたらす
  • Webページのヘッダーやフッターはこのテクニックを使っている

ビュレットを入れるだけでも反復のテクニックを使える。また、各カテゴリーが太字で表記されているのも反復であるといえる。

コントラスト

  • 2つの異なる色、大きさ、線の太さ、書体、形などを使い、視覚的なおもしろさを作り出す
  • コントラストには私たちの目を引き付ける効果がある
  • コントラストを使うときは、はっきりと異ならせること。中途半端な違いはデザイン上のミスだと認識されることがある。

カテゴリーと個々のメニューで、文字の大きさ・書体・言語にコントラストが付いている

感想

世界中で25年も読まれているだけあって、デザインの基本原則が非常にシンプルにまとめられています。

この本だけでデザインのすべてを理解することは難しいかもしれませんが、右も左もわからないデザイン初心者には、「とりあえずここさえ気を付けておけばそれなりのものが作れる」というラインを学ぶ意味では良書だと思いました。

良くないところを挙げるとすれば、古い本だけあってどうしても紙媒体のデザインの話が中心でした。Webデザインを学びたい人は、この本の他にWebデザイン専門の書籍で学習する必要はあるかなと感じます。

あとこれは洋書あるあるなのですが、日本語の訳が微妙でした。

あまりにも翻訳がダイレクトすぎる文章がいくつかあり、2~3回読み直さないと意味が理解できなかったです。ここは翻訳家さんがもうちょっと意訳するなどして、日本人に読みやすい文章にしてほしかったなと思います。