配色は、デザイナーにとってもっとも強力なツールのひとつです。色によって注意を惹くことができたり、雰囲気を整えたり、ユーザーの感情や知覚および行動に影響を与えることができます。
Webやモバイルアプリデザインでは、鮮やかな配色が人気となっています。人が重要な要素に注意を集中させ、デザインをより印象的に仕上げるために、デザイナーは鮮やかな配色を使用しています。
今回は、デザインに鮮やかな配色を使用するための実践的なテクニックをご紹介します。
単色使い
鮮やかな配色を利用するもっとも一般的な方法のひとつが、単色のカラーパレットです。単色カラーパレットは、彩度の異なる色合いの組み合わせから構成されており、視覚的にも魅力的にみせることができます。注目を集めるタイポグラフィーと組み合わせることで、単色カラーパレットは印象に残る体験をつくり出すことができます。
ポイント 白黒デザインのアクセントとして１つの色を使用することで、小さな画面で注目を集める良い方法と言えるでしょう。
2色使い、ダブルトーン
ダブルトーンは、一つの単色原画からスクリーンの角度を変えて2枚のネガを作成する、中間色とハイライトを引き出す再現方法です。かつて印刷技術として利用されたテクニックは、オンライン上で新しい使い道を見出されました。ダブルトーンは視覚的にも面白く、とても簡単に作成することができます。Adobe Photoshopで２色のグラデーションを利用することで、エフェクトを実現することができます。
ダブルトーンエフェクトは画面サイズの大きなデスクトップ用イメージ画像に適していますが、表示エリアの限られるモバイル画面でも利用することができます。
ポイント
- ダブルトーンエフェクトを利用して、注目を集める画像イメージを作成しましょう。高画質でシンプルな画像イメージを選択し、被写体を目立たせましょう。ごちゃごちゃとした写真では、ディテールがぼやけてしまう可能性があります。
- 写真の雰囲気を反映した配色を選択しましょう。色によってそれぞれ異なる雰囲気や感情を表現できることを覚えておきましょう。
- ウェブサイトを制作、デザインするときは既存のイメージに加工を加えることなく、ダブルトーンエフェクトを実現することもできます。Colorfilter.cssなどを利用することで、CSSコードのみを使ってエフェクトを適用できます。
オーバーレイ・エフェクト
メッセージを伝えるために配色を利用するもう一つの方法が、カラーオーバーレイによるデザインです。画像イメージや動画ビデオに半透明のカラーフィルタを重ねてみましょう。マテリアルデザインの鮮やかな配色などを組み合わせることで、モダンな雰囲気を表現することができます。
オーバーレイ・エフェクトをカード型レイアウトやビデオコンテンツ、または注目を惹きたい部分に利用することを検討してみましょう。
ポイント 単色カラーをオーバーレイ・エフェクトに利用するときは、色合いとカラーフィルターの透明度をうまく調整することが重要です。
- 透明度の低いカラーフィルターで色合いをきつくすることで、背景にある画像イメージよりも色自身に注目が集まります。
- 反対により明るく、透明度の高いカラーフィルターは、画像イメージに注目を集めることができます。
最後に。
色を使った楽しいテクニックを見つけるのはむずかしいのも事実ですが、配色を利用したエフェクトはデザインをより魅力的に仕上げることができます。カラーエフェクトを利用するときは、試行錯誤してぴったりの配色を見つけてみましょう。明るく鮮やかな色使いが好きだったり、よりシンプルなモノクロを好む場合も、間違った色使いはないということを覚えておきましょう。もっとも重要なのは、それらの色を使用する方法と言えます。
サムネイル@ : Color Inspiration – Color Claim – Dribbble
参照元リンク : Vibrant Colors For Apps and Sites by Nick Babich – Medium
