最終更新日が2023年以前の記事です。レイアウト変更のため、正常に表示されない場合があります。
新しく作るwebページの配色はカラフルで楽しい作業なのですが、これだ！というものになかなか出会えず、いつもちょっとした悩みの種という方は多いのではないでしょうか。色選びからコーディングまで全て自分でやりたい人向けに、失敗しないweb配色のルールをまとめました。
失敗しない色の選び方
配色の基本
基本となるのがベースカラー、メインカラー、アクセントカラーの3色による配色です。
服飾なんかではベース：メイン：アクセント＝６：３：１の配色が良いとよく言われます。これはwebページの配色の際にも概ね当てはまりますが、webの場合はもう少しベースの比率を多めにすると落ち着いた読みやすいデザインになります。web配色の場合、70：25：5のバランスが良いとされています。
色数は増やせば増やすほどポップでにぎやかになりますが、デザインが難しくなります。ごちゃごちゃした配色を見ると、人の脳はどこに集中すればいいのかわからず混乱し、読みやすさが大きく損なわれます。慣れないうちは多色使いは控えた方が良いでしょう。
ベースカラー
全体の大部分を占める色です。主に背景色を担当します。
見やすさ、読みやすさの観点から、メインカラーを邪魔しない色が望ましいです。そのため基本的にはメインカラー（とアクセントカラー）を決めてから決める色になります。
多くのwebページの背景色は白や淡いグレーなどの無彩色です。彩度の高い色は自己主張が強いため、こういった色をベースカラーにするのは難しいです。
メインカラー
そのページの主役になる色です。一番最初に決める色です。好みで決めればよいでしょう。
企業ではロゴマークの色をそのまま使っているところが多いですね。
アクセントカラー
その名の通りアクセントになる色です。ベース、メインの色が全く同じでも、アクセントカラーを変えるだけで全体の印象はガラッと変わります。
補色のようにメインカラーに対してもある程度目立つ色であるとメリハリのついた、活気のある配色になります。一方でメインカラーに近い色相の色を使うと落ち着いた雰囲気になりやすいです。
色選びに使えるツール４選
慣れないうちは自力で色を選んでもきれいにまとめるのは難しいです。配色の手助けになるwebサービスがたくさんありますが、その中でも私のお気に入りを紹介します。もちろん全部無料です。
Khroma
好きな色を50色選ぶと、AIがそれを学習して、好みに合ったカラーパレットを大量に生成してくれるサービスです。本当に好きな配色しか生成されないので驚異的です。
50もの色を選ばなければいけないので、まずは深く考えずに表示された色から直感でよさげなものをバシバシクリックしていきましょう。こういうカラーリングは直感こそ正義です。
Colormind
http://colormind.io/bootstrap/
AIが5色の配色を生成してくれます。絶対に使いたい色は固定して生成することもできます。webページに適用した時のサンプルや、よく使うボタンなどのパーツのサンプルもついているのがポイントです。
Coolors
こちらもAIによる5色の配色パターンを生成してくれます。こちらも使いたい色は固定できます。スペースキーを連打しているだけで次から次へと生成してくれるので、雑に眺めていても楽しいです。
Colorable
背景色と文字色のコントラストの強さは文章の読みやすさに直結します。WCAG という文書で、色覚障害のある人に対しても読みやすい配色が推奨されています。
このサイトは任意の2色のコントラストを計算してくれます。文章が読みづらいな、と思ったら確認すると良いでしょう。
スコアは以下の通りです：
AAA, AA: 問題なし。
AA Large: ややコントラスト弱め。文字サイズが大きければ問題なし。
Fail: コントラストが十分でない。Fail の配色はただ見づらいだけでメリットがないので、早急に変えた方が良いでしょう。
https://usecontrast.com/guide
【おまけ】material design palette
https://www.materialpalette.com/
こちらは本来androidなどのアプリケーション向けの配色サイトになりますが、気軽に2色選んで配色を作れる上、ハズレも少ないです。
モバイルフレンドリーなwebサイトを作る際に参考になるかもしれません。
作業効率を爆上げするCSSの書き方
色を決めたらコーディングの作業に移ります。
cssを手打ちしているならできるだけ効率的に、保守性の良い書き方をしたいところです。
css変数で色を定義する
例えば、上記のウェブサービスで色を生成して、それを実際にcssに書こうと思うと、要素の量によっては大変な作業になってしまいます。
body {
background-color: #f2edeb;
color: #1d1e18;
}
h1, h2 {
text-decoration-line: underline;
text-decoration-color: #af1b3f;
}
strong {
text-decoration-line: underline;
text-decoration-color: #fabc2a;
}
div .button{
background-color: #af1b3f;
color: #f2edeb;
}要素がこれだけということはないでしょうから、実際にはこの何倍もの数の要素に対してコピペを繰り返す羽目になります。かといって置換とかを使うとうっかり変えてはいけないところまで一緒に変わってしまうなんていう事故も起こりかねません。
そこで、CSSのvar()関数で使う色を定義します。
:root {
--base-color: #f2edeb;
--main-color: #af1b3f;
--accent-color: #fabc2b;
--font-color: #1d1e18;
}
body {
background-color: var(--base-color);
color: var(--font-color);
}
h1, h2 {
text-decoration-line: underline;
text-decoration-color: var(--main-color);
}
strong {
text-decoration-line: underline;
text-decoration-color: var(--accent-color);
}
div .button{
background-color: var(--main-color);
color: var(--base-color);
}まず、:root要素に変数を定義します。変数の名前は必ずハイフン2つ(–)を先頭に付けます。こうすることで、以下の要素全てで変数が使えるようになります。
定義した変数はvar()で呼び出します。
同じページ内で先に読み込んでいれば、:rootで定義した変数はcssファイルをまたいでも有効です。
これにより、たとえば5色の配色を使っていたとしても、色を変えたいなと思ったら変数を書き換えるだけで、一括で全ての配色が入れ替わります。応用すれば、ページごとに異なる配色を適用しつつ見やすい配色を維持する、なんてこともできてしまいます。間違いがなくてやりやすいですね！
こんな配色をしていませんか？ チェックシート
初めてのwebページ制作となるとオリジナリティを出したくなって、あれやこれやと手を出しがちなもの。ですがオリジナリティと読みやすさの両立は考えているより難しく、配色のせいで全く読む気にならないなんてオチになることも。かくいう私も色々やったクチです。
ここではそんなよくある失敗を一覧にしています。
背景色の彩度が高い（危険度：★★★☆☆）
背景色が白とかグレーとかだと味気ない、と思ってしまうのは仕方ないですが、だからといっていきなり派手な色の背景色を使うのはおすすめしません。目に対する疲労は無意識にそのサイトの滞留時間を著しく下げてしまいます。中身を読んでほしかったらここは我慢して落ち着いた色を使いましょう。背景が白でも派手なサイトは作れます。
リンク付きの文章がぱっと見でわからない（危険度：★★☆☆☆）
例えばですが、こんな設定をしたとします。
a {
color: orange;
text-decoration-line: none;
}このような配色をした時、設定した自分はどれがリンクだかわかりながら見るのであまり問題には感じませんが、初見の人は「下線もないオレンジ色のテキスト」をリンクだとはなかなか認識してくれません。オレンジに限らず、通常リンクテキストは「青系（既読なら紫）で下線付き」だというのが半ば常識になっているので、どうしてもという事情がなければこの設定をむやみに変えない方が良いでしょう。
どうしても変える必要がある場合は、アクセントカラーなどの差し色を使って他のテキストとは明らかに違うようにしつつ、下線を引くなどの工夫をしてあげると認識率はぐっと上がります。
文字の背景色にグラデーションを使っている（危険度：★★★★☆）
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(9,9,121,1) 35%, rgba(0,212,255,1) 100%);グラデーションはきれいですが、場所によって背景色が変化するという特性が色覚異常の人にとって極めて読みづらい文章を作ってしまう危険があります。また保守性やサポートの観点でも複雑な記述は好まれませんので、必要以上に使わないのが無難です。
アニメーションを使っている（危険度：★★★★★）
body {
animation: bgcolor 4s infinite;
}
@keyframes bgcolor {
0% { background-color: red; }
40% { background-color: yellow; }
80% { background-color: white; }
100% { background-color: red; }
}これに関しては、何が問題なのか説明できなければ今すぐやめましょう。
グラデーションの時と同種かつ、より重度の問題を提供してしまいます。さらには必要以上にwebサイトを重くしてしまう原因にもなります。
まとめ
- 配色の基本はベース：メイン：アクセント＝70：25：5ぐらい
- 配色webサービスを使いこなそう
- css変数で配色を組み替えやすくするとgood
- オリジナリティを出そうとして無理な配色をしない
ここに書いたことはまだまだほんの触りで、1ページではとても語りつくせないほど奥深いのが配色の世界です。あなたがもし色の専門家でないなら、いろんなツールの力を借りつつ、できるだけ作業は効率的にしておくに越したことはありません。
特にコーディングは簡潔にしておくと、試行錯誤もしやすくなります。そのうち、これだ！という配色に出会える時が来るかもしれません。
