デザインをプロらしくする！ デザインの4原則

デザインを勉強したいけど、何から始めたらいいのか分からない…

そんな時にまず覚えたいのが「デザインの原則」です。

デザインには、4つの原則があります。

その原則を使えば、デザイン初心者でも、それなりの見栄えのものを作れるようになる、基本的な原則です。

ウェブデザインに限らず、プレゼン用のスライドやエクセル資料の作成にも役立てることができるので、誰でも知っておいて損はないはずです◎

ノンデザイナーズ・デザインブック

ご存じの方も多いと思いますが、第1版発売から20年も売れ続けているロングセラー本です。

本記事の内容はこちらの本に書かれている内容を参考にしています。

ノンデザイナーズ・デザインブック [第4版]

デザインの4原則

以下の4つが、デザインの4原則です。

1. 近接
2. 整列
3. 反復
4. コントラスト  

これから「名刺の作成」を例として、4つの原則を使ってみたいと思います。

近接

1つ目は、近接の原則です。

近接の原則とは、「関連する要素を、グループ化すること」です。

反対に、関連しない要素は、離して配置します。

ただ要素を並べただけでは、ごちゃごちゃしていて、読む気になれないですよね。

それに対して、関連するものをグループ化した方は、情報（書かれている内容）がスッと頭に入ってきたのではないでしょうか。 

整列

2つ目は、整列の原則です。

整列の原則とは、「要素を見えない線で結ぶこと」です。

下の名刺を見てください。

違和感がありますよね。何が問題なのでしょうか。

 

それは要素が適切に整列されていないことです。

何が適切ではないかというと、1つ目に、整列の種類が多すぎることです。

この小さい空間に、左揃え・中央揃え・右揃えの3種類の整列方法が存在しています。

すると視線を左右いろいろな所に動かさないといけないので、読みづらくなっています。

2つ目に、縦の位置関係が揃っていません。

「肩書き」と「会社名と住所」はどちらも左揃えですが、開始位置がバラバラです。

3つ目に、 横の位置関係も揃っていません。

「会社名と住所」と「電話番号とメールアドレス」は横並びになっていますが、ベースライン（活字の基準線）がズレてしまっています。

ではどうするのが良いのでしょうか。

左右揃え

全ての要素を右に動かして、整列方法を1種類にしました。

 

右（または左）に揃えることで、「名前と肩書き」「会社名と住所」「電話番号とメールアドレス」の3つのブロックの関連性を示すことが出来ます。

また、読み手にもテキストを結び付ける透明な線がはっきり見えるため、力強さや、スッキリとした印象を与えることができます。

中央揃え

次の例では、要素を中央に揃えました。

これも正当な整列方法ですが、読み手には、整列している中央の線（青い線）よりも、縁の線（ピンクの線）の方がよく見えるため、ソフトな印象になります。

中央揃えは「フォーマル」「静か」な印象を与えたい時に向いています。

例えば、フォントはクラシカルなものを使い、余白は広めに取った、大人っぽい雰囲気のデザインには相性が良いです。

（フォントや余白については、他の記事で詳しく説明したいと思います。）

なんとなく中央揃えにするだけだと、素人臭く見えてしまう場合があるので、注意が必要です。

反復

3つ目は、反復の原則です。

反復の原則とは、「デザインの特徴を、作品全体を通して繰り返すこと（一貫性）」です。

反復させる要素は、

• フォント
• 余白
• 色
• 装飾

など、読み手が視覚的に認識できるものなら、何でも良いです。

下の例を見てください。

「近接」「整列」の原則は使えていますが、違和感がありますね。

 メールアイコンはこちらからお借りしました：Eray Zesen on Iconfinder

反復の原則を適用してみた例がこちらです。

 上の例では以下を反復させました。

• フォント
• 余白（行間と、名刺全体を囲む余白）
• アイコンのテイスト

人の目は優秀なので、少しでもおかしいところがあれば、違和感を感じてしまいます。

読み手に余計な感情を与えず、内容に集中してもらう為にも、見栄えの良いデザインが必要なのです。

また、反復の原則は、1ページの制作物だけでなく、複数ページの制作物で一貫性を示す為にも役立ちます。

