Advertisement

monochoromatic-top (1)

 

 

海外デザインブログCanva Design School Blogで公開された「How To Design With Monochromatic Colors [With Expert Tips From A Designer]」より許可をもらい、日本語抄訳しています。

 

デザインプロジェクトの配色選びは、面倒くさい作業のひとつです。

 

 

ではスタイルガイドや参考素材がない、ゼロの状態からどのように始めたらよいでしょう。ひとつの方法として、伝統的な配色カラー原則を活用してみましょう。基本を学ぶことで、効果的で美しい見た目を作成する手助けをしてくれます。

 

 

もっとも簡単な配色選びのひとつとして、単色カラー(英: Monochormatic)を利用する方法があります。「mono」は「単一」を表しますが、同じ色を複数の場所に配置するというアプローチではありません。その代わりに、ひとつのベースカラー(英:Base Color)を選び(カラーホイールの12色から)、いくつものバリエーションを加える方法を指します。適用できるバリエーションを、以下より見ていきましょう。

 

 

  • 濃淡(英: Shades): ベースカラーを黒色で暗くします。
  • 色合い(英: Tones): ベースカラーを灰色で彩度を落とします。
  • 淡彩(英: Tints): ベースカラーを白色で明るくします。

 

monochromatic-1-1028x692

 

 

濃淡色合い淡彩を利用した単色カラーパレットを作成することで、どんなデザインにも対応できる多彩な色を表現でき、Palettonなどのオンラインツールを利用すれば、より手軽に色を決定することもできます。

 

 

 

なぜ単色カラーパレットを利用するべき?

 

単色カラーパレットを利用することで、どんなプロジェクトにも対応する幅広い用途に加え、以下のようなメリットもあります。

 

 

  • デザインの調和をとり、統一感のある見た目を作成できる。
  • 色自体に注目は集まらず、コンテンツをより引き立てます。
  • 特定の色を利用することで、ブランドイメージ構築にも役立ちます。
  • 素早く作業を行うことができ、ひとつずつ色を選んで、他の色とマッチするか確かめるストレスもありません。

 

単色カラーパレットを利用した、9つのデザインテクニック

01. こまかいデザインをシンプルにしよう。

 

ときには限られたスペースに、たくさんの情報を配置しなければいけないことがあるかもしれません。複数の色を利用して、デザインをごちゃごちゃにするのではなく、単色カラーパレットを利用することで、レイアウトの見た目をすっきりさせ、情報をよりうまく整理することができます。

 

 

以下のサンプル例は、イラストやタイポグラフィーなどの、デザイン要素をまとめたインフォグラフィクスで、青色パレットを利用することで、統一感のあるデザインに仕上げています。実際のデザインの現場では、多くのデザインには単色カラーの他に、白と黒色が追加します(文字テキストや背景などとして)。このデザインでは、白と灰色を背景色に利用し、デザイン要素を目立つように工夫しています。

 

monochromatic-2-800x600

 

 

 

02. 写真の上にカラーフィルタを重ねよう。

 

単色カラーパレットは、文字テキストやグラフィック以外にも適用することができます。写真を利用したデザインに、半透明のカラーフィルタ(英: Color Overlay)またはスクリーンを重ねてみましょう。特に白黒写真に効果的なテクニックで、モノクロの濃淡によって、印象的な色のバリエーションを作成することができます。

 

 

以下のサンプル例では、白黒のポートレイト写真にカラーフィルタを重ねています。また同時に、調和のとれた背景によって、文字テキストがより見やすくなっています。

 

monochromatic-3-663x868

 

 

 

以下のサンプル例など、色数の多い写真をつかったウェブサイト用レイアウトでも役立ちます。壁一面すき間なく並べられた写真は、しばしばやり過ぎになりがちですが、むらさき色のカラーオーバーレイを利用することで、レイアウトの構造が分かりやすくなり、連続性のあるコンテンツをうまく演出しています。

 

monochromatic-4-800x600

 

 

 

03. 関係性や段階を表現しよう。

 

