ノンデザイナーズ・デザインブック│デザイン初学者の読書感想文

Web制作会社さんでデザイン勉強中のkinomiです。

４つの基本原則を学べるノンデザイナーズ・デザインブック(Robin Williams (著), 米谷 テツヤ (監修, 翻訳)を読んで、参考になった点をまとめていきます。

この本を読むべき人

最初のイントロダクションで、この本の対象は” 自分の作るページを見栄え良くする方法を知りたいという人”と書かれています。

はい、Webサイトを見栄え良くかっこよくデザインできるようになりたいです…。

”作品がもっとプロらしく、組織化され、一体化され、おもしろくなることを保証してくれる”とのこと。

私の場合、基本の４原則は言葉では知っていて、なんとなくは分かります。

でもいざデザインすると、目立たせたいところが目立っていなかったり、その逆だったり、基本が抑えられていないためにデザインが組織的に見えていないように感じます。

そういった曖昧な知識がこの本を読んでかたまってきたような気がする…！
参考になった点をまとめていきます！

近接の原則

関連する項目をまとめてグループ化する

近接の原則は、組織化。
ユーザーの視線を止めないような構造にして、情報を瞬間的に提供するもの。

・関係ない項目は近づけてはいけない。
・関連する項目をグループ化すると、自動的に余白が生まれる。

コントラストと両立させることで組織化させる

近づければいいだけではなく、知覚的に同じ情報(見出しと小見出しなど)は、視覚的にも関連付けさせる。

・テキストを大きくする/太字にする/書体を変える/色で目立たせる　など。(コントラスト)
・フッターの情報などは目立たせなくていい要素。

実現方法

目を細めてページを眺め、視線がとまった回数を数えると視覚的要素の数が分かる。1ページあたり3~5個を超えている場合はまとめられるものがないか探す。

・要素間に均等の余白を作らない。
・異なる性質の要素間に関連を作らない。
・関連しない項目は話す。
これらを曖昧にせず、意識的に行う。

整列の原則

ページ上のすべてのものを意識的に配列しなければならない

ページ上の項目が整列しているときは団結感が生まれる。

安易な中央揃えはしない

中央揃えは少し弱く見えることがある。
・テキストを結びつける見えない垂直の線が曖昧になるため。
・力強さを出すには右揃えか左揃え。
・「他を試す時間がないから」と安易に使うものではない。

中央揃えが「絶対にいけない」わけではない。
・要素全体は右側に寄せてテキストは中央揃えにする
・レイアウトとのバランスを見て、秩序を持って中央揃えにする

ただ、素人は左揃えにすると間違いない。

ベースラインをそろえる

見えない線が見えてくる。強い線を見つけて活用する。
整列の力が強ければ、目立たせたい要素を意識的に崩すことができる。

実現方法

・とりあえずではなく意識的に要素を配置する。
・物理的に要素が離れていても、揃えることができる他の要素を必ず見つける。
・同じページで、2種類違法の文字揃えを使わない。

反復の原則

デザイン上の何かの特徴を作品全体を通して繰り返す

孤立している部分が結びつき、作品が一体化される。

反復させる要素はユーザーが視覚的に認識できるもの
・太いフォント
・太い罫線
・デザイン要素
・色
・配置

目立たせたいものを視覚的に反復させるとユーザーの視線を誘導できる。
例）名刺のデザイン…名前と電話番号を見てほしい
名前と電話番号を太い書体、他を細い書体にすると、
名前→電話番号→名前の順で視線を誘導できる。

既存のレイアウトからなにか一つの要素抜き出し、新しい要素が生み出せる

例）テキストの装飾を、別の要素にも加えて反復させる。

実現方法

順番としては、
①一貫性を持たせる
②装飾を加える

・一貫性のことだけを考える
・すでに存在する存在の一貫性を、もう一歩進める。
・うるさく強迫的に感じさせる反復はしない。コントラストとのバランスをとる。

コントラストの原則

視覚的なおもしろさを加える。
目を引くために役立つだけでなく、情報を組織化し、階層構造を明らかにし、道案内となり、焦点を導き出す。

おもしろいコントラストをつける一番簡単な方法は、書体を使うこと

書体の装飾をつけると一気にコントラストがでる。

コントラストは大きく

より大きな項目とコントラストをつけるために小さくすることを恐れてはいけない。

ムーテレ「デザイン基本4原則を世界一面白く解説します」の回(15分20秒くらい)で、

”素人は全部似たようなサイズ感と余白間を使っている。
４：５：６のような中途半端な強さではなく、
１：５：１０くらいの強さにすると目立たせたいところを目立たせられる。
本当に伝えたいことはどかーっと伝える！”
というような内容をお話されていて、まさに私これ！と思いました。

実現方法

大切なのは力強く強調すること。
書体の選択でコントラストをつける。
・線の太さ
・色
・形
・サイズ
・スペース

まとめ

この本では、近接・整列・反復・コントラストは一つずつ使うのではなく組み合わせて使うものということが理由と共に言語化されていて、ロジックが分かるようになると思います。

写真で海外のグラフィックデザイン例がたくさん載っていて、著者の方が「これは間違っている、私はこうする」という構造で、ただ良いデザインを見るだけでは得られない気づきがあります。
デザインのプロの頭の中がのぞける感覚で、ヒントを得られそう。
定期的に読み直したいと思いました。

私は整列が特に苦手という認識があるので、この本に倣って一貫性を持たせることを意識して次からデザインしたいと思います。
あと、デザインをロジックで説明することが苦手なので、こういう本を読んで書き起こすのはとても勉強になりました。

ちなみに、クオートワークスのムラマツさん曰く、こういった知識を得られる本を全頁読むと時間がかかってしまうので、必要なところだけをピックアップするのが良いそうです。

うー難しいーと思いつつ、時間は有限・体はひとつなので、効率的にお勉強するのが大切なんですね。がんばります。またね～

kinomi