北のシュガポン

北海道大学の工学部生。電気・情報・ロボット・エネルギー専攻。 札幌で一人暮らし満喫中。 お菓子作り、プログラミング、機械学習と色々なことに手を出している暇人。

北大生がつぶやく大学生活や勉強や趣味のブログ。しばらく不定期更新。

デザイン4つの原則を例を交えて紹介する

皆さんこんにちは!

シュガポンと申します。

前回に引き続きデザインのお話です。あ、自分は別にデザイン専門の学生とかではないのであしからず。

 

 

僕がブログを始めるときに、サイトをデザインするのに大いに参考にした本があります。それが「ノンデザイナーズ・デザインブック」。「デザイナーでない人のためのデザイン本」ですね。この本によると、デザインには4つの原則があるそうな。

f:id:karakusa456:20180311173642j:plain

 

今回はこの本に倣い、デザイン4つの原則を例を交えて簡単にご紹介します。

 

 

 

 

近接(Proximity)

1つ目の原則は「近接(Proximity)」。関連のある要素は近くに置く、という意味です。

f:id:karakusa456:20180311173821j:plain

 

下の画像は架空のネームカードみたいなものです。自分で用意しておいてなんですが、めっちゃひどいです。最悪です。もはや災害モノです。

f:id:karakusa456:20180311173950j:plain

 

「ひどい」と一言に言っても様々な要因がありますので、まずは「近接」の観点から手直ししましょう。

 

見たところ、「クラブ名」「名前」「個人情報」の3つの情報が含まれていますね。なので、これらを別々のグループに分けましょう。こんな感じ。

f:id:karakusa456:20180311174136j:plain

これで情報は一目でわかりますね。少なくとも。

これが「近接」の原則になります。

 

 

整列(Alignment)

2つ目の原則は「整列(Alignment)」。要はきれいに並べろということですな。

f:id:karakusa456:20180311174317j:plain

ということではい。

f:id:karakusa456:20180311174326j:plain

センターラインにすべての要素を揃えました。「近接」と「整列」の原則がしっかりしていれば赤点ではなくなりますね。見た感じ。

 

センター揃えでもいいんですけど、「強い」線に揃えた方がより洗練されて見えることが多いです。

f:id:karakusa456:20180311174611j:plain

画面の左端に揃えました。「画面の端」という目に見える線を利用したことで、より強い整列が取れます。右端にスペースができるので、そこにクラブのロゴか何かを入れるとバランスが良いのではないでしょうか。別にこのままでも見苦しいということはないですけど。

 

 

反復(Repetition)

3つ目の原則は「反復(Repetition)」。同じ要素・形式・ロゴなどを繰り返し用いるという原則ですね。

f:id:karakusa456:20180311174559j:plain

今回の例のような一枚ものだと効果は薄いですが、例えばPowerPointのスライドを全て同じスタイルに統一するとか、見出しのフォント・文字サイズは見出し間で揃えるとか、そういった使い方ができます。

 

ところで、下の画像で各文のフォントがバラバラなことに気が付きましたか?オレンジでくくったところ。

f:id:karakusa456:20180311174956j:plain

同じグループなのに違うフォントなのはおさまりが悪いですね。なのではい。

f:id:karakusa456:20180311175033j:plain

これも「反復」の一種。同じフォントで一貫性を持たせているんですね。

 

 

対比(Contrast)

最後の原則は「対比(Contrast)」。以降、なじみのある「コントラスト」の名称で呼びます。

f:id:karakusa456:20180311175231j:plain

これが一番やっかいで、でもデザインの醍醐味でもあります。

 

コントラストにはいろいろな種類があります。大きさだったり、色だったり、フォントだったり。要は「明白に違う」ということが大事。コントラストを付けるときは怖がらない。

 

とりあえず、先ほどまでの例に戻りましょう。

f:id:karakusa456:20180311175355j:plain

これ、見やすいのは良いんですが、どこにもコントラストがない。非常につまらない。

 

まずは文字サイズとフォントでコントラストを生みましょう。はい。

f:id:karakusa456:20180311175536j:plain

名前を際立たせました。これだけでもちょっと面白くなったでしょ?

 

更にを加えるならばこんな感じでしょうか。

f:id:karakusa456:20180311175627j:plain

…色彩センスが欲しいです。リアルに。

一応、用いたのは補色の組み合わせで、なおかつ暖色系は少なめに使っているんですが。この辺はセンスが大きい。

とはいえ定番の組み合わせ(補色・類似色・トライアドなど)は抑えておきたいですね。雑誌や広告チラシを参考にすべし。

 

ともかく、これで4つの原則をさらい終わりました。ではビフォーアフター。

f:id:karakusa456:20180311173950j:plain

改めて見てもビフォーひどいですね。

 

アフターはこちら。↓

f:id:karakusa456:20180311175627j:plain

素晴らしいとまでは勿論いきませんが、ベターにはなりました。

 

ということで、デザイン4つの原則の紹介でした。

各原則の詳細・色の組み合わせ方やフォントの種類についてなど、詳しい部分は先述の本に載っていますので気になった方は買ってみては。

 

余談ですが、4つの原則名(英字)の頭文字を逆順に並べると…?