TIPS 2019.4.03

非デザイナーでも必須！4つのデザイン原則

Web業界や事業会社でも現在最も採用に苦戦していると言われるのがデザイナーです。

デザイナーというと、専門ソフトを使えたり、美術系の学校を出ていたりということで、違う職種から見るととてもハードルが高く感じることもあるのではないでしょうか？

確かにデザインは完成のないものでもあり、センスも必要とされますが、いくつかの決まったルールに従えば、専門的なデザイナーでなくとも、デザインのツボを押さえることが可能になります。

今回は出版されてから20年以上にわたって、多くのビジネスマンやデザイナーにデザインのテクニックを伝え愛されてきた名著『ノンデザイナーズ・デザインブック』で触れられた4つのデザイン原則について説明していきたいと思います。

要素の違いを視覚的に区分する「コントラスト」

コントラストとは直訳すると、「対比」「対照」などの意味を持ちます。デザインの観点でのコントラストとは、特に違う要素のもの同士を明確にデザイン上で区分することとを言います。

コントラストをつけるための要素には、

サイズ
色
フォント
行間

などがあります。

コントラストを利用した例:雑誌の1ページ

具体的な例をあげてみましょう。

雑誌の1ページを想像してください。「タイトル」「小見出し」「本文」の要素が並んでいますね。多くの場合、一番大きくて目立つフォントで書かれているのがタイトル、その次に大きい小見出し、本文は比較的小さめの文字、というように配置されていないでしょうか。

これはタイトルがそのページで一番伝えたいこと、小見出しは本文の要旨、本文は解説文など、というように、それぞれ異なる役割があることをコントラストで示したわかりやすい例と言えます。コントラストをつける際に重要なのは、情報自体を組織化することです。

さきほどの雑誌の例なら、タイトル、小見出し、本文それぞれには役割があります。コントラストをつける前に、デザインするものの要素を洗い出し、情報全体を構造化することで、よく整理されたデザインに近づきます。

情報の関連性をまとめる「近接」

「近接」は「グルーピング」とも呼ばれ、その名の通り関係性のある情報同士を物理的に近づけて、関連性を示す方法です。

シンプルでわかりやすい原則なので、ありとあらゆる場所で利用されている原則です。

近接のわかりやすい事例としては、名刺があります。名刺には名前、会社名、会社の連絡先等が記載されていますね。その際に、大半の名刺のレイアウトでは会社名と会社の連絡先が近接しています。近接させることで、「会社」と「その会社の連絡先」が紐づいていることを示しています。一方で名刺の主体者がその業務用携帯電話の電話番号を記載する際、名前とその電話番号が近くで固まっているケースもあります。

ページ内の項目を意識的に揃える「整列」

整列は、先に述べた「近接」に近い考え方です。

近しい要素は、同じルールで揃えることで、同じ要素であることを示します。また、整列を使うと見た目が整ってすっきりとしたデザインに見せることができます。

整列のわかりやすい例として、再び名刺を思い浮かべてください。名刺に記載される氏名、役職、会社名は、すべて左揃えか右揃えのどちらかに統一する必要があります。始端、終端を揃えることで全体にルールが生まれ、わかりやすいデザインになります。

作品全体の特徴やトーンを揃える「反復」

反復とは作品全体を通して、何かの特徴を繰り返すことで、その一貫性を示すためのルールになります。

反復については、1枚のクリエイティブよりも、連続したクリエィティブで生かされることが多いです。プレゼン資料などは反復が最も生かされているクリエイティブの1つとなります。

例えばパワーポイントなどで作成するプレゼンスライドを想像してみましょう。パワーポイントなどのスライド作成ソフトには、多くの場合「マスタ機能」が用意されています。マスタ機能はタイトルや見出しのサイズや場所を揃えたり、スライド全体の基本デザインを揃えたりすることで、要素の反復を行いスライドとしての一貫性を担保します。