デザイン一般

Webデザインの配色の使い方・比率

投稿日:2019年3月23日 更新日:

各カラーの名称

・ベースカラー
・メインカラー(類似カラー) →ベースカラーの類似色
・アクセントカラー →ベースカラーの反対色
└※色相環などで確認すると便利

カラーの比率

通常(3色)

70:10:15:5 (%)
(ベースカラー:メインカラー1:メインカラー2:アクセントカラー)
メインカラーまたはアクセントカラーを分割する。
※ベースカラー以外が好ましい

4色以上

70:10:15:5 (%)
(ベースカラー:メインカラー1:メインカラー2:アクセントカラー)
メインカラーまたはアクセントカラーを分割する。
※ベースカラー以外が好ましい

色の選び方

ダーク(低明度)…権威、高級感、重厚感を出す
原色…元気、若さ、親しみやすさを出す
パステル(高明度)…優しさ、柔らかい、女性らしさを出す
※ダーク、原色、パステルの色が混ざるとごちゃとごちゃし、素人っぽくなる。

 
スポンサーリンク

テスト

テスト

-デザイン一般

関連記事

Webサイトで使用する黒の文字色は#000ではなく#333で

#000だと、特に背景色が白の場合、文字が重たく画面上で見辛い場合が多い。 #000の文字 #333は完全な黒ではなく、視認性も良いためよく使用される。 #333の文字

コントラスト比の重要性

コントラスト比は、利用者の視点で配色することが重要。 W3C(World Wide Web Consortium = Web技術の標準化を行う非営利団体)の仕様書にも定義されており、公的サイトや高齢者 …