ノンデザイナーズ・デザインブックを一読しました。

どうもお久しぶりです。Reoです。

最近はメンタルヘルスがよろしくなく、どうにもアプリ開発をする気になれずに過ごしていました。

せめて何かしないとということで、数年前に「ノンデザイナーズ・デザインブック」を購入して読んでないことを思い出し、引っ張り出してきて一読しました。

今回読んだのは「ノンデザイナーズ・デザインブック」の「フルカラー新装増補版」です。

ノンデザイナーズ・デザインブック [フルカラー新装増補版]

中古価格
¥705から
(2018/1/30 01:52時点)

新品価格がアホ高いん。定価は2000円です。

今だと「第4版」が出版されています。

ノンデザイナーズ・デザインブック [第4版]

中古価格
¥2,980から
(2018/1/30 01:56時点)

文章がキツキツに書かれている本ではないので、結構サクッと読めます。

上記2つの比較をした記事がありましたので、リンク貼らさせていただきます。是非参考にしてみてください。

 

 

本書はもうめちゃくちゃ有名なので、レビューだとか概要だとかはググったら山ほど出てきます。

ザックリというと、「デザインの基本原則」と「色」と「活字」について学べる本です。

自分はUIデザインやWebデザインぐらいしかやらないんですけど、本書はどちらかというと印刷物のデザインが学べます。

とはいっても「全てのデザインに通ずる基本」が書かれているのでとても勉強になりました。

名刺やポスター・チラシ・ハガキ等のどれかのデザインは、誰だって一度はどこかでやったことあるんじゃないかなと思います。

学生時代にでも、名刺や新聞・チラシなんかを作る課題とかありましたよね。小学生ぐらいの記憶ない時かもしれませんが。自分も何作ったかは覚えてないです。

 

例えばアプリの企画をプレゼンテーションすることになったら…

例えば何かの場で登壇することになってプレゼンテーション用のスライドを作らないといけない!というとき。

誰でも急にそういう機会ができるかもしれません。

本書ではスライドのデザインについては1つも書かれていませんが、いい題材かなーと思ったので適当に書いていこうと思います。

例えばアプリの企画をプレゼンするためのスライドを作ることになったら。

本書に沿った形でちょろーっと書いてみます。自分自身デザインはあんまり得意じゃないけど、書いてあることを生かすとこうなったよ!という風に見ていただければ。生かせているかは謎ですが。

 

まず本書ではデザインの4つの基本原則として「コントラスト」「反復」「整列」「近接」の説明があります。

 

近接

関連する項目は近づけてグループ化します。

例えばプレゼンテーションの1枚目。

どちらが見やすく情報が伝わりやすいかは、明らかだと思います。

関係するものを近づけ、関係ないものは遠ざけるだけです。

 

整列

本書ではとりあえずで中央揃えにするのをやめようと書いてあるので、まずは中央揃えをやめました。

中央揃えも悪くないけど、右や左揃えのほうが強い縁の線が生まれる!そうすると少し洗練された見栄えになるそう。

まずは同じページ内で複数の整列を使うのをやめると良いらしいですぞ。

いつもの自分だとタイトルを左揃えにして、作成者名とかは右揃えにする気がしますねぇ・・・。

 

コントラスト

コントラストは大きいものは大きく、小さいものは小さくしてはっきりと違いをつけるということです。

スライドは発表時に見せるだけのものなのか、プリントして頒布するのかにもよって文字サイズを調整しないといけないかなーとも思いますが、とりあえずこんな風にしてみました。

実際、コントラストをつけるのが一番楽しくて難しくて、センスいるよね・・・。

とりあえずは本書の例を真似する形で作ってみました。

日付は頒布された資料をいつだっけ?って見るときぐらいにしか見ないんじゃと思ったので、読める範囲の小ささにしました。発表時には目のいい人にしか見えないけれど、その時必要ではないと思ったので。

 

反復

反復はデザイン上の何かの特徴を繰り返すことです。

一つ前のコントラストをつけた画像でも反復はすでに使われています。

タイトルと名前に同じ書体と背景を用いているところですね〜。

スライドだと、一貫して同じテーマについて話していることがわかる「何か」があればいいはず。

こんな感じにしてみました。

ナビゲーションの入るところに日付を配置しないほうがいいのか・・・?とも思いつつ。

全てのページ下部に罫線を引いてみました。

約物にRobinのロゴで使われているoの部分を取り出して使ってみました。これがあることで、実際のアプリとの一貫性をだすことができたはず。

 

 

以上の4つを本書ではもっと詳しく説明されています。

自分なんかは本を読んで得たはずの知識でやってみただけなので、正しいかどうかも実際にはわからないです。
是非実際の本を読んでみてくださいね。

 

色の説明

基本原則の説明の後に、「色」の使い方についての説明があります。

色の説明は20ページに満たない程度ですが、それでも簡潔にわかりやすく書かれています。

補色とは?トライアドとは?シェードとチントとは?

わからない単語があれば、十分に読む価値があると思います。

 

でも配色を決めるのにトライアド使おうとか、そんな言葉スッと出てこないよとは思います。でも言葉を覚えることも大事ですからね。頑張って覚えます・・・。

 

活字の説明

本書の3分の1くらいは活字の説明になっています。

とはいっても基本原則は必ず用いられているので、その復習をしながら活字を学ぶという形です。

日本語フォントについては洋書なので、巻末にちょっとだけついている程度です。

