デザインの4原則をわかりやすく解説!知るだけで実践できます

1.近接の原則【情報のグループ化】 Webデザイン

「デザインを上手に作るコツってあるの?」

「デザインの4原則って聞いたことはあるけど、なんなの?」

デザイナーなら「デザインの4原則」という言葉を一度は聞いたことありますよね。

でも、「いままで4原則なんて気にしたことなかったけど、別にデザインは作れているよ」そう思うことはありませんか?

しかし、あなたが気にしていないだけで実は見にくいデザインを作っている可能性があります。

この記事では、いいデザインをつくる上で絶対に守るべき4原則と実践するときのポイントについて紹介していきます。

この記事を読めば、誰でもかんたんに良いデザインを量産できますよ。

ぜひ最後まで読んでください。

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

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

Vectorjuice – jp.freepik.com によって作成された banner ベクトル

そもそも、デザインとはWikipediaでは以下のように定義されています。

デザインとは具体的な問題を解き明かすために思考・概念の組み立てを行い、それを様々な媒体に応じて表現することと解される。

出典:Wikipedia

かんたんにいうと、情報を適切に伝えるためにレイアウトなどの見た目をわかりやすく整えることです。

紙やスライド、Webサイトなど掲載するメディアによって、写真や画像、文字などさまざまな構成要素に装飾することで情報を素早く伝えることができます。

そしてこれらをデザインすることは難しいことではなく、以下に紹介する4つの原則を守るだけで誰でもわかりやすく整えることができます。

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

たった4つの原則を守るだけで誰でもセンスのある、伝わりやすいデザインを作れます。

あなたが会議のスライド、Webサイトのデザインをつくるときに必ず役に立つ原則です。

それでは以下で、それぞれの原則について詳しく紹介してきます。

1.近接の原則【情報のグループ化】

1.近接の原則【情報のグループ化】

「近接」とは関連する項目をまとめてグループ化することです。

人は物理的に近い位置のものを「関係性があるもの」と認識する傾向があるため、グループ化することで視覚的に理解しやすいレイアウトを作ることができます。

なので書類やブログなどで見出しを作ったなら、その見出しに対しての説明文が離れすぎていないかを確認しましょう。

関連する項目を近づけるだけで、そのページの構造と内容を瞬間的に伝えることができます。

近接のやり方|関係する情報を近づける

近接のやり方は簡単で、関連性が強いものを近づけ、関連性が弱いものを遠ざけるだけです。

これだけで情報が整理されて、ことばを使わずに関連性の強さを伝えることができます。

情報が整理されるとは、視覚的な情報量が減るということです。

グループを作って情報をまとめることで、思考回数を減らしてあげられます。

スライドやポスターの場合はグループを1ページに3個〜5個に収めて、読者が流れるように見れるデザインを作りましょう。

近接のポイント|余白を使う

近接のポイントは余白をうまく使うことです。

グループ内の余白を調整しほかのグループでもその余白に調整することで、統一されたデザインが完成します。

近接で気をつけるポイントは以下のとおりです。

  • 関連する要素は近づけてグループ化する
  • グループ内で適切な余白を空ける
  • 別グループでも均等に余白を設ける
  • グループとグループの間にも余白を空ける

余白を使ったデザインは圧迫感がなく、視覚的なストレスを省けます。

2.整列の原則【要素を均等に配置する】

2.整列の原則【要素を均等に配置する】

スッキリしたデザインをつくるために、デザインの要素を均等に「整列」させましょう。

配置やがフォントがバラバラだと直感的に情報を処理できないからです。

ページ上の要素はすべて意識的に配置していなければ統一感は生まれず、散らかったデザインになってしまいます。

要素を整列させるときは、視覚的にほかの要素と関連するように作りましょう。

整列のやり方|「揃え」で要素に統一感をもたせる

要素を揃えて整列させることでデザインに統一感をもたせましょう。

揃え方は以下がよく使われますね。

  • 左揃え
  • 中央揃え
  • 右揃え
  • 上揃え

