色は、デザイナーが持つツールの中でもっとも強力な道具の１つです。注目を集め、ムードを演出し、ユーザーの感情や認識および行動に影響を与えることが可能です。
Webサイトやモバイルアプリのデザインでは、バイブラントカラーが活躍します。デザイナーは、ユーザーを重要な要素に集中させ、デザインを記憶に残るものにするために、バイブラントカラーを使用します。
ここで、皆さんのデザインにバイブラントカラーを使用する実用的なテクニックを、以下にいくつかご紹介します。
編注：バイブラントカラーは、明度、彩度が高い鮮明な色のことを指します。
モノトーン
バイブラントカラーを使用するもっとも一般的な方法の１つは、モノトーンのカラーパレットを使うことです。モノトーンのパレットは、ティントカラーとトーンを組み合わせた単色を含んでいます。このようなカラーパレットは、視覚的に興味をかきたてます。注目をひくタイポグラフィと組み合わせれば、モノトーンの配色パターンは、記憶に残る体験を生み出すことができます。
Sydneystockhomは、シンプルな方法ではっきりとした配色をおこない印象深い見た目を作成しています。
ヒント：黒と白をアクセントとして単色を使用することは、小さな画面で視覚的な関心を喚起するための素晴らしい方法です。
Streaksのアプリでは、色、アイコン、そしてシンプルな書体が、読みやすくてユーザーを引き込みやすい印象的な組み合わせを作り出しています。
デュオトーン
デュオトーンは、画像からミドルトーンとハイライトを抽出したハーフトーンの複製です。かつて印刷の定番だったこのテクニックは、オンラインで新たな命を吹き込まれました。デュオトーンは視覚的に面白く、作成も非常に簡単です。Adobe Photoshopで２色のグラデーションを使用してこの効果を作成することができます。
やわらかいデュオトーンの効果は、ビジネスライクな雰囲気を設定します。出典：Holm Marcher & Co
デュオトーンの効果は大きいデスクトップ向けの画像に適していながら、より小さいモバイルの画面でも効果的です。
出典：Ognjen Divljak
ヒント：デュオトーンでは以下のことに気をつけましょう。
- 目立つイメージを作成する際にデュオトーンを使用しましょう。１つの明確なテーマを持つ、シンプルでハイクオリティな写真を選ぶと良いです。ディテールの多い乱雑な写真は、不明瞭になる可能性があります。
1000の言葉と同等の価値がある１つの非常に強力な画像。出典：Spotify
- 写真のムードを反映する色を選びましょう。色が呼び起こす感情は色ごとに異なるということを忘れないでください。
- 既存の画像を修正することなく、画像にデュオトーンの効果をもたらすこともできます。Colofilter.cssを使用し、CSSコードでエフェクトを適用するだけです。
オーバーレイ
文章表現のための配色方法の１つは、カラーオーバーレイを組み込んだデザインです。画像や動画の上に半透明色の四角形をかぶせるだけです。マテリアルデザインの鮮明な色のいずれかを使用することで、モダンな感じを出すことができます。
カラーオーバーレイは写真のインパクトを高め、デザイナーはトーンを変更することができます。出典：Hype
カードスタイルの要素、動画コンテンツ、もしくはCTA（コールトゥアクション）のためにイメージオーバーレイを使用することを検討しましょう。
カードにホバーアニメーションを適用しましょう。出典：Column Five
ヒント：オーバーレイとして単色を使用する場合は、彩度と色の透明度について考えましょう。
- 重い色（透明度が低く彩度が高い色）の組み合わせは、その背後にある画像よりも色自体に焦点を置いてしまいます。
- 明るい色の組み合わせは、より画像に焦点を置きます。
まとめ
色を使って遊ぶことほど楽しいデザインテクニックは、なかなかありません。色の効果は、印象的にも、さらには穏やかにもなり得ます。皆さんはデザイナーとして、色の効果を試して実験することができます。
明るく派手な色合いが好きであろうと、シンプルな黒と白が好みであろうと、これだけは覚えておきましょう。
間違った色などありません。もっとも重要なのは、色をどう使うかです。
