2016.11.08 Tue

おさらいしたいデザインの基本

design_basic

みなさんこんにちは。増田です。
今回は、デザインをする上での基礎を確認していこうと思います。
皆さんは自分のデザインが完成した時、「何か足りない」「具体的にどこを直したら良いかわからないけど違和感がある」などといったことを感じたことは無いでしょうか?
もしかしたらそのデザイン、基本的な部分で抜けがあるのかもしれません。
今回の記事を通して再度、自身のデザインを見直すきっかけになればと思います。

それでは順を追って見ていきましょう。

まずは、デザインの4原則についてです。

1.デザインの4原則

まずは基本となる4つのルールです。
4つの原則
言われてみると当たり前のように感じますが、見直してみると意外と出来ていないことがあるかもしれません。

2.配色の基本

これは以前にも書かせていただきました。
視覚的に情報が見やすく整理される1つの要因として使用される色の数があります。
基本的に使用する色の数は3色までです。

ベースカラー
ベースカラーは、配色の際最も大きな面積を持つ色です。そのため全体的なイメージの基盤となる色になります。
ウェブサイトのデザインにおいては、「背景」や「余白」に用いることが多いです。

サブカラー
サブカラーは全体の約4分の1程度の割合を占める色です。
ベースカラーに次いで面積が大きく、ベースカラーで選んだ色を補う役割を持ちます。ベースカラーと似通った色を使用するとまとまった印象になり、異なる色であれば、サイトに動きをつけることができます。

アクセントカラー
アクセントカラーはその名の通り、サイトの中でも強調したい部分に使用する色です。全体約5%の割合で、ベースカラーやサブカラーとは色相や彩度が異なった色を選択することが多いです。
注目させたいコンテンツに利用しましょう。

色の与える印象
それぞれの色にはそれぞれ人に与えるイメージが違ってきます。
自分が使用したい色の意味などをよく考えて使用しましょう。

3.レイアウトの基本

レイアウト(配置)にも基本があります。4点ほどあるので、順に見ていきましょう。

揃える
見やすくするためのコツは、整理整頓をすることにあります。
文字を左に揃えたりするだけで、読みやすさが格段に上がるなど、ちょっとしたことで絶大な効果を発揮することもあります。

まとめる
関連性のある項目同士を近づけることです。
情報のグループ化と言っても構いません。単調にレイアウトされているだけでは、パッと見わかりにくい場合もあります。そんな時、その項目の内容に沿ってそれぞれをグループ化することで全体的に見やすくなります。

余白を空ける
「文字と文字」、「文字と図」、「スライドの端と文字」の間にはスペースを空けましょう。それぞれの余白がきちんととれていれば、かなり見やすいものになります。

コントラスト
webデザインやポスターにおいては、文字が単調にかかれていた場合、見る人にとってはどこが重要なのか、注目すべきはどこなのかがわかりにくくなります。
重要な文字は「太さ」「大きさ」を変えてみることで、要点が伝わりやすくなります。

番外編.webデザインの8つの法則

webデザインにおける8つの項目を、単語のみご紹介いたします。
いづれ詳しく説明させていただこうとは思いますが、もし興味のある方がいらっしゃいましたらぜひ、調べてみてください。

・視覚階層
・黄金率
・ヒックの法則
・フィットの法則
・三分割法
・ゲシュタルトの法則
・余白&清潔感のあるデザイン
・オッカムの剃刀

今回はデザインの基本をご紹介いたしました。
僕自身もまだまだできないことは多いですし、これらの理論を本格的に使えるようになるにはかなりの経験が必要になると思いますが、これらの基本をおさえておくことで、しっかりとしたデザインができるのではないかと思います。
では、今回はこれで失礼致します。

WRITERこの記事を書いた人

増田

増田

a-blogやWordPressを使用したサイト制作に携わっています。 もっといろんなCMSを扱えるようになれるよう勉強中です。

a-blogやWordPressを使用したサイト制作に携わっています。 もっといろんなCMSを扱えるようになれるよう勉強中です。

Genius Web in Japan コーポレートサイト

FREE DOWNLOAD

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

MORE VIEW