色を扱う4つのテクニック！アプリやサイトに映える鮮やかな選択

連載

エクスペリエンスデザインの基礎知識

色は、デザイナーの道具の中でも最も強力なツールのひとつです。色の持つ力は、注目を集め、雰囲気を作り、感情や知覚や行動にも影響を与えます。Webサイトやモバイルアプリに使うなら、間違いなく鮮やかな色の出番です。デザイナーは、鮮やかな色を使い、重要な要素に注意を集めたり、デザインを印象的にすることができます。

この記事では、Webやモバイルのデザインに良く見られる、鮮やかな色使いのテクニックを紹介します。

モノトーン

鮮やかな色を使うとき、最も人気の手法の一つがモノトーンです。モノトーンのパレットにあるのは、濃淡と明暗が組み合わせられた単一色です。そうしたカラーパレットは見た目に刺激的です。目を引くタイポグラフィーと組み合わせれば、モノトーンは実に印象に残る体験をつくることできます。

Sydney Stockhom は大胆な色使いで、印象的な見た目をつくっている

画像: Pillow

モノトーンはモバイルアプリにも効果的です。単一色に白と黒のアクセントを付けると、小さな画面に視覚的な面白さを作り出せます。

Streaksアプリは、色とアイコンとタイポグラフィの組み合わせにより、読みやすくて使い易い画面を構成している

ダブルトーン

その名の通り、ダブルトーンは2種類の色を使います。同じ色合いの2色かもしれませんし、対照的な2色かもしれません。かつて印刷の必需品だったこの手法は、オンライン上に新しい居場所を見つけました。Spotifyのお陰で、ダブルトーンの人気は日に日に増しています。

2色の写真は、 Spotifyの象徴のような存在になった

感情を作り出す

ダブルトーンは、どんな画像にも、色の持つ感情的な属性を持たせられます。異なる色は、それぞれが異なる感情を喚起します。

落ち着いたダブルトーンの効果が実務的な雰囲気を決めている。 画像: Holm Marcher & Co.

画像: New Deal Design

可読性の向上

ダブルトーンでは、テキストに十分なコントラストを与えられます。画像内のどの位置でも、ある特定の色のテキストがはっきりと見えるように、色使いを調整するのです。

画像: Method

画像: Evoluir

モバイルでの利用

ダブルトーンは大きなデスクトップの画像に役立つだけでなく、モバイルの画面でも有効です。

画像: Ognjen Divljak

ヒーロー画像にダブルトーンを使う場合は、主題の明確なシンプルで高画質の写真を選びます。細かな要素の多い画像は、解釈するのが困難になることもあります。

グラデーション

高コントラストの現代的な色と共に、グラデーションが最新のUIに戻ってきました。モダンなグラデーションは、複数の色を使ったり、中心や角から円周状に、あるいは上から垂直に変化します。

ユーザーインターフェースにおけるグラデーションの役割は、以下のものがあります。

現代的な見た目をつくる

グラデーションは、フラットデザインの中に新しい役割を見つけました。フラットなカラーパレットと組み合わされたグラデーションは、現代的な感覚を呼び起こします。

明るい飽和色をマテリアルデザインと組み合わせることで、現代的な印象を与えることができる。 画像著作権: Ramotion

コンテンツの理解を促進する

グラデーションは、視覚的なコミュニケーションを改善します。下のSymoddの例では、オレンジからピンクへの推移が、インターフェースに深みと対比を与え、人目を引く視覚的な効果になっています。明から暗への移行は、人の目を自然に左上から右下へと移動させます。

Symoddのホームページは、オレンジからピンクへのグラデーションの背景を全面に採用している。2つの色の色相はあまり遠くなく、目に優しい繊細なグラデーションとなっている

擬似3D効果を作る

フラットな配置はしゃれていて見やすいですが、現実感の欠如という欠点を潜在的に持っています。これを埋め合わせるため、デザイナーはグラデーションを使い、背景に深みを与えることがあります。デザイナーがWebデザインに現実感をもっと取り込もうとする動きに連れ、この傾向は増加することでしょう。

画像: Swiss Army Man

グラデーションによる強調

グラデーションは、ページの背景に使われることが多いのですが、もっと小さな場所でもユーザーの注意を引くために利用できます。2次的な画像、あるいはコンテンツのナビゲーションのアクセントとして、グラデーションを使うことを考えてみましょう。小さな領域のグラデーションには、大胆に使える余地があります。例えば、ブルームバーグのような、興味深い色の組み合わせをつくれるでしょう。

ブル－ムバーグは、最新ニュースのティッカーにグラデーションを使用している

オーバーレイ

オーバーレイはその名の通りの効果です。もし使いたいと思ったなら、半透明の色のついた矩形で、画像かビデオを上から覆えば完成です。使い勝手が良く、実際に多くのデザインで使われています。

トレンディーな見た目

明るくて彩度の高い色を選び、マテリアルデザインと組み合わせます。そうすれば、流行の見た目を感じさせられるでしょう。

オーバーレイにより写真の特徴を強化して、雰囲気や解釈に影響を与えられる。 画像: Hype

クリック可能領域を示す

カード型の要素、ビデオコンテンツ、次のアクションに誘導するためのボタンなどが操作可能であることを示すために、画像にオーバーレイが使用できます。

カードにマウスオーバーのアニメーションを適用。 画像: Column Five

ユーザーの注意を制御する

オーバーレイ効果は、ユーザーの注意を、特定のデザイン要素に向けることができます。ただし、単色をオーバーレイに使う場合は、色の彩度と透明度についての配慮が必要です。

Studio Upは、透明度が低く彩度が高い色をオーバーレイに使用

Outlinesは画像を強調する色のオーバーレイを使用。 画像: Outlines

まとめ

色ほど扱っていて楽しい要素は滅多にありません。色が与える効果は、劇的で、印象的で、穏やかでもあります。デザイナーは、色の効果を使うとき、様々な試みを行うべきです。明るく大胆な色彩が好みでも、黒と白のミニマルデザインが好きでも、何か間違った色があるわけではありません。最も大事なことは、色をどのように扱うかという点にあるのです。

この記事はPlaying With Color: Vibrant Options For Apps and Websites（著者:Nick Babich）の抄訳です