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

カラーはあらゆるデザインにおいて、非常に重要な要素の一つです。
プロのデザイナーはWebサイトやアプリで、さまざまなテクニックを用いています。

カラーのコントラスト、類似性、使用比率で、フォーカスポイントを作成したり、階層をつくりだすこともできます。最近のWebデザインで使われているカラーを効果的に用いたテクニックを紹介します。

サイトのキャプチャ

5 techniques for fine-tuning UX with color

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

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

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

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

サイトのキャプチャ

Viporte

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

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

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

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

サイトのキャプチャ

Thinx

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

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

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

サイトのキャプチャ

Underbelly

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

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

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

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

サイトのキャプチャ

Skore

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

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

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

サイトのキャプチャ

InVision

もう一つの例、Co-motionを見てましょう。
トップページではいくつかの異なるカラーが使用されています。しかし、これらのカラーはすべて、一貫したフローを提供するために類似したトーンです。

このデザインでは、特に目立つものは何もありません。カラーによる強調はユーザーがスクロールをしている間、一貫したフローを提供できるようにデザインされています。

サイトのキャプチャ

Co-motion

まとめ

カラーは、さまざまなデザインのゴールを達成する素晴らしいツールです。階層を定義して確立し、フォーカスポイントを作成するのに役立ちます。カラーの強調はさまざまなテクニックでつくることができます。

いずれにしても、カラーを使って作業することは非常に楽しいことです。戦略的なカラースキームで、ユーザーやビジターの目がどこに向かうのかを容易にすることができます。

top of page

©2017 coliss