主にブログ記事や文章では左揃え、小説や新聞なら上揃えが使われています。

中央揃えは長文になると読みにくくなるため、文章メインのレイアウトを作る場合は使用しないのがおすすめです。

整列させるだけではなく、デザインのテーマにあった揃え方をすることも意識しましょう。

整列のポイント|見えない線でつなげる

整列のポイントは、見えない線を意識してそれに揃えることです。

文章作成ツールなどでは簡単に揃えることができますが、アイキャッチやポスター作りでは特に見えない線を意識しましょう。

整列で気をつけるポイントは以下のとおりです。

  • 関連する要素はサイズや色を合わせる
  • 左右中央でレイアウトを揃える
  • アイキャッチやポスターは見えない直線で揃える

デザインツールを使うとグリッド線などを表示させることで、実際には見えない線を使って揃えることもできます。

注意点として、同じページで2種類以上の文字揃えを使わないようにしましょう。

3.反復の原則【特徴を繰り返す】

3.反復の原則【特徴を繰り返す】

デザイン上にある特徴を繰り返し使用することを「反復」といいます。

繰り返し特徴を使うことでデザイン全体に一貫性が生まれ、ユーザーが混乱することがなくなります。

お品書きやメニュー表でページをめくったときにレイアウトが変わらないのがその例で、ページはここ、写真はここ、値段はここと決まっている方が、見ている人にストレスを与えません。

またメニュー表のような反復を使うことで、逆に反復されていない写真や値段などの内容が目立ち、ユーザーが意識するポイントがわかりやすくなります。

このブログも大見出しと小見出しを使うことで、これから違う話をするという準備を読者にしてもらっているのです。

反復のや方|特徴的なものを意識的に繰り返す

反復はでは色や線、モチーフ、レイアウトなどを繰り返し使います。

また、これは文章にも同じことがいえます。

文中で印象的な表現を繰り返し「私達/私たち/わたしたち」などの表記ゆれに気をつけることで、記事全体で統一感がある文章が作れます。

また文章なら以下の要素を反復するのもいいでしょう。

  • ロゴ
  • 配置
  • 見出し
  • フォント
  • イラスト

画像だけでなく文章にも視覚的にわかりやすいデザインというものが存在ます。

反復のポイント|リズムを意識する

反復とはリズムをつけることです。

きれいに反復できているデザインはリズムがよく、読者が見るときに視覚的なおもしろさを感じることができます。

反復で気をつけるポイントは以下のとおり。

  • 同じ要素を繰り返して配置する
  • 繰り返すときにはルールを設ける
  • デザインルールを複数使うことでデザインに緩急をつける

反復は自分が必要とする情報の場所が予想しやすい分、ユーザーの思考回数をへらす効果があります。

リズムを意識して、ユーザーが必要な情報に注力してもらえるデザインを作りましょう。

4.強弱の原則【異なる要素の差別化】

4.強弱の原則【異なる要素の差別化】

デザインの異なる要素に「強弱」をつけることで、伝えたい部分を強調させます。

これまで紹介した3つの原則を取り入れた後に、「なにか物足りない」と感じたときに強弱をつけることでよりインパクトのあるデザインが作れます。

強弱をつけないと、まとまりがあって整列したデザインでも、逆にどこを見ていいかわからないという状況になりかねません。

デザインとは情報を適切に伝えるための手法です。

適切な順番で伝えられるように強弱を使いましょう。

強弱のやり方|情報の優先度を明確にする

強弱は関連する2つ以上の要素がきれいに整列していることで始めて効果が発揮されます。

同じ特徴のある要素に差が生まれることで比較対象になり強弱が役に立つからです。

強弱をつけるポイントは以下のモノがあります。

  • サイズ
  • 線の太さ

ユーザーにもっとも見てもらいたい部分を強調させるために、視覚的にパッとみえる部分を用意してあげます。

優先度の高い順に要素の視覚情報を強くしてあげることで、視線が流れるように動く気持ちのいいデザインを作れます。

強弱のポイント|思い切って差をつける

