こんにちは。花粉症の季節がそろそろ本格的になってきましたね。

WEBデザインにおいての色の使い方、ここでは配色やサイトの印象付けではなく、 色を使用した情報の整理方法について書こうと思います！ 基本的なことばかりではありますが…。

情報の整理に色を使うことの便利さは、表のデザインがわかりやすいです。
例えばこのような表。 少し見づらいです…。
行と列がさらに増えるとどこを目で追っていいかわからなくなりますね。これは単純に横のセルに交互に色をつけただけですが、それだけでも最初のものよりは抜群に見やすさがアップします。
さらに縦のセルにも色をつけてみました。縦軸と横軸のつながりがより強くなりました。

恐らく、ほとんどの人がこの方法をさらっと使っていると思います。こうすることにより、見ていても疲れない表のデザインになります。

要素をすっきりさせる！

テキスト要素が多く、背景も単調なため、読むのに疲れてしまいます。
これを、文のまとまりごとに色で分けてみます。だらだらと続いていた文章が、すっきりとまとまりました。 この方法は上下左右のマージンが必要となってくるので、内容部分が狭くなってしまうのが欠点です。

関連付けを明確にする！

これはコーポレートサイトやランディングページでも見かけることが多いです。このように、ナビゲーションリンクを飛ばしたい先の要素がボタンの色と連動しているパターンです。こうすることによって、ナビゲーションのどの内容を示しているのかユーザが迷いにくくなります。コーポレートサイトのパターンでは、内容を要約したものをトップに持ってくる際に使われることが多いでしょうか。

色を使って情報を整頓するにことより、デザイン要素のてんこもり感がかなり抑えられます。さらに、どういう目の動かし方をすればいいのか、という手助けにもなります。

色を使うことの注意点として、色を多用すると統一感がなくなり、 逆に疲れてしまったり、どこを見ていいかわからなくなってしまいます！
背景色として大きく使う場合等は、補色関係に近い色合いが隣合うと協調性がなくなりますこのようなときは余白をあけると隣同士の色がケンカせず、協調性が少し高くなります。さらに中間色を混ぜてあげると、ぐっと統一感がでます。簡単なことだけれど、このような細かい部分の配慮でユーザビリティは確実に向上すると思います！せっかく興味があってページを見に来ても、配色やレイアウトが見づらかったら離脱率も上がってしまいますからね。