TECHSCORE BLOG

クラウドCRMを提供するシナジーマーケティングのエンジニアブログです。

デザインの4つの基本原則について学ぼう!

仕事をしていく中で、プレゼン資料や企画書を作ったりすることってありますよね。
しかし、「なんかうまく資料が作れなくて見にくいな…」と思うことってよくありませんか?

実はデザインには守るべきデザインの4つの基本原則があり、デザイナーなら自然にそれを上手く活用できています。
私たちのようなデザイナーでない方にとっては、改めて勉強するのはハードルが高いかもしれません。ですが、簡単で覚えやすいこの原則を理解すれば、きっと今までと違う素敵な資料を作ることができるようになります。

今回は図を用いて基本原則を紹介していきたいと思います。

太田 真哉(オオタ シンヤ)
ハンバーガーが好きなトロンボーン吹きです。フロントエンドエンジニアをしてます。
年に数回くらい、プライベートで演奏会のチラシや販促物をデザインしています。


4つの基本原則

まず、デザインには抑えておくべき下記4つの基本原則があり、見やすいデザインは自然とそれらが相互に影響し合ってできています。


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

言葉だけ見ても正直なところイマイチ理解できないかもしれないですが、事例を見るとおそらく「なるほど!」というものが多く、普段からよく目にしているものばかりだと思います。

近接

近接とは簡単に言えばグルーピング(組織化)することです。 関係のある要素を近づけてグルーピングをするだけで、情報が整理されます。

近接なし 近接あり

たとえば、図とそのタイトルはなるべく近づけて対応関係を明確にします。
近接がないパターンの場合は上下どちらの画像のタイトルなのかがすぐにわかりにくいですよね。
一方で、近接ありの場合は関係のある要素同士が近づいたことで、読み手が図とタイトルの関連性を認識しやすくなっていると思います。

整列

整列は情報を一定のルールにしたがって並べ、要素の位置関係を揃えることです。
情報が規則正しく並ぶことで視認性が上がり、より理解しやすくなります。

パワーポイントなどでもよく目にすると思うのですが、「左寄せ」「中央寄せ」「右寄せ」といったテキストの配置も整列の一環です。

左側の名刺のデザインのように、関連する要素の配置がバラバラだとあっちこっちに視線がいってしまって読みにくいですよね。
さきほど覚えた近接も使って情報をまとめてあげつつ、整列を意識して左右を揃えてあげることで見やすさが向上します。

整列なし 整列あり

揃えに着目してレイアウトすると、赤の直線のように、視線で透明な直線が描けると思います。
整列が上手くできているデザインには透明な直線ができるので、作る際には線が描けているかを確認をしてみてください。

反復

反復とは繰り返しのことです。
デザイン全体を通して同じ要素をパターン化し、反復して利用することでデザインの統一感が強化されます。
そうして一貫性を作ることでユーザが読みやすいデザインになります。

反復なし 反復あり

企画書を作るにあたって、箇条書きでサービスの紹介をしたりする場面があると思います。
その際、反復なしのように1つ1つデザインを変えてしまうと全体の統一感がなくなってしまい、とても見にくいデザインになってしまいます。

装飾やカラーがたくさん用意されているソフトもよくあるため、色々使いたくなってしまう気持ちはとてもわかります。
しかし、デザインの統一感を出すためにも何種類かに絞り、繰り返し同じ素材を利用していくようにしましょう。

コントラスト(対比)

最後はコントラスト(対比)をつけることです。
強弱や色、フォントなどを上手く使ってメリハリをつけることで見ている人を引き込む力を加えます。

対比なし 対比あり

情報の優先度を考慮し、重要な要素はより目立たせるなどして差別化します。
重要度の高い情報はカラーをつけたり大きくして目立たせ、一方で低い情報は小さくしたりすることで強弱が生まれ、ひと目で何が大事かわかります。

コントラストをつける場合は、大げさにやることがとくに大事になってきます。
フォントサイズ1ptの違いで変化させたり、本文は黒でタイトルを茶色にしてカラーを変化させたとしても、重要性に気づいてもらえません。

中途半端な大きさやカラーの差にせず、極端に差をつけましょう。

おわりに

デザインの4つの基本原則について簡単に紹介しましたがいかがでしたか?
4つの原則はどれも簡単にできることでありながらも、組み合わせて活用することで全体のレイアウトがキレイに仕上がります。
有名なデザイナーが作るデザインもこれらが上手く組み合わさってできているものばかりです。(あえて枠にはめていない部分もたくさんあるとは思いますが…)

あくまでこれは基礎的なものになり、余白の使い方やカラーリング等応用がいっぱいあると思いますが、基本を学ばずして応用はできないと思うので、資料作成の際はこれらの4つの原則を思い出して使ってみてください。

シナジーマーケティング株式会社では一緒に働く仲間を募集しています。