# 449.3-2配色テクニック - リンク: https://boonbooncats.com/2023/09/25/449-%e3%81%8a%e5%8b%89%e5%bc%b73%e3%81%ae2/ - 公開日: 2023-09-25T21:00:13+09:00 - 作成者: Zombiekong ##### ※引き続き、説明の図版イラストなどは権利関係問題で使えません。 ![BOON BOON CATS、ぶんぶんキャッツ、 STTOCOLAND、キーボードを覗く猫、](https://i0. wp.com/boonbooncats.com/wp-content/uploads/2023/09/ai_generator_picture24.jpg?resize =567%2C425&ssl=1) ※AIさん画像で写真ではありません。 <図形を使って考える配色> ◯配色とは2つ以上の色を組み合わせて新たな効果を生み出すこと 　●向かい合う2色(補色) /色相環で180度向かい合う2色 　●二等辺三角形(分割補色) /補色を両隣の色に置き換えた組み合わせ 　●三角形(トライアド) /色相環で正三角のバランスの取れた対照色　 　●正方形(テトラード) /正方形の組み合わせで2組の補色でもある 　●五角形(5色配列)・六角形(6色配列)などもある ※図形を使う配色は、いずれもコントラストが強くなり用途が限られるため、各色の彩度や 明度の調整を行う。 ![BOON BOON CATS、ぶんぶんキャッツ、 STTOCOLAND、カラーチャート表、](https://i0. wp.com/boonbooncats.com/wp-content/uploads/2023/09/ai_generator_picture4.jpg?resize =425%2C425&ssl=1) ※AIさん画像です。 <色相を軸にした配色> ◯配色を考える時は、まとまり感を出すのかメリハリ感を出すのか、方向性を決める 　●類似色相でまとまり感・対照色相でメリハリ感 <明度差で考える配色> ◯色相差があっても明度差がないと見えづらい 　●高齢者向けなど目的に応じた明度バランスを考える(ユニバーサルデザインにも通じる) <トーンで印象を決める> ◯トーン図を使って配色を考える 　●類似トーン /隣り合う色は全て類似トーン /まとまり感 　●対照トーン /縦方向は明度・横方向は彩度の対照トーン /メリハリ感 ◯それぞれのトーンごとに表現しやすいイメージがある 　●ごくうすい /軽い・優しい・柔らか・上品 　●つよい /情熱的・活動的・はっきりした 　●くすんだ /ぼんやり・鈍い・シックな ![BOON BOON CATS、ぶんぶんキャッツ、 STTOCOLAND、棚の上のボンにゃん、](https://i0. wp.com/boonbooncats.com/wp-content/uploads/2023/09/p1060009_fotor-2.jpg?resize=454% 2C454&ssl=1) ![BOON BOON CATS、ぶんぶんキャッツ、 STTOCOLAND、横になっているコバン、](https:// i0.wp.com/boonbooncats.com/wp-content/uploads/2023/09/p1040958-2.jpg?resize=454% 2C454&ssl=1) 「アタチはうすい色でも強くて活動的だわっ!」「拙者はつよい色でもぼんやり鈍いのでござる」 ◯トーンは印象を左右する 　●フレッシュで活動的な色使い(ライトトーンやストロングトーン) 　●円熟した落ち着きのある色使い(ライトグレイッシュトーンやダルトーン・ディープトーン) ![BOON BOON CATS、ぶんぶんキャッツ、 STTOCOLAND、様々な色のボールやキューブ、](https:// i0.wp.com/boonbooncats.com/wp-content/uploads/2023/09/ai_generator_picture7.jpg? resize=425%2C425&ssl=1) ※AIさん画像ですよ。 <デザインの配色テクニック> ◯セパレーション /文字の縁取りなど ◯細かな柄で変化 ◯遠景は明るく淡く ◯目の錯覚を応用 <色を効果的に使う表現例> ◯グラデーションの種類 　●色相・明度・彩度 　●色相の変化を大きく・小さく 　●トーンを全て変える 　●明るく淡いトーン→暗く濃いトーン ◯ベースカラーとアクセントカラー(差し色)のバランスを考える ※ベースとアクセントの間を取り持つ色はアソートカラーと呼ばれ、通常ベースと似たもの を使うが、アクセントと似たものでも良い。 ◯Adobe ColorとはWeb上で使える配色ツール /基本はカラーホイール 　●カラーホイール左のカラーハーモニールールの中から、求めている色を選ぶと、自動的 にバランスの取れた5つの色を提案 ◯画像から配色やグラデーションを作る 　●画面上にドラッグ&ドロップした画像から自動的に色を抽出・手動で個々の丸を動かす とカラーパレットの色も連動 　●画像から自動的にグラデーションを抽出・スライダーで調節 　●作った色をライブラリに保存・呼び出し(ウィンドウ→CCライブラリ→ライブラリ) ※コントラストチェッカーで文字色・背景色を指定すると、読みやすさ判定される。(多様 な色覚対応) ##### ※AIさん画像を色覚別に加工して並べてみました。左上が元の色。 ![BOON BOON CATS、ぶんぶんキャッツ、 STTOCOLAND、色覚別見え方モデル、](https://i0. wp.com/boonbooncats.com/wp-content/uploads/2023/09/collage-7.jpg?resize=2800%2C2800& ssl=1) 　↑Adobeを使っていなくてもGoogle Chromeを入れているなら、拡張機能で色覚別の見え方 を確認できるものがあります(Colorblindly) このサイトも見え方を確認しながら作ったん ですよ。 　人によっても年齢によっても、みんな違う色を見ているのを、忘れちゃいけないですよね。 2023-09-25 ### いいね: いいね 読み込み中… ## コメント ### 投稿者: teo - リンク: https://boonbooncats.com/2023/09/25/449-%e3%81%8a%e5%8b%89%e5%bc%b73%e3%81%ae2/#comment-7905 - 公開日: 2023-09-26T09:57:43+09:00 白内障の手術を受けたら　見え方が上段真ん中から上段左に変わって感動しました 私　 こんなにきれいな色の服着てたんだ　と嬉しかったけど　何よりショックだったのが 顔の シミ　しわ　なんてきったない顔なんだ　自分が見ている風景と他人が見ているものとの 差　違い　怖いです 読み込み中… ### 投稿者: Zombiekong - リンク: https://boonbooncats.com/2023/09/25/449-%e3%81%8a%e5%8b%89%e5%bc%b73%e3%81%ae2/#comment-7908 - 公開日: 2023-09-26T15:07:03+09:00 白内障などの場合は少しずつ変わるので本人はあまり自覚がないでしょう😀 手術で色が 鮮やかになって感動するくらい変わってるんですね😳 顔のしみシワは私も鏡を見るたびガッカリ なので見えない方が良いものもありますよね😓でも他人は見てるんだ🙄やっぱり怖いかも 😅 読み込み中… ### 投稿者: Boss365sumomo - リンク: https://boonbooncats.com/2023/09/25/449-%e3%81%8a%e5%8b%89%e5%bc%b73%e3%81%ae2/#comment-7906 - 公開日: 2023-09-26T11:37:23+09:00 こんにちは。 「配色について」みたいですね。なる程です。色は感覚的なモノですが、 操作し易い様に分類分けされてますね。ラストの色覚別の画像を見ると、見え方によって 印象が変化。また、視覚的感覚なので、繊細な作業になる感じです。ブラウザによっても 変化ありですね！？(=^･ｪ･^=） 読み込み中… ### 投稿者: Zombiekong - リンク: https://boonbooncats.com/2023/09/25/449-%e3%81%8a%e5%8b%89%e5%bc%b73%e3%81%ae2/#comment-7909 - 公開日: 2023-09-26T15:19:09+09:00 色味はブラウザによってもモニターによっても違っていますね💻 TVなどもたまに他の機種 で見るとびっくりします😳 スマホを買う時AndroidにしたのもAppleとの色味の違いを確認 する為です📱 でも両方で見てどちらでも違和感ない感じの色に調整するの難しいんですよ ねぇ😓 読み込み中… ### 投稿者: 匿名 - リンク: https://boonbooncats.com/2023/09/25/449-%e3%81%8a%e5%8b%89%e5%bc%b73%e3%81%ae2/#comment-7907 - 公開日: 2023-09-26T12:18:06+09:00 印刷物はモニター色と違ってしまうので気を付けていました。Adobe、カラーホイールとか ツールをどんどん変えてしまうので、慣れるまで使いにくかったりしたんだけど、カスタマイズ もせずに使ってます。最低限の機能しか使ってないかな。。あかんですね。 ボンにゃん はいつも輝いていますね。　なちでした。 読み込み中… ### 投稿者: Zombiekong - リンク: https://boonbooncats.com/2023/09/25/449-%e3%81%8a%e5%8b%89%e5%bc%b73%e3%81%ae2/#comment-7910 - 公開日: 2023-09-26T15:30:56+09:00 印刷したらガッカリはあるあるですよね😓 Adobeさん確かに年々変わっていきますね💻 でも最低限の機能しか使わないと勿体無いじゃありませんか😅 ボンにゃんは真っ白に輝い ておりますよ🤣 読み込み中… ### 投稿者: ChatBleu - リンク: https://boonbooncats.com/2023/09/25/449-%e3%81%8a%e5%8b%89%e5%bc%b73%e3%81%ae2/#comment-7911 - 公開日: 2023-09-26T19:08:12+09:00 色は難しいですね。 ネットで良いなって思うものを見つけても、色はどうなんだろう？ って思うことがあります。 実際、メルカリで出品者さんに色を問い合わせたら、やっぱり イメージが違って、逆に、出品している物への質問があった時、これ、実際と色が違うな、 と思って、その旨、お伝えしたら、お断りされたことがあります。 ボンちゃんも、うちの しいちゃんも、白は無敵かも^m^ 読み込み中… ### 投稿者: Zombiekong - リンク: https://boonbooncats.com/2023/09/25/449-%e3%81%8a%e5%8b%89%e5%bc%b73%e3%81%ae2/#comment-7912 - 公開日: 2023-09-26T19:29:53+09:00 モニターで見る色って機種によってかなり違うので仕方ないですよね🧐 私はネット通販 ではどんな照明で撮ってるのかにも気をつけて実際の色を想像しながら買い物してます🙄 しいちゃんを見た時ボンにゃんの妹みたいって思ったらやっぱりオテンバさんでしたね〜 🤣 読み込み中… ### 投稿者: ごま大福＠まろ - リンク: https://boonbooncats.com/2023/09/25/449-%e3%81%8a%e5%8b%89%e5%bc%b73%e3%81%ae2/#comment-7913 - 公開日: 2023-09-26T20:06:18+09:00 以前、モニター越しのドレスの色が 人によって金に見えたり青に見えたりするのを見ま した。 見え方って違うんだなーって思ったのを思い出しました^^ 読み込み中… ### 投稿者: Zombiekong - リンク: https://boonbooncats.com/2023/09/25/449-%e3%81%8a%e5%8b%89%e5%bc%b73%e3%81%ae2/#comment-7914 - 公開日: 2023-09-26T20:56:29+09:00 色の見え方は個人によってもモニターによっても変わるんですね😳 色のセンスだけじゃ なく文字などが見やすいサイト作り大事だと思います😀 読み込み中…