こんにちは、NNCの平林です。
今回は初めてデザインに取り組む方に向けて、制作のポイントについてお話ししたいと思います。
デザインというと、やはりセンスや感覚に委ねられるイメージを持つかもしれません。
ですが、良いデザインを作るための、具体的な「ルール」がいくつか存在します。
その1つが今回ご紹介する「デザインの4原則」です。

バナーやwebデザイン、ロゴデザインなどジャンルを問わず、共通して活かすことができる考え方なので、ぜひ参考にしてみてください。

デザインの4原則とは

「デザインの4原則」とは、デザインの要素を整理し、わかりやすく伝えるための4つの基本的なルールのことです。
デザインの4原則は、以下の4つで成り立っています。

1. 近接 / 関連する情報をグループ化する
2. 整列 / 見えない線に沿って揃える
3. 反復 / 同じ要素を繰り返す
4. 対比 / メリハリをつける

これらの原則は「整理整頓」によく似ています。
例えば部屋を片付ける時、物を役割ごとにまとめたり、同じ形の収納ケースを使うことで、使い勝手がよく、部屋をスッキリきれいに見せることができます。
デザインも同じく、伝えたい情報を「整理整頓」することで、伝わりやすく、美しいデザインにすることができます。
デザインの制作を依頼されるお客様は、必ずターゲットユーザーに伝えたい情報があるはずです。
どんなに美しいビジュアルを作っても、お客様の伝えたい情報が伝わらないデザインは、良いデザインとは言えないでしょう。
情報が伝わるように「整理整頓」する。それが「デザインの基本4原則」の役割です。

近接 / 関連する情報をグループ化する

1つ目は、「近接」です。「近接」とは、関連する情報を近くにまとめ、異なる情報は遠くに配置することです。
同じテーマやカテゴリの要素をグループ化することで、一目でわかりやすいレイアウトになります。
グループ化のポイントは、デザインに取り掛かる前に、あらかじめ情報を整理しておくことです。

● 近接のポイント
・ 関連する情報はより近くに配置 → 余白を小さく
・ 異なる情報はより遠くに配置 → 余白を大きく

情報を整理していると、グループの中にグループが含まれるような入れ子構造になることもあります。
その際は外側の余白を内側の余白よりも大きくすると、階層がわかりやすくなり、バランスも良く見えます。

整列 / 見えない線に沿って揃える

2つ目は「整列」です。「整列」とは、複数の要素の位置を揃えることです。
「揃える」ことで前述した、「近接」と組み合わせ、グループ感をより強調することができます。
整列のルールには「左揃え」「中央揃え」「右揃え」「両端揃え」などがありますが、ルールは1つに絞ったほうがまとまりやすくなります。
要素を揃える際は、見えない線を意識すると上手くいきます。
デザインソフト上ではガイドラインを引くことで、より正確に要素を揃えることができます。

また、文字や画像の配置だけでなく、グループ間に設けた余白の大きさも揃えることを意識しましょう。
特にwebデザインにおいては、左右の余白を揃えることでスクロールした際に、余白のラインが強調され、統一感のある綺麗なデザインになります。

● 整列のポイント
・ 見えない線（ガイドライン）を意識する
・ 「左揃え」「中央揃え」「右揃え」「両端揃え」などの整列のルールは1つに絞る
・ 余白の大きさも統一する

反復 / 同じ要素を繰り返す

3つ目は「反復」です。「反復」とは、一定のルールに従って同じ要素を繰り返すことです。
「近接」「整列」によってグループ化した要素を1つのフォーマットとし、繰り返し配置することでデザインに一貫性のあるリズムを生み出すことができます。

フォーマットを作る際は、まず反復するべき情報を整理し、それぞれにデザインルールを定めることが大切です。
例えば見出しはゴシック体の太字、画像のサイズは 600px × 400px に統一するなどです。
使いたい画像のサイズがバラバラの場合は、トリミングして同じサイズに揃えると良いでしょう。
また、使用するフォントや色、あしらいのパターンは数を増やしすぎない方がデザインがまとまりやすくなります。

● 反復のポイント
・ グループ化した要素をフォーマット化する
・ デザインルールを固定する（見出しは太字など）

対比 / メリハリをつける

最後は「対比」です。「対比」とは、要素の強弱をつけ、情報に優先順位をつけることです。
対比によって全体のデザインにメリハリがつき、伝えたいことが一目でわかるデザインになります。
メリハリをつける方法は、大きく2つあります。

大きさの対比

