WEBデザインにおける配色の手順【非デザイナー向け】

この記事では今まで
まったくデザインなんて触れてこなかったけど
デザインの業務を今後担当することになってしまった
サイトの見栄えを左右する要素だけに
かなり、重要なことなんだろうけど
なにせ、今までやったことないので
何をどうしたらいいのかサッパリなんですけど…。
そんなあなたに向けて書いています。

へまむしょ

まさに、僕が今そんな状況です

僕が直面した課題

• Webサイトを0から作るというミッションを与えられた
• WEBデザイン経験・知識ゼロ
• 色のパターンとか無限に思えてきて絶望感を味わっている

配色について色々調べたことをまとめてみました

配色って何をどうしたらいいの？？

結論

Webサイトにおける配色の考え方

要するに

以上３つのことを考えるということになります。

配色の決め方の順番・流れ

それでは、どのような順番で
配色をしていけばよいか、説明します。

使う色の数を決める

使う色の数は以下の３色とする

1. ベースカラー
   背景色を担当する
   →邪魔にならないシンプルな色
2. メインカラー
   最も見てほしい色。テーマカラー。主役
   
3. アクセントカラー
   引き締める役割。ワンポイントで使う
   （例）ボタンなど

デザイン初心者のうちは３色しか使わないという風に
自分の中で決めておけば
沼にハマらずに済みそうです

メインカラーを何色にするのか決める

使う色の数が決まりました。

では、どの色から決めておけばよいかというと

これは、鉄則があります。

それは

メインカラーから決めていくということです。

ここが決まらないと、他の２色が決まらないからです。

メインカラーを特定するための方法→言語化する

ターゲット層に沿った色や
サイトのテーマに沿った色を決めていきます。
10代の女子と40代の男性とでは当然
色使いは変えなくてはならない
というのは、おわかり頂けるかと思います。
色を決める際に重要なことは
言語化することだと思います。

色の持つイメージの例

• 赤
  • 熱い/生命力/強い/情熱/愛
• オレンジ
  • 親近感/暖かい/陽気/喜び/楽しい/ビタミン
• 黄色
  • 好奇心/協力/幸福/栄光/希望/騒々しい/子供らしさ
• 緑
  • 自然/安全/調和/健康/治療/リラックス/未熟

【補足】使いたい画像が決まっている場合

これは、どんな場合かというと
クライアントの方で
「メインビジュアルはこれを使いたいんだよねー」って感じで
指定される場合がある。（今回の僕の場合はこれ）
そこで使っている色をメインカラーにする場合
イメージカラーピッカーを使うと便利です

色使いに関して理解が深まるオススメ記事

へまむしょ

WEBデザインとは、ちょっと違うかもしれませんが
パワポもWEBサイトも「わかりやすく伝える」
という点においては本質的には同じだと思いました。

アクセントカラーとベースカラーの決め方

メインカラーが決まって一安心。

あとは、好きな色を適当に選べばいいやー

ってこれは、間違いです。

色の組み合わせを考えていく上で以下のような概念があります。

• 補色
• 類似
• 3色
• 分裂補色
• 4色

あなた

うわ…なんだか、難しそう…

便利なツールがあります

メインカラーさえ決めてしまえば、あとは
便利なツールを使ってしまいましょう
以下のツールを使えば
自動で、色の組み合わせを提案してくれます。

このツールは明確な色が決まっている時に

オススメなツールです

まとめ