Fare.
同人作家の「つくる」を支えるWebメディア

"デザインルール" を含む記事

2020.03.14

デザインの4大原則「近接」「整列」「反復」「対比」とは?

デザインを勉強し始めた頃は、どうしたらデザインが綺麗に見えるのか、伝えたい情報をうまく整理できるのか、言語化・実践することが難しいこともあるのではないでしょうか。そんな時は、「4つの原則」に気をつけてデザインを行うようにすると、うまくいきやすいです。この記事では、デザインの4大原則である「近接」「整列」「反復」「対比」について、実例を用いて解説していきます。デザインの4原則とは?デザインには、 近接 整列 反復 対比という4つの原則があります。何を伝えたいのかわからないデザインになってしまうときは、この原則が守られていないことが多いです。一方で、この原則を守ってデザインを行うと、伝えたい情報をわかりやすく伝えることができるとされています。それぞれどのような原則なのでしょうか?ここからひとつずつ、実例付きで紹介していきます。①「近接」:関連する要素を近づけてグループにする「近接」とは、関連する要素を近づけてグループにすることです。上記図の左側の図は、何と何が同じ要素なのかわからず、パッと見て情報を理解しにくいですよね。関わりあう情報同士がバラバラに配置されていると、何と何が関連する情報なのか、どのような内容なのか、パッと見ただけでは瞬時に理解することができません。よって、このように「近接」を意識して「関連する要素同士を近づけて配置」し、異なる要素とは余白を用いて適切な「余白を空ける」ことで瞬時に情報を理解しやすくなります。ポイント 関連する要素同士は、近づけて配置すること 異なる要素同士は、適切な余白を空けること②「整列」:要素にルールを持たせてレイアウトする「整列」とは、要素にルールを持たせてレイアウトすることです。関連する要素同士のサイズや色、フォントや配置がバラバラだと、何が同じもので何が違うものなのか、直感的に理解できません。よって、「関連する情報同士はサイズや色を統一」し、「揃え」を意識してレイアウトします。「近接」で、まず同じ情報のグループをまとめ、「整列」で、その情報をより伝わりやすいかたちで見た目を整え、配置するイメージです。「揃え」は、左右のレイアウトの場合は、 「右揃え」 「左揃え」 「中央揃え」の3種類に分けられ、上下のレイアウトの場合は、 「上揃え」 「下揃え」 「中央揃え」の3種類に分けられます。これら「揃え」に着目して情報を整理すると、下記右側の図のように、透明な直線がデザインの中に生まれてきます。この「透明な直線」の存在こそが、「整列」が成立している証拠です。ポイント 「関連する情報同士はサイズや色を統一する」こと 「揃え」に着目してレイアウトすること 「透明な直線」できているか意識してみること③「反復」:要素ごとにデザインルールを繰り返す「反復」とは、要素ごとにデザインルールを繰り返すことです。たとえば、お品書きのデザインの場合。既刊一覧を表現するとき、値段やページ数は共通してレイアウトするとします。つまり、この場合の「値段やページ数、価格」は同じ要素のグループです。そのとき、既刊①と既刊②で、同じ要素を扱っているのに、見た目の表現の方法が違っていたら、パッと見「違うものなのかな?」と思ってしまうのではないでしょうか。よって、同じ要素を繰り返して配置する時はデザインルールも繰り返します。そうすることで、瞬時に同じものについて表現しているのだと理解することができ、直感的なわかりやすさを格段に向上させることができます。とはいえ、ひとつのデザインルールだけでデザインが構成されると、時にはおもしろみをなくしてしまうこともあります。そんな時は、デザインルールを複数効果的に使うことで緩急をつけ、単調になりすぎないデザインを目指すのがおすすめです。ポイント 「同じ要素を繰り返して配置する時はデザインルールも繰り返す」こと 「デザインルールを複数効果的に使うことでデザインに緩急をつける」こと④「対比」:要素の優先度を明快にデザインで示す「対比」とは、要素の優先度を明快にデザインで示すことです。たとえば、セール情報をお知らせするためのバナーの場合。情報には優先順位があることがほとんどです。上記画像では、 セールのお知らせ 何%オフなのか? 期間 注意事項の順で情報の優先度を決めています。その場合、1番訴求したい情報の「セールのお知らせ」が、一番訴求優先度の低い「注意事項」と同じ大きさ・色でレイアウトされていたら当然目立ちませんよね。よって、「セールのお知らせ」要素と「注意事項」要素に明確な「違い」をつけるのです。「違い」の種類は、大きさだったり色だったりレイアウトだったりします。要素の違いを明確にデザインで示すことで、パッと見ただけで、セールをやっているんだ、25%オフなんだ、ということが伝わるようになるというわけです。ポイント 「情報に優先度をつける」こと 「優先度に応じて大きさや色などの強弱をつける」ことまとめここまで、デザインの4大原則について説明してきました。まずは基礎基本を抑えるところから、ということで、私もデザインを勉強したての頃は、この4原則を意識して作ったデザインを振り返るようにしていました。それを繰り返していくと自然に、この原則を意識したレイアウトや色選びができるようになるイメージです。デザインの4大原則については、『ノンデザイナーズ・デザインブック』が一番わかりやすくまとめられていると思うので、気になる方はぜひお手にとっていただければと思います。リンクお品書きやポスターなど、実際に何かを作る時、この4つの原則を思い出してぜひ、デザインをしてみてください!