これは単純に、目立たせたい要素を大きくする方法です。
例えば、見出しを本文より大きくするなどです。
このような文字サイズの比率を「ジャンプ率」といいます。
ジャンプ率が高い場合はインパクトやメリハリのある印象になり、低い場合安定感のある印象になります。

色の対比

こちらは、目を引きたい部分にアクセントカラーを使う方法です。
配色ルールの1つに「70：25：5の法則」というものがあり、最も大きな面積を占める色を「ベースカラー（70％）」、デザインの中心になる色を「メインカラー（25％）」、画面にアクセントを持たせるための色を「アクセントカラー（5％）」と呼びます。
アクセントカラーの選び方として以下のような方法があります。

・ベースカラーやメインカラーの補色を使う
・ベースカラーやメインカラーを無彩色にし、アクセントカラーを有彩色にする
など…

配色でも対比を意識し、目立つ組み合わせを探してみてください。

● 対比のポイント
・ 情報に優先順位をつける
・ 大きさ・色など利用して差をつける

おまけ

ここからはおまけです。
私はもともと紙媒体のデザインの勉強をしており、そこからwebデザインの勉強をしました。
webデザインを始めたての時にした失敗や、紙媒体にはないwebデザイン特有の気をつけるべき点を書きました。
何かの参考になればと思います！

RGB・CMYK

色の設定には、RGB・CMYKの2つがあり、どちらを使用するかは最終的な媒体によって変わります。
具体的には、パソコンやスマートフォンなどの画面に表示されるものではRGBが使用され、紙などの印刷物ではCMYKが使用されます。
webデザインで使用されるRGBは、CMYKと比べて鮮やかに発色するため、チカチカする配色にならないように注意しましょう。
私は印刷物を作る感覚で、鮮やかな色ばかりを選んでしまい、最初の頃はきつい印象のデザインをしていました…

例えば文字に使われる「黒」1つとっても、紙媒体では真っ黒（K100）が使われますが、webデザインでは基本的に濃いグレー（#333など）を使うことが多いです。
適切な色を選ぶために、最終的な媒体を意識することが大切です。

画面の高さ

私たちデザイナーがLPなどのデザインをする時は、1枚の細長いデータの全体が見える状態で制作を進めます。
しかし実際のパソコンなどで見た際は、画面の高さ分しか表示されません。
そのため、画面に収まる高さを意識して、文字や画像などのサイズ感を決めることが大切です。

画面の高さを意識しないと、情報がおかしな所で途切れるような見辛いデザインになってしまいます。
特にファーストビューについては、そのLPの顔となる要素ですので、必ず画面に収まるようにデザインをしましょう。
XDにある「プレビュー」機能を使うと、実際の見え方を確認しながらデザインできるのでおすすめです。

UI

UIとは「ユーザーインターフェース」のことで、web制作の業界ではサイトの見やすさ、操作のしやすさという観点で用いる言葉です。

webにはメニュー、ボタン、リンクなどの操作性を伴った要素が存在します。
例えば「三本線のアイコン ＝ ハンバーガーメニュー」や「下線のあるテキスト ＝ リンク」など多くの人が無意識に理解しているデザインのセオリーがあります。

そういったデザインのセオリーを押さえないと、ユーザーが混乱してしまうデザインになってしまいます。
たとえビジュアルが良いものでも、操作性が伴わなければwebとしていいデザインとは言えないでしょう。
デザイン制作する上でも、装飾だけでなくUI的な要素についても気を配ることが大事です。

まとめ

今回はデザインを良くするために知っておきたい「デザインの4原則」を紹介しました。
デザインにも再現性があることがわかり、苦手意識が払拭できればと思います。

「デザインの4原則」をもっと簡単にまとめると、大きく2つになります。
一気に4つ覚えなくても、下記の2つだけ意識すれば、デザインが外れたものになることが減らせるかと思います。

・ 情報をグループ化して、見やすくする → 「近接」「整列」「対比」
・ デザインルールを絞り、統一感を出す → 「整列」「反復」

デザインの勉強をしていると、「配色ルール」「画像処理」「文字組」等、たくさんのテクニックを目にするかと思います。
テクニックを覚えると、ついついそれらを使うこと自体が目的になってしまい、「伝える」ためにデザインをしていることを忘れてしまいがちです。

「デザインの4原則」も冒頭で記述したように、『デザインの要素を整理し、わかりやすく伝えるためのルール』であり、「伝える」ことを目的としています。
細かい部分を忘れてしまっても、何のためにルールやテクニックが必要かを意識してデザインしてみてください。

この記事が、皆さんのデザイン作成の参考になれば幸いです！