デザインの4つの基本原則をちゃんとまとめてみた

2020年01月24日

デザイン

今回は、デザインの基本の4大原則についてちゃんとまとめていこうかなと思います。なんとなくは理解できていますが、人にちゃんと説明できるほどわかっているかと言われると微妙なので、ちゃんとまとめて理解を深めようと思います。

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

そもそも4大原則とは何なのかという方もいるでしょう。4つの基本原則というくらいですからもちろん4つあります。

その4つというのが、近接・整列・反復・コントラスト(対比)です。文字だけ見るとあんまりよくわからないですよね。デザインにおいてこの4つは非常に重要になってきます。今回は、1つずつしっかりとまとめていきます。

 

近接について

まずは1つ目、近接からです。近接は、お互いに関連し合った情報や項目を、まとめてグループ化することです。 関連しているものは、個別の要素としてではなく、まとめて1つの視覚的要素にします。

関係があるんだよと見ている人に伝えるためにしっかり守らなければなりません。この近接が守られていないと、視線があちこちにいってしまい情報が伝わりにくくなってしまいます。どこから読めばいいのか、ちゃんと情報を見終わったのかわかりやすくするためにもこの近接というのはとても大事なのです。結構地味で目立たないことなのかもしれんませんが大切なことなんですね。

関連した情報を近接するときは、フォントなどのサイズや太さ、位置関係など変更しなければいけません。名刺で例えると、名前と自分の住所や連絡先など情報が一緒のフォントサイズであったり、すぐ近くにあったりしたらどっちを見ればいいのか、どっちが名前なのか住所などの情報なのか瞬間的に見たときに分かりずらくなってしまいます。そこでフォントサイズを変更したり、配置をお互い離すように変更したりする必要があるわけです。

近接で注意することは、情報や項目を見ている人が一瞬でも迷わないようにちゃんと関連づけることです。要素同士の関連を近接によって生み出してあげましょう。もちろん関係のない要素同士を関連づけてまとめてしまっては悪くなる一方なので気を付けてくださいね。

 

整列について

続いて、整列についてまとめていきます。デザインするときは、すべての要素を理由や根拠なしに配置するのはだめです。すべての要素を視覚的につながりを持つようにしなければなりません。ちゃんと整列しているときは、要素が離れていても強く団結した要素同士になり、ベースラインが揃います。 

整列では、中央ぞろえは上から下に真ん中に揃うので、整列する事はしているのですが、少し弱く見えてしまうことがあります。中央ぞろえではなく右ぞろえか左ぞろえにするとより強く要素を結びつける透明の線が出てきます。中央ぞろえは整列に使われる一般的な手法です。うまくいかないことが少なく安心感を与えてくれるからです。中央ぞろえは静かで普通といった印象であり、ただ単にありきたりで面白くなく見えてしまいます。中央ぞろえはいけないということではありませんが、最初のうちは強い右ぞろえや左ぞろえを使うことで作品のクオリティは上がるはずです。もし、中央ぞろえを使うなら、中央ぞろえがもつ効果を意識しながら使いましょう。自分がデザインで表現したいものが中央ぞろえの効果とマッチしているなら意識的にしっかり使いましょう。

整列で気を付ける事は、意識的に要素を配置する事です。要素同士が離れていても揃えることができる要素を見つけましょう。また、同じデザインのなかで2種類以上の文字ぞろえを使わないように気をつけてください。そして先ほども書きましたが、中央ぞろえを使うときはとりあえずで使わず意識的に使いましょう。

 

反復について

次は、反復についてです。反復はデザイン上の特徴を全体を通して繰り返すことです。配置であったり、色や線など繰り返す特徴はたくさんあります。見ている人が視覚的に認識できるものならなんでもOKです。

反復は統一性とも考えられます。この記事の各項目の見出しもは反復で統一感を出しています。それぞれの項目が同じ領域にあることを明確化しているのです。もし近接や整列の項目と今の反復の項目の見出しが違っていたら記事全体の統一感がなくなってしまいます。自然にできる統一感ではなく、自分で意識的にデザイン全体を一体化するという努力が反復には必要です。自然にできている反復をさらに一歩進めることが大切です。

反復で気を付ける事は、うるさすぎず、強すぎないように反復させる事です。強すぎるは反復は混乱する原因になってしまいます。見出しのタイトルを大きくしすぎたらさすがに反復しているとはいえ鬱陶しくなるでしょう。

 

コントラスト(対比)について

最後はコントラストについてです。対比や強調とも言いますね。コントラストは、見ている人の目を引き込むためにほかの要素よりも目立たせることです。2つの要素が同じものでないなら、異なるようにします。コントラストは目を引き込むだけでなく、情報をまとめてどこに何があるかを明らかにできます。このデザインの情報が見ている人に瞬間的に理解できるようになるわけです。

コントラストは、大きな文字と小さい文字や画像の大きさ、空白の大きさや色など様々な方法で作り出すことができます。なかなか最初は違いを出すために文字の大きさを変えたり、空白をがっつり空けたりするのはなかなか難しいことでしょう。しかし、臆病になってしまいコントラストをはっきりとつけれないと違いが出ませんです。14pxと16pxの文字にはコントラストは生まれません。コントラストは臆病にならずにはっきりと違いを出すようにすることが大切です。

 

まとめ

今回、デザインの基本原則についてまとめてました。前からある程度は理解できていたのですが、こう自分で言葉にまとめるとよりいっそう理解が深まりますね。デザインはやはり見てくれる人たちのことを考えることが何より大切なのかなと感じました。見た瞬間に情報が伝わるようにデザインしていかなければなりません。今回のまとめではこのようなことを再認識できたかなと思います。まとめることで新しい気づきなどもあるので、これからも日々の学習を記事としてまとめていければと思います。

Pocket

related

XDでニューモフィズムを作ってみた

今回は、ニューモフィズムをXDで作ってみましたので紹介していこうと思います。完璧にはできていないと思いますが、 ニューモフィズムっぽく、できるだけ近づけて作っていこうと思います。ついでに、ニューモフィ

デザイン

2020.07.11

黄金比と白銀比(大和比)について

今回はデザインを勉強している人のほとんどは知っていると思いますが、黄金比と白銀比についてです。デザインを美しくするためのテクニックとしてしっかりまとめていこうと思います。 黄金比について まずは黄金比

デザイン

2020.02.14

profile

kobayashi kent

トライデントコンピューター専門学校Webデザイン学科
アニメとかゲームとか音楽聴くのが好き