【webデザインを学びたい方へ】基本｜デザインの4原則

こんにちは．reiyaです．

この記事ではデザインの4原則について説明していきます．

• デザインを学び始めた人
• 初心者だけどより良いデザインを作成したい人

に向けた内容となっています．

デザインの4原則

デザインには以下の4つの基本原則があります．

• 対比
• 近接
• 反復
• 整列

これらの原則を基ににデザインを作成するだけでも，より良いものができます．

次にそれぞれの原則について解説をしていきます．

対比

『対比』とは要素と要素に違いを生み出し，視覚的に情報を分かりやすくしたい時に使われます．

また，変化のないデザインは面白味がないため，見ている人が退屈してしまいます．

対比により視覚的な面白みを上げることでユーザーの興味を引き出すことができます．

対比を実現するには以下のような方法が挙げられます．

• 色を変える
• サイズや形を変える
• フォントを変える

ただし，使い過ぎると強調したいことが分かりづらくなったり，騒がしくなることもあるので程よいバランスで行うと良いです．

近接

『近接』とは関連する要素を近づけることで，その要素達はグループであると視覚的に分かりやすくなります．

逆に，関連性の低い要素は距離をおいて配置をしましょう．

近くにある要素はグループ化されるので，関係のないコンテンツが近くにある，とユーザーは混乱してしまいます．

近接を実現するには以下のような方法が挙げられます．

• 関連する要素をグループ化
• グループ同士は距離を置く

要素のグループ化は，特に写真や説明文を一緒にしたり，説明に用いる画像をその説明文の近くに置くなどを行うようにしましょう．

反復

『反復』とは記事やサイトを通して一貫したルールや規則に従ってデザインを保つことです．

例えば，カラー，配置，フォントなどが揃っていると一貫性が働きデザインがまとまって見えます．

反復の実現には以下の方法が挙げられます．

• 反復させる要素を作る
• 一貫性を目立たせる
• 全体のデザインを反復させる

しかし，タイトル，サブタイトル，説明文を全て黄色にするなど，やりすぎは逆に騒がしい印象になってしまうため，気をつけましょう．

整列

『整列』とは要素を綺麗に並べることで読みやすさ，統一感を出すことです．

実現方法としては以下が挙げられます．

• 整列方法を合わせる（左揃え，右揃え，中央揃え）
• 見えない線が引かれるように並べる

整列をすることで見えない線が生まれます．これが整列を実現する際に最も重要なことです．

しかし，情報量が多い場合などは背景色を変えることで整列を実現することもあります．

まとめ

今回はデザインの4原則を紹介しました．

これらの基本原則を意識するだけでも，デザインはかなり良くなるのでぜひ意識してみてください．