Webデザインの配色に悩んだら一度基本に戻ろう

Webサイトの配色は簡単のようで実に難しいですよね。
口でうまく表現出来ないような違和感を感じ、調整をしてみるもやはりどうもしっくりこない。ああでもないこうでもないとアチコチいじりだすともう収集が尽きません。そんなときは一度冷静になって基本の配色に戻してしまいましょう。
では基本の配色はどうやって決めればよいのでしょうか?

こんな決め方はいかがでしょうか。

Webデザインの配色は
キチンと手順を踏んで決めれば
必ずまとまりのよい組み合わせになります。

無数にある色の中からバランスのよい色をピックアップするには感性と経験が必要です。誰もが思いつきだけで周囲が唸るような配色にまとめることができるというものではなかったのです。

では最も基本である配色の決め方を覚えましょう。

求められているイメージを明確にしよう

まずサイトにどんな目的で配色をするのかを考えてみましょう。

  • サイトの特徴
  • ターゲットユーザー層
  • クライアントの要望
  • デザイン方針
  • 対抗サイトとの差別化
  • キーカラーの設定(※コーポレイトアイデンティティやロゴがあるなら)

など、配色前に考えなくてはいけないことがたくさんありますが、これらからユーザーに「配色で伝えたいイメージ」を決めましょう。「楽しい」「信頼できる」「カワイイ」「おしゃれな」などの言葉にして書き出します。そしてその中から最もイメージにあった言葉2つをピックアップしておきます。

では、「カワイイ」「やさしい」、さらに「信頼できる」「親しみやすい」を例にして実際に試してみましょう。

配色の確認方法は?

Webサイトの配色を分かりやすく確認したいのであれば、色サンプルはベースカラー70%、アソートカラー25%、アクセントカラー5%程度にすると良いでしょう。これは背景・見出し・アクセントマークというWebデザインでありがちな構成を模しています。

r00157_02

1色目を決めよう

まず先ほど決めたイメージから連想できる色を決めましょう。カワイイなら「淡いピンク」を、信頼なら「澄んだ青」を、元気なら「明るいオレンジ」など。これは簡単ですよね。

r00157_03

その色が淡い色ならベースカラーに、濃い色ならアソートカラーに設定します。
Webサイトであればアソートカラーが見出しになることが多いため、ベースカラーより濃い色が適しています。もし、2色目を決めた際に濃淡の関係が逆になってしまう場合はベースカラーとアソートカラーを入れ替えましょう。

2色目を決めよう

次に2つ目のキーワードを念頭に置きながら、1色目を変化させて2色目を作ります。
例えばベースカラーが決まっているなら、その色の色相またはトーンを変化させてアソートカラーにするのです。
今回の場合であれば「淡いピンク」を変化させて「やさしい」に、そして「澄んだ青」を変化させて「親しみやすい」にしていきます。

1例目はトーンを変えずに色相を変化させ「やさしい」を連想する「薄いオレンジ」に、2例目は色相を変えずにトーンを変化させて「親しみやすい」を連想する「薄い青」にしました。
元の色と関連性を残しているため、2つの色は必ず相性のよい組み合わせになります。

r00157_04

アクセントカラーを決めよう

最後にアクセントカラーです。アクセントですので前出の2つの色から目立たなくてはいけません。ここで2色目の色をどうやって決めたかが重要となります。

同じトーンで色相を変えた2色であれば、アクセントカラーは全く異なるトーンを選ぶ
同じ色相の2色であれば、アクセントカラーは補色などの異なる色相を選ぶ

このように2色の共通項からかけ離れた色にするとしっかりと目立つ「アクセント」になるのです。

こうしてアクセントカラーが決まりました。

r00157_05

このような配色になりましたがいかがでしょうか?

こうして出来る配色はベーシックなものになりますが、この方法であれば不正解を出すことは出来ないでしょう。

もう少しハズシたいときは

奇をてらいつつも高度な色バランスで構成された配色は、それでもサイトのイメージを連想させるものでなくてはいけません。つまり「サイトのイメージは?」という問いで連想する言葉のボキャブラリーを増やさないとなかなかできるものではないのです。

つまりWebサイトのイメージを「かわいい」「ラグジュアリー」、「誠実」「熱血」などニュアンスのかけ離れたものを選ぶと、もう一歩踏み込んだ配色が可能です。

r00157_06

是非いろいろ試して配色の面白さを味わってみてくださいね。

なぜそう感じるかをしっかり考えよう。

Webデザインの配色は
キチンと手順を踏んで決めれば
必ずまとまりのよい組み合わせになります。

基本ができているから冒険ができるのです。

求められているイメージを使って配色を決めるという当たり前のことですが、ドツボにはまりだすと見失いやすい点でもあります。配色自体はまとまったが求められているイメージとはかけ離れていた。チラッと見だだけで即ダメ出し。そんな失敗を起こしやすいのでご注意ください。

今回ご紹介した方法は、あくまでも配色を決める手順の一例です。しっかり考えながら配色を繰り返していくと、今までぼんやりしてわからなかった「違和感の理由」が見えてくるようになります。そこまで出来るようになると周囲には「配色を直感で決めるスゴイ人」に見えるのかもしれませんね。

スポンサーリンク
sangyo_336_280
sangyo_336_280
  • このエントリーをはてなブックマークに追加