プロのデザイナーが実践している、最近のWebデザインで見かけるカラーを効果的に使ったテクニックのまとめ

Post on:2017年2月17日

01. カラーの使用比率でフォーカスポイントを作成

カラーの使用比率で良い例はViporteのデザインです。ページを下にスクロールすると、各セクションの中央に大きな文字がデザインされています。それぞれの文字は、セクションのアニメーションが始まる前に美しいカラーで満たされています。アニメーションする異なる画像のカラーは、文字のカラーに関連しています。

各セクションの要素の配置は異なりますが、カラーが効果的に使用されているので、確実にセクションの中心に視線が集まります。カラーの使用比率もさまざまで、カラーが少しだったり、多かったりします。少なくても多くても、その比率はフォーカスポイントに注意を引くために使用されています。
もしカラーが各セクションの全体で使用されていたら、フォーカスポイントははっきりしません。

Viporte

02. カラーのコントラストで注意を引きつける

カラーを使ったもう一つのテクニックが、コントラストです。
デザインのカラーが全体的に落ち着いているか穏やかである場合、コントラストのあるカラーを追加すると、多くの注意を引きつけることができます。このテクニックは、Thinxで使用されています。

トップページの全体的なカラースキームは、ブラックとホワイトです。しかし、デザインは写真に大きく依存しています。特にトップページの上部にある写真はダークレッドの背景を特徴としており、ページ上のほかの写真と比べてかなり目立つカラーです。

レッドは、ブラックとホワイトのカラースキームに対して、非常に高いコントラストを持っています。私は例としてThinxを挙げるのが好きです。なぜなら明るいネオンカラーだけが、コントラストで誰かの注意を引くのに適した唯一のカラーではないことを示しているからです。1つのカラーを目立たせるために、2つのカラーのバランスがとられています。

Thinx

03. カラーを使用してUXのパターンを作成

見た目のパターンをつくる最もよい方法は、一貫性です。パターンは、ユーザーに慣れという関係をつくります。これは特定の操作にあらわすアイコンと同じ方法で、例えばゴミ箱は削除を意味します。カラーはすべてのWebサイトやアプリで独自の意味を持つことができるので、より主観的になります。

Underbellyのデザインで、ブルーとの関係性を考えてみましょう。
まず、クリック可能な要素がブルーです。これはサイトを少し使用するだけで分かります。そして、このことがカラーを使ってパターンを作り出す方法です。パターンはユーザーやビジターが何かを簡単に認識できるので、役に立ちます。認識がより簡単になると、人々は考えることが少なくなり、より快適にサイトを楽しめます。

Underbelly

04. カラーを使用して階層を作成

カラーでできるもう一つのすごいテクニックが、階層をつくることです。Skoreのプロダクトページでは、ほぼすべてのセクションにグリーンの要素があります。グリーンはパターンとして繰り返し認識されるだけでなく、特定のセクションの重要な部分を区別するのにも役立っています。

階層をつくる時にフォントのサイズを使用するのは、確かに簡単です。しかしカラーの明度や彩度は、階層を定義する際にも優れています。Skoreの例では、グリーンはグレーのテキストとホワイトの背景で良いコントラストを持っており、しっかり際立っています。さらに、カラースキームは他のアクセントカラーに依存せず、グリーンがプライマリカラーです。そのすべてが、各セクションの階層を表現する方法に貢献しています。

そのため、グリーンは各セクションの階層を提供する重要な要素に向かってユーザーの目を誘導するのに役立ちます。グリーンの要素は、ユーザーが最初に見るべきものを示しています。

Skore

05. カラーの類似性を使ったテクニック

デザイナーとしてわたし達がカラーでするすべてのことから離れて、デザインでの一貫性を保つために再利用するテクニックがあります。InVisionのランディングページを例に説明します。

ページの上部には、背景画像として使用されるピンクとパープルのグラデーションがあります。さらにページの下部には、ピンクとバイオレットがボタンのカラーにも使用されます。その上、ランディングページはピンクとパープルの背景にホワイトを再利用しています。また、ホワイトの背景にブラックとグレーのテキストカラーが再利用されています。
もしこれらのカラーが毎回異なっていたら、素晴らしいデザインに見えないでしょう。カラーを再利用し、その類似性を効果的に使用しています。