ブロガー必見「デザインの4大原則」 >
ブログ・デザイン

「デザインの4大原則」を図解でわかりやすく解説|デザイナーなら必須

デザインの4大原則のトップイメージブログ・デザイン
こだわり君
こだわり君

こんにちは「こだわりスタイル」です

@KodawariStyle

デザイナー初心者の方もそうでない方も、これを知らないと始まらないというのが、この「デザインの4大原則」です。

キャリアを積んでいるデザイナーなら、身体にしみついているので無意識でもできてしまいます。

ブロガーさんがページを構成するうえでも、アイキャッチやバナーを作るうえでもこれを知っているのと知らないのとでは雲泥の差がついてしまいます。

対面のコミュニケーションのなかでメッセージを伝えるのは簡単です。

しかし、対面では無い場合(ブログやWEBの閲覧、チラシや名刺等さまざまな媒体)はそうはいかず、効率よく読み手にメッセージするには絶対に「デザインの4大原則」が必要です。

ブログにしても分かりやすいように構成することは読者を増やすことにも繋がりますから、絶対に覚えておきましょう。

キャリア20年以上の現役デザイナーが図解しながらわかりやすく説明していきますので、是非最後までご覧ください

デザインするための必須ツールを最安で購入

デザイナーになる方法はこちらをご参考に!

「デザインの4大原則」とは?

「デザインの4大原則」とはなんだと思いますか?

私は長くデザインの仕事をしてきているなかでハッキリと言えることは「整理」してあげることだと思っています。

デザイナーになる方はもちろん基本中の基本ですので、絶対に外せない部分です。

というより、デザイナーの方は「デザインの4大原則」を意識しながらやるのではなく、無意識にそうなる習慣が身に付いていないといけないと思います。

ただこの「デザインの4大原則」はデザイナーでなくても、営業さんがプレゼンの資料を作ったりするのにも非常に有効で見違えるものが出来上がりますから、プロの方以外でも覚えておくと良いと思います。

「デザインの4大原則」とは下記から成り立っています。

デザインの4大原則

1. 近接 Proximity
2. 整列 Alignment
3. 強弱 Contrast
4. 反復 Repetition

全然難しいいことはないので、順を追って説明していきます。

近接 Proximity

下記のような資料を作っていたとします。

それぞれの画像や、タイトル、キャプション(説明文)は入力しましたが、あまり見やすい状態とは言えません。

これは9つの情報がスペースで区切られていないので、どの画像のタイトルなのか、説明なのかがハッキリせずバラバラの印象です。

「近接」というのはまず、これを9つの情報をしっかり区別できるように整理してあげればいいのです。

デザインの4大原則 近接の意識前

上の情報をしっかり9つの情報として区別して表示してあげると・・・。

どうですか、1つ1つがしっかりと整理できたので、画像とタイトルとキャプションが1つのかたまりに見えるはずです。

デザインの4大原則 近接の説明の結果

下の画像を見てください、画像と画像の横スペース、画像とタイトルの縦スペース、タイトルとキャプションの縦スペース、最後はキャプションとその下の画像の縦スペースの4箇所を調整しただけです。

(わかりやすく調整したスペースに色付けしてみました)

近接の説明デザインの4大原則 

整列 Alignment

整列はあまり要素が多いとわかりづらくなるので、名刺で説明しようと思います。

上の「近接」にもすでに反映されているのがおわかりですか?

写真のキャプションは画像の横幅で改行されているし、タイトルは画像の左端に揃えていますよね、別に線が引いてあるわけではありませんが、全部が揃っています。

そして各々の高さは全て統一されています。

グリットを揃えるといいますが、見えない線を感じてください。ここ重要なんです。

これが「整列」です。

下の画像は名刺ですが、わかりやすくわざとバラバラに見えるように配置(レイアウト)しています。

大きさや順列で、かろうじて「YONDAI GENSOKU」が名前だろうということはわかりますが、整理されていないので正直見づらい印象しかありません。

文字の大きさは変えずに「整列」の原則に合わせて整理してみましょう。

デザインの4大原則 「整列」の前

すると、こんな感じです。

同じ種類の内容をまとめてあげて、グリッド(見えない線)を揃えてあげただけです。

デザインの4大原則 「整列」の後

会社の情報と、そこに属する人の情報を分けて、グリッドを揃えることで非常に見やすくなりました。

見やすくなるということは、この名刺を受け取った方に情報が伝わりやすくなったということを忘れないでください。

