【学習におすすめの情報】デザインの4大原則を知ればデザインセンスが上がる！
みなさんこんにちは。デジタルハリウッド教材開発の人です。
最近筋トレをしています。糖質制限してもぷよぷよな体が変わらず、そんな自分に腹が立ち、「こうなったら贅肉を全部筋肉に変えてやる！」と思った
のが始めたきっかけですが、最初はあまり変わらない自分の体に何度も挫折しそうになりました。しかし、すぐには体系は変わらない、１か月後、３か月後の変わった自分のため と考えて続けていたところ、スタイルに変化が出てきました。やっぱり結果が見えてくると楽しいですよね！
さて、デザインを作っていて、
「どうも “まとまり” がないな～」
「いまいちダサいな～ センスが自分にはないのかな？」
なんて思うことありませんか？
今回は、Webでも、紙のデザインでも、はたまたCGや映像でも、勉強や制作の際に知っておくだけで、グッとよくなる「デザインの４大原則」に関してお話ししたいと思います。
デザインの４大原則とは？
デザインを構成する要素を整理して、よりみやすく・理解しやすくするための基本的な考え方です。４大原則には「近接」「整列」「対比」「反復」があります。１つ１つ見てみましょう！
【1】「近接」：関連する要素を近づけて、まとまりとして見せる
例えば、レストランのメニューに載っているスパゲティを例に
左は、写真と文字が離れており、関連性がはっきり感じられません。
右のほうは近くでまとまっているので、この写真メニューの名前と値段だということがわかりやすいと思います。このように、写真や文字など、関係する要素を近くでまとめることで“関連性”をイメージさせることができるようになります。これが近接です。
【2】整列：要素をルールに沿って配置することで見やすくする
デザインの要素を一定のルールに従ってきちんと並べることで、すっきり見せる原則です。ここでもメニューを例に
飲み物と食べ物が分けられてなく、ランダムに並んでいるので、視線が定まらない感じです。では下はどうでしょう？
食べ物と飲み物の段が分かれており、食べ物も値段順に並んでいます。こうしたルールに沿った配置をすることで、見る人が理解しやすくなります。
【3】対比：要素に強弱をつけることで優先度を伝える
物事をはっきり見せるために、違いを大きくすることです。例えば、大きな文字と小さな文字を使ったり、明るい色と暗い色を使うことで、人々が注意を引きやすくなります。例えば下のバナーのデザイン、
文字の大きさが同じだと、どの文字も強調されず、訴えたい部分が分かりにくくなってしまいます。SALE と８０の文字を大きくすることで、「80%も安くなるSALE？」と注意を引くことができますよね。このバナーは、あえて黒文字だけで構成してますが、色や“あしらい”などでさらに目立たせることもできます。
【4】反復：同じデザインを繰り返す事で一貫性を持たせる
同じような要素は、フォント、色、レイアウトスタイル、あしらいなどを統一させると、デザインに一貫性が出て、見た目が整ったり、覚えやすくなったりする原則です。例えば下記のメニュー
フォントも、あしらいの記号も●や▲、■ ★などバラバラです。
これを反復の原則で整えると
統一されてわかりやすくなりましたね。文字のデザインであるフォントは通常１つのコンテンツに１つ、最大でも２つくらいまでに絞るとよいといわれています。ただ、まだなんかスッキリしないですよね。それは文字が中央揃えに設定しているため、メニュー名と値段の配置のバランスが文字の長さでずれてるように見えること。
そこで、整列を使って左揃えにしてみると
上の画像では、近接・整列・反復の３つを使ってます。
さらに、スフレオムライスが名物なので強調したい！という場合は対比を使います。
どうでしょうか？デザインを組み立てる際にこの４つの原則を知っておくだけでも随分とセンスアップすると思いませんか？ぜひ試してみてください！
今日はこの辺で～
この記事が気に入ったらサポートをしてみませんか？