Web・服飾・インテリア・建築などなど、デザインにはつきものの「配色」ですが、いざ、自分がデザインする側になってみると、実際にどんな配色が「正解」なのか分からないという方がほとんどではないでしょうか。

色使いには理論があります。センスを磨くためにも、まずは基本事項を学んでおきたいところです。

そこでこの記事では、「配色」について1から知りたいという方(主にWebデザインをしたい方)向けに「配色の基本」と「色の選び方」を学べるサイトを集めました。

基本中の基本

1.絶対に覚えておきたいwebデザインの配色・カラー3つの基本と基礎

  • 「色とは」
  • 「RGBとCMYK」
  • 「色の三属性」
  • 「面積比率」
  • 「可読性(背景の色と文字色の関係)」

など、基本的な事項が分かりやすく、まるっと説明されています。

絶対に覚えておきたいwebデザインの配色・カラー3つの基本と基礎

webデザインを考える時にカラーは切っても切りはなせません。しかし、配色は苦手だけど、まぁカラーの勉強は後でいいや…センス無いしその前にやることあるし…となんとなく後回しにされがちなんじゃないかなーと思います。

endoutakae.com

2.色彩センスのいらない配色講座~色は理論的に説明できる~

「色」の基本から「色の三属性」「面積比率」「色の決め方」まで、理論的な内容がコンパクトにまとまったスライドが載っています。

カラートーンの理解と活用

上記、「色彩センスのいらない配色講座~色は理論的に説明できる~」の追記として、色の彩度を示す「トーン」について説明されています。色の組み合わせを増やし、デザインの精度を上げるのに欠かせない概念です。

3.色彩カラー研究所 webの色彩デザイン

色彩の中でも、「Webセーフカラー」など、Webデザインを学ぶために最低限知っておくべき事項や専門用語について載っています。

ts-depot.com - 

ts-depot.com はお客様がお探しの全ての情報の原点です。一般的な項目からお客様がお探しのものまで、 ts-depot.com は全てここにあります。きっとお探しのものが見つかるはずです。

www.ts-depot.com

色の三属性・イメージ

1.配色パターンからWebデザインを考える

「色相・彩度・明度」や具体的な「配色パターン」などが図入りで説明されています。

配色パターンからWebデザインを考える

ページを開いた瞬間にそのWebサイトのイメージを左右するほど重要な要素「色」。しかし色の組み合わせ、配色には無限のパターンがあり、正しい配色を見つけるのは簡単なことではありません。ここでは色彩の基礎と配色パターンの見つけ […]

www.webcreatorbox.com

2.色と人の感覚とウェブデザインのはなし

デザイナーとして知っておきたい色の持つ(与える)「イメージ・印象」がガイドされたサイトです。

色と人の感覚とウェブデザインのはなし | バニデザノート

とっておきのウェブデザインTipsのかけらを、まいにち少しずつ。

vanidesign.blog.fc2.com

具体的な手法・テクニック

1.配色に悩んだときに、きっと役立つ7つの配色技法【基本】

「ドミナントカラー配色」や「トーンオントーン配色」など、配色に役立つ7つの「配色技法」が解説されています。

配色に悩んだときに、きっと役立つ7つの配色技法【基本】

私は「色」が好きなので、配色を考えるのがそんなに苦ではないんですが、良い配色が思い浮かばず、苦しんでいるWebデザイナー

creators-manual.com

2.配色初心者でも効果的なカラーデザインが出来るようになる4つの工程

配色のテクニックが簡単に解説されていて、「すぐに実践できる知識が欲しい!」という方にオススメしたいサイトです。

配色初心者でも効果的なカラーデザインが出来るようになる4つの工程

// タイトル間違えました。 「僕みたいなクソデザイナーが配色する時に騙し騙しデザインする手法」です。 配色に…

maka-veli.com

3.Webサイト制作において、私なりの色選定の考え方

  • 「1. 企業・ブランドのアイデンティティを出したい」
  • 「2. 企業・ブランド・商品・サービスらしさや、カテゴリーらしさを出したい」

