ノンデザイナーズ・デザインブックから学ぶ、初心者エンジニアが覚えるべきデザインの4原則
こんにちは。Toshiです。最近プログラミングの勉強はほぼお休みしてデザインを学んでいます。
デザインを学んでいる理由としては、友人のカフェのサイトを作るにあたりカンプデザインまで作成して上司（元大手外資でECサイト作成担当）に見てもらったら、このままだと全然メッセージが伝わってこないから、まずはデザインを勉強したほうがいいよ。と言われたためです。
その上司からノンデザイナーズ・デザインブックを勧められて読んでみたらこれがとても面白かったです。
![ノンデザイナーズ・デザインブック [第4版]](https://images-fe.ssl-images-amazon.com/images/I/51HKaOqL-RL._SL160_.jpg "ノンデザイナーズ・デザインブック [第4版]")
- 作者: Robin Williams,小原司,米谷テツヤ,吉川典秀
- 出版社/メーカー: マイナビ出版
- 発売日: 2016/06/30
- メディア: 単行本（ソフトカバー）
- この商品を含むブログ (3件) を見る
また、他サイトなどでも初心者向けデザイン本として勧められていることが多く信頼できる本なんだなと分かりました。 今回はこの本を読んで学んだことを簡単にまとめてみたいと思います!
誰に向けた本?
そもそもデザインって何ですかね。僕がこの本を読む前に思っていたデザインのイメージとしては
- 文字や画像を適切に選んでかっこよく見せること
- センスがある限られた人にしかできないこと
こんなイメージを持っていました。 ですが、ノンデザイナーズ・デザインブックを読んでみた結果、デザインに対しての考えは大きく変わりました。
これは僕の認識ですが、そもそもデザインとは、伝えたいメッセージを適切に伝えたい人に届けるための手段なんだなと現段階では思っています。
もちろん、色使いやフォントの知識などは必要ですが、それ以前にどんなメッセージを伝えたいか。などがしっかり整理されていないと良いデザインは出来ないんだなということも分かりました。（論理的思考はいつでも要求されますね😇）
また、デザインはセンスだけではなくかなり理論の部分が大きく、誰でもある程度までは学べるものだと分かりました。
もちろんある一定以上のレベルに達するにはセンスは必要だと思いますが、理論・原則を身につけることによって誰でも最低限のレベルに達することは可能だと思います。
この本は「ジョシュアツリーの悟り」というイントロダクションから始まります。
このイントロダクションを要約すると、植物図鑑を手に入れて植物の知識を身に着けた後、それまで身の回りに無いと思っていたジョシュアツリーという植物が実は身近にあった。（ジョシュアツリーを知らなかったから身近にあることに気づけなかった。）というお話です。
つまり、デザインの知識（この本では4原則にあたります。）を身につけることによって、あなたはそれを意識し、コントロールし、所有することが出来るようになります。
自分の作ったWebサイトがなんかダサく見える。けれどその原因が分からない。そんな人にうってつけの本です。これから紹介する4つの原則を身につければ、何がWebサイトをダサく見せていてどのように解決すべきかが見えてくるはずです。
本書では4つの原則以外にフォントやカラーについても言及されていて、それらもとても素晴らしい内容です。
そこまでカバーするととてつもない文量になるので、今回は4つの原則に絞って、本書に出てくる例を交えながら紹介していきます。
早速一緒に4つの原則をチェックしてみましょう！
4つの原則について
以下の4つの原則を個別に紹介していきます。
- コントラスト（Contrast）
- 反復（Repetition）
- 整列（Alignment）
- 近接（Proximity）
CRAP💩と覚えよう！
コントラスト
コントラストの原則は、読者の目をページに引き込むために（Webサイトならユーザーをサイトに）、作品の様々な要素にコントラストを付ける（見出しなど）ということ。2つの項目が同じじゃないなら、大きく異ならせる事が大切。 そもそもどの項目が同じ項目なのか。という判断が事前にしっかりできている必要がある。
基本目的
コントラストには2つの目的がある。1つはページに面白みを作り出すこと。ページが面白そうに見えれば読んでもらえる可能性が高まる。（Webサイトならユーザーの離脱を防げる。）
もう1つは、情報の組織化を支援すること。
コントラストをつけることによって、サイト全体の流れを一瞬でユーザーに理解してもらうようにする。 コントラストをつけたせいで、ユーザーを迷わせたり、焦点でないものを焦点に見せてはいけない。
実現方法
書体（フォント）の選択、線の太さ、色、形、フォントサイズ、空きなどでコントラストを付ける。 コントラストをつける方法は簡単に見つけることができる。大切なのは強調すること。
避けること
コントラストをつけるなら、力強く！ 正確に同じじゃないものは、はっきり異ならせる。 太そうな線ともっと太そうな線、茶色の本文と黒の見出しでコントラストをつけようとしない。
反復
反復の原則は、デザイン上のなにかの特徴を作品全体を通して繰り返すこと。 反復させる要素としては、太いフォント、太い罫線、デザイン要素、色、フォーマット、配置など。ユーザーが視覚的に認識できるものならなんでもOK。
反復の要素を使っている初心者は多いが、必要なのはその反復をさらに進めること。ぼんやりとした反復をより意識的に行い、作品（Webサイト）全体を結束する鍵に変えることが大切。
基本目的
反復の基本的な目的は、一体化と視覚的な面白さを加えること。ページが面白そうであれば、読んでもらえる可能性が高くなる。
実現方法
反復とは一貫性ともいえる。すでに実践している人は多いが、そのすでに存在している反復を、もう一歩進める。見出しのような一貫性のある要素を、意識的なグラフィックデザインに変えたり、反復に使っている罫線の太さをより強調したりする。
また、反復を作り出すために要素を加える方法もある。番号付きリストがあるなら、その数字をフォントやサイズ、色を変えてもっと目立つようにしてサイト全体に利用する。まず始めは、すでに存在する反復を見つけてそれを更に強化することから始める。
避けること
要素を、うるさく強迫的に感じるほどには反復させない。コントラストを意識する。 例えば、サイト全体が同じ反復が繰り返されていれば、焦点がどこにあるか分からずユーザーを混乱させてしまう。
整列
整列の原則は、ページ上のすべてのものを意識的に配置しなければならないということ。ページ上のすべての項目が、何か他のものと視覚的に関連していなければならない。ページ上すべてのものを、根拠なく配置してはいけない。
ページ上の項目が整列していれば、より強く団結したユニットが生まれる。それによって、たとえ要素が離れていても、整列していれば、それらの要素を結びつける透明な線が、視覚的にも心理的にも存在する。
要素同士の関係を示すためにそれらを引き離しても、整列の原則を適用していれば、どちらも同じものの一部であることが分かる。（関連性を感じることが出来る。）
中央ぞろえについて
中央ぞろえは初心者に一般的に使われる整列方法だが、意識的に使う必要がある。 中央ぞろえはフォーマル、静か、普通という印象を与えるが、ただ単に退屈に見えることがある。 中央揃えは、明確に意図的に使われた場合に最大の効果を発揮するので、中央ぞろえを使うなら意識的に使う必要がある。 著者のオススメとしては、中央ぞろえをしばらく使わないこと。
基本目的
整列の基本的な目的は、ページの一体化と組織化。
部屋に散らかった本を本棚に片付けることに似ている。
強い整列が、最適なフォントと組み合わされて、洗練された表現、フォーマルな表現などを生み出す主役になることはよくある。しっかりとした整列があれば、それを意図的に崩すことによって変化をつけられる。
実現方法
意識的に要素を配置する。要素が離れていても、そろえる事が出来る他の要素を必ず見つける。（雑誌の表紙などを見ると、離れた項目同士が整列されていることにすぐに気付けるはずです。）
避けること
同じページで2種類以上の文字揃え（右揃えと中央そろえなど）を使わない。
近接
近接の原則は、関連する項目をまとめてグループ化すること。関連する項目を物理的に近づければ、一個のまとまったグループに見えるようになる。 関連しない情報同士は近づけてはいけない。（事前にどの情報が関連する項目か、を理解しておかなければいけない。）
基本目的
近接の基本的な目的は、組織化。関連する要素を近づけてグループ化するだけで、自動的に組織構造ができあがる。情報が組織化されていれば、読みやすいため読んでもらえる可能性が高くなる。 しっかりと近接が行えれば、自動的に「空白」もより組織化される。
実現方法
目を少し細めてページを眺めて視線が止まった回数を数えれば視覚的要素の数がわかる。それが３〜５個（内容によるが）を超えている場合、近接によってグループ化して１個の視覚的ユニットにできないか考える。
避けること
ページ上に個別の要素を作りすぎない。要素間に均等の空白をつくらない。 見出しや画像などが、本文の土の部分に関連するか、ユーザーを迷わせないようにする。 異なる性質の要素間に関連を作らない。異なる要素は離して配置する。 ただ空いているという理由だけで、隅や中央に画像などを貼り付けない！（空白を恐れない。）
日本語での例
本書は元が英語なので、出てくる例も英語のものがほとんどです。いくつか日本語での例も載っていたので、特に参考になるものをピックアップしました。
こういったトップページはよく目にしますよね。
また、フォームを作ることも多いと思いますが、ここでも4つの原則を活かすことが出来ます。
私からの問題
これは実際に私の友人が経営するカフェで現在使われているメニューです。これは友人がiPadで作りました。 今まではこのカフェのメニューに対して「なんとなくダサいな。」と感じていましたが、今ではそのダサく見せている原因が言語化出来るようになりました。何が問題か分かりますか？
まとめ
ほぼほぼテキストに書いてあることを丸写しであまり内容の濃い記事ではありませんが、4つの原則を知ることによって
「なんか変だけどその理由を言語化出来ない。」から「具体的に問題を言語化して解決できそうだ！」
と感じてもらえると嬉しいです!
実際のテキストでは豊富に参考画像や取り組む問題などもあってとても勉強になります。ぜひ実際に本屋さんなどで手にとって見てみてください！
この本ではフォントやカラーにも触れられていますが、より詳しいことは別のテキストで学ぶことをオススメします。
どういった本を読めばいいかわからない。という場合にはこちらのツイートを参考にすると良いと思います！（実際に私もこちらで勧められている本を参考にさせてもらっています！）
まとめました。
— Yuri | UX デザイナー(UIX) (@lilium_u) 2019年3月25日
⚡️ "おすすめの本（初学者向けデザイン書籍）"https://t.co/3W2bYeGpuT
本書について別の方もまとめを書かれているので、こちらもとても参考になりました！
