2011年9月20日火曜日

苦手でもなんとかなる配色の方法「モノトーン+1」

スポンサーリンク

WEBサイトに限らず、配色というのは高いハードルとなることが多々あります。
配色が苦手で配色例や配色表を見ながら作ってもうまくいかない...。そういった場合に使えるかもしれない、個人的に失敗しにくいと思っている配色法があります。


モノトーン+1


いきなり結論から。

苦手でもなんとかなる配色法方とは、
モノトーン+1の配色です。


一般的に、同系色を用いれば配色は安定します。しかし同系色を選ぶのもなんだか難しいという場合には、この記事のようにモノトーンのグラデーションを利用して色を選びます。そしてアクセントとなる1色を加えて、同系色のおとなしさを打ち破る、動きや魅力や特徴ある配色を目指します。

色相の似た色を扱う同系色ではなく、単一の色相のモノトーンを使う事で表現の幅は狭まります。ですが、狭まると言っても一般的に使える程度の幅はあります。特にWEBサイトの場合はテキストや写真を見てもらわなければなりませんので、テキストや写真を邪魔する様な奇抜な色彩を用いる頻度は低いはず。多彩な色彩でない方が扱いやすいとも言えます。

色相

色相を簡単に説明すると、青や赤や黄などの色合いです。12色の色を輪にした12色相環図などを目にする事があるかと思いますが、示されているそれぞれが色相です。

この記事では「色相を変える」作業が必要になりますが、これを簡単に言えば「赤を青に変えてしまう」ことです。色相の変化で色を作ることができれば画像制作時に便利ですので、覚えておいて損はない手法です。

モノトーン

モノトーンと聞いて白黒を思い浮かべる方も多いと思います。ですが、三省堂の大辞林(weblioより)によると「1色の濃淡・明暗だけで表現すること。」とあります。無彩色(グレー)の変化だけではなく、赤でも青でも単色の色調であればモノトーンです。

配色が破綻する原因の一つは、選んだ色同士にまとまりや方向性が感じられないからです。モノトーンは既に色相が固定されているので、一定のまとまりや方向性があり安心です。加えて明るい色から暗い色まで揃っているため選択肢も意外と広いと言えます。モノトーンを利用するメリットはこの安定性にあります。

使用するモノトーンの作り方


