デザインを始めるなら抑えておきたい4つの基本原則と人の習慣[ Schooザックリ受講録]

[schooまとめ]ゼロから始めるデザインの基礎

この記事は、schooの授業、ゼロからはじめるデザインの基礎 -レイアウトの内容をさかなEXが大切だと感じた箇所のみにギュギュっと要約した内容になっています。 https://schoo.jp/class/2519 動画で受講すると、もっと分かり易いので気になった方は是非ご自身でSchooに登録してみて下さい。税込月額980円です。(アフィではないですよ笑)

講座基本情報

■デザインの基礎これからデザインをはじめる人が知っておきたい、デザイン基礎を学ぶコースです。

『そもそもデザインってなんだろう？』という根本的な部分から、レイアウト、色、文字、デザインの考え方などを、各回ごとのテーマに沿って行っていきます。また、グラフィックデザインにおける実務での応用例などもお話しします。

第一回では「デザインとはなにか」「レイアウトの基本」について学んでいきます。前半ではデザイナーの種類や、デザイナーになる為に必要なちからを学び、後半ではレイアウトについて、レイアウトの４大原則、視線の誘導方法を学んでいきます。授業を通してデザインの基礎を固めていきましょう。 ■授業のアジェンダ・デザインってなんだろう・レイアウトのルール・視線を誘導する

■講師北村崇 TIMING Design/代表

そもそもデザインってなんだろう

デザインと一言にいっても様々なものがありますが、見た目を整える事だけが"デザイン"だと思っていませんか？僕もそういった認識でしたが、どうやら違うようです。一般的にデザイナーという名がつく職種は、いくつか数えただけでも多岐に渡ります。

デザイナーの種類

- グラフィックデザイナー - Webデザイナー - ブックデザイナー - インテリアデザイナー - プロダクトデザイナー - エディトリアルデザイナー - アーバンデザイナー(街全体の設計を行う人) - ライフデザイナー(FPなどに代表される、クライアントの人生設計を行う人)

最後の２つに至っては、もはや見た目を整えるという範囲から完全にはみ出していますよね？ "問題を定義、解釈しそれいに対する解決を実行"する人が"デザイナー"であると講座内では述べられています。見た目の問題ではなく、"設計"を行うのがデザイナーである。

デザイナーとアーティストの違い

アーティストは自分を表現するデザイナーは問題を整理して、解決してあげる

というのが大きな違いです。

自己表現や意志発信 -> アーティスト他人表現や問題解決 -> デザイナー

デザイン = 問題解決という認識を持つことが大切だとのことです。

デザインに必要なもの

- 理解力 - 想像力 - コミュ力 - 知識 - 技術 - 感性(センス) - 経験(ほかの物を全て押し上げてくれる)

一言にデザイナーと言っても、上記のような多くの能力が求められます。そのうち、いわゆる美的感覚というところの"センス"は1要素でしかなく、センスよりも経験や知識、技術の方が大切であると講師の方は述べられていました。

"センスも必要だが、知識や経験が重要"

色々な経験を目にして、自分を高めていくことが必要とのことです。

レイアウトのルール

ここまではやや抽象的なお話でしたが、ここから本題に入っていきます。

デザインと言っても、紙・Webなど様々な媒体があり、配色/文字など色々な要素が含まれていますが、何はともあれまずは以下4つの原則を抑えることが基本中の基本であるとのことです。僕はこれらを知らず、何となくで今まで諸々作ってきたので頭がスッキリした感じがしました。

4大原則

[peg-image src="https://lh3.googleusercontent.com/-e9GuIJK2Qf4/WB8ETBi-HuI/AAAAAAAADx0/-zyJFlHlRNIzik7GXQERbAiws0bLzBnmwCHM/s144-o/Screenshot_20161106-162718.png" href="https://picasaweb.google.com/116818149385379809046/6349800625757189041?authkey=_eg8UVFZtgs#6349798724494827234" caption="" type="image" alt="Screenshot_20161106-162718.png" image_size="1920x1080" ]

1. 近接

近い要素毎に揃えてあげる [peg-image src="https://lh3.googleusercontent.com/-C5YniRvKddM/WB8EQdJ8s2I/AAAAAAAADx0/wrR0BtSIMxQ720KzRjHyrVmIknNaW06AQCHM/s144-o/Screenshot_20161106-162533.png" href="https://picasaweb.google.com/116818149385379809046/6349800625757189041?authkey=_eg8UVFZtgs#6349798680366461794" caption="" type="image" alt="Screenshot_20161106-162533.png" image_size="1920x1080" ]

2. 反復

パターンで繰り返すことで構成を伝える [peg-image src="https://lh3.googleusercontent.com/-G4rgcKL7nEE/WB8EVo_Ma_I/AAAAAAAADx0/pwj8_Gx8gyk4loUwj1jbLoXJlYW7l3CPwCHM/s144-o/Screenshot_20161106-163100.png" href="https://picasaweb.google.com/116818149385379809046/6349800625757189041?authkey=_eg8UVFZtgs#6349798769441926130" caption="" type="image" alt="Screenshot_20161106-163100.png" image_size="1920x1080" ]