デザインに単色のみを利用するもうひとつのメリットとして、いろいろな要素をまとまりのあるデザインに、手軽に仕上げることができます。また見た目だけでなく、機能的な方法と言えるでしょう。それぞれの機能がどのように関係しているのか見せることで、見る人がデザインのメッセージや目的をすぐさま理解できるようになります。

 

 

たとえば以下のサンプル例は、みどり色の濃淡を利用した金額表です。値段があがるにつれて色合いが濃くなっているのがわかります。ほんのわずかな色の変化ですが、よりユーザーフレンドリーを考えた、スマートなテクニックと言えるでしょう。

 

monochromatic-5-800x600

 

 

 

04. こまかいデザインをシンプルにしよう。

 

デザイナーにとって、異なる色の組み合わせはたのしい作業かもしれません。しかし多くのケースで、大胆で明るい配色はデザインプロジェクトや、クライアント向け案件に向いていません。いつもの色の選択の代わりに、単色カラーパレットを利用することで、より幅広いデザインに対応でき、色合いまたは彩度を落とした配色カラーは、よりプロフェッショナルな見た目を実現できます。通常デザイン作業では、まず典型的な鮮やかなベースカラー(たとえば赤、黄色、みどりなど)を選択し、色合いと彩度を調整します。

 

 

たとえば以下のサンプル例は、このテクニックをうまく利用しています。伝統的なクリスマスカラー(鮮やかな赤とみどり色)は、派手になりすぎてしまうことがあります。赤色が季節イメージを表現しながらも、企業向けデザインということで、彩度を落とすことでプロフェッショナルな色の選択となっています。

 

monochromatic-6-1000x707

 

 

 

05. グレースケールの洗練された印象を利用しよう。

 

グレースケール(英: Grayscale)とは、白から黒に至る中間色を、濃度の異なる灰色で表現することで、単なる白黒より豊かな内容を表現できる、プリント印刷用の設定です。印刷してデザインを確認したいとき、カラーインクを節約するために使われることもありますが、このテクニックを色彩の配合にも最適です。

 

 

白黒を中心として灰色を利用した配色は、ミニマル(英: Minimal)で、洗練された(英: Sophisticated)印象を与えることができます。以下のサンプル例では、灰色文字のメニューと灰色カラーフィルタを利用したヒーローイメージが、白の背景デザインをうまく補っています。

 

monochromatic-7-800x600

 

 

また、灰色を利用するときに、グレースケールだけを利用する必要もありません。青っぽい灰色にすることで寒色系デザインとなり、赤やむらさき、茶色っぽい灰色にすることで、暖色系デザインに仕上げることができます。上記サンプル例のヘッダーイメージでは、青っぽいカラーフィルタを重ね、控えめな色のバリエーションで、魅力的なデザインを演出しています。

 

 

 

06. 項目ごとにデザインを分けてみよう。

 

とりわけブロック単位で色を利用することで、デザインをセクションごとに分割することができます。コンテンツを整理し、視覚的な階層をうまく利用した、誘導しやすいレイアウトを作成するときに重要なテクニックです。

 

 

以下のサンプル例は、むらさき色の単色カラーパレットを機能ごとに利用したアプリデザインで、どの部分をユーザーが設定することができるのかうまく示しています。またユーザーがクリックすることで、選択範囲の色がインタラクティブに変化します。

 

monochromatic-8-800x600

 

 

 

07. シンプルを心がけよう。

 

どんなベースカラーを利用した場合も、濃淡と色合い、淡彩を調整することで、無限の色の組み合わせを思いつくかもしれません。しかし、単色カラーパレットにたくさんの色の組み合わせが必要、というわけでもありません。

 

 

管理できる色数にする方法として、デザイン要素を分解するときに必要な数のみを、利用するテクニックがあります。たとえば3色を利用したレイアウトはとても典型的で、背景色や文字テキスト、アクセントカラーとの組み合わせにも適しています。

 

 