デザインの4大原則 「整列」の説明

赤い点線が同じ要素を揃えたグリッドです。

この名刺では、散らばっていた要素を下記ブロックに分けてグリッドを揃えただけです。

・名前のブロック
・会社名と部署のブロック
・会社の住所のブロック

とういうことで「整列」は、揃えられるグリッドは全て揃えるということです。

強弱 Contrast

文章にもタイトル→大見出し→小見出し→本文みたいに読む方が理解しやすいように、優先順位をつけていますよね。

ブログ等も同じでタイトルがありh1がありh2、h3というようになっています。

「強弱」とは優先順位をハッキリさせてあげることなんです。

英語では「Contrast」(コントラスト)になっているように、「対比」という意味になります。

これは、カラーであったり、文字の大きさであったりを優先順位に合わせて変化させてあげるのです。

「強弱」についてはセールチラシの構成が要素が少なく理解しやすいと思いますので、セールチラシで説明します。

女性の背景にセール情報を入れただけで目立たないし地味ですね。

文字の太さの強弱などはついていますが、「強弱」が微妙過ぎます。

背景に対してのコントラストも弱すぎ、文字が黒なのでSUMMERのコンセプト(熱い、または涼しい)も伝えることができていません。

デザインの4大原則 「強弱」の前

まずメッセージすることの優先順位を考えましょう。

とにかく「セール」なわけですからユーザーのニーズに相当するものを大きくします。

優先順位の答えは「どのくらい安いの?」ですね。

ですので「MAX80%OFF」が一番大きく目立つようにすることが大事です。

カラーを変えることでさらに強調することができます。

夏ですので「涼しさ」は大切です。

全体のイメージを左右してしまうので、文字は基本「白」を選んでいます。

デザインの4大原則 「強弱」の後

文字情報も中心に固めることで、背景の女性の隠れる部分が少なくなり、画面構成をスッキリさせることができます。

目立たせたいものは大きくしたり、場合によっては目立つカラーで調整してみましょう。

ポイントは中途半端な大きさやカラーの差にしないことが重要です。

おもいきって極端に差をつけてみましょう。

そうすることで、ユーザーにメーセージが届きやすくなります。

なんとなくデザイナーになれた気がしてきませんか?

今までは、1つの画面構成の説明ですが、今度はカタログなど複数ページになった場合や、WEBなどではスクロールが増えたりページが増えたりということもあります。

最後はそれらに対応した「反復」です。

反復 Repetition

「反復」というのは特徴的な要素(アイキャッチ、ロゴ、書体の扱い、カラー)を繰り返し使用することです。

こうすることにより雑誌などでは、前のページの続きと理解できますし、WEBも同じヘッダーが入っていれば同じサイトと意識することできますよね。

よく「トンマナ」という言葉を耳にすると思いますが、まさしくこのことで略さなけらば「トーン&マナー」といいます。

下の画像をご覧ください。

左ページと右ページがシリーズページだとしたら、どんな印象を抱きますか?

シリーズページではなくて、別のページですね。

基準になる左ページをまるで「反復」していないことが原因です。

デザインの4大原則 「強弱」の前

左ページと右ページはシリーズページだとすると、左ページの特徴を右ページにも「反復」することで、はじめて左右がシリーズページと認識してもらえるようになります。

タイトルが英文→和文に変更されているし、レイアウトは違うし、使用されている書体も違います。

デザインの4大原則 「強弱」の後

このように特徴的な部分を右ページにも「反復」してあげることで、シリーズページだと認識してもらえます。

もう一度言いますが、「反復」とは特徴的な部分の規則を繰り返すことですので忘れないようにしましょう。

「デザインの4大原則」のまとめ

これまで説明してきたことは、あくまでも基本です。

世に出ているデザインの全てがこのようにはなっていません。

ただ「デザインの4大原則」ではないデザインをするデザイナーは、この「デザインの4大原則」を身に付けた上で「デザインの4大原則」を崩し、より良いデザインにしています。

基本を知らないと、応用が効かないことは覚えておきましょう。(一番大事です)

「デザインの4大原則」を身に付けていないデザイナーが、この原則を崩してもただの崩れたデザイン」になるだけです。

ですのでこの「デザインの4大原則」を身に付けた上で、さらに上を目指したデザイナーになりましょう!

デザイナーを目指すならAdobeCCは必須です。私もここで約50%OFFで購入しています。

デザイナーになる方法はこちらをご参考に!