余白を生かした洗練されたデザインレイアウトを学ぶ

レイアウト関係の本を読みたいなーと思い調べていたところ、『けっきょく、よはく。 余白を活かしたデザインレイアウトの本』という本のよい評判をちらほらみかけました。


<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">「けっきょく、よはく。」<br>シンプル系・今風のデザインが好きで、なんとなくデザインできるけど明確に分からないって人にオススメしたい！<br>レイアウト例も多くて、NGとOKを横並びに説明してくれるから分かりやす〜い <a href="https://t.co/DCVbUCtRxX">pic.twitter.com/DCVbUCtRxX</a></p>&mdash; 三耶のし (@noshi_land) <a href="https://twitter.com/noshi_land/status/1043738872876679168?ref_src=twsrc%5Etfw">2018年9月23日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">けっきょく、よはく。<br><br>Twitterで見かけてすぐ買ったんだけど、なるほどデザインに続くわたしのバイブルになりました。すさまじく良本。 <a href="https://t.co/LqrJzzdAMT">pic.twitter.com/LqrJzzdAMT</a></p>&mdash; ふわふわ (@1ROOOOOM) <a href="https://twitter.com/1ROOOOOM/status/1042389769009819648?ref_src=twsrc%5Etfw">2018年9月19日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">けっきょく、よはく。、やりがちなミスがたくさんのってて、それに対して何がダメでどうしたらいいのか明確にかいてあるのでありがたい あと作例の質がなかなか高くてとてもいい</p>&mdash; わたしはもう大丈夫 (@_l1n1l_) <a href="https://twitter.com/_l1n1l_/status/1043443916882599937?ref_src=twsrc%5Etfw">2018年9月22日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


レイアウトの本はいくつか読んできましたが、評判も気になり読んでみようと購入しました。
ちなみに2018/7/20に発売されたばかりで、2018/9/28現在グラフィックデザインのジャンルで1位のようです。
![ベストセラーのキャプチャ.PNG](https://qiita-image-store.s3.amazonaws.com/0/225425/d8890d92-a572-d443-57f7-57ed1e9b02c0.png)





こちらの本では「悪くはないけれどおしゃれでもないデザインをどう変えたらいいのか」といった観点でさまざまなデザインを赤入れしてbefore/afterを載せています。

- カフェメニューのポスター
- お菓子のパッケージデザイン
- 学校案内のパンフデザイン
- プレゼン資料デザイン
- ショールームのフライヤー

など事例34ほど。

 内容は新米デザイナーが作ったデザインとベテランデザイナーがデザインしたものを見比べる本です。改善ポイントを細かく指摘されており、新米デザイナーの例が「あーそういう風にやってしまう気持ち分かる。。。」と頷きながら読み進めました。
デザインをやる機会が減ってきている自分にとって様々なデザインに触れ、考えるよいきっかけとなりました。
全体を通して学んだポイントを整理していきたいと思います。

### <font color="Salmon">①ベタ塗りの多様と情報のグループ化</font>
背景1色のエリアに対して文字情報を装飾せずに載せている箇所は目立って見やすいです。また一つの塊として目に入るので情報を把握しやすいといったメリットもあります。しかし、そのエリアが大きければ大きいほど圧迫感も増してしまい、他の要素が霞んでしまうというデメリットがあるので避けたいところ。罫線や余白などを使って文字情報を要素ごとにまとめるといった可読性をあげる手法で解決したいですね。


### <font color="Salmon">②写真は切り抜いて遊び心を入れる</font>
レストランメニューのNGレイアウトで全て同じサイズの写真を整列させて並ばせていたところを、写真をお皿で切り抜き動きのあるレイアウトにする案が載っていました。同じサイズで整列されたレイアウトは単調な組み合わせになりがちなので注意です。

### <font color="Salmon">③メイン写真はダイナミックに</font>
思い切ったメインビジュアルで商品の世界観や魅力を伝えられるのならばダイナミックに使用し、他の情報が邪魔にならないように工夫したほうがよさそうです（色、余白など）

### <font color="Salmon">④”●つのポイント”などの項目を図形を使って視覚的に伝える</font>
会社のパンフレットのデザインレイアウト例で、指摘されていたうちの一つ、項目の伝え方。
例としてあがっていたのは箇条書きになっている品質・環境方針の部分です。

品質・環境方針として・・・
1. 事業活動による環境の...
2. 設計・施工を通して...

上記のような番号付きリストで方針を文章で伝えていたところ、赤入れ後では円や四角形などを使用し”項目がいくつあるのか”を視覚的に伝えるといった工夫をされています。箇条書きが増えてくると単調なデザインで読者を飽きさせてしまうので、動きを作ってインパクトにも気を配りたいです。


### <font color="Salmon">⑤構図にとらわれすぎない</font>
マッサージサロンの三つ折りリーフレットのデザインレイアウト例で3分割にとらわれたデザインがNG例にあがっていました。伝えたいコンテンツが大まかにわけて3つだとなおさらそのようなレイアウトをしがちですが、紙面全体を使って広々としたレイアウトのほうがより空間をうまく伝えられます。さらにはグラデーションや透過をうまく使うことで『空間の広がり＝リラックスできる場所』を伝えるといった手法もとても参考になりました。



## 所感
新たな気付きをまとめると、当たり前のことを文字で伝えているだけですし伝わりづらいですね、、、
著作権の関係上before/afterのデザインを掲載できないので歯がゆいですが、以下の記事で紙面が何ページか掲載されているのでそちらにも目を通してもらえると本のイメージがつかめると思います。

[週末読みたい本『けっきょく、よはく。 余白を活かしたデザインレイアウトの本』 - ツイナビ]
(https://twinavi.jp/topics/culture/5ba425fb-f558-4b97-ac7f-14605546ec81)
https://twinavi.jp/topics/culture/5ba425fb-f558-4b97-ac7f-14605546ec81

この本を読み始める前までは余白のことしか書かれていないのかな？と不安になりましたが、余白を活用した洗練されたレイアウトにするポイントを「配色」「トリミング」「情報のグループ化」「整列」などを交えながら豊富な例で解説してくれる良書でした。

新米デザイナーの人は本の新米デザイナーとして登場する人に共感でき、ベテランデザイナーは新米デザイナーを指導するときにどのように指摘すればいいのかの参考になり、私のようなデザインに多少ブランクがある人は感覚を取り戻せるような、三者三様の使い方ができる本だと思います。
おすすめです:ok_hand_tone1:

ここ最近はインプットの時間が多かったので、アウトプットとのバランスをうまく保ちながらスキルアップしていきたいと思います。

## リンク
- amazon『けっきょく、よはく。 余白を活かしたデザインレイアウトの本』　https://goo.gl/tp1YvZ