LogoMark.png

WebDesign/Color

Color Combination


WEBサイトの配色は、ベースカラー、メインカラー、アクセントカラーの3色で考えるのが一般的で、各々の比率は70%、25%、5%程度です。 Web上の配色関連記事を見ると3つの用語は、「ベース、メイン、アクセント」、「ベース、アソート、アクセント」、「メイン、サブ、アクセント」など、様々な言い方があるようです。「メインカラー」という用語だけを単独で使うと誤解が生じる可能性があるので、3つの言葉を面積比の順に明示して使うのが賢明です。いずれも面積比 70% / 25% / 5% 程度で考えるという点では同じです。


Base Color|70%

このカラーは主にサイトの背景にくる色で、最も大きな面積を占めます。無彩色あるいはそれに近い淡い色となるのが一般的ですが、本文の文字とのコントラストが強すぎると読みづらくなるので、相対的に検討することが必要です。

Main Color|25%

サイトイメージを決定づける色です。色は様々な印象をもつので、サイトの主旨を考えて、適切な色を選ぶ必要があります。ロゴの色をメインカラーにするサイト、あるいはメインビジュアルとなる写真からキーカラーを抽出するケースも多いようです。

Accent Color|5%

面積は小さいですが一番目立つ色で、ユーザーの目を引く効果があります。



Online Tools


Color Universal Design

色の見え方は人により様々です(色覚異常、白内障、緑内障など)。Webデザインの配色を考える際は、どのような色覚を持った人にも色の識別ができるよう配慮する必要があります。カラーユニバーサルデザインは、カラーバリアフリーという言葉で説明されることもあります。


配色見本

PAGES

GUIDE

DATA

Last-modified: 2020-03-21 (土) 11:29:04