気になる人
- 非デザイナーだけど見やすい名刺やプレゼン資料を作りたい
- デザインのポイントを使っていつもよりわかりやすいものを作りたい
- 簡単にいいものをデザイナーに頼まず作りたい
この記事は、そんなお悩みをもつ方にデザイン４原則というデザインの基本技術を使って解決する方法を、実例を交えて解説していきます！
はじめまして、とある企業で企画やWeb/UIデザイン・UXデザインを担当していますモーリーと申します。
デザインの基本、「デザイン４原則」。
たった４つのポイントを掴むだけで、いつもと違ったより見やすい資料やバナー・チラシ、そしてWEB・アプリデザインを作り上げることができます。
今回は、そんな魅力的なテクニックであるデザイン４原則について解説していきます。
目次
近接 Proximity：関係する情報をグループ化する
近接とは、関係する情報をまとめてグループ化することです。
バラバラに配置されたまとまりのない情報は、理解するのに時間がかかります。
そこで【近接】の原則を活用し、近い情報などをグループ化します。
それぞれの関係のあるグループと関係のないグループ間で少し大きめの余白を取ることで、直感的に情報の構成を理解できるようになります。
人は、位置的に近いものを「関係あるもの」と認識するため、近接を使うだけで、とてもみやすいデザインにすることができます。
上で添付している写真の近接の例を見てみましょう。
左図の例では、情報にばらつきがあり、どこをみていいか視点が定まりません。
内容を理解するだけでも時間がかかってしまいます。
右図の例はどうでしょうか？
位置関係が整理され、関係のあるグループは塊に、そうでないグループは少し余白を持たせたことでみやすさが格段に上がったと思いませんか。
近接のポイント
近しい情報のグループ化と余白を使う。
近接を使ったアプリ・WEBをデザイン
現在世の中にリリースされているみなさんが使っているサービスには必ずこの４原則すべてが使われています。
次に、近接を使ったアプリ・WEBのデザイン例をご紹介します。
左図の例では、画像エリアに対して、下のテキストが離れていることで、どこのグループに属しているのか直感的にはわかりません。
しかし、右図の例ではしっかりと塊になって適切なグループで近接しているためテキストがどこに属しているのかがすぐにわかると思います。
整列 Alignment：要素を整列して配置する
整列とは、要素を整列して配置することです。
文字のはじまりなどが揃っていないと、とても読みづらく、全体的に散らかっているイメージになってしまいます。
そこで、【整列】の原則を活用し、情報の中の要素の位置（テキストであれば、先頭や末尾）を揃えます。
そうすることで、情報の構成を理解できるようになります。
また、整列を利用すると、自然と目に見えない線が生まれます。
上で添付している写真の整列の例を見てみましょう。
左図の例では、近接と同様、必要な情報はすべて載っているはずですが、どこを見ればいいのか視点が定まりません。
まずは、どの要素がグループ化（近接）できるかを考えましょう。
その上で、整列を意識して情報を配置します。
右図の例では、フォントの種類やサイズは変えずに、近接と整列を使っただけで格段にみやすくなったと思いませんか。
整列のポイント
見えない線を意識する。
整列を使ったアプリ・WEBをデザイン
次に、整列を使ったアプリ・WEBのデザイン例をご紹介します。
左図の例では、要素の左側の隙間が統一されていないため、閲覧者に違和感を与えてしまいます。
しかし、右図の例では要素ごとの隙間がしっかりと統一されているため、より洗練され整ったイメージを与えることができます。
反復 Repetition：特徴的なものを、意識的に繰り返し使う
反復とは、特徴的なものを、意識的に繰り返し使うことです。
会社のホームページや商品紹介ページなどは一定のルールを守って作られていることが多いです。
例えば、タイトルには同じサイズ・色と罫線を使うなどです。
同じ要素を繰り返し使う（反復する）ことでサイト全体で一貫性や統一感を持たせることができます。
また、同じデザイン構造であると、情報を素早く理解することができます。
逆に、サイト内に反復がないと、統一感がなく、サイト全体に一貫性が生まれません。
上で添付している写真の反復の例を見てみましょう。
左図の例では、連絡先のエリアで、全てテキストを使用しています。
テキストのデザインでも、問題はありませんが、右図の例では、アイコンを利用することでテキスト情報が減り、より理解しやすくなりました。
反復のポイント
ルールを決めて統一すること。
反復を使ったアプリ・WEBをデザイン
次に、反復を使ったアプリ・WEBのデザインをご紹介します。
左図の例では、一定のルールはなく、要素同士の隙間も統一されていません。
しかし、右図の例では似ているものに、同じ条件でデザインを適用しているため、統一感が出てより理解しやすくなりました。
強弱 Contrast：情報の優先度を明確にし、はっきりと違わせる
強弱（コントラスト）とは、情報の優先度を明確にし、優先度がある場合や異なる情報の場合に見た目をはっきりと違わせることです。
見出しと本文で全く同じ大きさだと、違いがわからずとても読みずらいものになってしまいます。
そこで、【強弱（コントラスト）】の原則を活用して、重要な部分や目立たせたい部分をしっかりと差別化させます。
そうすることで、重要な部分や伝えたいことをしっかりと伝えることのできるデザインになります。
上で添付している写真の強弱（コントラスト）の例を見てみましょう。
左図の例では、余白とテキストサイズのみで情報に強弱（コントラスト）がありますが、右図の例では、背景色をつけ、よりはっきりと強弱（コントラスト）があることがわかります。
重要な部分や内容にうまく強弱（コントラスト）を適用することでしっかりと伝わりわかりやすくなったと思いませんか。
強弱（コントラスト）のポイント
思い切って差をつけること。
強弱（コントラスト）を使ったアプリ・WEBをデザイン
次に、強弱（コントラスト）を使ったアプリ・WEBのデザインをご紹介します。
左図の例では、テキストサイズや色に強弱（コントラスト）はなく最初にどこに視点をおけばいいかわかりずらい状態になっています。
しかし、右図の例ではテキストサイズと色合いに強弱（コントラスト）がつき、しっかりと視線を誘導できるようになりました。
まとめ
「近接」「整列」「反復」「強弱」の４つのデザイン原則・基本についてご紹介しました。
いかがでしたか？
この４原則を利用することで、チラシなどの紙媒体だけではなく、WEBやアプリUIはもちろんのこと報告書やパワポを使ったプレゼン資料も格段にみやすくすることができます。
ぜひ活用してみてください。
もっと詳しくデザイン４原則について知りたい方や、さらにデザインについて知りたい方は、次の２つの書籍がオススメです。
どちらか１つを購入すれば２冊は必要ないと思います。
ちなみに、このデザイン４原則の記事を読んでから、居酒屋などのメニューを見てみてください！
この４原則をしっかりと意識しているお店とそうじゃないお店がすぐにわかって、いつもと違った視点でメニューを読むことができます！
合わせて読みたい
余白を使ってデザイン力をあげる３つのポイント 【パワポにも使える】
