デザイン制作実績はこちらをクリック

デザイナーじゃなくても「4大原則」を知っておけば伝わるデザインが作れる!

デザイン4大原則の画像

「デザインしてみたけどなんかうまくいかない。何かいい方法はない?」

「デザインの4大原則ってなに?」

そんな疑問に答えるよ

ミロク

ミロクです(@mirokurocloverZ)

自分でデザインしてみてもなんかしっくりこないというか「これじゃないんだよな」っていうことない?

それはデザインにおける4大原則を無視してるからなんだよね

グラフィックデザイナーのぼくがデザインの4大原則について図を用いてわかりやすく説明するよ

この記事を読めばデザインのことが何もわからないあなたでも、プロと同じような仕上がりに近づくことができます

デザインの4大原則とは

ミロク

デザインの基本中の基本。
  1. 近接(Proximity)
  2. 整列(Alignment)
  3. 反復(Repetition)
  4. 強弱(Contrast)

この4つはwebサイト・アプリ・雑誌・チラシなど媒体は問わず、見やすくて内容が伝わりやすいデザインをする上で知っておきたいもの

この4つの基本原則を頭に入れて実践するだけで、脱初心者可能なぐらい役に立つよ!

デザイン4大原則の①近接

デザイン4大原則の画像

ミロク

上の図をご覧ください。

よくあるドリンクメニューでデザインの4大原則を説明するよ。左はいわゆる「ベタ打ち」と言われる文字をただ打っただけのも。これだとメニュー表としてはかなり見辛いよね

そこで、とりあえず4大原則のうちのひとつ「近接(Proximity)」を使って関連性のあるもの同士を近づけ、ひとつのカタマリにしたのが右

パッと見、左よりはわかりやすくなったでしょ?

近接のポイントは「余白」

関連性のあるもの同士を近づけると、自然と関連性のないもの同士の間に「余白」が生まれるんだよね

これが重要で、この「余白」があることによって枠とかを使わずにひとつのグループとして認識しやすくなる。つまりパッと見でわかりやすくなるってことなんだね

デザイン4大原則の②整列

デザイン4大原則の画像

ミロク

次は整列。

「近接」を使って関連性のあるもの同士を近づけても、要素を闇雲に配置したんじゃまだわかりづらい

そこで「整列(Alignment)」を使って左揃え、または右揃えのように要素を意識的に配置したのが右の図

一番上のタイトルと商品名を右に揃え、値段を左揃えにしました。一気にメニューっぽくなったね

整列のポイントは「見えないライン」

「整列」を使うことで左右に見えない線を感じることができるよね

ここがポイントで、しっかりと要素同士を近づけて見えない線に沿って並べるだけで、スッキリとした見栄えにすることができる。文字通り整えられたデザインだよね

デザイン4大原則の③反復

デザイン4大原則の画像

ミロク

どんどんメニューっぽくなってきた!

「反復(Repetition)」の目的は、特徴的な要素を繰り返し使うことで統一感を出すこと

上の図では「下線」や「・」「赤字」を繰り返し使って一貫性、統一感を演出してるんだね

要素を一定のルールで繰り返すことでまとまりのあるデザインに仕上がるし、パッと見のわかりやすさも増す

ちなみにWebやデザイン広告の世界では、全体に一貫性を持たせるためのスタイルやルールのことを「トーン&マナー」略してトンマナって言うのね

反復のポイントは「リズム感」

一定のルールを守って、反復を効果的に使えばデザインにリズム感が生まれる。見ていて心地いいデザインは目指すところだよね

反復を使うことで生まれるリズム感は面白さを加えることにもなるんだけど、これは使い過ぎるとかえってうるさくなったりするからバランスが大事

デザイン4大原則の④強弱化

デザイン4大原則の画像

ミロク

最後に「強弱」をつけよう。

「強弱(Contrast)」をつける目的は伝えたい情報の優先度をはっきりとさせること

視線を無駄に泳がせないようにしてあげるのが大事で、はっきりさせてあげることでデザイン全体にメリハリが生まれるんだよね。それを見た人が理解できるスピードを早くしてあげて、直感でわかるデザインを目指そう

反復のポイントは「思いきりの良さ」

ちょっとの変化じゃ伝わりづらいから、ここは勇気を出して思い切り「強弱」をつけよう

思いきりの良さで重要度もコントロールできる。重要なところは思いきり強く、そうじゃないとこは思いきり弱くしてあげるとわかりやすいデザインに近づけるよ

一番よくないのが中途半端に強弱をつけることで見る人を惑わせること

デザイン4大原則まとめると

デザイン4大原則の画像

ミロク

これはあくまでも基本だから、ここからさらにデザインを考えていくよ。
  1. 近接(Proximity)
  2. 整列(Alignment)
  3. 反復(Repetition)
  4. 強弱(Contrast)

基本的な4つの原則を簡単に紹介したけど、ここから「書体」「色」「質感」とかあげたらキリがないんだけど、完成までに考えられることはまだまだいろいろある

とはいえデザインのことを全くわからない人でも、この「近接」「整列」「反復」「強弱」を意識してデザインすれば、それなりの見栄えになることは間違いない。これから世の中にある「いいな」と思うデザインをよく観察してみてね、必ず4大原則の型が守られていることに気づくと思うよ

基本中の基本であるからこそ(今回はメニュー表だったけど)いろんな場面で応用できる

デザインで迷ったらこの4大原則を思い出して、基本に立ち返ってくださいって話でした!

おわーり

アイディア出しアイキャッチ画像 現役フリーランスグラフィックデザイナーが教えるアイディアの出し方まとめ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です