今回の記事では「デザイン４原則」について学んでいきます。
これからWebデザイン・グラフィックデザインに限らず、
デザインについて学んでいくための前提条件として、デザイン４原則のマスターが必要不可欠です。
今回の記事でデザイン４原則を学習して、デザイナーになる一歩を踏み出していきましょう。
目次
デザイン４原則は前提条件
まずは、デザインを学ぶ上で、デザイン４原則がどれだけ大切なものなのか知っておきましょう。
デザインで遊ぶためのルール
デザイン４原則とは、デザインで遊ぶためのルールです。
皆さんは、「ババ抜き」や「大富豪」などのトランプゲームで遊んだことはありますか？
これらのゲームで遊ぶためには、ゲームのルールを知らなければいけません。
デザインでも同じです。
デザインのルールを知らなければ、デザインで遊ぶことができないのです。
なので、デザイン４原則とは「デザインで遊ぶ」ためのルールなのです。
デザイナーの世界の見え方
デザイン４原則は、デザイナーの世界の見え方とも言えます。
デザイナーは普段生活をしている中で、自然とデザイン４原則でデザインを見てしまいます。
（職業病かもしれませんが...）
デザイナーが何を意識してデザインを作成しているかを知ることで、
デザインの学習をより実践的かつ効率的に行うことができます。
皆さんもこれからデザイン４原則を学び、デザイナーの視点を身につけていきましょう。
デザイン４原則とは
デザイン４原則がとても大切なものだと伝わったことを信じて、 次に、その概要について説明していきます。
デザイン４原則とは、
- 近接
- 整列
- 反復
- 対比
以上４つから構成されるデザインを作成する際の４つのルールになります。
デザインを作成する上で、この４つが意識できていると完成度が大きく変わります。
また、デザインを学習するスピードも格段に変わっていくので、必ずマスターしましょう。
デザイン4原則を学ぼう
それでは、実際にデザイン４原則について学んでいきましょう。
４つの項目をそれぞれ分けて説明していきます。
近接の法則
まずは、近接の法則について学習していきましょう。
近接の法則とは、似ている情報を近くにまとめるルールになります。
普通の視点
例題を出しますので、一旦そちらを確認して話を進めていきます。
まずは、デザインを確認してみましょう。
近接の法則を知らない状態だと何の変哲もないデザインですが、デザイン４原則を学ぶことで一気に見え方が変わります。
デザイナーの視点
次に、デザイナーの視点で先ほどのデザインを見てみましょう。
近接の法則は、似ている情報を近くにまとめるルールだと説明しました。
その点を踏まえて画像を確認すると、
「画像のグループ」「文章説明のグループ」「リンクのグループ」の３つのグループに要素がまとまっているように見えます。
似ている情報が近くにまとまっているため、デザインを見ている人が情報の整理がしやすくなります。
なので、近接の法則は、デザインを作成する際に、要素の配置を決める手助けになるのです。
余白の使い方が学べる
似ている情報を近くにまとめるのであれば、異なる情報は遠くに配置します。
デザインの例では、「画像のグループ」「文章説明のグループ」「リンクのグループ」の間に
広い余白があいていることが確認できるかと思います。
近接という法則は、「余白の広さを決める」際にも必要になる知識なのです。
近接の法則は、情報のグループと余白がわかる
このように、近接の法則というルールを知っていると、
デザインの中で要素が配置されている意図を理解できるようになります。
整列の法則
次に、整列の法則について学習していきましょう。
整列の法則とは、基準を決めて要素を揃えるルールです。
普通の視点
まずは、デザインを確認してみましょう。
整列の法則を知らない状態だもうっすらと感じることができるかと思います。
デザイナーの視点
次に、デザイナーの視点で先ほどのデザインを見てみましょう。
整列の法則は、基準を決めて要素を揃えるルールだと説明しました。
テキストやリンクの要素たちが、基準の線に揃って配置されていることが確認できます。
整列の法則を意識して、基準を決めて要素を揃えることで、統一感ができます。
そして、見やすく綺麗なデザインを作ることができるのです。
整列がない例
整列の法則を意識しない状態でデザインを作成してしまうと、見え方が大きく変わります。
次は、ZeroPlusのキービジュアルを例に説明していきます。
まずは、整列を意識したデザインの例です。
「ナビゲーション」や「キャッチコピー」などが整列されていることが確認できるかと思います。
（補助線は引いていませんが、今の皆さんには基準が見えているかと思います。）
次は、整列を意識していないデザインの例です。
全体的にガタガタな印象を受けるかと思います。
要素が揃っていないので、文字を読み取ろうとすると目のやり場に困ってしまいます。
整列を意識しない状態でデザインを作ってしまうと、少ない情報量でも読み取りにくくなってしまうのです。
整列の法則は、情報を見やすく綺麗にしてくれる
以上の例より、整列の法則というルールを知っていると、デザインを見やすく綺麗な状態にすることができます。
反復の法則
次に、反復の法則について学習していきましょう。
反復の法則とは、要素の見た目を繰り返し使用するルールです。
普通の視点
まずは、デザインを確認してみましょう。
カリキュラムの内容の項目が３つ配置されています。
デザイナーの視点
次に、デザイナーの視点で先ほどのデザインを見てみましょう。
反復の法則は、要素の見た目を繰り返し使用するルールだと説明しました。
それぞれ、見出しや文章の内容は違えど、項目を配置する１つ１つの見た目に関して統一されているのが確認できます。
反復の法則を意識して、要素の見た目を繰り返し使用すると、情報をグループにまとめることができます。
テキストの内容を全部読まなくても「このグループは全てカリキュラムの内容なんだ」と見ている人が情報を整理しやすくなります。
反復の法則は、統一感を与え、情報をグループにまとめてくれる
以上の例より、反復の法則のルールを知っていると、ぱっと見でデザインを見る人が情報を整理しやすくなるのです。
対比の法則
々は、対比の法則について学習していきましょう。
対比の法則とは、要素の見た目にメリハリをつけるルールです。
普通の視点
まずは、デザインを確認してみましょう。
Webサイトのファーストビューは、特に対比の考え方が使われている箇所になります。
まずは、何も知らない状態で確認してみましょう。
デザイナーの視点
次に、デザイナーの視点で先ほどのデザインを見てみましょう。
対比の法則は、要素の見た目にメリハリをつけることだと説明しました。
上記のデザインでは要素を目立たせるために、さまざまな趣向が凝らされていることが確認できます。
・キャッチコピー
キャッチコピーは他のテキストよりも伝えたい情報を載せているので、フォントサイズが大きめに設定されています。
そして、オレンジ色の下線が「装飾（あしらい）」として添えられていることが確認できます。
・コンタクトページへ飛ぶボタン
「お問い合わせ」に繋がるボタンには、アクセントカラーである青色が使われています。
このサイトに集客という目的を達成するために、お問い合わせに関するボタンは非常に大切な要素なのです。
その大切なボタンを目立たせるために、アクセントカラーである青色が使われています。
対比の法則は、メリハリをつけて情報を優先順位を教えてくれる
以上の例より、対比の法則のルールを知っていると、強調したい要素を明確にすることができます。
また、デザインを見る人に対して的確に情報を伝えることができるようになるのです。
学んで終わりじゃない
ここまででデザイン４原則を学んできました。
ただ、ここで注意してほしいことは、デザイン４原則を学んだことで満足してはいけません。
今、皆さんはデザイナーと同じ視点でデザインを見られるようになったのです。
プロのデザイナーさんのデザインを確認しよう
今の視点のまま参考サイトを見てみましょう。
参考サイトからプロのデザイナーさんが作成したデザインを見てください。
デザイン４原則を学んだ今の状態でなら、プロのデザイナーさんが何を意識してデザインを作成したのかが読み取れるはずです。
その意識しているポイントこそが、皆さんがデザインを作る際に真似るべきところなのです。
以下にWebデザインの参考デザインを探せるおすすめのサイトを掲載しておきます。
・SANKOU！Webデザイン制作の参考になる国内のステキなサイト集
・CSS Design Award
https://www.cssdesignawards.com/
デザイン４原則を身につけるために、これからたくさんデザインを見て分析していってください。
デザイナーの視点を身につけよう
ここまで、学習お疲れ様でした。
今回の記事では、デザイン４原則について学びました。
- 近接：似ている情報を近くにまとめるルール
- 整列：基準を決めて要素を揃えるルール
- 反復：要素の見た目を繰り返し使用するルール
- 対比：要素の見た目にメリハリをつけるルール
それぞれ４つの法則について理解をし、デザインをたくさん見てください。
この４つが無意識的に見えるようになれば、皆さんはデザイナーになるための１歩を無事踏み出せたことになります。
