デザインを上手くなりたい、あるいはデザインのフィードバックを適切にしたいのであれば、基本原則を押さえておくのが近道！

そこで今回紹介するのがデザインの基本となる4つの原則をお伝えします。

4大原則を知っておくと、グラフィック・Webデザインだけでなく、提案資料、レポートなど「デザイン」が必要なあらゆるものに応用することができます。

デザインの4大原則とは？

• 「コントラスト（Contrast）」
• 「反復（Repetition）」
• 「整列（Alignment）」
• 「近接（Proximity）」

です。

これらはデザインをするとき、あるいはデザインをフィードバックするときに、ガイドラインとして頭に叩き込んでおいてください。

そもそも互いに密接に関連しているので、デザインをするときにどれか一つだけ利用する法則ではなくて、全て意識した方がいいです。

デザインの4原則を守るべき理由＝「情報を理解しやすくする」

デザインでとても大切なのは「情報を、作り手が伝えたい意図通りに伝える」こと。

ですから「伝わる」という状態に整えてあげる必要があります。

デザインの4大原則（コントラスト、反復、整列、近接）は「原則」というくらいですから、情報を受け手にわかりやすく伝えるための必要なルールみたいなもの。

ユーザーが情報を容易に理解するのはもちろんですが、作り手の意図した通りの情報伝達が可能になります。

4つの原則は相互に補完している

大事なのは、これらの4つの原則はバラバラに機能するのではなく、相互に補完し合いながら、調和のとれたデザインを作り出し、伝えたいメッセージを明確に伝えられる「基礎」になるという点。

つまりポイントは「全部意識して！」ってことです。

例えばコントラストは、デザインの特定の要素を際立たせることができますが、ここに反復と組み合わせて特定の色や形を繰り返すことで、ユーザーは特定のメッセージやブランドを認識しやすくなります。

また整列は、デザイン内の要素を体系的に配置し整った印象をあたえられますが、近接と組み合わせることで、関連する要素が一緒にグループ化され、情報に自然な流れを生み出すことができます。それはつまり情報の理解促進です。

このようにそれぞれの原則は、「情報を、作り手が伝えたい意図通りに伝える」目的に向かって相互に補完し合うのです。

コントラスト（Contrast）→メリハリをつけたイケデザインに

コントラストは、デザインの異なる要素間に、視覚的な明確な差異（違い）を作り出してあげることで、いわゆる「イケてる」かつ「読みやすい」デザインになります。

要素とはテキスト、色、サイズ、線の太さ、形、空間などです。

なぜコントラストをつけるのがいいかというと、2つの意義があります。

• 読者の注目を集める
• 情報の組織化を支援する

まず前者は、特定の部分を際立たせたり、全体の組織を改善したりと明らかに「パッと見」のインパクトが生まれます。

後者については、情報に強弱をつけてあげることで、ある項目から次の項目への論理的な流れが、読者にとって明確になります。

よく制作現場では「どこを目立たせたいの？」「情報のメリハリをつけたい」といってコントラストをつけてもらうようにしてます。

例えば、明るい色と暗い色を組み合わせることで強いコントラストを生み出し、特定の要素を強調することができます。また、大きな要素と小さな要素を隣接させることで、視覚的な重要度の違いを示すこともできます。

あるいはWebサイトではCTAと呼ばれる、「重要なアクション」を促すボタンなどには高いコントラストをつけてあげることで、ユーザーの注意を引くことだってできます。

コントラストがはっきりとあると、あきらかにデザインに力強さがうまれます。

なので、「これコントラストつけすぎじゃない？」ってくらいつけてみても、デザインがちゃんと成立するんです。

反復（Repetition）→繰り返しでデザインに連続性とリズムを

「反復（Repetition）」は、同じまたは類似の要素を繰り返し使うことによって、一貫性、調和、強調を生み出す、デザインではおなじみの手法です。

よく業界的には「トーン＆マナー（トンマナ）」と呼ばれることも。（反復は、一貫したトンマナを確立し維持するための重要な手段）

デザイン内に連続性があると、人間はひとつのまとまりとして知覚することができます。反復とはそういった連続性を作る作業であって、デザインに調和とともに、一貫性をあたえられます。

反復させるものはタイポグラフィや色、アイコン、モチーフ、線、見出し装飾とさまざまあります。

例えば、「01、02、03、04」といった数字でのナビゲートは、視覚的に一貫性があり、ユーザーは各セクションが順序立てて配置されていることを直感的に理解できますよね。

でも「01、A、α、04」といった、異なる種類の記号を使用すると、視覚的な一貫性が失われ、ユーザーがコンテンツの構造や流れを理解するのが難しくなります。このような不一致は、ユーザーの混乱を招きますよね。

その他見出しのフォントサイズを合わせる、というのも反復です。見出し2のフォントサイズが22pxにするなら、別の箇所で使うときにも、同じフォントサイズを反復させてあげます。

また反復はデザインにリズムと動きを加えることもできます。

反復を用いたデザインでよく見られる方法の一つに、特定のモチーフを反復させる手法です。

例えば、特定の形状（葉っぱや動物）をモチーフとして選択して、それを反復して使用することで、「柄」のようなデザイン要素を形成できます。

あとよくあるのがロゴマークをデザイン全体で使うケース。

ロゴマークをデザインのさまざまな部分で反復することにより、ブランドのアイデンティティが強化され、視覚的な連続性が生まれます。

整列（Alignment）→綺麗に整えた印象へ

整列は、デザイン内の要素を体系的に配置することにより、デザインに秩序だった、視覚的な調和をもたらして、整然としたデザインになります。

「右揃えして〜」「左右中央揃えして〜」はまさに整列の例。見出し、テキスト、画像などのあらゆる要素は、特定のラインや軸に沿って必ず配置してあげると、非常に見栄えがよくなります。

（バラバラだとデザイン的には稚拙というか、読みにくいなあ〜という印象になります）

あと「等間隔」というのも整列ではよく使われる概念。

Webでは要素間の「マージン」や「パディング」といわれますが、要素が等間隔で配置されていると、レイアウトが均整を保ち、整った印象になります。

ちなみに、プレゼンやWebデザインでよく「中央揃え」しがちじゃないですか？

なんとなく整った印象があるので。

しかしイケてるデザイナーは、小さな要素の塊をつくって、左揃えにしてあげるとことがあります。

近接（Proximity）→関係づけで情報の組織化・グルーピング

近接とは、関連する情報同士を物理的に近づけてあげることで、グルーピングし、一つの固まりを作ることです。

人間の知覚は、物理的に近い位置にある要素を「関連性がある」と認識する傾向があります。これはゲシュタルト心理学の原則の一つで、視覚的な情報を処理する際に、近いもの同士はグループ化されると認知構造に基づいているんです。

要は知覚の仕組みに組み込まれているわけですね。

近接の基本は、「関連する情報はなにか？」「同じトピックはなんだ？」と意識してあげること。

そしてそれらを組織化してあげることです。組織化はユーザーがデザインを見る、文章を読むときに、情報をより簡単に理解するのを支援します。

たとえば、見出しと関連する本文がある場合。その本文を見出しから離れた位置に配置すると、視覚的に切り離された情報（要は異なる情報）として認識されてしまいます。

だから本文を見出しのすぐ近くに配置（物理的に近い位置）してあげることで、これらが密接に関連していると人間は認識し、情報をまとめてインプットすることができるわけです。

デザインは作り終えた後に、「関連する要素を近づけられないかな？」という視点で見直すと良いです。