3. 整列

基準線を意識してあげる [peg-image src="https://lh3.googleusercontent.com/-zB6xnTfi5Sg/WB8ERKLEVuI/AAAAAAAADx0/73MIyDwHpxolIg_ymDyQ7ZMeWW7T5i5hACHM/s144-o/Screenshot_20161106-162549.png" href="https://picasaweb.google.com/116818149385379809046/6349800625757189041?authkey=_eg8UVFZtgs#6349798692450752226" caption="" type="image" alt="Screenshot_20161106-162549.png" image_size="1920x1080" ]

4. 対比 (コントラスト)

優先順位をつけてあげる太字・色で重要度を表現 [peg-image src="https://lh3.googleusercontent.com/-vO2ikLo64_w/WB8EWtzui6I/AAAAAAAADx0/awpDYIyLo2scKq7vwFpP8UawB9KOgjzsgCHM/s144-o/Screenshot_20161106-163225.png" href="https://picasaweb.google.com/116818149385379809046/6349800625757189041?authkey=_eg8UVFZtgs#6349798787915877282" caption="" type="image" alt="Screenshot_20161106-163225.png" image_size="1920x1080" ]

視線の誘導

[peg-image src="https://lh3.googleusercontent.com/-ncX5qyBPFAs/WB8EYaM2YVI/AAAAAAAADx0/t-b-ji5XW1kOjPV3dE2g-U3wV26jEYsYACHM/s144-o/Screenshot_20161106-163725.png" href="https://picasaweb.google.com/116818149385379809046/6349800625757189041?authkey=_eg8UVFZtgs#6349798817012277586" caption="" type="image" alt="Screenshot_20161106-163725.png" image_size="1920x1080" ]

視線を誘導する方法ってどんな物が思いつきますか？

パースや色動き余白や文字サイズ...などなど

Z型

文字を読むときは、左から右にを繰り返していく。大事な要素は左上に持ってくることが大切です。 [peg-image src="https://lh3.googleusercontent.com/-vYmlnoobL3k/WB8Ea1zwTaI/AAAAAAAADx4/zaHXps4k958Coz6VGWRN-Iq2bvcEKYSDwCHM/s144-o/Screenshot_20161106-164030.png" href="https://picasaweb.google.com/116818149385379809046/6349800625757189041?authkey=_eg8UVFZtgs#6349798858782952866" caption="" type="image" alt="Screenshot_20161106-164030.png" image_size="1920x1080" ]

F型

こちらは実際の読み進め方ではありません。下に進めば進むほどどんどん人は興味を失っていくという性質を表す型です。 [peg-image src="https://lh3.googleusercontent.com/-_Y7Wjd1I8xw/WB8EcJaCk9I/AAAAAAAADx4/ajpiE8X-TgQguKNm4hKHYSYdWs5r77VmACHM/s144-o/Screenshot_20161106-164252.png" href="https://picasaweb.google.com/116818149385379809046/6349800625757189041?authkey=_eg8UVFZtgs#6349798881223676882" caption="" type="image" alt="Screenshot_20161106-164252.png" image_size="1920x1080" ]

N型

日本の小説や和文の形式 -> 雰囲気を変えられるので便利　 Webだと結構難しい [peg-image src="https://lh3.googleusercontent.com/-tUYUQC6MQRs/WB8EdAX_CGI/AAAAAAAADx4/hS0xgEdqcOQcNXUpdBLFoLzMgB6Y2NPBwCHM/s144-o/Screenshot_20161106-164314.png" href="https://picasaweb.google.com/116818149385379809046/6349800625757189041?authkey=_eg8UVFZtgs#6349798895979006050" caption="" type="image" alt="Screenshot_20161106-164314.png" image_size="1920x1080" ]

習慣による誘導

人間には、"緑色に安心感を感じる"、"まず初めに人の顔に目が行ってしまう"といったような意識的な部分を超えた、習慣というものを持っています。こういった心理学の知見をデザインに取り入れる事も、問題解決を行うための有効な手立てと成り得ます。 [peg-image src="https://lh3.googleusercontent.com/-jR2vVXlWyk0/WB8EfchR5rI/AAAAAAAADx4/KRyA7JfCeGsJGuOP4JjDUjhvmTfRYU94gCHM/s144-o/Screenshot_20161106-164738.png" href="https://picasaweb.google.com/116818149385379809046/6349800625757189041?authkey=_eg8UVFZtgs#6349798937893922482" caption="" type="image" alt="Screenshot_20161106-164738.png" image_size="1920x1080" ]

強制的な誘導

