この記事はこんな方におすすめです
- デザインを学びたい方
- デザイン初心者の方
- デザインについてお悩みの方
こんにちは、こんにちは、デザイナー/アートディレクターのnobuです。
当ブログは「専門学校級を無料で」をコンセプトにデザインに関する記事をまとめています。
今回はデザイン基本中の基本である「デザインの４原則」をご紹介します。
デザインの4原則は、資料作成・web・動画編集などジャンルに限らず役立ちます。原則を知り実践するだけでもデザインがプロっぽくなります。
【はじめに】デザインの読解力
モノの名前を言えるとデザインの引き出しが増える？
モノの名前を多く知っているデザイナーは、引き出しが多く表現力が豊かです。例えば「麻の葉柄」と聞いてどんな柄かイメージできますか？
麻の葉柄には子供の健やかな成長の願いが込められている。またこの柄には魔除けの意味があり、昔から産着の柄として広く親しまれてきた。
麻の葉柄は一般的に普及している名称ではありませんが、この柄を見たことがある方は多いと思います。名称とモノやコトの結びつけができるとデザインの引き出しを増やすことができます。
更に、その歴史や背景まで知っているとデザインに深みが生まれます。
モノの名前を知っているだけで他者が行なったデザインの考察も深まります！色名やフォントから、昨日見た映画まで様々な知見を反映できるのもデザインの楽しいところですね！
これからご紹介する４原則はデザインの基本中の基本です。原則を知るだけでもデザインの見方が変わると思うので、ぜひ自分の引き出しにストックしてみてください！
【近接】関連する項目を近づける
関連する項目を近づけてグループ化しましょう。情報を整理し、入れ子のようにグループ化することで見やすいデザインにつながります。
近接により意味が変わる
Aの図では両者の関係性がはっきりしません。野良犬とも、留守番中とも受け取ることができます。
Bの図、男性が飼い主であることが明白です。このように近接により意味が変わることがあります。
【ホワイトスペース】図と地の関係
近接を行うときのコツは「図と地」の関係を意識することです。下の図をご覧ください。
こちらの画像は「ルビンの壺」という有名な錯視画です。「図と地」を入れ替えて見ると壺に見えたり人の横顔に見えたりします。
「図」だけでなく「地」にも注目することで、バランスのとれたデザインを行うことができます。「地」はホワイトスペースとも呼ばれます。（白くなくても余白のことをホワイトスペースと呼んだりもします）
デザインに慣れないうちはどうしても図だけに集中してしまいがちですが、「図と地」をあらためて認識することで見やすいレイアウトを行えます！
【整列】とにかく意識的に揃える
整列では「どこに揃えるか」を意図的に考えることが大切です。
人の目の流れ
整列を行うときは人の目の流れを意識します。これは整列だけでなくレイアウト全般にも応用できます。
「行と列」を揃える
「行と列」を揃えるときは、横書きであれば左と上、縦書きであれば右と上を揃えると見やすくなります。
整列と段落を意識する
文章やリストの場合、整列と段落を意識するのがポイントです。端と端を合わせることを「面（つら）を合わせる」と言ったりします。
グリッドシステム
整列に迷ったときはグリッドシステムを使う手もあります。
黄金比や白銀比が有名です！
【反復】繰り返して一貫性を保つ
反復を行うことで一貫性が保たれ読み手の負荷を減らすことができます。素人っぽいデザインでは「反復」ができていないことが多いです。
反復では、事前のルール設計が大切です。色・フォント・級数（文字の大きさ）などを一定のルールで揃え一貫性を持たせます。
特にページ数が多いデザインでは事前のルール設計を怠ると後が大変です……！
webデザインのマークアップ（HTMLなど）は反復の原則を知っているとスムーズに学習することができます！
トンマナの確立にもつながる
トンマナとは、「トーン＆マナー」の略で、広告やパッケージ、webなどのデザインに一貫性をもたせることを指しています。反復を使い統一感を出すことでトンマナの確率につながります。
トンマナについて詳しくはバナー→
【対比】コントラストで読者を読む気になってもらう
対比は、より見せたい情報を目立たせたり読者を引き込む役割をします。また、デザインにメリハリが生まれ引き締まったプロっぽい印象になります。
対比をはっきりさせるには主に「大きさを変える」「色を変える」という方法があります。このとき注意したいのが足しすぎないことです。全てが目立っているのは目立っていないのと同じです。
ジャンプ率（大きさを変える）
ジャンプ率とは「本文に対する見出しの比率」のことです。「ジャンプ率が高い/低い」などと言ったりします。
一般的にジャンプ率が高いと「躍動的、インパクト、若年向け」の印象に。ジャンプ率が低いと「高級感のある、落ち着いた、大人っぽい印象」になると言われています。
【70：25：5の法則】配色でのアクセント
配色のパターンには様々なモノがありますが、基本３色を使った配色方法がスタンダードです。アクセントカラーを上手く使うことで対比を行うことができます。
図と地のコントラスト
抜き文字などを使うときもコントラストに注意しましょう。色には明度・彩度・色相の３要素がありますが、基本的に対になっている要素の数値を遠ざける程、コントラストが上がります。画像は明度での対比となっています。
まとめ
今回ご紹介した内容は「かっこいい」や「かわいい」以前の、「読みやすい」「わかりやすい」というところに起点があります。デザインではそういった基本的な部分が大切になってくると思うのでぜひご活用ください。４原則をマスターすることで確実にデザインが上達します。
