BLOG

デザインWeb

センスはいらない。デザイン力が上がる4つの原則

デザイン力が上がる4つの原則

はじめまして
トゥモローゲートの意匠制作部の久米川といいます。

普段はWEBサイトのデザインや構成を担当しています。このブログではデザインの考え方や技術的な要素も含めて幅広くお伝えしていきます。非デザイナーの方もベテランデザイナーの方にも有益な情報を書いていきたいと思っています。

今回は第一回。
最初ということで、非デザイナー、デザイン初学者に向けた「センスなんていらない。デザイン力が上がる4つの原則」です。最後までよろしくお願いします!

デザインの違和感

「なかなかデザインがうまくいかない・・・」

デザインの物足りなさや見辛さなど、解決しづらい問題にぶつかることは少なくないのではないでしょうか。

デザインはセンスだし私には無理だ」と思って諦めたりしてませんか?

実は、デザインには基本の原則があり、これから紹介する4つの原則を意識するだけでユーザーに「伝えるデザイン」を作ることができるようになります。

この原則はWEBサイトやグラフィックのデザインだけではなく、プレゼンの資料や図の作成など、全ての基本となる原則です。デザイナーではない人にとっても重要なスキルであり、身に付けると仕事がさらにうまくいくようになります。すでに知っている方も、おさらいをかねて確認してみてください。

デザインの基本原則

今回紹介する原則はこの4つです。

  • 近接
  • 整列
  • 反復
  • コントラスト

それでは一つ一つ実例を見ながら学んでいきましょう。

近接の原則

さて、ここで問題です。
右と左の図どちらのほうがわかりやすいですか?


チクタクチクタク(時計が進む音)

もちろん右ですよね。
左の図は写真とテキストの間隔が狭かったり、広かったりとバラバラで、パッと見たときに情報が入ってきづらく、わかりにくいですよね。

1つ目の「近接の原則」は、関係性や意味が近いものをグループ化しましょう、という原則です。関係性が深い要素同土は近づけて、関係性が薄い要素同士は遠ざけて配置する、というとわかりやすいかもしれません。

近接と余白

近接で重要となるのが余白です。わかりやすくグループ化したとしても、そのグループごとの間隔が狭かったら、一つのグループに見られてしまう可能性があります。

小学校の時の全校集会をイメージしてみましょう。
クラス内の生徒の間隔は狭い一方で、他クラスとの間隔は広かったと思います。もしこれがクラス同士の間隔が狭かったら、一つのクラスとして認識されますよね。
つまり、余白があるほど「別のもの」として認識されやすいということ。

この「近接の原則」で写真とテキストをまとめることにより、情報が整理されて、誰にとっても見やすいデザインをつくることができるのです。



整列の原則

次は「整列の原則」です。
以下の2つの図を見てください。


右の図は、ピシッと整列していますよね。この2つの図を見比べるとわかるように、先ほど紹介して「近接の原則」でグループ化したとしても、整列していないとガタガタした、雑な印象を与えてしまいます。これを解決するのが「整列の原則」です。全体に規則性があってキレイなデザインをつくることができます。

整列の基準

まずはどこをどう整列すればいいのか?ということを解説していきます。


その場合の判断基準として先ほど紹介した「近接」が役に立ちます。「近接」は関係性が深いものをグループ化しようという原則でしたね。同じグループに属するもの同士で整列させるんです。

すると、より規則性が生まれ、伝わりやすいデザインになります。デザインを提出したとき、企画書を提出したときに「読みづらい」「ごちゃごちゃしてる」と言われたら、この整列を意識してみましょう。

整列の種類

整列には色んな揃え方がありますが、基本はこの4つです。

  • 左揃え
  • 中央揃え
  • 右揃え
  • 上揃え

これらの「揃え」を意識して整理すると、目には見えない線が生まれてきます。線はないのだけれど、キレイに配置されているから、そこに線があるように見えるんです。この「見えない線」があれば「整列」が成立している。なければ「整列」は成立していないということになります。


デザインしているとき、企画書をつくっているときは、この「見えない線」を求めていきましょう。そうすることで整ったデザインをつくることができます。

反復の原則

デザインには一定の統一感が必要です。
統一感が生まれることで情報をわかりやすく伝えられます。
ではどうすれば統一感を出すことができるのでしょうか。
ここで役に立つのが、「反復」という手法です。

反復の効果

反復を利用すると、ユーザーの混乱を回避することができます。
主にこの手法は見出しに活用できます。例えばパンフレットを制作している時、各ページの大見出しや小見出しのデザインが全て違ったらユーザーは混乱しますよね。そうではなくて、同じ要素にはページが変わっても全てデザインを適応することで、一定の法則性が生まれ、伝わりやすいデザインになります。WEBサイト制作だけではなく、資料制作などにも使える手法なので、ぜひ意識してみてください。

コントラストの原則

ここまで近接、整列、反復を見てきて、伝わりやすいデザインをつくるにはどうすればいいのか?なんとなくわかってきたのではないでしょうか。しかし、伝わりやすいデザインにはなったものの、全体的にメリハリがなく、優先順位がわかりづらい、という悩みにぶつかることがあります。

ここで役に立つのが最後の原則「コントラスト」です。


コントラストとは

コントラストは簡単に言うと強弱をつけることです、文字に強弱をつけることでユーザーが情報を見る順番をコントロールすることが出来ます。例えば、通常人間は上から情報を見ていくケースが多いですが、真ん中の文字を強調した場合、そちらに目がいくので、読ませる順番を変えることができるんです。

具体的な強弱の付け方には、色・太さ・枠線・あしらい・背景色などがあげられます。

情報の整理

さて、コントラストの付け方や概念はわかりましたが、コントラストをつける前に重要な作業があります。それは「情報整理」です。コントラストがつけられたとしても、目立たせたくない情報を目立たせてしまっては、意味のないデザインになってしまいます。まずデザインに入る前に、情報の優先順位をつけ、整理することを心がけましょう。


何事も基本から

今回内容をまとめると

  • 近接で情報をまとめる
  • 整列で整える
  • 反復で繰り返しのリズムを作る
  • コントラストで強弱をつけて情報をわかりやす

になります。

これら4つは基本中の基本の原則です。
デザインには他にもたくさんのテクニックや見せ方が存在します。
しかし、それらのテクニックは全て今回紹介した原則が元になってるケースが多いです。
まずは、基本をしっかりとマスターし、土台を作っていくことが大切だと思います。世の中で活躍するデザイナーたちは、この4つの原則を守り、息をするような速さと驚くべき精度でデザインをつくりあげていきます。


ぜひ、今回紹介した4つの原則を身につけて、伝わりやすいデザインを作っていってほしいなと思います。


今回はここまでです!
次回はデザインの勉強法、インプット法について書いていきます!
最後まで読んでいただきありがとうございました!

この記事を書いた人

久米ちゃん@ブラックなデザイナー
Twitterを見る

トゥモローゲート株式会社 意匠制作部 リーダー。 WEBデザイナー兼アートディレクター。15歳からデザインを学びはじめた自他ともに認めるデザインオタク。企画、構成、コーディング 、ディレクションも手掛ける。大手デザイン会社から2020年にトゥモローゲートに入社。

久米ちゃん@ブラックなデザイナーが書いたその他の記事