でも活字についてはすごいタメになったよ!!

 

例えば、同じページで複数のフォントを使うとき。

自分は太さははっきりと区別をつけるようにしていた(はずだ)けれど、大抵「似たような」フォントを選んでいました。

日本語フォントでいうと、手書き系と手書き系。太さは違うけど形は似ているやつ。

これが良くなかったんだな〜〜〜〜って気づきました。

 

第10章の「活字のカテゴリー」で、書体を6つに分類します。

Oldstyle/Modern/Slab serif/Sans serif/Script/Decorativeの6つです。

デザインをちょいちょいやりながら、書体の「セリフ」って何か知らなかったんですね。はえーってなりました。あれがセリフか・・・。

サンセリフはよく目にする単語なんですが、実際にサンセリフがどのような特徴を持った書体なのかは知りませんでした。セリフが「ない」ほうなんだね・・・。

複数の書体を分類するクイズがあるんですが、ちゃんと意識して見ないとわからない。

ふと、パソコンから目を離して辺りを見渡すと、部屋の中だけでも様々な書体が散らばってるんですよね。(散らかってるからでは?とか言わないでq(〃・`з・´〃)p

グラスやパッケージ、ノートの表紙、コースター。6つに分類名を知ったので、これはサンセリフ!これはスラブセリフ?それともモダン?なんてことを考えることができます。

 

「複数の書体を使って衝突するときはまず類似点を探すことが大事」というのが、とてもタメになりました。

さっきのスライドもフォント超迷ったんですけど、結局似てるやつな気がして何ともいえないお気持ち。でも超ポップなタイトルに明朝体もなんか違くない・・・。日本語はわからん・・・。

 

個人的総評

個人的にはとても良かった。ベリーグッドです。

チラチラとレビューを見ているんですが、「サンプルが古臭い」という意見をみつけました。

気持ちはわからんでもないです。

自分がサンプルの古臭さを感じたのはWebデザインの部分ですね。

ページの横幅は800pxでおさめよう!って書いてあるのはoh…と思いました。最近は画面いっぱいなのばっかりなのになぁと思いつつ。

これはダメ!に出てくるサンプルが、css全く使ってないみたいな・・・流石にこれは今作る人はいないよ〜とは思いましたね。

良い方のサンプルは、古臭いと言えばそうかもしれないけど、そこまでなんじゃないかなーと思います。個人的には良いデザインは流行がどうであれ、良く見えるから良いデザインであるとも思いますしね。

 

やっぱり基礎の基礎を学ぶための本なんですよね。

カッコイイデザインができるようになるというよりは、最低限こんぐらいは知っててよ〜っていうのを知るための本な気がします。

 

この本の大前提は「知は力なり」という古い諺です。たいていの人は、悲惨なデザインのページを見て、気に入らないということはできますが、それを直す方法を知らないものです。
ノンデザイナーズ・デザインブックより

 

何が気に入らないのか、口に出して言えるようになるための本です。

以前、自分がデザインしたUIを友達に見てもらったときに、その友達は「画像の端ちゃんと揃えて」「左揃えと右揃え混ざっててごちゃごちゃしてる」とはっきりどこが悪いのか言われました。

何かキモチワルイ・居心地が悪いデザインだけどなんでそうなの?ってわからないから直せない。

そういう時に基本原則を思い出して「あー近接がうまくいってないのかー」って口に出せることが大切なんだと思いました。

 

あとは本書の第1章の話が地味に好きです。「ジョシュアツリーの悟り」

木の見分け方の図鑑で「ジョシュアツリー」という変わった形の木を覚え、こんな変わった木は見たことないぞと思ったのに、実は家の周りにたくさん植えてあったぞというお話。

名前を知らないから見たことがないと思う、名前を知って初めて意識する。

 

東京でかわいい雑貨屋さんをみつけた、ここなんて名前のお店だろう〜と調べて、地元に戻ってみるといつも行くショッピングモールに入っていた!なんてことはわりとよくありますよね。ないですかね。

でもそれと同じで、名前を知ることってすごく大事なんだと思いました。

デザインの基本原則の話も、色の話も、活字の話も、「名前を知って意識するため」にこの本がとても役に立ちます。

 

自分なんかはお前それでもデザイン系の学校に少し通っていたのかっていうレベルでお恥ずかしい限りです。基本自主的にやらないと頭に入ってこないからね・・・。

 

というわけで、ノンデザイナーの方もデザインを始めたばかりの方も、まだ読んだことない方は是非読んでみてくださいな。

画像多いし、空白も多いので結構サクッと読めちゃうと思います。

 

ではでは。

 

ノンデザイナーズ・デザインブック [第4版]

中古価格
¥2,980から
(2018/1/30 01:56時点)

2018/04/13追記
デザイン難しい。この本読んだの生かされてるんだろうか・・・。
Book ,
コメントは認証制です。詳しくは下記の注意をお読みください。お気軽にコメントお願いします!

コメントを残す

コメント時の注意

「Twitter」「Facebook」「Google+」「WordPress」のいずれかのアカウントをお持ちの方は各アカウントと連携することでコメントできます。 コメントしたことはSNSに流れませんので、アカウントをお持ちの方はこちらの方法でコメントを投稿して下さると嬉しいです。 アカウントをお持ちでない方はメールアドレスで投稿することができます。 初回コメント時は承認後に表示されます。