以下のサンプル例は、ロゴデザインのコンセプトをまとめたものです。複数の色合いを利用して、手軽にデザインすることもできますが、より細部まで作りこまれたスタイルのため、2色の単色カラーを利用することで、ロゴをシンプルに保ち、レトロなデザインの邪魔にもなりません。

 

monochromatic-9-800x600

 

 

 

08. 色数を倍にしよう。

 

たとえばシリーズで行われるコンサート用フライヤーや、同じブランドでペアの商品ラベル(以下サンプル例)など、2つの関連するデザインを作成するときは、コントラストのある単色カラーパレットを用い、魅力的なエフェクトを実現することができます。それぞれのデザインは異なりますが、関連性をうまく伝えることができます。

 

 

以下のサンプル例は、ミネラルウォーターのラベルデザインで、カラーホイールの反対側から選んだ、青とオレンジ色の補色カラーの組み合わせを利用することで、コントラストを強化しています。カラー原則において補色カラーは、アートやデザイン要素のコントラストを、もっとも強調できるとされています。

 

monochromatic-10-700x1199

 

 

単色、補色カラーの他にも、色の基本原則として合計6つの組み合わせ方が存在します。より詳しい解説については、こちらのエントリーで詳しく触れていますので、参考にどうぞ。

 

 

 

09. 「ほぼ単色カラー」も試してみよう。

 

テクニック1でも述べたように、単色カラーパレットのみに限定した色の組み合わせは、あまり実践的ではありません。ほんの少し融通をきかせて、単色カラーパレットのエッセンス、本質を残すことで、見た目も魅力的で、機能的なデザインに仕上げることができます。以下は、具体的ないくつかのデザインアプローチです。

アプローチ1 単色カラーパレット + アクセントカラー

単色で表現されたカラーパレットに、鮮やかな色を1色加えることで、重要な部分を強調し、より魅力的なデザインを追加できます。特にこのアプローチは、ロゴやお問い合わせ情報、ボタンなど、特定の目的に利用することが有効と言えるでしょう。

 

 

以下のサンプル例は、青色のアクセントカラーを加えることで、デザイナーの苗字をうまく強調した、名刺デザインとなっています。

 

monochromatic-11-800x600

 

 

 

もうひとつのサンプル例は、灰色をベースカラーとした単色カラーパレットではなく、ターコイズ色(英: Turquoise)を背景と文字テキストに利用しています。2色だけのシンプルな単色カラーパレットにすることで、やりすぎ感を抑えることができ、ブランドカラーのオレンジ色を、デコレーションの目的で利用しています。

 

monochromatic-12-856x856

 

アプローチ2 白黒デザイン

白黒カラーを単色カラーパレットに含んで良いのか、デザイナーよってそれぞれ意見は違うと思いますが(機能的には、黒は色がなく、白はすべての色の組み合わせで表現できるため)、もっとも基本的なカラーパレットとも言え、アクセントカラーを追加するのも、より手軽に行うことができます。

 

 

比較として以下のサンプル例を確認してみましょう。ひとつは白黒カラーパレットのみでデザインされたウェブサイト、もうひとつは赤をアクセントカラーとして追加したサイトデザインです。

 

monochromatic-13-1772x1126

monochromatic-14-1600x2415

 

 

白黒カラーパレットを利用したデザインサンプル例を、こちらの記事では50種類まとめています、参考にどうぞ。

 

アプローチ3 同じカラーファミリー

専門的には単色カラーパレットではありませんが、同じカラーファミリーから色を選ぶことで、視覚的な調和や情報を、うまく整理することもできます。

 

 

以下のサンプル例は、グラフやチャートを目立たせるために、青と緑色を利用した、雑誌の見開きページデザインです。最低でも4〜5種類のカラーパレットを利用していますが、色温度(英: Color Temprature)や彩度(英: Saturation)を合わせることで、統一感のある見た目を演出しています。もしオレンジ色など暖色カラーを追加すると、デザインに当てはまらないでしょう。

 

monochromatic-15-3000x2220

 

 

 

 

単色カラーを利用した、配色カラーパレット25選

 

