グラフィックデザイン

デザインの4つの基本原則 |これさえできれば伝わるデザインができる

「なんだかいまいちパッとしないデザインしか作れない」

そんな初心者デザイナーさんや、デザイナーじゃないんだけれど、仕事でデザインらしきものをしなければならないという人もいると思います。

そこでこの記事では、これさえ身につけておけば、わかりやすく伝わりやすいデザインができる!という『デザインの4つの基本原則』について解説してきます。

 

良いデザインに必ず含まれているデザインの4つの基本原則

デザイニャー
デザイニャー
デザインの4つの基本原則というのは、その名の通りデザインをするときの基本的な決まり事ということなんだよニャ。

先生
先生
そうだね。印刷物やWebデザインを作るときに、情報をわかりやすく伝えるために必要な原則なんだ。

デザイニャー
デザイニャー
それってやっぱり覚えるのとか大変なのかニャ。

先生
先生
そんなのことは全然なくて、この原則は覚えたらそう意識することもなく、すぐにデザインで実践できるものだから。

デザイニャー
デザイニャー
デザイニャーもこの授業で基本原則をマスターして実践するニャン!!

 

デザインするときに使いたい4つの基本原則

先生
先生
デザインは、見た目を美しくして人の目を引くことも大事なんだけど、一番の目的は、情報がわかりやすく適切に伝わることなんだ。

デザイニャー
デザイニャー
情報が適切に伝わるデザインにするためには次の4つの基本原則を守ることが大事なんだニャ。
デザインの4つの基本原則

・近接

・整列

・反復

・対比

先生
先生
この4つを知って使うだけで、情報がわかりやすくまとまって相手に伝わるわかりやすいデザインになるんだ。一つ一つ解説していくね。

近接

カフェメニュー表イマイチ

先生
先生
デザインの4つの原則は、4つとも重要だけれど、その中でもいちばん重要なのは『近接』で、これがないとデザインとは呼べないくらいなんだ。

デザイニャー
デザイニャー
そんなに大事と言われている、『近接』を使う目的はなんだニャン?

先生
先生
『近接』情報をグループ化して整理するために使われるんだ。上のカフェのメニューみたいなのでも、関連性の高い情報同士を近づけてみることで、それぞれのコーヒーの情報が一瞬で理解できるでしょう。

デザイニャー
デザイニャー
近接を利用しないとわかりにくいカフェのメニュー表になるもんニャ!
カフェメニュー表余白色付き

先生
先生
そして、ちょっと上級編になると、余白の付け方。上のメニュー表を例にしてみると、ピンク色の余白は違うもの同士の余白の取り方。青い余白は関係するもの同士の余白の取り方というふうに工夫するやり方があってね、このピンクと青を取り除くと次のようになるよ。
カフェメニュー表完成

デザイニャー
デザイニャー
ニャルほど!情報の関連性がわかりやすくなったニャン!!

『近接』は、関連性の強いもの同士を近づけ、関連性の弱いもの同士を遠ざける。

 

整列

名刺

先生
先生
デザインの中にある画像やテキストなどの要素を『整列』させることで、見やすくすっきりとしたデザインを作ることができるんだ。

デザイニャー
デザイニャー
この名刺の右側の例を見ると、上と左端が揃ってるニャン。

先生
先生
基本的な『整列』は次の通りだよ。
基本的な整列

・左右の整列… 左揃え 中央揃え 右揃え

・上下の整列… 上揃え 中央揃え 下揃え

『整列』を使うことで、デザインに一体感が生まれて組織化にも役立ちます。『整列』でもどの方法を使うかで印象が変わるので、デザインの目的に応じ揃え方を選ぶようにしましょう。

先生
先生
そして、上の名刺を見てもらうとわかるように、『整列』を使うと見えない線が生まれるんだ。

デザイニャー
デザイニャー
上揃えと左揃えが適用されてるニャン。

先生
先生
この目に見えない線を使うことが『整列』のポイントだよ。

 

反復

反復

 

先生
先生
次は『反復』。反復とは同じルールを繰り返して使うことを言うんだ。

デザイニャー
デザイニャー
反復を利用したデザインは、一貫性があって読みやすくなるんだニャン。

先生
先生
反復』を使ったデザインは、イメージという記憶装着の効果もできるんだ。

スマートフォンやアプリのUIデザインにも『反復』が使われ、デザイン面だけでなく、ボタンや操作方法を繰り返し使うことで、統一感やリズムがつきます。

先生
先生
反復の効果は次の6つだよ。
『反復』の6つの効果

・統一感

・可視性

・一貫性

・利便性

・速読性

・記憶装着

 

対比

対比

 

先生
先生
最後に『対比』なんだけれど、『対比』とは、2つの異なる要素に強弱をつけて見た目をはっきりと変えることで、一目で違いを強調させるんだ。

デザイニャー
デザイニャー
対比をつけることでメリハリがあって伝わりやすいデザインになるってことだニャン。

先生
先生
また、対比をつける要素同士の差をジャンプ率というんだけど、ジャンプ率は、フォントの太さ細さ以外にも、アイコンなどでもあげることができるんだ。

デザイニャー
デザイニャー
ニャルほど!

先生
先生
しかし、ジャンプ率は何でも高くすれば良いのかというと、そういうわけでもないんだよ。

デザイニャー
デザイニャー
どういうことだニャン!?

先生
先生
ジャンプ率を高くすると、伝えたい情報を強調できて一目で伝わるデザインいなる。でも、デザインによっては、洗練された高級感を出したい時とか、シンプルで全体的に統一感を出したい場合には、ジャンプ率を低くした方がいいんだ。

デザイニャー
デザイニャー
そういえば、化粧品のポスターとかカタログとかって、ジャンプ率が低いニャン。

 

デザイン初心者はまずデザインの4つの基本原則を活用しよう

先生
先生
ここまでデザインの4つの基本原則についてお話ししてきたけれど、デザインの初心者でも、この4つの基本原則を守るだけでも大きな効果が出て、デザインキルが向上できるんだ。

デザイニャー
デザイニャー
この4つの原則を守ることによって、デザイニャーにも伝わりやすいデザインができるようになるんだニャン!

先生
先生
れには慣れることが大事だから、印刷物でもWebデザインをするときでも、このデザインの4つの基本原則を意識して取り入れていこう。

参考書籍

猫でもわかる!レイアウトの5つの基本

先生
先生
デザインの4つの基本原則に加えて、レイアウトの基本を取り入れることで、さらにいいデザインになるよ。下の記事も読んでみたら、さらに伝わりやすいいいデザインができるようになるよ。
...

 

まとめ

先生
先生
ここまで次の8つのことについてお話ししてきたよ。

・良いデザインに必ず含まれているデザインの4つの基本原則

・デザインするときに使いたい4つの基本原則

・近接

・整列

・反復

・対比

・デザイン初心者はまずデザインの4つの基本原則を活用しよう。

・参考書籍

・猫でもわかる!レイアウトの5つの基本

先生
先生
このデザインの4つの基本原則を守ることで、情報整理ができて、わかりやすく伝わるデザインを作ることができることがわかったね。

デザイニャー
デザイニャー
加えて、この基本原則が一つ欠けてもダメなんだよニャ?

先生
先生
4つともみんな意識することで、作品として一体感が出るからね。

デザイニャー
デザイニャー
デザイニャーも、この4つの基本原則を使ってデザインをすることで、いろんな場面で役に立つデザイナーになるニャン。