上記のように「目的」がカテゴリー分けされていて、「ターゲット」を踏まえたそれぞれの色選定方法が丁寧に説明されています。デザインの考え方から学びたい方にオススメ。

Webサイト制作において、私なりの色選定の考え方 | Arch

QRコードを滲ませずに縮小する方法です。忘れないように覚え書き。(※PhotoshopCS3以降対象です) 1.『Ctrl』+『Shift』+『I』で画像解像度ウィンドウを開きます。 もしくは、『イメージ』⇒『画像解像度』 2.縮小したい数値を入力し、『ニアレストネイバー法(ハードな輪郭を保持)』を選んで、OKを押します。 ニアレストネイバー法を選ぶことで、アンチエイリアスがかからず、比較的きれいに縮小ができます。 ぜひお試しください。

www.ar-ch.org

4.デザインする上で要素を目立たせるという事

デザイン要素の「目立たせ方(強調のテクニック・手法)」について学びたい方は是非読んでおきたい内容です。

デザインする上で要素を目立たせるという事 |https://wp.yat-net.com/name

デザインやコンテンツ制作の打ち合わせをしていると必ず出てくる「目立たせる」という行為。人によって「赤くして」とか「大きくして」と言った抽

wp.yat-net.com

5.同色系でまとまりのある配色、WebデザインにするためのTips

「同系色の配色」について、サンプルサイトを挙げながら分かりやすく説明されています。

同色系でまとまりのある配色、WebデザインにするためのTips

デザインの配色、同色系の配色にする時の注意したいポイントをまとめたTipsです。同色系で配色すると統一感があり、まとまったデザインになるというメリットがある一方で全体的にメリハリがなくなりがちです。そんなことにならないためのTipsです。

webdesignrecipes.com

6.普段あまり使わないカラーの組み合わせを効果的に使う方法

「特殊(ユニーク)な色の組み合わせ」の具体例とその解説が載っています。

普段あまり使わないカラーの組み合わせを効果的に使う方法

ウェブサイトで使うカラーはユーザーが訪問した際に、人々の記憶に残るようにすることも大切なポイントです。 ここでは普段あまり使わないカラーの組み合わせを使い、ユニークで魅力的で良い印象を与えるカラーの組

coliss.com

Web用色見本・配色ツール

1.WEB色見本 原色大辞典 - HTML Color Names

色見本のサイトです。ブラウザで名前が定義されている140色の色名とWebカラーで使う16進トリプレット(HEX)の一覧が載っています。

WEB色見本 原色大辞典 - HTMLカラーコード

色の名前とカラーコードが一目でわかるWEB色見本

www.colordic.org

2.iromiru (イロミル) - 画像からカラーコード抽出便利サービス

画像や画像のURLからカラーコードを集めることができます。

iromiru (イロミル) - 画像からカラーコード抽出便利サービス

iromiru (イロミル) は、お手元の画像や画像のURLから、カラーコードを集められるウェブサービスです。

higashi-dance-network.appspot.com

3.ウェブ配色ツール Ver2.0

簡易版の配色ツールです。

フォルトゥナ

ホームページを制作・リニューアルする前に、本当にその必要があるのか、もっとよい方法はないのか、SNSは利用できるかなどを判断することを最重視して提案するウェブ制作・コンサルティング事務所です。会社・店舗のビジネスや社内の状況に合わせたウェブ活用のお手伝いをします。

www.color-fortuna.com

おわりに

いかがでしたか。それぞれのサイトにまとめられた内容はもちろん、サイト自体のデザインもお洒落で見やすいものが多いですよね。配色の基本やパターンを学ぶことで、普段は特に意識していなかったサイトの配色にも、意味やメッセージを読み取ることができるようになります。

日頃のデザインに活かせる配色の知識、ぜひ参考にしてみてください。

(image by amanaimages)