※引き続き、説明の図版イラストなどは権利関係問題で使えません。
<図形を使って考える配色>
◯配色とは2つ以上の色を組み合わせて新たな効果を生み出すこと
●向かい合う2色(補色) /色相環で180度向かい合う2色
●二等辺三角形(分割補色) /補色を両隣の色に置き換えた組み合わせ
●三角形(トライアド) /色相環で正三角のバランスの取れた対照色
●正方形(テトラード) /正方形の組み合わせで2組の補色でもある
●五角形(5色配列)・六角形(6色配列)などもある
※図形を使う配色は、いずれもコントラストが強くなり用途が限られるため、各色の彩度や明度の調整を行う。
<色相を軸にした配色>
◯配色を考える時は、まとまり感を出すのかメリハリ感を出すのか、方向性を決める
●類似色相でまとまり感・対照色相でメリハリ感
<明度差で考える配色>
◯色相差があっても明度差がないと見えづらい
●高齢者向けなど目的に応じた明度バランスを考える(ユニバーサルデザインにも通じる)
<トーンで印象を決める>
◯トーン図を使って配色を考える
●類似トーン /隣り合う色は全て類似トーン /まとまり感
●対照トーン /縦方向は明度・横方向は彩度の対照トーン /メリハリ感
◯それぞれのトーンごとに表現しやすいイメージがある
●ごくうすい /軽い・優しい・柔らか・上品
●つよい /情熱的・活動的・はっきりした
●くすんだ /ぼんやり・鈍い・シックな
「アタチはうすい色でも強くて活動的だわっ!」「拙者はつよい色でもぼんやり鈍いのでござる」
◯トーンは印象を左右する
●フレッシュで活動的な色使い(ライトトーンやストロングトーン)
●円熟した落ち着きのある色使い(ライトグレイッシュトーンやダルトーン・ディープトーン)
<デザインの配色テクニック>
◯セパレーション /文字の縁取りなど
◯細かな柄で変化
◯遠景は明るく淡く
◯目の錯覚を応用
<色を効果的に使う表現例>
◯グラデーションの種類
●色相・明度・彩度
●色相の変化を大きく・小さく
●トーンを全て変える
●明るく淡いトーン→暗く濃いトーン
◯ベースカラーとアクセントカラー(差し色)のバランスを考える
※ベースとアクセントの間を取り持つ色はアソートカラーと呼ばれ、通常ベースと似たものを使うが、アクセントと似たものでも良い。
<Adobe Color>
◯Adobe ColorとはWeb上で使える配色ツール /基本はカラーホイール
●カラーホイール左のカラーハーモニールールの中から、求めている色を選ぶと、自動的にバランスの取れた5つの色を提案
◯画像から配色やグラデーションを作る
●画面上にドラッグ&ドロップした画像から自動的に色を抽出・手動で個々の丸を動かすとカラーパレットの色も連動
●画像から自動的にグラデーションを抽出・スライダーで調節
●作った色をライブラリに保存・呼び出し(ウィンドウ→CCライブラリ→ライブラリ)
※コントラストチェッカーで文字色・背景色を指定すると、読みやすさ判定される。(多様な色覚対応)
※AIさん画像を色覚別に加工して並べてみました。左上が元の色。
↑Adobeを使っていなくてもGoogle Chromeを入れているなら、拡張機能で色覚別の見え方を確認できるものがあります(Colorblindly) このサイトも見え方を確認しながら作ったんですよ。
人によっても年齢によっても、みんな違う色を見ているのを、忘れちゃいけないですよね。
2023-09-25
コメントを残す