読了：ノンデザイナーズ・デザインブック第4版

2018年4月1日

「Webデザインよーわからん」と本を探してみると、
必ず「必読書」と挙げられる本書を私も手にとって読んでみました。

この本は、デザインを正式に学んだことがないけれども、デザインする必要がある人達のために書かれました。

はい

おしゃれな包装や頂戴なパンフレットするような人たちだけでなく、ニュースレターを作るように上司から指示された秘書、お知らせを信徒に伝える協会ボランティア、広告を自分で作る自営業者、見栄えのいいレポートのほうが点数が高くなることをしっている学生、聴衆を引きつけるプレゼンテーションのほうが大きな尊敬を得られることを実感している専門家 、 上手に定時された情報のほうが生徒の反応がいいことを知っている教師、数字や統計情報を、読者の眠気ではなく読む気を誘うように注意して配置している統計家などのための本なのです。

何をか言わんやWebデザイナーやWebフロントエンドというわけですね。

この本の大前提は「知は力なり」という昔ながらの格言です。（中略）良いデザインのしごとなら、実質的に必ず利用されている４つの基本コンセプトを提示します。（中略）問題の名前が言えれば、解決策を見つけられるようになるのです

Yes!そういう本を求めていた！

目次

• はじめに　──Is this book for you?

• Part1：Design Principles［デザインの原則］

• Chapter 1　イントロダクション

• Chapter 2　近接

• Chapter 3　整列

• Chapter 4　反復

• Chapter 5　コントラスト

• Chapter 6　4つのデザイン原則の復習

• Chapter 7　カラーを使ったデザイン

• Chapter 8　おまけのチップス&トリック

• 日本語版補足：日本語によるデザインサンプル（解説：小原 司）

• 日本語で見る4つの基本原則

• 日本語によるデザインサンプルのまとめ

• Part2：Designing With Type［活字でデザインする］

• Chapter 9　欧文タイポグラフィの基本

• Chapter 10　活字（と人生）

• Chapter 11　活字のカテゴリー

• Chapter 12　活字のコントラスト

• 日本語版補足：和文のための補足（解説：米谷 テツヤ）

• Chapter 13　参考になりましたか？

• Chapter 14　解答と回答例

• Chapter 15　この本で使った書体

• Appendix

この本は、解説に使われているデザインは基本「英文の印刷物」です。
英文がどういう意味なのか訳すのが億劫で全体を画として捉えてましたけど、
それでもハッとするデザインの効果、ヤバいですね。
それらについて一つ一つ丁寧に解説してくれるし、その効果と導き方がしっかりわかってよかったです。
考え方を身につければふわっとしていたデザインの方法論が出来上がるし、人に説明する時にも自信がつきそう。
Little Quizが随所に散りばめられて、これらをこなせば血肉になりそうです。
はい、これからやります……。
（まだ答え合わせしてなかったり、挑戦してなかったり）
ちょっと物足りなさはあるものの、和文での補足もちゃんとあります。
日本語だとこうなるんだな、という感じでなるほどって感じでした。（版によってはないものもあるみたい？）
欧文タイポグラフィの周りはしっかり解説してくれているのですが、
「で、日本語フォントだとどないしたらええのん？」ってなるのがちょっと悲しい。（ないわけではないです。）
このあたりはちょっと物足りなさがあるのでもうちょっとなんとかならないかな。
そもそもWebに限って言えば日本語Webフォントがめちゃくちゃ使いにくいので、うーん。
この和文補足の中ではWebではどうか？についてちょっとだけ触れています。
本当にこの辺りはちょっとだけなので、Webに特化したデザインの仕方は別途学ぶ必要がありそうでした。
ともあれ結論としては、やはり一読の価値ありです。
あらゆるページの見方をちょっと意識するだけで変えられるようにできます。
余談ですが、読んでて出版業界用語？っぽいのがちらほらでてきます
そのあたりのミニ用語解説がAppendix 253ページ目にでてくるのでこちらを先に目を透しておくといい感じです。
そこに書いてないものとして気になったのは下記あたりです

• オーナメント – 文中では飾り罫のこと

• 約物 – 、。！？()「」　とかとか

• パーレン – () 丸括弧のこと。ちなみに [] がブラケットで {} がブレース

わかんなくて調べちゃいました。ノンブル（本文の外にあるページ番号とか）あたりはギリギリわかるし、インデント（段落の書き出し位置）はプログラマなんですぐわかるんですけどね。

驚いたこと

• 先頭段落は、小見出し直後の段落でも字下げを行わない。字下げを行うか、段落に空白を開けるかのどちらか一方しか使わない

• 日本語の行間は英語の行間より広くとらないといけない。bootstrapデフォルトは英語基準なので日本語では読み辛い狭さなので注意

キーワードハイライト

一度名前を言えるようになれば、あなたはそれを意識し、支配し、コントロールし、所有するようになるのです。

４つの原則：整列、近接、反復、コントラスト

デザインは意識的に、もっと力強くやりましょう。

中央揃えを選ぶなら、「とりあえず」ではなく意識的に選択しましょう。

正確に同じでないものは、はっきり異ならせるのです。

コントラストをつけるとき、臆病になってはいけません。

色使いの原則
・補色 – アクセントカラー
・トライアド – 心地よい色の組み合わせ
・スプリットコンプリメントトライアド – 洗練された鋭さをもつ組み合わせ
・類似色 – 調和のとれた組み合わせ
・シェード（暗い色）とチント（明るい色）を組み合わせる

タイポグラフィ
・カテゴリー – Oldstyle, Sans serif, Script… ゴシック、明朝、草書…
・活字のコントラスト – 大きさ、太さ、構造、形、方向、色
・衝突を避ける、正しくコントラストを作り出す