社内クリエイターになりたい私。デザイン未経験者がデザインの基本を学ぶ！
こんにちは。HIGH-FIVE編集部のカナです！今日は「ノンデザイナーズ・デザインブック」を使用して、デザインの基本を学んでいきます。私と同じようなデザイン初心者の方をはじめ、自分にもこんな時期あったな～と懐かしんでくださる現クリエイターの皆様にも読んでいただけたら嬉しいです＾＾
■はじめに
普段は東京・新橋にあるクリーク・アンド・リバー社の中で、コンテンツディレクターとしてWebクリエイター・デザイナーへ向けた転職、求人情報の発信を行っている私なのですが…
私自身もデザインのことをもっと勉強したいと思い、編集長アベのもとAdobe Illustrator・Photoshopの勉強を始めました。いずれは社内クリエイターとして編集部に貢献できるような存在になりたいと、ひそかな夢を叶えるために奮闘中。noteでは週一回開催されるアベの講習会で学んだことや、できるようになったことを記録していこうと思います。
この前やっと、本当にやっとMacbookとソフトが手に入りましたので、本日からいよいよ講習会スタートです！
■良いデザインってなに？
ーノンデザイナーズ・デザインブックとは？
デザインのプロでもなければ、学習に割ける時間もあまりない…自分の作るページや制作物を見栄え良くする方法を知りたい！という人のための本。デザインの基本となる「デザインの四原則」を学ぶことができます。第1版発売から20年以上ずっと愛され続けているロングセラー本！
第1回目の講習会は、「ノンデザイナーズ・デザインブック」を使用して、デザインの基本を学んでいきます。アベからの「この絵の中から問題点を最低9個探してほしい」という課題からスタート。これを見つけられるかどうかで基本的なセンスが備わっているかわかるんだよね～！…だそう。これは何としてでも探し出さなければ、これからのモチベーションが保てない！！と思い、必死で本とにらめっこしました。
……余白って左右上下で揃えるよな、ここに文字あるの読みづらいよな、とか苦戦しながらもなんとか9個見つけ出すことに成功。普段意識せずに資料を作っていましたが、"デザイン"としてみると、こんなにも少しのズレや違和感が気持ち悪く見えてくるのかと、うっすらデザイナーの皆様の見えている世界を体感した気分でした（笑）
でもこのクリエイティブを見て、
「ここ揃っていたほうが綺麗だよなあ～でも揃えたら普通すぎる。あえて揃っていないほうが面白いよな～」
「ここなんとなく読みづらいな～でも見たことないような奇抜な配置でお洒落かも」
とか、"デザインとして""あえて"そうしてるといってしまえばそれまでだよな……と感じるところもあり。結局良いデザインって何なんだろうと考えるきっかけになりました。
と、いうことをアベに伝えると、
「確かに"デザインで""あえて"そうしているものも沢山あると思います。でもそれらが良いデザインと言えるのは、ちゃんとデザインの基礎・ルールを熟知したうえで、デザイナーの手癖や好みをエッセンスとして足しているから。
見る人が見れば、デザインを知らない人がただ自分の好みを詰め込んで作ったのものなのか、デザインを知っているうえでエッセンスを足したデザインなのか、一目瞭然なんですよ。カナさんは絵も描けるし、センスだけでやっても80点は取れると思うんです。でもそこにこれから知識をプラスして、100点、いや120点を出せるクリエイターになれたらいいですね！」
……とのことでした。なるほど、奥が深い！
■デザインの基本を学ぶ
次に名刺を例に、デザインの基本原則や人間の目の動きについて学びました。名刺をはじめ広告でもプレゼン資料でも、普段何気なく読み取っている文字情報ですが、読み取る順番とか重要度とか、デザインによってコントロールされているんだなと改めて実感。
ー近接
いくつかの項目が近くに配置されている場合、それらは個別の構成単位ではなく、一つの構成単位になる。そのため、関連する項目はグループ化してまとめることで、読まれる可能性が高くなる。
左の名刺は見た瞬間に真ん中の文字が目に入るが、ばらばらと四隅にレイアウトされた小さい文字はなんとなく読む気がしない。右はグループ化されていることでひとまとまりに捉えることができ、自然とすべての情報を満遍なく捉えようという意識になる。
ー整列
ページ上にあるそれぞれの要素が統一され、関連しているようにするためには、視覚的に結びつける紐が必要。たとえ空間的に要素が離れてしまっていても、揃えて配置することができる要素を必ず見つけることが大切。
左は中央と四隅に文字が配置されているため、中央の文字に視線がいった後、次はどこを読んだらいいか戸惑ってしまう。右は文末が揃えられているために自然と視線が上から下に流れ、関連した情報として最後まで受け取ることができる。視線の導線があるとストレスが無い！
ー反復
フォント、色、配置などの特徴をデザイン全体を通して繰り返すことで、視覚的な一貫性が生まれる。また単調なデザインを防ぐことにもつながり、リズム感のある面白さを加えることもできる。
左では下まで読み終わった後、目線がさまよってしまうか、読み終えてこのデザインにとどまることはしなくなる。右は電話番号に太字を使用したことで、もう一か所太字が使用されている名前部分に視線が戻る。よって右のデザインのほうが、目線をより長くこのデザイン上に引き留めておくことができる。
■講座で学んだこと
ノンデザイナーズ・デザインブックには、「文字は並べたほうが良い」「太字を使ってコントラストを付けたほうが良い」など、デザインの授業を受けていなくても分かるような基本的なことが書いてあります。
でもこれらをひとつひとつ理解し、デザインの基本をしっかり意識してレイアウトするしないでは、制作物のクオリティに大きな違いが出てくるなと、この本を読んで感じました。
同じ情報を伝えるにしても、文字の大きさ、太さ、配置によって、伝わる温度感が全然違う。どこから見始めて、どの順序で見て、どこで見終えて、見終えた後はどこにいくのか。見えないユーザーの目の動きや頭の中を考えて考えて形にすることが、「デザインする」ということなんだなと知ることができた時間でした。
"好みを入れるなら、まずはデザインの基本を分かってから！"
by編集長
はい、とても勉強になりました（泣）
次回はいよいよAdobe Illustratorを使ってみます！
最後までお読みいただきありがとうございました＾＾
■参考書
私、実用書とか文字いっぱいで苦手なのですが（コンテンツディレクターのくせにすみません）これはとっても読みやすく参考になりました！アベ曰くデザインの基礎がすべて詰まっているそうです。手元に置いておきたい一冊でした。