LogoMark.png

WebDesign/Color の変更点


#author("2021-05-08T09:12:18+09:00;2020-03-21T11:29:04+09:00","default:inoue.ko","inoue.ko")
#author("2023-03-14T12:21:12+09:00;2021-05-08T09:12:18+09:00","default:inoue.ko","inoue.ko")
*Color Combination
~


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

~

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

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

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


***Online Tools

-Material Design Color Palette Generator
--https://www.materialpalette.com/   
//PrimaryColor(MainColor)とAccentColor の2色を選択すると、サイトを構成する色彩パレットが自動生成されます。CSSファイルとして DL可能です。
--https://www.materialpalette.com/colors
//Click で色値がコピーされます。

-Adobe Color CC
https://color.adobe.com/ja/create

-ColorBlender.com | Your free online color matching toolbox
http://www.colorblender.com/

-Color Code
http://www.colourco.de/

-Paletton - The Color Scheme Designer
http://paletton.com/

-HUE/360 The Color Scheme Application
http://hue360.herokuapp.com/

-NIPPON COLORS – 日本の伝統色
http://nipponcolors.com/

~

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

-[[カラーユニバーサルデザイン(Wikipedeia)>https://ja.wikipedia.org/wiki/%E3%82%AB%E3%83%A9%E3%83%BC%E3%83%A6%E3%83%8B%E3%83%90%E3%83%BC%E3%82%B5%E3%83%AB%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3]]
-NPO法人 カラーユニバーサルデザイン機構
http://www.cudo.jp/

~
***配色見本
-2色の配色パターン生成|Hello-Color
https://jxnblk.github.io/hello-color/
-2色グラデーションの生成|Shade
http://jxnblk.com/shade/

-2色グラデーションの生成|Unigradients
https://uigradients.com/

-3色の配色パターン生成|COLOR SUPPLY
https://colorsupplyyy.com/app
-3色の配色パターン生成|Random Material Palette Generator
https://www.threebu.it/random-material-palette/

-4色の配色パターン生成|Color Hunt
https://colorhunt.co/
-4色の配色パターン生成|LOL Colors
https://www.webdesignrankings.com/resources/lolcolors/
-4色の配色パターン生成|ColorDrop
https://colordrop.io/

-5色の配色パターン生成|Coolors
https://coolors.co/app
~
~