エンジニアがデザイン入門書を3冊買ってみたのでメモと雑感
自分で何かWebアプリを作るときにデザインも自分である程度満足いくレベルのものをできるようになりたくて、今年に入ってからいくつかデザインの本を買いました。
感想と勉強になったことをまとめてみます。
ノンデザイナーズ・デザインブック
![ノンデザイナーズ・デザインブック [フルカラー新装増補版]](http://ecx.images-amazon.com/images/I/41nvddaG9BL._SL160_.jpg "ノンデザイナーズ・デザインブック [フルカラー新装増補版]")
- 作者: Robin Williams,吉川典秀
- 出版社/メーカー: 毎日コミュニケーションズ
- 発売日: 2008/11/19
- メディア: 単行本（ソフトカバー）
- 購入: 58人 クリック: 1,019回
- この商品を含むブログ (107件) を見る
定番・・・なんですかね。どこかでデザイン初学者向けにオススメされていたのをみて買ってみました。
とても教科書っぽいです。ただ文章は程よく砕けていて読みやすく、理論をベースに実際の例をたくさん挙げて説明されているのでとっつきやすいです。
特に参考になった章：7章 Using color, 10章 Categories of Type
Using color -カラーを使う-
色について。
どのデザイン入門本でも必ず扱っていると思います。あとに紹介する2つの本でももちろん扱っていました。
ただ色相環についてはこの本が一番掘り下げていたように思います。
- カラーホイールの成り立ち
- 赤・青・黄色が原色
- それらの間にできる色（緑・紫・オレンジ）が２次色（等和色）
- 原色と２次色の間にできる６つの色が３次色
- ３次色でカラーパレット作る例が可愛かった。
- 補色
- カラーホイールで真向かいにある色
- 反対の色なのでアクセントとして有効
- トライアド
- プライマリー・トライアド → 原色（赤・青・黄色）
- セコンダリー・トライアド → ２次色（緑・紫・オレンジ）
- スプリット・コンプリメント・トライアド → ある1色と、その補色の両隣にある2色
- 類似色
- 隣り合う3色
- 明度と呼び名
- ヒュー → 純粋な色
- シェード → ヒューに黒が加わった暗い色
- チント → ヒュー白が加わった明るい色
Categories of Type -活字のカテゴリー-
フォントの種類について。フォントを6つのカテゴリにわけて、それらの特徴と見分け方を解説しています。
あーこの分類、Google fontのサイドメニューで絞り込むやつ！！ってなりました。
実は私フォント音痴で、セリフとサンセリフの区別がギリつく、ぐらいのレベル。。。なのでこの章は大変助かりました。
このフォント好き！っていうこだわりはあるけどそれがどのカテゴリに属すとかは全然わからない感じだったのですが、この章読んだあとなら多少見分けられるかもって思いました。
フォント用語
- セリフ
- 線の両端の出っ張り
- ストレス
- フォント内の曲線のもっとも細い部分同士を結んだライン
フォントのカテゴリ
- Oldstyle
- 手書き文字を手本にした書体（フリーハンド風という意味ではない）
- セリフがある
- 小文字のセリフは必ず斜め
- 太い部分から細い部分への推移は穏やか
- ストレスが斜め
- 多量の文字に最適
- 代表フォント： Goudy old style
- Modern
- 手書き文字の模倣ではないメカニカルな書体
- 細く水平なセリフ
- 太い部分と細い部分の推移が極端
- ストレスが垂直
- 冷たくエレガントな印象
- 多量の文字にあてるには向かない
- 代表フォント： Bodoni Poster Compressed
- Slab serif
- Modernの細い部分を太くした
- 太く水平なセリフ
- 太い部分と細い部分の推移がほとんどない
- ストレスが垂直
- 多量の文字に使えるけど、太いので全体的に（文字の色が黒ければ）暗くなる
- 代表フォント： Clarendon
- Sans serif
- セリフがない（Sans = フランス語で"〜がない"）
- 太い部分と細い部分の推移がない
- 太さが一定なのでストレスもない
- 代表フォント： Franklin Gothic
- Script
- 装飾書体、手で書いた文字のように見える書体
- 続け字のもの
- 続け字でないもの
- 普通の手書き文字のようなもの
- 伝統的なカリグラフィー書体を真似たもの
- 本文などではなくアクセントで控えめに使うこと
- 大きなサイズで飾りのように使うと効果的
- 代表フォント： Linoscript Medium
- 装飾書体、手で書いた文字のように見える書体
- Decorative
- 上記のどれにも属さない特徴的な形のフォント
- 楽しくて、目立って、使いやすくて、値段が安いことが多い
- 第一印象とあえて逆の用途に使ってみると意外性を引き出せる
- 例： FlySwim
Slab serifがいわゆるセリフ体ってことでいいのかなぁ。
この本、個人的には1点ちょっと大きな難があって、例として出ているデザインが・・・なんというか正直・・・うーん・・・・・・・・ださい。。。
というか、時代を感じるかんじです。フォントとか色使いとか。
でも解説されている理論は間違いなく基礎になる部分なので、洋書特有の小気味いい語り口調でデザインの基礎を学べるのはよかったです。
ゼロからはじめるデザイン
- 作者: 北村崇
- 出版社/メーカー: SBクリエイティブ
- 発売日: 2015/07/29
- メディア: 大型本
- この商品を含むブログ (3件) を見る
おすすめしていただいて買った本。帯にでっかく「センス不要」って書いてあって心強かった。感覚的なことが苦手なので。。
表紙と帯のデザインがとても素敵です。
こちらもわりと教科書みたい。ただノンデザイナーズ・デザインブックよりはモダンな感じで、内容もさらにブレイクダウンしてある感じです。実用的。
「ゼロからはじめる」とあるように、基本からきちんと理論と実践を解説してくれている感じで、とてもよかったです。幅広く解説してあります。
ただほんと教科書っぽく淡々と解説していく感じなので、学ぶぞ！という意気で読まないと文体には飽きちゃうかも。
でも発見は多いので面白いです。
特に参考になった章： 2章 レイアウト, 3章 造形
レイアウト
[TIPS] アイキャッチ
注目させたい要素をアイキャッチ（目に留まるもの）へと加工する方法いくつか。
- 文字の場合
- 太くする
- 大きくする
- 色を変える
- 書体を変える
- 図形の場合
- 大きくする
- 色を変える
- 動きを加える（ななめに傾けるとか）
- 形を変える
重要なのは、「一度に適用するのは2つまで」と「アイキャッチを複数作らない」。
一度に適用するのは2つまでというのは、色を変える＋大きくする はアリだけど、色を変える＋大きくする＋形を変える はゴチャついてしまうという感じ。
[実用] 黄金比や白銀比の使い方
図形や画像への黄金比の適用とかはよく見かけてたんですが、フォントサイズにも黄金比を使う例が出ていて、そちらのほうが確かに綺麗で文字の大きさにも使えるのかーとびっくりした。 5pt・10pt・15pt・20ptより、5pt・8pt・12.8pt・20.48ptのほうが大きくなっていく段階がなめらかで自然。 特定の数刻みで上げていくと、その数のフォントサイズに対する割合がどんどん小さくなっていってしまうから、比率でジャンプさせていったほうがなめらかになるんですね。なるほどでした。
造形
[基礎] 記号の用途で分類する
似たような言葉である「マーク」「サイン」「ピクトグラム」「アイコン」の意味合いの違いについて。
- マーク
- 概念をあらわすもの
- 会社などの団体や、個人を象徴するためのもの
- 商品の認証などを示すJISマークなど
- オリジナル性に重点を置くのが一般的
- 例：会社のロゴマーク、DVDのマーク
- サイン
- 標識
- 注意を促す図案
- 間違いがないよう、国際基準のものや世間一般に共通認識のあるものを使うのが一般的
- 例：⚠️、⛔️
- ピクトグラム
- アイコン
- ウェブサイトやコンピューター上で、言葉ではなく図形で意味を伝えるもの
- 小さな画面で扱われることを前提としている
- いかに文字を少なく、小さな表示範囲で意味を伝えられるかが鍵
- 絵だけでメッセージを伝えるピクトグラムと違い、表現の補助的な役割が大きい
- 言葉だけで伝わりにくかった単語や機能を直感的に伝える（例：ゴミ箱、フォルダ）
- 例：検索の虫眼鏡アイコン、時計のアイコン
これらの違いの具体的な例として、踊る人の絵を用いた以下の解説がとてもわかりやすかったです。
一つの記号をそれぞれの用途で言い換えてみるとわかりやすく、面白いです。たとえば下の絵は、マークなら「踊る団体です」、サインやピクトグラムなら「踊ってください」「踊る場所です」、アイコンなら「これをクリックすると踊ります」という意味になるのではないでしょうか。
なるほど！！！！
それぞれ用途が違うから、それぞれの用途で置き換えるだけで指すことも当然異なってきますね。
面白いと思いました。
幅広く体系的にまとまっていてとてもいいのですが、こちらも若干、本の中のサンプルが・・・
ダサいとまではいかないのですが、カッコいい！！ともならないです。それが余計に教科書感を出してるかも。
とはいえノンデザイナーズ・デザインブックよりはかなり現代感あります。
なるほどデザイン
- 作者: 筒井美希
- 出版社/メーカー: エムディエヌコーポレーション
- 発売日: 2015/07/31
- メディア: 単行本
- この商品を含むブログ (3件) を見る
出版されたときすごい評判でしたよね。読んでみて、たしかにこれはすごいなと思いました。
「目で見て楽しむデザインの本」とあるように、とにかくおしゃれ。かっこいい。
デザインの理論が紹介されているのですが、どのページもビジュアルに凝っているので、同時に参考にできるデザイン事例集でもあり、見て楽しむ写真集でもあるような。
読んでいて一番楽しかったです。
ただ理論的な掘り下げでいうとやっぱり先の2冊の方が情報量は多いです（文字数が全然違うと思います）。
こちらは直感的においしいところをつまめる感じ。デザイナーさんが好きそう。
先の2冊の半分ほどのサイズなので持ち歩くのも楽です。
特に参考になった章： 1章 編集×デザイン
編集×デザイン
デザインは「なんのためにデザインするのか」が一番大事。
その具体例として、「朝ごはんを紹介する雑誌のページ」を作っていくのですが、異なるターゲット・切り口・目的・接点がすべて異なる3パターンそれぞれに適切なデザインが例に挙げられています。
ひとつめは「料理初心者が朝食の作り方を知るための書籍」、ふたつめは「料理好きが朝食のバリエーションを楽しむための雑誌」、みっつめは「生活にこだわる人が憧れるような上質な朝の風景が載ったムック本」。
それぞれに対してロジカルに組み立てられた適切なデザインが載っていて、全然違う仕上がりになっているし明らかにそれぞれ適切なのでめちゃくちゃ説得力があります。
Whyから考えるというのは私のいる会社の文化でもあるので考え方がスッと入ってきました。
次に、実際のページデザインの過程を追っていく内容があります。
- 図解とラフ
- 載せる必要のある情報を洗い出す
- 情報の階層構造を確認する
- ラフで大まかなレイアウトを描いて階層構造を反映させる
- 方向性を決める
- 配置
- 色使い
- 画像の使い方（トリミングするかとか）
- これらで全体のテイストを決める（にぎやかとか静かとか）
- 骨格をつくる
- タイトル、写真、コラムなどそれぞれの位置や段組みを決める
- 画像をバランスよく配置する
- 情報ごとに固まり感を出す
- キャラを立たせる
- 行揃え、書体の変更、字間の調整、罫線の追加など
- あれこれ飾り付けるのではなく、上記を調整してひとつひとつの要素に個性を持たせる
- 足し算と引き算
- 狙った印象に届いていない部分にあしらいを足す
- シェイプ、色、テクスチャなど
- なくても問題ない要素は引く（なくす）
- 狙った印象に届いていない部分にあしらいを足す
- ブラッシュアップ
↑これは本見ないとわからないな。。
この段階ごとに変わっていくデザインが本当にすごくて、ここだけでも何度も読み込む価値があると思いました。
あと、自分がどの段階が苦手なのかがわかるのもいい。
私は前半はわりと今までもやってきたりしたし感覚はあるんですが、後半の足し算引き算やブラッシュアップの引き出しがないんだと気付きました。
その辺りを重点的に学べる本があったらどなたか教えてください・・・（もちろんこの本もそのひとつだと思います）
理論だけではなく、最初に挙げた「なんのためにデザインするのか」のようなそもそもの考え方をきちんとおさえているのが素晴らしいと思いました。
目的が違えば実現方法が変わるのは当たり前ですよね。
あともうほんとデザインがとにかくかっこいいです。ただそれだけに、するすると読んでしまってわかった気になっていざやろうとしたら「あれ？どうすれば・・・」みたいになりがちかもって思いました。
オススメ度
- かっこいいサンプルじゃないと燃えないタイプ
- 感覚的なタイプ
- とりあえずモチベーションを上げたいタイプ
→なるほどデザイン
- 教科書的な雰囲気に抵抗がないタイプ
- 理論的なタイプ
- 広くしっかり体系的に学びたいタイプ
→ゼロからはじめるデザイン
かなぁと思いました。
ノンデザイナーズ・デザインブックは個人的にやっぱどうしてもサンプルが・・・＞＜
あとはやっぱ既存のデザイン観察するのと実際作っていくしかないんでしょうね。それはコード書くのと一緒ですね。
目に見える部分を作れるのが楽しくてフロントエンドの方に進んだので、デザインもできるようになったら延々自家発電できて最高です。がんばりたい。
他にもおすすめの本があったら教えてください。