2017.08.18 Fri

デザイナーじゃなくても使えるデザイン知識!「デザインの4原則」とは?

y2bwgxwgl7dc_mo1503025059_1503025067
みなさまこんにちは。ジーニアスウェブの藤井です。

最近、雨が急に降ったり、カッと太陽が照りつけたり、変な天気が続きますね。
傘を持つのが嫌なので折りたたみ傘派ですが、この前の台風で折れました。
結構いいお値段の頑丈な折りたたみだったのでショックです。

台風の時に折りたたみはいかんでしょ、ということは、ツっこまないでください。

今回はデザイナー以外でも使える「デザインの4原則」についてお話しします。
デザイナーじゃないからなあ・・・結局は作り手のセンスなんでしょ・・・と思われるかもしれませんが「基本的なルール」を押さえることで、デザイナー以外の方でも、サイト制作や書類作成など、全体的なバランスが格段に良くなります。

 

近接(グループ化)


簡単にいうと、関連する情報をまとめることを目的とします。
逆に異なっている内容は間隔を開けることで、視認性がUPします。
kinsetsu
サイトを作る際、写真やイラストなどのコンテンツを配置する時、その説明文はどの位置にあれば見やすいのか?で考えてみます。

左はスペースが開きすぎて、文章と関連しているか分かりづらい感じがします。
右の様に近くに置いてあげることで、コンテンツが文章に関連づいていることが分かりやすくなります。また、春と夏とでスペースを開け区切ったことで、より文章が見やすくなったかと思います。

 

整列(揃える)


情報をを配置させる際、ルールを決めることで視認しやすくなります。
綺麗に揃っていれば「なんか見辛い、違和感がある」ということは少ないです。
seiretsu
左は文章とコンテンツがバラバラに配置されているため、どの項目に関連づいているかが分かりにくいですね。右の様に、揃えて並べることで、横のコンテンツが関連していることが一目で分かります。どれかに沿うように並べることで、視覚的繋がり、一体性が生まれます。

 

反復(ルールの繰り返し)


フォントの書体、線、色・・・使う要素の中で「これは変えない」「これは揃える」とルールを決めることで、一貫性をさらに強調できます。
hanpuku
左は春は〜は文字サイズが大きく、夏は〜は太字になっています。これではどこが強調なのか見辛いですね。右のようにサイズ、太さを揃えて反復することで見やすくなります。

 

コントラスト(強調)


色のコントラストをイメージしがちですが、ここでいうコントラストは「情報と情報の差をつける」という考え方です。例えば、「この要素を強調したい」という場合の時に、色や形で差別化をすることで他との差で目立たせる場合などに使用します。
contrast
ちょっと大げさですが、タイトル、小見出しなど、ただ並べるよりかは、ハッキリ目立っています。

 

まとめ


見やすい、分かりやすいものは何らかの「パターン」があることが分かりました!
また、レスポンシブ対応など、PCとスマホでデザインを変える、見やすくする時にも、大事な考え方のひとつとなリます。スマホの小さな画面で見た時、どこを、どの位置で強調させれば分かりやすくなるのか、4原則を当てはめながら作っていけば、より良いデザインになりますね。

サイト制作だけではなく、論文やプレゼン資料、はたまたラブレターにも使える考え方なので、実践あるのみ!ですね。それでは!

WRITERこの記事を書いた人

藤井

藤井

大阪オフィスからお客様のサポートを行います。 サーバー関連の業務なども従事しています。

大阪オフィスからお客様のサポートを行います。 サーバー関連の業務なども従事しています。

FREE DOWNLOAD

顧客獲得に成功した24社の成功事例を1冊にまとめました。
顧客獲得にお困りの方も、そうでない方も、一度お読みいただくことをお勧めします。

MORE VIEW