図解でわかるクリエイティブとマーケティング

【デザインの4原則】印象的で「伝わる」デザインの基本ルールを初心者にもわかりやすく解説

デザインの4原則

あわ丸

自分でデザインをしてみたいけど、まず何から始めればいいんだろう?コツがあったら知りたいな!

そんな方に向けて、はじめに押さえておきたいデザインの基本をわかりやすく解説していきます。

この記事は、ノンデザイナーやデザイン初心者の方を対象にした内容です。

この記事で得られることは次の通りです。

・デザインに迷わなくなる

・伝わりやすいデザインができる

・デザインが一気に洗練される

・目に留まるおしゃれなデザインができる

こんにちは!umuco(@umuco_digital )です。

デザインにはセンスが必要と思われがちですが、はじめのうちはセンスよりも知識のほうが重要です。

デザインのポイントは「伝わりやすさ」と「わかりやすさ」

この2つを意識したレイアウトの基本とテクニックをわかりやすく解説します。

つく蔵

ブログやSNSで発信するためのデザイン、レポートや資料作成など、すぐに活用できる内容だよ!

こちらの記事も人気です!

図解の作り方 【保存版】図解の作り方6ステップ!画像23枚でデザインのコツを徹底解説

デザインの4原則とは

デザインを行う上で大切な「伝わりやすさ」と「わかりやすさ」をつくる基本のルール。

デザインの4原則

【近接】関係するものは近くに

【整列】意識的に揃えよう

【反復】規則的に繰り返そう

【強弱】要点は強調しよう

この4原則を理解しておくと、わかりやすくて内容の伝わりやすい整ったデザインを作成することができます。

伝えたいことや目的に合わせて的確にデザインするための、レイアウトの基本になりますので覚えておきましょう。

それぞれの原則について具体例を挙げながら詳しく解説してきます。

【近接】関係するものは近くに

デザインの4原則

近接の原則は簡単に言えば「グループに分ける」ようなものです。

関係するものを集め、無関係のものとはスペースを開けて距離をとることで、わかりやすく整ったデザインになります。

近接の原則のコツ

デザインの4原則/近接

・デザインする前に情報整理をしてグループ分けをする

・まとめ方、グループの分け方のパターンを知る

・余裕があれば、余白を意識する

悪い例との比較

デザインの4原則/近接

余白のとり方で、大まかな分類や画像とテキストの関係性のわかりやすさが格段に変わります。

はじめて見る人が一目で内容を理解できるように、情報を整理して配置しましょう。

つく蔵

関連度にあわせて余白のサイズを決めていくんだね!
装飾でグルーピングすることもできるのよ!

うむ子

【整列】意識的に揃えよう

デザインの4原則

整列の原則は、「きっちりと揃える」と覚えておきましょう。

文字や形の位置、大きさを揃えます。意図的にズラしたいとき以外は整えるようにしましょう。

整列の原則のコツ

デザインの4原則/整列

・ガイドラインを引いて基準線を作る

・高さ、幅どちらで揃えるかを目的にあわせて決めておく

・大きさが異なるものは底辺の位置を揃えるとわかりやすい

悪い例との比較

デザインの4原則/整列

人の脳は少しのズレでも気になる傾向があり、不規則に並んでいると情報の認識を妨げます。

内容を理解するのに時間が掛かってしまうため意識的に揃えましょう。

大抵のデザインツールには揃えるための機能がついているわよ!

うむ子

【反復】規則的に繰り返そう

デザインの4原則

反復の原則は簡単に言えば、「パターンでわかりやすく」するためのものです。

デザインに一貫したパターンがあると、はじめて見る人でも内容を理解しやすくなります。

反復の原則のコツ

デザインの4原則/反復

・色、書体、配置、揃え方、文字の量など様々なものを反復できる

・まとめたい情報を1つのパターンにして反復することもできる

・一定の間隔や角度を繰り返してリズムを作る

悪い例との比較

デザインの4原則/反復

