配色周りの説明サイトが、やたらと流行っている気がします。
が、大体は「これこれのサイトから配色をパクるんや！」とかそういうやつで、フツーの人は使いづらいなーと感じています。もちろん、慣れている人は使い回しもうまいのでいいんですが、そんでもない人は配色パターンを使ったところでダサく、しんなりします（例：わたし）
ましてや、専門職にしていない人ならばある程度のセンスっぽいものを身に着けてしまえば十分です。最近サイトデザインとか全然やってない（このブログもVicunaすっぴんだし…）のですが、大体こんな感じのほうがしょっぱなはやりやすい（と、私は思った）よ、というメモ。
0.背景に濃い色、今は諦めましょう。
まずは、比較的作りやすい白めの枠に色を置いていくスタイルで慣れましょう。行けそうならじゃんじゃん行く感じで。ただし、濃い色背景の上に白い箱を置き、その中に文字を配置するものはそれなりに扱いやすいです。ただ、箱のデザインをある程度きれいにととのえないとちょっとへぼく見られちゃうかもしれません…。
1. 好きな色を1色だけ決めます。
好きな、というのは語弊があるかも。テーマに沿った色、でしょうか。ペイントソフトあたりでグリグリと当て決めするのが楽でしょう。
ここで、RGBをメモするのを忘れないように。メモの方法は多々ありますが、実はクラスかなんかにRGB値を埋め込んじゃうのが早いかもしれません。
2. 濃淡4パターンくらい作ります。
濃い目の1つ、薄い目の2つ、中間の1つくらいがバランス取れてると思います。
3. 先ほど作ったのと、同じくらいの濃さのグレーを作ります。
ぱっと見で全然いいです。ユーザの90%くらいはぱっと見です。
4. これで、8パターン+白+黒の10パターンの色見本ができました。
5. 決めた色の真逆の色を1色だけ取っておきましょう。1箇所だけ、小さく使います。
緑は紫、赤なら青、…と決まっています。 色相環で検索しましょう。色をおいたところがとても目立つので、一番目立たせたいところに使いましょう。
5. 文字色は黒、見出しに色、と色を置いて行きましょう。
「全体を遠目に見た時、決めた色に見えるかね？」というのがポイントです。
黒＋何らかの色、というのは「バイカラー」と呼ばれるれっきとした配色パターンの1つです（バイリンガルのバイ。モノトーンにプラス1色。黒も1色と数えるので、別にモノトーンは白黒のみというわけではないです）。
そんだけ使えれば十分じゃねーの、と私は思います。
ちなみに、この決め方において参考になるサイトはFacebookです。反対色は通知に使われていますね。みたいな。Pixivの初期設定もだと思うんですけど、あれはイラストを際立てるためなのかサイトの色はわざと薄めてるような気がします。
ツイート