どうも、ソエです!

今回は、デザインのルールを改めて調べて学びますよ!

デザインのルールを把握しているって言っても、本当に理解してるかは怪しいですからね。
ブログやってるし、書きながらまた学んでみよう、適菜テンションでやってます。

では早速行きましょう!

近接

近接は、関連する項目を近づけさせることで、関係のあるものを視覚的に理解させる、4大原則の一つです。
どういうことなのか、下記を例に見てみましょう。

食べ物
みかん

乗り物
飛行機

食べ物
みかん

乗り物
飛行機


右と左、どちらが見やすいか一目瞭然ですね。
左のほうが、関わりのあるものをグループ化して余白を開けてますね。

反対に、右はグループ化はしているけど近すぎて字が繋がってるように見えますね。

これらからわかるのは、近接は余白が大事、ということですね。
余白が小さければ関わりがある、余白が大きければ関わりがない、ということが視覚的にわかります。

近接を理解し、余白を駆使してみましょう!


整列

整列は、デザインの要素という要素をそろえる、という効果がある原則の一つです。

下記の例をみてみてください。

みかんは、食べ物。

飛行機は、乗り物。

みかんは、食べ物。

飛行機は、乗り物。


どうでしょう?右のほうが、整って、みやすくありませんか?

今回は二行の文章なのでまだマシですが、これが名刺で使われるとなるとみやすいなんてあったもんじゃないですね。


たまに写真をバラバラに配置しているサイトがあったりするけど?と思ったかた。

確かに、あれはバラバラに配置しているように見えますね。
しかし、バラバラなのに綺麗に見えるデザインであれば必ず上下か左右、揃えてあるはずです。

綺麗で見やすいデザインにするため、「右揃え」「中央揃え」「左揃え」や、「上揃え」「下揃え」などを駆使し整列を守りましょう。


反復

反復は、アイコンや色など特徴的なものを繰り返し使い、デザインに統一感を持たせる原則です。

下記の例を見てみましょう。

食べ物

みかん

いちご

食べ物

みかん

*いちご


左と右、どちらがこのブログのデザインにあってないと思いますか?

明らかに、右がこのブログで異質ですよね?

見ての通り、右は色が違ったり、*があり異質です。
反復、つまり繰り返し使わず別のものを使っているからそう見えることがわかりますよね。

こうならないためにも、リストや色など、類似するものがある場合は繰り返し使用するよう、反復を意識しましょう!

強弱

強弱は、異なる二つの要素がある場合、見た目をはっきりさせる原則です。

下記の例を見て、どちらが見やすいのか比べてみてください。

食べ物

みかん

いちご

食べ物

みかん

いちご


左が明らか見にくいですね!
文字の色はもちろん、タイトルと文字の違いがはっきりしているかどうかの差で、見やすさが変わっています。

右のほうが、”食べ物”がタイトルだとわかりますし、背景と文字の色、太さの違いがはっきりして見やすいです。

それぞれの違いをはっきりさせ、要素の関係を差別化しましょう!

終わりに

どうでしたか?

この法則を知るだけでも、今後のデザインが変わると思いませんか?
でもいきなり全部は、詰め込みすぎて頭がパンクしますよね・・・

そんな時は、一つずつやっていきましょう。
基本がしっかりしているほど、より良いデザイナーになると思いますよ!

ではここらで、今回もありがとうございました!

ご閲覧ありがとうございました!

プロフィール

ソエ

愛知県産のインドア。趣味はゲームとアニメ鑑賞。高校三年生にWebに興味を持ち専門学校へ入学。写真は愛犬です。

検索

ホーム/ デザイン/

デザインの四大原則について学ぶ