以下の画像を見て、どこに目が行きましたか？ある人は、■に目がいったかもしれないですし、ある人は☆かもしれません。このように"見る人によって解釈が異なってしまう"デザインは、良くないデザインであり、視点の動きを習慣の力を使って設計してあげる必要があります。 [peg-image src="https://lh3.googleusercontent.com/-l9p_Webqmqg/WB8EgK-mFFI/AAAAAAAADx4/5tKA6WsitzcrI5qKHk3LF0-f1VqmH8ATwCHM/s144-o/Screenshot_20161106-164757.png" href="https://picasaweb.google.com/116818149385379809046/6349800625757189041?authkey=_eg8UVFZtgs#6349798950364910674" caption="" type="image" alt="Screenshot_20161106-164757.png" image_size="1920x1080" ]

矢印で示す

道路標識など矢印は強制力が強い(Affordance) [peg-image src="https://lh3.googleusercontent.com/-WqbqJqRrQQE/WB8EhY7IRoI/AAAAAAAADx4/qSnPCtSo2-A6v8QWpB0aRjOi9OjcQWadgCHM/s144-o/Screenshot_20161106-164854.png" href="https://picasaweb.google.com/116818149385379809046/6349800625757189041?authkey=_eg8UVFZtgs#6349798971288340098" caption="" type="image" alt="Screenshot_20161106-164854.png" image_size="1920x1080" ]

数字で示す

しっかりと順番通りに見てくれる遊びを持たせてあげようという時には、遊びながらもユーザーを導く力になる [peg-image src="https://lh3.googleusercontent.com/-9N0m9MpEQq8/WB8EiGgBrVI/AAAAAAAADx4/a8p01M2bpWguKIHTTuqEnEQQGya8QGXmACHM/s144-o/Screenshot_20161106-165024.png" href="https://picasaweb.google.com/116818149385379809046/6349800625757189041?authkey=_eg8UVFZtgs#6349798983522692434" caption="" type="image" alt="Screenshot_20161106-165024.png" image_size="1920x1080" ]

意外に、思っている以上にみんな誘導されているということが分かるのでは無いでしょうか？これらの習慣についてより深く学びたい場合は、心理学 / デザイン心理学の書籍に当たると良いそうです。

[peg-image src="https://lh3.googleusercontent.com/-Ul-kyOySetQ/WB8EjBFaXWI/AAAAAAAADx4/fs7FDBoaoLkRL3nCPoFFCGys5eQkHxirgCHM/s144-o/Screenshot_20161106-165258.png" href="https://picasaweb.google.com/116818149385379809046/6349800625757189041?authkey=_eg8UVFZtgs#6349798999248756066" caption="" type="image" alt="Screenshot_20161106-165258.png" image_size="1920x1080" ]

☆おまけ - 人の顔で引きつけておいて、商品の写真を顔の近くに持ってくる。 - 服だけ置いてあるよりも、マネキンに着せてあった方が視線が集まりやすいというのも、人間の習慣を使った常套テクニックだそうです！

視線による誘導

さて、以下のデザインはどちらが正解(セオリー通り)でしょうか？？？ [peg-image src="https://lh3.googleusercontent.com/-I_yClS-nnn0/WB8EkLsc9zI/AAAAAAAADx4/N4dn1_ukxL0UrbNYmboDpnq8GvCjr1aygCHM/s144-o/Screenshot_20161106-165406.png" href="https://picasaweb.google.com/116818149385379809046/6349800625757189041?authkey=_eg8UVFZtgs#6349799019276728114" caption="" type="image" alt="Screenshot_20161106-165406.png" image_size="1920x1080" ]

正解はB 人間は誰かが見ているとハッと振り返る。人は目線を追っていく傾向がある ->右に何かあるレイアウトを想起させる

まとめ

[peg-image src="https://lh3.googleusercontent.com/-1GV1z6LBdxI/WB8EoEvVwzI/AAAAAAAADx4/2P8JlJgUYFcSLPIjCxrIPoraBO5AldAiQCHM/s144-o/Screenshot_20161106-170420.png" href="https://picasaweb.google.com/116818149385379809046/6349800625757189041?authkey=_eg8UVFZtgs#6349799086129267506" caption="" type="image" alt="Screenshot_20161106-170420.png" image_size="1920x1080" ]

☆おまけ中吊り広告の下端は遠くから見ても重ならないので、重要な情報を掲載してあげる。どういう状況で使われるかをしっかりと考えて、状況に応じてセオリーを破ることも時には大切です。 [peg-image src="https://lh3.googleusercontent.com/-1GV1z6LBdxI/WB8EoEvVwzI/AAAAAAAADx4/2P8JlJgUYFcSLPIjCxrIPoraBO5AldAiQCHM/s144-o/Screenshot_20161106-170420.png" href="https://picasaweb.google.com/116818149385379809046/6349800625757189041?authkey=_eg8UVFZtgs#6349799086129267506" caption="" type="image" alt="Screenshot_20161106-170420.png" image_size="1920x1080" ]