見出し画像

デザイン未経験者こそ知っておきたいデザインの基本4原則

YAMA

おそらく、多くの方が「デザイン＝センス」というイメージを持たれていると思います。しかし、実はデザインには原則があり、その原則さえ学べば誰でもある一定のクオリティは担保できます。

たとえノンデザイナー（デザイン未経験者）でもデザインの基礎的な部分を押さえておくことで、デザインスキルを高めることが可能です。

今回ご紹介するのは、デザインの基礎の基礎となる4つの原則ですが、これを身につけるだけで、Webデザインに限らず、提案資料やちょっとしたレポートを作る際にも、格段にわかりやすくまとめることができる大変便利な法則です。

デザインの4つの基本原則

デザインの一番の目的は、「伝えたいことをしっかりと伝わる」こと。もちろん見た目の美しさも大事ですが、「しっかりと伝える」ことができて、初めて見た目を“凝る”ことができるはずです。

デザインの4つの基本原則
・近接(Proximity)
・整列(Alignment)
・強弱(Contrast)
・反復(Repetition)

今回ご紹介するデザインの4つの基本原則は、デザインの基本を理解する上でとても役に立ちます。これらを理解することで、デザインノンデザイナーの方でも、相手に伝わる分かりやすいデザインを作ることができるようになると思います。

以下では、様々な場面で役に立つデザインの4つの基本原則をそれぞれご紹介したいと思います。この4原則を意識するだけで、上司やお客さんに褒められるような綺麗な資料を作成できるかもしれません！

近接(Proximity)
人間は、近くに並べられたものを無意識のうちにグループ（関係があるもの）として認識する習性があります。同じグループの要素同士の余白を狭くとり近くに配置し、それぞれのグループ間の余白を広く取ることによって、1つずつのグループの境界が明白になり、それぞれの要素の“関係性”を作ることができます。

まず、下記の画像をご覧ください。

ボックス同士の間隔（余白）がどれも同じで、それぞれが孤立しているように見えます。では、近接の法則を意識して、それぞれの関係性を整理してあげましょう。

この画像の場合、3つのグループに分けられていることが分かると思います。このように、同じグループの要素は近くに配置して、それぞれのグループ間の距離を少し大きめに取ることによって、それを見た瞬間にグループに分けられているということを理解することができます。

近接のポイントは「余白」
関係する要素同士の余白は近く、そうでないものの要素の余白は広く、といったように余白の一つ一つを整理し、近接を効果的に使いましょう。この余白の取り方1つを意識するだけで「分かりやすい」デザインを作ることができると思います。

整列(Alignment)
次は整列です。デザインの中の要素を整列させることによって、見た目が整ったすっきりとした印象を与えることができます。

下記の画像では、それぞれの要素がバラバラに並べられ、統一感の無いデザインになってしまっています。

それに対して、下記の画像ではテキストの左端がきれいに整えられているため、とてもすっきりとした印象のデザインに仕上がっています。

整列のポイントは「見えない線」
整列によって左端に「見えない線」を意識することで、画面がすっきりと整理されて読みやすいデザインになりました。なんかまとまりがないなぁと感じたら「基準となる線」をいくつか探し、揃えられるものは全て揃えてみましょう。そうすることによりまとまりができて、目線が泳がず、読みやすいデザインになるはずです！

強弱(Contrast)
デザインの中で強弱を適切につけることによって、それを見た人が理解するスピードが早くなり、「直感的に伝わるデザイン」を作ることができます。

情報にはそれぞれ重要度の優先順位があります。より重要な情報は目立つようにデザインしなければ、見る人に伝えたいことを伝えることはできません。

まずはこちらの画像をご覧ください。

上記の画像では、それぞれの要素が同じ形、同じ色、同じ余白で並んでいるため、いずれの要素にも目が止まらずスッと流されてしまう可能性があります。また、仮にこの中に一番見て欲しい要素があったとしても、他の要素との違いがないので、狙い通りにその要素を見てもらうことができないんです。

では、実は注目して欲しかった要素のみに強調の原則を利用してみたいと思います。

いかがですか？注目して欲しかった要素の色と大きさを変えるだけで、無意識にある1つのボックス（注目して欲しかった要素）に目がいったかと思います。このように、デザインでは強弱を適切につけることによって、大事な情報をしっかりと伝えることができ、分かりやすいデザインを作ることができます。

反復(Repetition)
視覚的要素を繰り返し用いることによって、そこに一貫性や統一感が生まれ、「まとまりのあるデザイン」を作ることができます。

上記の画像は、それぞれの要素前にあるアイコンの形や色がバラバラで統一感の無いデザインになってしまっています。

このようにそれぞれの要素のデザインを揃えることによって、全体に統一感が生まれます。要素を繰り返し用いることで一貫性や統一感のあるレイアウトになっているのが分かるかと思います。

反復のポイントは「リズム」
同じものを繰り返すことは、「リズム」をつけること。反復をしっかりとデザインの中に取り入れることによってリズムが生まれ、心地よく分かりやすいデザインに仕上げることができます。

まとめ
このように「近接、整列、強弱、反復」の4つを意識してデザインすることで、デザイナーの方でなくても、分かりやすいレイアウトや資料を作成することができます。

自分はデザイナーじゃないからデザインなんてどうでもいいと思っている人もいるかもしれませんが、実はノンデザイナーこそ、この４つの基本原則は大きな効果を生み出します。

また、冒頭でもご説明した通り、“デザイン＝センス”ではありません。逆に、「センスがないから自分には無理」と思っている人にこそ、デザインの基礎を勉強して、ぜひ資料作成などに活かして頂きたいと思います！

▶︎ 個人ブログ:YAMANOTO