デザインに行き詰まった時、基本原則を理解し使えているか、改めて確認することはとても大事です。
今回は初心に戻り、基本原則とはどういったものなのか改めて認識するためにブログに書きました。
４つの基本原則とは
4原則とは、以下の4つになります。
- 近接
- 整列
- 反復
- コントラスト
近接
近接の原則は、関連する項目をまとめてグループ化するということです。
関連する項目を空間的に近づければ、それらは1つのまとまったグループに見えるようになります。
近接は、そのページの構造と内容の直感的な手がかりになるので、とても重要です。
目的
近接の基本的な目的は組織化です。
他の原則も組織化の効果が大きいですが、関連する要素を近づけてグループ化するだけで自動的に組織構造が出来上がり、
ユーザーがスムーズに情報を理解できるようになります。
効果の出し方
グループ化:
関連する要素を近くに配置することで、それらの要素が一つのグループとして認識されます。
間隔の活用:
グループ間に余白を作ることで、それが関連のない項目であることが一目でわかります。
整列
整列の原則は、ページ上のすべてのものを意識的に配置しなければならない、すべての項目がページ上のなにか他のものと視覚的に関連していなければならないということです。
目的
整列の基本的な目的は、ページの一体化と組織化です。
デザインに秩序感を与え、ユーザーの視線を誘導し、情報を理解しやすくします。
ページ上のすべての要素が一体化され、結び付き、関連しているようにするには、個々の要素を結びつける視覚的な要因が必要になります。
ページ上の個々の要素が空間的に離れている場合でも、配置次第で、それらが関連し、一体化されているように「見せる」ことは可能
また、整列は洗練された印象を与える目的でも使われます。
効果の出し方
意識的な要素の配置：
空間的に離れていても、揃えることができるほかの要素を必ず見つける
例えば、中央揃えを選ぶなら、意図的に選択する。「とりあえず」ではだめ
強いベースラインを見つける、作る：
下の中央揃えと右揃えの例でいうと、中央揃えのものも正しい整列方法ですが、右揃えの方が、揃っている箇所がはっきりしているため、ベースラインが強いことがわかります。
この強いベースラインは、レイアウトの体幹を支え、より洗練された印象を与えます。
逆に中央揃えはベースラインを強く出さないことから、少しソフトな印象を与えたい時に使えます。
反復
反復の原則は、デザイン上のなにかの特徴を作品全体を通して繰り返す、ということです。
目的
反復の基本的な目的は、一体化と視覚的な面白さを加えることです。
また、反復はブランドのアイデンティティを強調し、ユーザーエクスペリエンスを向上させる効果があります。
効果の出し方
見出し・小見出しの統一：
シンプルに見出しを太字で統一するだけでも反復の効果で一貫性が出ます。
反復をグラフィックシンボルにする：
太字体、色、シェイプなど、すでに使っている反復のデザイン性を少し強めることで、意識的なグラフィックデザインになります。
番号付きのリストの数字のデザイン性を強めたりなど…
グラフィックシンボルを作ることで、ページの一体感が強まります。
最初と最後で反復：
ユーザーの視線コントルールを意識したデザインで、最初と最後に反復を持ってきて、視線を行ったり来たりさせる視覚的トリックがあります。
例は、上下に線を入れて、下まで行った時に視線が上に戻る誘導になります。
コントラスト
ーHerman Melville
コントラストをつけることで、要素間の差異を強調し、視覚的な際立ちを生み出します。
コントラストの原則は、2つの項目が正確に同じでないのなら、はっきりと違いを出すことです。
目的
コントラストの目的は、ページに面白みを作り出すことと、情報の組織化です。
ある項目から次の項目への論理の流れを明確にし、情報の組み立てがユーザーにすぐにわかるようにします。
★逆にコントラストを付けたせいで、ユーザーを迷わせたり、焦点でないものを焦点に見せてしまうことは避ける
効果の出し方
色のコントラスト
色相の差異
対照的な色相を組み合わせることで、要素同士が際立ちます。
明暗の差
明るい色と暗い色を組み合わせることで、テキストやアイコンが視認性を持ち、背景から浮かび上がります。
サイズとフォントのコントラスト
文字サイズの差異:
タイトルや重要な情報は大きな文字で表現し、それに対して本文は小さな文字を使用することで、情報の重要性や、組織化を視覚的に行います。
12ポイントの文字と14ポイントの文字の間にはコントラストは生まれません。
コントラストの効果を発揮させたい時は、大胆に違いを出すことが大事になる場合があります。
フォントスタイルの変化:
太字や斜体、異なるフォントの組み合わせを利用して、テキストに動きや強調を加えます。
形状やパターンのコントラスト
形状の対比:
細長い要素と太い要素、角ばった形状と丸みを帯びた形状など、対照的な形状を使うことでデザインにダイナミズムを与えます。
パターンの差異:
異なるパターンやテクスチャを使用することで、視覚的な変化を生み出し、デザイン全体に興味を引きます。
まとめ
この4原則は常に4つ関連してあるものなので、常に全て意識しつつデザインできるようにならなければと改めて感じました。
意識せず出来てきてしまっているが故に、考えることを放棄している時もあるので、今後はこの4原則を意識して、「意図的に選択する」ことを大事にしようと思いました！
参考：
ノンデザイナーズ・デザインブック