反復の目的は理解するスピードを上げることや、一貫性を出してリズムを作ることにあります。

悪い例のように、パターンが決まっていないと内容を理解するのに時間が掛かります。

つく蔵

色や形、サイズがバラバラだと、強調したいのかな、何か意味があるのかなという誤解が生まれやすいので注意だよ!

【強弱】要点は強調しよう

デザインの4原則

強弱の原則は、「一番伝えたいこと」を強調することです。

目を留めてほしい部分を、色や形などで他のパーツよりも目立たせます。

強弱は思い切りが大事よ!中途半端だとほとんど変化に気づかれないわ。

うむ子

強弱の原則のコツ

デザインの4原則/強弱

・デザインする前に伝えたいことをはっきりさせておく

・全体のトーンと対比させる色、形、大きさを意識する

・文字サイズ、フォントを変える、装飾など強調のパターンを知る

悪い例との比較

デザインの4原則/強弱

強弱は情報の優先順位を表すのに効果的ですが、それだけでなくデザイン全体の印象を強めます。

テキストの場合は「読む情報」から「見る情報」へと転換が起こるため、記憶に残りやすくアイキャッチ効果もあります。

つく蔵

文字情報が多くても、見た目の印象を大事にしてデザインすることが大事なんだね!

4原則のテクニック例

4原則を使った応用やテクニックをいくつか紹介します。

「近接」を色や線で表す

図解の作り方

背景の色でまとめたり、線で囲うことで情報の関係性を明確にできます。

グルーピングは入れ子のように細分化することもできます。その他、線で区切るだけでも分類することができます。

サイズが異なるものの「整列」は縦・横・サイズのいずれかを揃える

After Effects独学に最適な本5選

このデザインの場合は、本の印象を均一にしたかったので縦の高さをあわせて並べています。

違いを明確にしたい場合は底辺を揃えて、サイズは実際の比率で作成します。

グリッドのような「整列」でデザインを作る

おしゃれなアイキャッチ画像の作り方

グリッド状の配置など一定のパターンで整列させることで、デザインとしての全体の印象を作ることもできます。

グリッドのガイドラインを引いておき、そこに写真や文字をはめ込むデザインは、雑誌やポスターなどでも多用されています。

「整列」とランダムを組み合わせて印象的に

adobe creative cloud
背景の写真や幾何学はランダムで動きがありますが、テキストは縦線を入れて整列を強調しています。

アクティブさと整列の対比で強い印象が生まれています。

デザインの「反復」で全体像を作る

1つ1つのデザインは違っても、類似性があれば反復デザインとして成立します。パターン違いを配列したデザインで、内容の幅を表現しています。

色と線の細さで空間を「強調」

動画独学本&サイト
文字や背景などモチーフ自体の強弱ではなく、2つのものの組み合わせで「手前と奥」のような空間を強調する使い方もできます。

デザインは1つの要素ではなく対比によって印象が生まれるので、このような表現も意図的に作り出すことができます。

ぼやけた方が逆に「強調」されるパターン

自己分析

弱さによって、逆に印象的になることもあります。全体との対比を考えて強弱をコントロールした一例。

まとめ

以上、デザインの基礎となる4原則について解説しました。

「まとめる・揃える・繰り返す・強弱をつける」

この4点を意識するだけで、ぐっと印象的で伝わりやすいデザインになりますので覚えておいてください。

この記事が皆さんのお役に立てたら嬉しいです。

少しでも参考になったと思ったら、シェアしてね!

うむ子

つく蔵

記事のリンクも大歓迎です!

こちらの記事も人気です

図解の作り方【保存版】図解の作り方6ステップ!画像23枚でデザインのコツを徹底解説 おしゃれなアイキャッチ画像の作り方【画像50枚で解説】おしゃれなアイキャッチのつくり方!デザインと画像選びのコツ センスの磨きかた【図解】センスを磨く方法!3つのコツをわかりやすく解説【はじめてのデザイン】