例えば、同じデザインの名刺を使えば、同じ会社の人間であることが分かります。

また、名刺とウェブサイトのデザインに一貫性を持たせることで、「この会社のサイトは、この前名刺交換をした人のサイトだな」などと分かってもらうことができます。

コントラスト

4つ目は、コントラストの原則です。

コントラストの原則とは、「メリハリをつけて、読み手の目を引くこと」です。

最初に挙げた例も悪くはありませんが、名刺で一番伝えたい情報である、名前が目立ちませんでした。

少し文字サイズが少し大きいだけでは、読み手には伝わりません。目立たせたい文字なら、もっと大きく太く、メリハリを付けます。

コントラストで大事なのは

• 情報を整理して、優先順位を付けること
• 目立たせたいものには、ハッキリと差を付けること

です。 

他にも、色や装飾など、コントラストを付ける方法は、たくさんあります。

ここが1番のデザインの醍醐味と言えるかもしれません。それについては他の記事で説明していきます。

まとめ

本記事ではデザインの4つの原則について説明しました。

1. 近接…関連する要素をグループ化すること
2. 整列…要素を見えない線で結ぶこと
3. 反復…全体に一貫性を持たせること
4. コントラスト…メリハリを付けること

これらの原則を使うことで、分かりやすく、おもしろい、読み手の興味を引くデザインを制作することができます。

ポイントは、中途半端にやらずに、ハッキリとやることです。

原則を覚えたら、あとは、たくさんのデザインを見ましょう。

街の公告でも、ウェブサイトでも、学べるところはたくさんあります。

（私のオススメはPinterestです。）

自分が良いと思うデザインには、どんな原則が適用されているのか研究し、真似することで、少しずつ自分の引き出しを増やしていきましょう！

＊

18/08/11追記

#ノンデザ20周年 なるキャンペーンを実施しているようです。

https://book.mynavi.jp/nddb/

はじめまして

はじめまして。ぱち子です。

某ウェブ事業会社で、ウェブデザイナー兼マークアップエンジニアとして働いています。

4月になり、街にはキラキラした新社会人がたくさんいますね！

自分の社会人歴を数えると、ゾッとしてしまいます。

この業界ではもう立派な中堅社員になってしまいました…！

毎日、仕事は楽しいけれど、悩むこともたくさんあります。

なので、スキルアップのために、今日からブログを始めたいと思います！

目的は以下の2つです。

デザインスキルの向上

私は理系出身デザイナーなので、デザインについては会社に入ってから業務を通して学んできました。

デザインを学校で専門的に学んでいないことがずっとコンプレックス……なので、改めて基礎から勉強し直します！

そしてそれをブログを通して人に伝えることで、自分の理解も深めて、もっと自信を付けたいと思います。

このブログのデザインも、今は公式テーマのものをそのまま使っているだけですが、カスタマイズしながら記事にしていけるといいなぁと思ってます◎

考える力と伝える力の向上

入社前、デザイナーの仕事のイメージは、「美しいビジュアルを作ること」だと思っていました。

しかし、働いてみて分かったのは、それ以上に「考えること」と「伝えること」も重要だということです。

ビジュアルデザインをする前に、「そもそもどんな課題を解決する為のものを作るのか」という目的を考えて設計する段階がとても大切で、それが曖昧だと、途中でブレてしまったり、何か作っても結局誰の役にも立たない…なんて悲しいことになってしまいます。

また、デザインを見て思うことは人それぞれなので、自分が作ったデザインの意図は、言葉で説明して、周りの人に理解してもらう必要があります。

私の尊敬するデザイナーたちは、ビジュアルの表現力だけでなく、デザインを説明する為の言葉の表現力も優れています。

（更に言うと、人としても尊敬する人ばかりで、デザイナーってスーパーマンだな…と思います笑）

スーパーマンへの道のりは長いですが…

このブログを通して、頭の中にモヤッとある考えをきちんと形にして、それを人に分かりやすく伝えられるよう、情報設計力や語彙力を鍛えていきたいと思います！

今年は自分にとって節目の年でもあるので、がんばっていきます！

どうぞよろしくお願いします。