デザインプロジェクトに単色カラーパレットの参考として利用できる、25種類の配色カラーを一緒にご紹介します。コピー&ペーストで利用できるカラーパレットも用意しています。

 

119-900x568

 

#003d47
#128277
#52958b
#b9c4c9

Aqua Blues

 

 

 

2-1-900x568

#d24136
#eb8a3e
#ebb582
#785a46

Sunkissed Village

 

 

 

3-1-900x568

#1e1f26
#283655
#4d648d
#d0e1f9

Berry Blues

 

 

 

4-1-1900x1200

#faaf08
#fa812f
#fa4032
#fef3e2

Sunny Citrus

 

 

 

5-1-900x568

#6c5f5b
#cdab81
#dac3b3
#4f4a45

Shabby Chic Neutrals

 

 

 

6-1-900x568

#04202c
#304040
#5b7065
#c9d1c8

Misty Greens

 

 

 

7-1-900x568

#1e0000
#500805
#9d331f
#bc6d4f

Vineyard Neutrals

 

 

 

8-1-900x568

#265c00
#68a225
#b3de81
#fdffff

Fresh Greens

 

 

 

9-1-900x568

#2c4a52
#537072
#8e9b97
#f4ebdb

Hazy Grays

 

 

 

10-11-900x568

#d8412f
#fe7a47
#fcfdfe
#f5ca99

Strawberries & Cream

 

 

 

11-1-900x568

#eae2d6
#d5c3aa
#867666
#e1b80d

Polished & Inviting

 

 

 

12-1-900x568

#003b46
#07575b
#66a5ad
#c4dfe6

Cool Blues

 

 

 

13-1-900x568

#af6c59
#e68f71
#ecae97
#ffd5c8

Brown Brick Wall

 

 

 

14-1-900x568

#021c1e
#004445
#2c7873
#6fb98f

Watery Blue-Greens

 

 

 

15-1-900x568

#434343
#767676
#b2b2b2
#e3e3e3

Winter Silver Snow

 

 

 

16-1-900x568

#c16707
#f08d16
#fab418
#fbfadb

Golden Sunset

 

 

 

17-1-900x568

#77262a
#9e2d29
#c35d44
#f8a573

VIP Backstage

 

 

 

18-1-900x568

#202d35
#0e3c54
#2a677c
#b3c3d3;

Stormy Ocean

 

 

 

19-1-900x568

#4f3538
#66443b
#c29f83
#e4d63f

NYC Yellow Taxi

 

 

 

20-1-900x568

#210e3b
#4b194c
#872b76
#c88ec1

Deep Purple

 

 

 

21-1-900x568

#a4d5d8
#c1e5e1
#d5f0e7
#fffee9

Bright Blue Sky

 

 

 

22-1-900x568

#4f4335
#7c644c
#a38467
#e5d9cb

Espresso Coffee

 

 

 

23-1-900x568

#d94150
#fd746a
#fdad88
#f9ddc5

Pretty Pink

 

 

 

24-1-900x568

#696b82
#798198
#a2aec4
#b9bfcd

White Haze

 

 

 

25-1-900x568

#696b82
#a2ab2a
#cbc912
#f7840f

California Plate

 

 

 

さいごに、。

 

ご紹介したデザインポイントに気を配ることで、単色カラーパレットはどんなデザインにも手軽に適用できる、多才なテクニックと言えます。ウェブサイトやロゴ、名刺デザイン、商品パッケージなどさまざまなサンプル例を見てきましたが、伝統的な単色カラーパレットの定義にとらわれる必要はありません。ひとつ色を加えることでエフェクトをより補い、強調することができるでしょう。

 

 

デザインに効果的に色を追加する方法は、色の基本原則を確認して、以下のリソースも参考にすると良いでしょう。

 

人気デザイナーが明かす!カラー配色の秘密テクニック10個まとめ

10secret-design-top

 

 

配色完全ガイド!カテゴリー別見本100個とカラーパレットの使い方まとめ

100color-combo-top

 

 

参照元リンク : How To Design With Monochromatic Colors [With Expert Tips From A Designer] – Canva Design School