ほとんどのソフトで使える、簡単なモノトーンの作り方があります。

  1. 長方形を作る
  2. 白(#fff)から黒(#000)へのグラデーションを作る
  3. 色相を変える
  4. 色相を変えたグラデーションの中から色を選ぶ

これだけです。実際には明度や彩度の微調整が必要になりますが、基本は簡単。グラデーションを使えば、ある色調に属する多くの色を簡単に選ぶ事ができます。白黒のグラデーションの色相を変更しているだけなので、色相の再調整で色々な色相を簡単に試せます。

実際の作業例としては、下図のようになります。



グレーのグラデーションを作ります。その後、PhotoshopやFireworksなどのグラフィックソフトを使って色相を変化させます。



色相を変えた上で彩度を上げました。このまま使うと色が強いので、下図のように彩度と明度を調整します。



少し落ち着きました。派手さが薄まり、目の痛さも和らいだはずです。彩度が高すぎると使いづらいことが多いので、彩度を調整すると使いやすくなります。

モノトーン+1の例


では、実際にモノトーン+1の色を決める場合どのようにすればよいかを例示してみます。ここでは、赤のモノトーンをメインとして使い、アクセントカラーを赤以外の色で考えます。

最初に赤のトーンを用意し、そのトーンの中から使う色を選びます。



選び出した色に、任意のもう1色を加えて配色のオリジナルができ上がります。



前述の通り同じ色相の色が複数あるため、加える1色を感覚で選んでもそうそう破綻はしません。一見破綻しているように見えても、破綻部分がアクセントとして作用しやすくなります。必ずしも意図的なことではありませんが、効果的な場合があります。

もっとも安全なモノトーン+1

「色を2種類も選べない!」という場合には、もっとも安全な組み合せがあります。それは、グレーのモノトーン+1の配色です。



通常は明度と彩度を決める必要がありますが、無彩色であるグレーに彩度はありません。明度のみの変化の中から選べるため、あまり迷うことも無いでしょう。続いて、アクセントとなる1色を選びます。



これで色が決まりました。彩度を考えないでよい分簡単になりますが、表現の幅が無くなっているわけではありません。
グレーは他の色の影響を受けやすいため、アクセントとなる色によって表情が変わるからです。具体的にはグレーに隣接する色の補色を含んだ色に錯覚しやすくなります。アクセントとなる色の選択次第でグレーの色を微妙に操作できるため、表現の幅が広がります。

WEBサイトへの適用


それでは、実際にWEBサイトに使う場合にはどうすれば良いのか。の一例を挙げてみます。

前述の赤をメインにした配色で考えると...。



アクセントカラーを狭い面積で使い、アクセントカラー以外を広い面積で使うのが基本です。逆になるとアクセントではなくメインになってしまいますから。また、アクセントカラーはボタンや装飾などに用いるとサイトに取り入れやすくなります。アクセントを付けることは強調するとことでもあるので、使い方も間違っていません。

もっとも重要なのは、コンテンツ部分に色を配置する事です。

ヘッダーやフッターは色を置きやすい反面、スクロールで消えてしまいます。消えた場合、コンテンツに色が無いと配色を計画した意味がありませんし、他サイトとの差別化もできません。コンテンツ内の文字色や小さな装飾などを利用して積極的に色を置く方がサイトに統一感も生まれます。

薄い色を選んでいる場合、テクスチャを利用しながらベースカラー(背景色)として背景に敷く方法もあります。薄い色なら広い面に用いやすいですが、濃い色だと文字が読みにくくなるため避けた方が無難です。もちろん、試してみてうまくいきそうなら良いのですが。なお、今回はなるべく安全な白を背景色として扱いました。

せっかくなので、前述の残り2色のパターンも作ってみます。



水色の方は彩度を他の色よりもかなり高めたため、さすがに浮いて見えます。もう少し彩度を抑えると落ちつくはずです。ただ、落ち着かせると印象が薄れてしまいますので、彩度が違うという違和感を逆手に取る方法を考えてもよいかもしれません。

文字色を配色計画に加える

テキストに設定した文字色も色面の1つです。配色を考える場合、文字色も含めて考えられればデザインの幅が広がります。

WEBに限りませんが、紙面の大部分を占めるであろう文字色を色面と考えてフォントを選びます。具体的には線幅の広いゴシック体の固まりが濃い色面も形成し、線幅の狭い明朝体の固まりが薄い色面を形成します。フォントの選択により、コンテンツ内の色面を操作する事が可能なのです。

白地に青文字で本文を書く事はまず無いでしょうが、文字色にかすかに色を加える方法を用いれば比較的に安全に画面に統一感を出す事ができるでしょう。

結び


配色の方法は色々あるかと思いますが、なるべく簡単で楽な方法を記事にしてみました。色数を増やせば増やすほど収拾がつかなくなることもありますので、そんな時には役に立つかもしれません。色と色の関係は複雑ですが、基本2色であればなんとなかなるはずですから。

実際には配色は単純ではありません。色彩論や心理学など様々な要因をガイドとして計画できるからです。反面「見てどう感じるか」という部分が重要である点に間違いはありません。制作者がどれほど深遠な意図で配色を計画しようとも、見た人が何も感じなければ結果は失敗です。

様々なガイドに頼るのも良いのですが、まずは感覚で配色してみることも良いと思います。

どうもしっくりこない、あるいはもっとイメージどうりにできそうな気がする、となった際にガイドを頼れば良いのですから。

スポンサーリンク

0 件のコメント :

コメントを投稿