※引き続き、説明の図版イラストなどは権利関係問題で使えません。
<図形を使って考える配色>
◯配色とは2つ以上の色を組み合わせて新たな効果を生み出すこと
●向かい合う2色(補色) /色相環で180度向かい合う2色
●二等辺三角形(分割補色) /補色を両隣の色に置き換えた組み合わせ
●三角形(トライアド) /色相環で正三角のバランスの取れた対照色
●正方形(テトラード) /正方形の組み合わせで2組の補色でもある
●五角形(5色配列)・六角形(6色配列)などもある
※図形を使う配色は、いずれもコントラストが強くなり用途が限られるため、各色の彩度や明度の調整を行う。
<色相を軸にした配色>
◯配色を考える時は、まとまり感を出すのかメリハリ感を出すのか、方向性を決める
●類似色相でまとまり感・対照色相でメリハリ感
<明度差で考える配色>
◯色相差があっても明度差がないと見えづらい
●高齢者向けなど目的に応じた明度バランスを考える(ユニバーサルデザインにも通じる)
<トーンで印象を決める>
◯トーン図を使って配色を考える
●類似トーン /隣り合う色は全て類似トーン /まとまり感
●対照トーン /縦方向は明度・横方向は彩度の対照トーン /メリハリ感
◯それぞれのトーンごとに表現しやすいイメージがある
●ごくうすい /軽い・優しい・柔らか・上品
●つよい /情熱的・活動的・はっきりした
●くすんだ /ぼんやり・鈍い・シックな
「アタチはうすい色でも強くて活動的だわっ!」「拙者はつよい色でもぼんやり鈍いのでござる」
◯トーンは印象を左右する
●フレッシュで活動的な色使い(ライトトーンやストロングトーン)
●円熟した落ち着きのある色使い(ライトグレイッシュトーンやダルトーン・ディープトーン)
<デザインの配色テクニック>
◯セパレーション /文字の縁取りなど
◯細かな柄で変化
◯遠景は明るく淡く
◯目の錯覚を応用
<色を効果的に使う表現例>
◯グラデーションの種類
●色相・明度・彩度
●色相の変化を大きく・小さく
●トーンを全て変える
●明るく淡いトーン→暗く濃いトーン
◯ベースカラーとアクセントカラー(差し色)のバランスを考える
※ベースとアクセントの間を取り持つ色はアソートカラーと呼ばれ、通常ベースと似たものを使うが、アクセントと似たものでも良い。
<Adobe Color>
◯Adobe ColorとはWeb上で使える配色ツール /基本はカラーホイール
●カラーホイール左のカラーハーモニールールの中から、求めている色を選ぶと、自動的にバランスの取れた5つの色を提案
◯画像から配色やグラデーションを作る
●画面上にドラッグ&ドロップした画像から自動的に色を抽出・手動で個々の丸を動かすとカラーパレットの色も連動
●画像から自動的にグラデーションを抽出・スライダーで調節
●作った色をライブラリに保存・呼び出し(ウィンドウ→CCライブラリ→ライブラリ)
※コントラストチェッカーで文字色・背景色を指定すると、読みやすさ判定される。(多様な色覚対応)
※AIさん画像を色覚別に加工して並べてみました。左上が元の色。
↑Adobeを使っていなくてもGoogle Chromeを入れているなら、拡張機能で色覚別の見え方を確認できるものがあります(Colorblindly) このサイトも見え方を確認しながら作ったんですよ。
人によっても年齢によっても、みんな違う色を見ているのを、忘れちゃいけないですよね。
2023-09-25
白内障の手術を受けたら 見え方が上段真ん中から上段左に変わって感動しました
私 こんなにきれいな色の服着てたんだ と嬉しかったけど 何よりショックだったのが
顔のシミ しわ なんてきったない顔なんだ 自分が見ている風景と他人が見ているものとの差 違い 怖いです
いいねいいね: 1人
白内障などの場合は少しずつ変わるので本人はあまり自覚がないでしょう😀
手術で色が鮮やかになって感動するくらい変わってるんですね😳
顔のしみシワは私も鏡を見るたびガッカリなので見えない方が良いものもありますよね😓でも他人は見てるんだ🙄やっぱり怖いかも😅
いいねいいね
こんにちは。
「配色について」みたいですね。なる程です。色は感覚的なモノですが、操作し易い様に分類分けされてますね。ラストの色覚別の画像を見ると、見え方によって印象が変化。また、視覚的感覚なので、繊細な作業になる感じです。ブラウザによっても変化ありですね！？(=^･ｪ･^=）
いいねいいね: 1人
色味はブラウザによってもモニターによっても違っていますね💻
TVなどもたまに他の機種で見るとびっくりします😳
スマホを買う時AndroidにしたのもAppleとの色味の違いを確認する為です📱
でも両方で見てどちらでも違和感ない感じの色に調整するの難しいんですよねぇ😓
いいねいいね
印刷物はモニター色と違ってしまうので気を付けていました。Adobe、カラーホイールとかツールをどんどん変えてしまうので、慣れるまで使いにくかったりしたんだけど、カスタマイズもせずに使ってます。最低限の機能しか使ってないかな。。あかんですね。
ボンにゃんはいつも輝いていますね。 なちでした。
いいねいいね: 1人
印刷したらガッカリはあるあるですよね😓
Adobeさん確かに年々変わっていきますね💻
でも最低限の機能しか使わないと勿体無いじゃありませんか😅
ボンにゃんは真っ白に輝いておりますよ🤣
いいねいいね
色は難しいですね。
ネットで良いなって思うものを見つけても、色はどうなんだろう？って思うことがあります。
実際、メルカリで出品者さんに色を問い合わせたら、やっぱりイメージが違って、逆に、出品している物への質問があった時、これ、実際と色が違うな、と思って、その旨、お伝えしたら、お断りされたことがあります。
ボンちゃんも、うちのしいちゃんも、白は無敵かも^m^
いいねいいね: 1人
モニターで見る色って機種によってかなり違うので仕方ないですよね🧐
私はネット通販ではどんな照明で撮ってるのかにも気をつけて実際の色を想像しながら買い物してます🙄
しいちゃんを見た時ボンにゃんの妹みたいって思ったらやっぱりオテンバさんでしたね〜🤣
いいねいいね
以前、モニター越しのドレスの色が
人によって金に見えたり青に見えたりするのを見ました。
見え方って違うんだなーって思ったのを思い出しました^^
いいねいいね: 1人
色の見え方は個人によってもモニターによっても変わるんですね😳
色のセンスだけじゃなく文字などが見やすいサイト作り大事だと思います😀
いいねいいね