デザインを始めてからしばらく経つけど、なかなか上手くならない…。
僕は全くの未経験から、周りにデザインを理解している方もいない環境でデザインを独学で習得してきましたが、最初の頃はコツが掴めず苦労していました。
でも安心してください。デザインはセンスではなく、知識によって上達していきます。
なのでデザインに関する知識を付け、経験を積んでいけばいつか必ず良いデザインがアウトプットできるようになります。
デザイン初心者のあなたに、まず最初に知っておいてほしい知識は「デザイン4大原則」です。
これは、Webデザイン・グラフィックデザイン・UIデザインなど、あらゆるデザインに活用できる考え方であり、デザインの基本になります。
デザイン4大原則を習得すると、今よりも確実に良いデザインができるようになります。
この記事では、デザイン歴10年以上でスタートアップ企業でデザイン責任者を務める私が「デザイン4大原則」について図解も含めて解説していきます。
ここに書いてあることを意識して、あなたのデザインをより良いものに磨いてみてください！
目次
デザインが上手なデザイナーが意識している、デザイン4大原則とは？
デザイン4大原則とは、「近接」「整列」「強弱」「反復」の4つから成り立つデザイン原則のことです。
デザイン4大原則
近接 (Proximity)
整列 (Alignment)
強弱 (Contrast)
反復 (Repetition)
ノンデザイナーズ・デザインブックという本でも取り上げられたことがきっかけで一躍有名な考え方になりました。
どんなデザインでもこれらの原則から成り立つとされており、この4つを抑えることで資料のデザインが格段に上手くなります。
それでは、ここからは具体的にデザインの4原則をそれぞれ詳しく解説していきます。
1. 近接
近接とは、関連する情報同士を近づけて、情報のまとまりをつくることです。
それぞれの要素がまとまらずに配置されていると、どの情報がどれに関連するものなのかをひと目で識別しづらくなり、結果としてわかりづらくなってしまいます。
関連する情報同士のまとまりをつくり、グループにすることで、パッと見たときに理解しやすくなります。
ここではカード型のUIパーツを例にして解説します。
近接が意識されていない左側の例では、カード内の文字と文字の間や、文字とカードの間がそれぞれ均等に空いています。
それに対し、近接が意識されている右側の例では、それぞれの余白が異なっていることが見て取れると思います。
それぞれ、関連する情報をグループとして余白の大小を調整することで、情報が整理されて見やすくなっていることがお分かりいただけるでしょうか。
近接を取り入れるポイント
関連する情報同士は、余白を狭めて近づけてあげる
関連しない情報同士は、余白を大きくして離して遠ざけてあげる
2. 整列
整列とは、一定のルールを持たせてそれぞれの要素を配置することです。
要素がバラバラに配置されていると、どこを起点に見れば良いのか戸惑いますし、見る人を疲れさせてしまいます。
そのため、情報が理解しづらくなり、読むのを諦めてしまうユーザーも多くなります。
近接と同じく、カードを例にします。
整列が意識されていない左側のカードは、文字の開始位置がバラバラになっています。この場合、視点が左右に大きく動いてしまい、意識的に視点を個々の要素にフォーカスしに行かなければならず、読むのが疲れてしまいます。
対して、整列が意識されている右側のカードは、文字の開始位置が一定なので、視点を意識せずともすべての要素を自然に読むことができます。
整列を取り入れるポイント
文字などの要素の開始位置をなるべく揃えてレイアウトする
関連する要素の文字色やフォントを統一する
3. 強弱
強弱とは、要素の優先順位をデザインで明確に示すことです。
要素が強調されていないと、パッと見たときにどの順序で見ていくと適切に情報が把握できるのか分からず、わかりづらくなってしまいます。
ここでは、Webサイトのファーストビューを例にしてみます。
強弱が意識されていない上のファーストビューでは、各要素に多少のフォントの大小はあるものの、どれも同じようなデザインルールになっています。
対して、強弱が意識されている下のファーストビューでは、新登場のラベルがオレンジで装飾されており、商品名はフォントサイズが小さくなっています。
一番大きな要素はキャッチコピーで、その下にある「今すぐ予約」のボタンは白く強調されています。
さらに、隣の「さらに詳しく」のリンクは、詳細を見たい人だけにクリックしていただけるように、控えめながらもアイコンが付いておりリンクであることが示されています。
このように、要素の強弱を付けることで、最も読んでもらいたい文字や、操作を促したいアクションが明確になります。
強弱を取り入れるポイント
見てもらいたい情報に優先順位を付ける
優先順位に沿って、要素の大きさやカラーを変化させる
4. 反復
反復とは、同じレベルの要素ごとにデザインルールを繰り返すことです。
デザインルールを反復することで関連する要素にまとまりが生まれるほか、装飾が整理されて洗練された見た目になります。
反復を使ったWebサイトのデザインを例に解説してみます。
この例では、大きく分けて2箇所、反復が用いられています。
1つ目がセクション見出しです。AboutやStoreといったWebサイトのセクション見出しがしっかりと反復されており、各セクションを区別しやすくなっています。
2つ目は店舗リストです。各店舗の情報がひとまとまりになったリストが店舗単位で反復されており、各店舗の情報が認識しやすくなっています。
こういった形で、デザインルールを繰り返すことで情報の視認性と洗練されたデザインを両立することができます。
反復を取り入れるポイント
同じ要素を繰り返すときは、デザインスタイルも一緒に繰り返す
見出しやリストなどのデザインルールを定義する
デザイン4原則を意識してデザイン事例を観察する
この記事で解説した「デザインの4大原則」ですが、実際にあらゆるWebサイトやアプリでこれらの原則が取り入れられています。
具体的にどのように使っていけば良いか、イメージを膨らませるためにも、ぜひいろいろなWebサイトやアプリを、デザインの4原則を意識しながら観察してみてください。
UIデザイン歴10年のデザイナーの私がよく利用するデザインギャラリーサイトを以下の記事で紹介していますので、そちらもぜひお読みいただけると嬉しいです。
%3Cdiv%20class%3D%22iframely-embed%22%3E%3Cdiv%20class%3D%22iframely-responsive%22%20style%3D%22height%3A%20140px%3B%20padding-bottom%3A%200%3B%22%3E%3Ca%20href%3D%22https%3A%2F%2Fryota-kikuchi.com%2Fblog%2Fui-inspiration%22%20data-iframely-url%3D%22%2F%2Fcdn.iframe.ly%2Fapi%2Fiframe%3Furl%3Dhttps%253A%252F%252Fryota-kikuchi.com%252Fblog%252Fui-inspiration%26amp%3Bkey%3D2a7aa6aa4e2c53ca7a7468311ef03b58%22%3E%3C%2Fa%3E%3C%2Fdiv%3E%3C%2Fdiv%3E%3Cscript%20async%3D%22%22%20src%3D%22%2F%2Fcdn.iframe.ly%2Fembed.js%22%20charset%3D%22utf-8%22%3E%3C%2Fscript%3E
関連リンク
デザインの4大原則に関する記事は、2019年に「chot.design」に寄稿していますが、それらをよりWebデザインやUIデザインで実践しやすいように再解釈して解説しています。