強弱は思い切って差をつけましょう。

強弱で気をつけるポイントは以下のとおりです。

  • ほかの3つの原則ができていること
  • 全部を強調しようとしない
  • 強調したい要素に優先順位をつける

注意点としては、全部強調しようとするとほかの要素との差が生まれず、結局どれに注目していいかわからなることです。

ポイントは強弱なので、一番目立たせたい部分だけ強調させるという使い方にしましょう。

重要な部分に興味を持った人は、ほかの情報もきちんと見てくれます。

そのほかに覚えておきたいデザインのテクニック3選

Katemangostar – jp.freepik.com によって作成された brochure ベクトル

デザインの4原則のほかにも覚えておきたいテクニック3つを、以下に紹介します。

  1. 配色
  2. 装飾
  3. 余白

上記は4原則にも直接関連している内容です。

より具体的な方法としてチェックして見てください。

それでは詳しく紹介ます。

1.配色

色使いが悪いとパッと見でいい印象を与えない可能性が高くなります。

なぜなら人は色である程度の情報を把握するように慣れてしまっているからです。

例えば以下の配色では、あなたはどう感じるでしょうか。

  • レモンは酸っぱくて、イチゴは甘い
  • レモンは酸っぱくて、イチゴは甘い

果物のイメージカラーがある分、パッと見でわかりやすいのは後者ですよね。

文章だとマーカーをつける程度ですが、画像やイラストなどのデザインなら配色の与える視覚的影響はさらに大きいです。

配色は「1.近接」「3.反復」「4.強調」にも使えるので試してみましょう。

2.装飾

ブログなどの文章は特に出やすいですが、装飾のバランスはデザインを決める重要な要素です。

色使いや太字、箇条書きなどを使うことで、文章にメリハリがつきます。

例えば、以下の2つの文章を比べてください。

デザインには「近接(Proximity)」「整列(Alignment)」「反復(Repetition)」「強調(Contrast)」の4つの原則があり、デザイナー以外でもこの幻想を守るだけで情報を効果的に伝えるデザインが作れます。

デザインには4つの原則があります。

  • 近接 (Proximity)
  • 整列 (Alignment)
  • 反復 (Repetition)
  • 強調 (Contrast)

これらの原則を守るだけで、デザイナー以外でも情報を効果的に伝えるデザインが作れます。

後者の方が注目するポイントが目につきやすく、情報がまとまっています。

適度に装飾を使うことで「2.整列」「3.反復」「4.強調」としても使えるので試してください。

3.余白

余白がないと圧迫感があり、見にくいデザインになってしまいます。

また、どこから文章を見ていいかわからずユーザにストレスを与えることになります。

以下の例を見てみましょう。

デザインにおいて余白を使わないことは、ユーザにストレスを与えることになります。なぜなら、どこから読んでいいかわかりにくいからです。特に文章だけだと文字を読むストレスがあるため、さらに読みにくいです。デザインを作るときには余白をあけて読みやすい文章を心がけましょう。

デザインにおいて余白を使わないことは、ユーザにストレスを与えることになります。

なぜなら、どこから読んでいいかわかりにくいからです。

特に文章だけだと文字を読むストレスがあるため、さらに読みにくいです。

デザインを作るときには余白をあけて読みやすい文章を心がけましょう。

余白を使って視線を誘導するデザインが、ユーザーの負担がなく完読してもらえるデザインといわれます。

余白を意識して使うことで「1.近接」「2.整列」「4.強調」としても使えます。

まとめ|情報をより効果的に伝えるために、誰でも活用できる方法です

この記事では、デザインの4原則について以下の内容で紹介しました。

  • デザインの4原則とは
  • デザインの4原則を使うときのポイント
  • 4原則以外に覚えておきたいテクニック

デザインの4原則を覚えれば、非デザイナーでもかんたんに伝わりやすいデザインが作れます。

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

配色、装飾、余白も活用して、全体の情報が流れるように目に入るデザインを作りましょう。

コメント

タイトルとURLをコピーしました