<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>カラー | デザイン　オタク</title>
	<atom:link href="https://desaota.com/category/color/feed/" rel="self" type="application/rss+xml" />
	<link>https://desaota.com</link>
	<description></description>
	<lastBuildDate>Mon, 29 Sep 2025 12:57:34 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.8.5</generator>

<image>
	<url>https://desaota.com/wp-content/uploads/2023/11/cropped-favicon-32x32.png</url>
	<title>カラー | デザイン　オタク</title>
	<link>https://desaota.com</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>【知っていると役立つ】色が持つ効果を教えます！</title>
		<link>https://desaota.com/color-effect/</link>
		
		<dc:creator><![CDATA[KT]]></dc:creator>
		<pubDate>Sun, 29 Sep 2024 14:23:44 +0000</pubDate>
				<category><![CDATA[カラー]]></category>
		<guid isPermaLink="false">https://desaota.com/?p=1014</guid>

					<description><![CDATA[色が人に与える効果は様々です。 「こうゆう印象を与えたい」と思っていても、それとは不適切な色を使ってしまうなど、色を上手く使えていないケースが多いです。 この色が持つ効果の基本を知っていると、今後の色選びがスムーズになる [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p><strong>色が人に与える効果は様々です。</strong></p>



<p><strong>「こうゆう印象を与えたい」</strong>と思っていても、それとは不適切な色を使ってしまうなど、<strong><span class="bold-red">色を上手く使えていない</span></strong><span class="bold-red">ケース</span>が多いです。</p>



<p>この色が持つ効果の基本を知っていると、今後の色選びがスムーズになるだけでなく、デザインが読み手に与える印象をコントロール出来る様になります。</p>



<p><strong>今回の記事では色を選ぶ際に役に立つ、<span class="bold-red">「色が持つ効果」</span>について丁寧に解説していきます。</strong></p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-11 sbs-stn sbp-l sbis-cb cf block-box not-nested-style cocoon-block-balloon" style="--cocoon-custom-background-color:#efefef;--cocoon-custom-border-color:#efefef"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://desaota.com/wp-content/uploads/2023/11/icon.jpg" alt="KT" class="speech-icon-image"/></figure><div class="speech-name">KT</div></div><div class="speech-balloon has-background has-border-color has-key-color-background-color has-key-color-border-color">
<p>この記事は以下のような方にお勧めです！</p>



<ul class="wp-block-list">
<li>色が持つ効果を知りたい方</li>



<li>色についての知識を深めたい方</li>



<li>目的や用途に応じた色の使い方を学びたい方</li>
</ul>
</div></div>



<p><strong>この記事を読む事で<span class="bold-red">「色が持つ効果」</span>を理解でき、デザインの目的に適した色選びが出来る様になります。</strong></p>



<p>それではどうぞ！</p>




  <div id="toc" class="toc tnt-number-detail toc-center tnt-number_detail border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-2" checked><label class="toc-title" for="toc-checkbox-2">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">はじめに</a></li><li><a href="#toc2" tabindex="0">暖色と寒色</a></li><li><a href="#toc3" tabindex="0">進出色と後退色</a></li><li><a href="#toc4" tabindex="0">膨張色と収縮色</a></li><li><a href="#toc5" tabindex="0">重い色と軽い色</a></li><li><a href="#toc6" tabindex="0">硬い色と柔らかい色</a></li><li><a href="#toc7" tabindex="0">興奮色と鎮静色</a></li><li><a href="#toc8" tabindex="0">まとめ</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">はじめに</span></h2>



<figure class="wp-block-image size-full"><img fetchpriority="high" decoding="async" width="1000" height="525" src="https://desaota.com/wp-content/uploads/2024/09/beginning-5.jpg" alt="" class="wp-image-1100" srcset="https://desaota.com/wp-content/uploads/2024/09/beginning-5.jpg 1000w, https://desaota.com/wp-content/uploads/2024/09/beginning-5-300x158.jpg 300w, https://desaota.com/wp-content/uploads/2024/09/beginning-5-768x403.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></figure>



<p><strong>色を何色にするかで、そのデザインの印象はガラリと変わります。</strong><br>なぜなら<strong><span class="bold-red">「色は読み手に様々な効果を与えている」</span></strong>からです。<br><br>今回は色が持つ<strong>6つの効果</strong>をご紹介します。</p>



<div class="wp-block-cocoon-blocks-tab-box-1 blank-box bb-tab bb-point block-box has-border-color has-amber-border-color">
<p><span class="fz-18px"><span class="fz-20px"><strong>色が持つ</strong></span></span><span class="fz-20px"><strong>6つの</strong></span><span class="fz-18px"><span class="fz-20px"><strong>効果</strong></span></span><br>・暖色と寒色<br>・進出色と後退色<br>・膨張色と収縮色<br>・重い色と軽い色<br>・硬い色と柔らかい色<br>・興奮色と鎮静色</p>
</div>



<p><strong>色が持つ効果を上手に使えれば、デザインのレベルを上げる事が出来ます！</strong></p>



<p>それではそれぞれの特徴について詳しく見て行きましょう！</p>



<h2 class="wp-block-heading"><span id="toc2">暖色と寒色</span></h2>



<figure class="wp-block-image size-full"><img decoding="async" width="1000" height="525" src="https://desaota.com/wp-content/uploads/2024/09/warm-color-cool-color.jpg" alt="" class="wp-image-1095" srcset="https://desaota.com/wp-content/uploads/2024/09/warm-color-cool-color.jpg 1000w, https://desaota.com/wp-content/uploads/2024/09/warm-color-cool-color-300x158.jpg 300w, https://desaota.com/wp-content/uploads/2024/09/warm-color-cool-color-768x403.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></figure>



<p><strong>色にも「温度」があります。</strong></p>



<p><strong>見た時に暖かい印象を受ける赤色やオレンジ色などを、「暖色」と呼びます。一方、見た時に冷たい印象を受ける青色などを、「寒色」と呼びます。</strong></p>



<p>このような色の温度は、色の3属性である「色相・明度・彩度」による影響を強く受けます。<br>「色相・明度・彩度」について分からない方は以下の記事で詳しく解説しているので、良かったら参考にして下さい。</p>



<div class="wp-block-cocoon-blocks-blogcard blogcard-type bct-none">

<a target="_blank" href="https://desaota.com/hue-brightness-saturation/" title="【もう悩まない】色の３属性：色相・明度・彩度色" class="blogcard-wrap internal-blogcard-wrap a-wrap cf"><div class="blogcard internal-blogcard ib-left cf"><div class="blogcard-label internal-blogcard-label"><span class="fa"></span></div><figure class="blogcard-thumbnail internal-blogcard-thumbnail"><img decoding="async" width="160" height="90" src="https://desaota.com/wp-content/uploads/2024/06/hue.brightness.saturation-160x90.jpg" class="blogcard-thumb-image internal-blogcard-thumb-image wp-post-image" alt="" srcset="https://desaota.com/wp-content/uploads/2024/06/hue.brightness.saturation-160x90.jpg 160w, https://desaota.com/wp-content/uploads/2024/06/hue.brightness.saturation-120x68.jpg 120w, https://desaota.com/wp-content/uploads/2024/06/hue.brightness.saturation-320x180.jpg 320w" sizes="(max-width: 160px) 100vw, 160px" /></figure><div class="blogcard-content internal-blogcard-content"><div class="blogcard-title internal-blogcard-title">【もう悩まない】色の３属性：色相・明度・彩度色</div><div class="blogcard-snippet internal-blogcard-snippet">デザインの色を決める際に、「色の決め方や色の組み合わせ方が分からない」という方も多いはず。同じレイアウトやフォントを使用したデザインであっても、色１つで印象が大きく変わってしまうくらい、色は大事な要素となります。今回の記事ではそんな色の重要...</div></div><div class="blogcard-footer internal-blogcard-footer cf"><div class="blogcard-site internal-blogcard-site"><div class="blogcard-favicon internal-blogcard-favicon"><img loading="lazy" decoding="async" src="https://www.google.com/s2/favicons?domain=https://desaota.com" alt="" class="blogcard-favicon-image internal-blogcard-favicon-image" width="16" height="16" /></div><div class="blogcard-domain internal-blogcard-domain">desaota.com</div></div><div class="blogcard-date internal-blogcard-date"><div class="blogcard-post-date internal-blogcard-post-date">2025.03.10</div></div></div></div></a>
</div>



<p><strong>「赤色に近い色相で、明度・彩度が高い明るい色」</strong>が<strong>暖かさ</strong>を感じさせます。<br><strong>「青色に近い色相で、明度・彩度が低い暗い色</strong>」が<strong>冷たさ</strong>を感じさせます。</p>



<p>暖色は暖かさだけでなく、親しみやすさ、活気、明るさなどのイメージを喚起させます。<br>寒色も冷たさだけでなく、冷静、誠実、信頼などのイメージを喚起させてます。<br><br>一方、暖色や寒色のように<strong>温度を感じさせてない色を「中性色」</strong>と呼びます。緑色や紫色に近い色相で、組み合わせる色により暖色にも寒色にも変化していきます。</p>



<div class="wp-block-cocoon-blocks-tab-box-1 blank-box bb-tab bb-point block-box has-border-color has-amber-border-color">
<p>・暖色：暖かい印象を受ける赤色に近い色相で、明度・彩度が高い<br>・寒色：冷たい印象を受ける青色に近い色相で、明度・彩度が低い<br>・中世色：温度を感じない色で、緑色や紫色に近い色相</p>
</div>



<p>暖かさや活気を演出したい場合には暖色を使用し、清涼感や誠実さを演出したい場合には寒色を使用しましょう。</p>



<h2 class="wp-block-heading"><span id="toc3">進出色と後退色</span></h2>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1000" height="525" src="https://desaota.com/wp-content/uploads/2024/09/advancing-color-retreating-color.jpg" alt="" class="wp-image-1099" srcset="https://desaota.com/wp-content/uploads/2024/09/advancing-color-retreating-color.jpg 1000w, https://desaota.com/wp-content/uploads/2024/09/advancing-color-retreating-color-300x158.jpg 300w, https://desaota.com/wp-content/uploads/2024/09/advancing-color-retreating-color-768x403.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></figure>



<p><strong>同じ大きさ、同じ距離にあるデザインでも、色の違いにより近くに見えたり、遠くに見えたり距離が変わって見える事があります。</strong></p>



<p><strong>近くに見える色を「進出色」と呼び、遠くに見える色を「後退色」と呼びます。</strong></p>



<p>赤やオレンジなどの<strong>「暖色系は進出色」</strong>、青や紫などの<strong>「寒色系は後退色」</strong>と言われており、明るい色の方が暗い色より近くに見える傾向があります。</p>



<div class="wp-block-cocoon-blocks-tab-box-1 blank-box bb-tab bb-point block-box has-border-color has-amber-border-color">
<p>・進出色：暖色系の明るい色で、実際よりも近くに見える<br>・後退色：寒色系の暗い色、実際よりも遠くに見える</p>
</div>



<p>例えば「信号機」では、進出色である赤色を「停止」の意味として使用しています。これは遠くにいる人でも、「停止」をいち早く認識出来るようにする為です。また、狭い空間の壁紙には後退色である寒色系の色を使うと、空間をより広く演出する事が出来ます。</p>



<h2 class="wp-block-heading"><span id="toc4">膨張色と収縮色</span></h2>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1000" height="525" src="https://desaota.com/wp-content/uploads/2024/09/expansive-color-contractive-color.jpg" alt="" class="wp-image-1096" srcset="https://desaota.com/wp-content/uploads/2024/09/expansive-color-contractive-color.jpg 1000w, https://desaota.com/wp-content/uploads/2024/09/expansive-color-contractive-color-300x158.jpg 300w, https://desaota.com/wp-content/uploads/2024/09/expansive-color-contractive-color-768x403.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></figure>



<p><strong>同じ大きさのデザインでも、色によって実際よりも大きく見えたり、小さく見えたりする事があります。</strong></p>



<p><strong>実際よりも大きく見える色を「膨張色」と呼び、小さく見える色を「収縮色」と呼びます。</strong></p>



<p>膨張色の特徴としては明度の高い明るい色で、<strong>最も膨張して見える色は白色</strong>です。収縮色の特徴としては明度の低い暗い色で、<strong>最も収縮して見える色は黒色</strong>です。</p>



<div class="wp-block-cocoon-blocks-tab-box-1 blank-box bb-tab bb-point block-box has-border-color has-amber-border-color">
<p>・膨張色：明度が高い明るい色で、実際よりも大きく見える<br>・収縮色：明度が低い暗い色で、実際よりも小さく見える</p>
</div>



<p>身近な例を挙げると、白い服を来ていると大きく見えますが、黒い服を来ているとスマートに見えるなどが有名です。</p>



<h2 class="wp-block-heading"><span id="toc5">重い色と軽い色</span></h2>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1000" height="525" src="https://desaota.com/wp-content/uploads/2024/09/heavy-color-light-color.jpg" alt="" class="wp-image-1098" srcset="https://desaota.com/wp-content/uploads/2024/09/heavy-color-light-color.jpg 1000w, https://desaota.com/wp-content/uploads/2024/09/heavy-color-light-color-300x158.jpg 300w, https://desaota.com/wp-content/uploads/2024/09/heavy-color-light-color-768x403.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></figure>



<p><strong>色には「重く見える」と「軽く見える」といった性質があり、色により重量感の印象を変える事が出来ます。</strong></p>



<p><strong>明度やトーン(明度と彩度の組み合わせ)が低い暗い色は「重く」見え、明度やトーン(明度と彩度の組み合わせ)が高い明るい色は「軽く」見えます。</strong></p>



<p>「重厚感や権威性のあるデザインに仕上げたい時」は重たい色を、「軽い印象や優しさ、親しみやすさのあるデザインに仕上げたい時」は軽めな色を選びましょう。</p>



<div class="wp-block-cocoon-blocks-tab-box-1 blank-box bb-tab bb-point block-box has-border-color has-amber-border-color">
<p>・重い色：明度やトーンが低い暗い色で、実際より重く見える<br>・軽い色：明度やトーンが高い明るい色で、実際より軽く見える</p>
</div>



<p>また、重い色と軽い色を組み合わせる事で、デザインに安定感や緊張感を与える事が出来ます。</p>



<p>例えば「上側に軽く見える色・下側に重く見える色」を配置すればデザインに安定感を与える事が出来ます。逆に「上側に重く見える色・下側に軽く見える色」を配置すると、デザインに適度な緊張感と動きを与える事が出来ます。</p>



<h2 class="wp-block-heading"><span id="toc6">硬い色と柔らかい色</span></h2>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1000" height="525" src="https://desaota.com/wp-content/uploads/2024/09/hard-color-soft-color.jpg" alt="" class="wp-image-1097" srcset="https://desaota.com/wp-content/uploads/2024/09/hard-color-soft-color.jpg 1000w, https://desaota.com/wp-content/uploads/2024/09/hard-color-soft-color-300x158.jpg 300w, https://desaota.com/wp-content/uploads/2024/09/hard-color-soft-color-768x403.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></figure>



<p><strong>色には「硬い色」と「柔らかい色」があります。</strong></p>



<p><strong>明度が低く寒色系の色は「硬く」見え、明度が高く暖色系の色は「柔らかく」見えます。彩度はどちらも低い傾向にあります。</strong></p>



<p>厳格なイメージのある企業や商品のデザインには、黒や紺などの「硬い色」が適しています。一方、ベビー用品や女性向けの春物の商品のデザインについては、パステルカラーなどの「柔らかい色」が適しています。</p>



<div class="wp-block-cocoon-blocks-tab-box-1 blank-box bb-tab bb-point block-box has-border-color has-amber-border-color">
<p>・硬い色：明度と彩度が低い寒色系で、硬く見える<br>・柔らかい色：明度が高く彩度が低い暖色系で、柔らかく見える</p>
</div>



<p>彩度の高いビビットカラーは硬い印象を与えてしまうので、柔らかい印象を出したい時にはビビッドカラーよりもパステルカラーを選びましょう。</p>



<h2 class="wp-block-heading"><span id="toc7">興奮色と鎮静色</span></h2>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1000" height="525" src="https://desaota.com/wp-content/uploads/2024/09/excited-color-calm-color.jpg" alt="" class="wp-image-1103" srcset="https://desaota.com/wp-content/uploads/2024/09/excited-color-calm-color.jpg 1000w, https://desaota.com/wp-content/uploads/2024/09/excited-color-calm-color-300x158.jpg 300w, https://desaota.com/wp-content/uploads/2024/09/excited-color-calm-color-768x403.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></figure>



<p><strong>色には「見ていると興奮してくる色」と「見ていると落ち着いてくる色」があります。</strong></p>



<p><strong>赤みの強い色で、明度と彩度が高い暖色系は「興奮色」と呼ばれます。一方、青みの強い色で、明度と彩度が低い寒色系は「鎮静色」と呼ばれます。</strong></p>



<div class="wp-block-cocoon-blocks-tab-box-1 blank-box bb-tab bb-point block-box has-border-color has-amber-border-color">
<p>・興奮色：明度と彩度が高い暖色系で、見る人を興奮させる<br>・鎮静色：明度と彩度が低い寒色系で、見る人を落ち着かせる色</p>
</div>



<p>興奮色はSALE広告など、興奮させて購買意欲を掻き立てたい時に使うと効果的です。鎮静色はサプリメントのパッケージや癒し系のサロンのイメージカラーなど、人を落ち着かせてたい時に使うと効果的です。</p>



<h2 class="wp-block-heading"><span id="toc8">まとめ</span></h2>



<p><strong>今回の記事では<span class="bold-red">「色が持つ効果」</span>を紹介してきました。</strong><br><br>この「色が持つ効果」を理解する事で、今後の色選びがスムーズになるだけでなく、デザインが読み手に与える印象をコントロール出来る様になります。</p>



<div class="wp-block-cocoon-blocks-tab-box-1 blank-box bb-tab bb-check block-box has-border-color has-amber-border-color">
<p><strong><span class="fz-20px">色が持つ効果のまとめ</span></strong><br>・暖色と寒色：温度に影響を与える色<br>・進出色と後退色：距離に影響を与える色<br>・膨張色と収縮色：大きさに影響を与える色<br>・重い色と軽い色：重量感に影響を与える色<br>・硬い色と柔らかい色：質感に影響を与える色<br>・興奮色と鎮静色：感情に影響を与える色</p>
</div>



<p>デザインに適した色を選ぶ為には、「色が持つ効果」を正しく理解する事が重要です。ぜひ皆さんも「色が持つ効果」を意識して、制作活動に取り入れてみて下さい。</p>



<p>今回の記事は以上です。<br><strong><span class="marker-under-red">最後まで読んで頂き有り難うございました！</span></strong></p>



<p>良かったら別の記事も読んでみて下さい！</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>【もう悩まない】色の３属性：色相・明度・彩度色</title>
		<link>https://desaota.com/hue-brightness-saturation/</link>
		
		<dc:creator><![CDATA[KT]]></dc:creator>
		<pubDate>Sun, 09 Jun 2024 06:48:59 +0000</pubDate>
				<category><![CDATA[カラー]]></category>
		<guid isPermaLink="false">https://desaota.com/?p=690</guid>

					<description><![CDATA[デザインの色を決める際に、「色の決め方や色の組み合わせ方が分からない」という方も多いはず。 同じレイアウトやフォントを使用したデザインであっても、色１つで印象が大きく変わってしまうくらい、色は大事な要素となります。 今回 [&#8230;]]]></description>
										<content:encoded><![CDATA[
<p><strong>デザインの色を決める際に</strong>、<strong><span class="bold-red">「色の決め方や色の組み合わせ方が分からない」</span>という方も多いはず。</strong><br><br>同じレイアウトやフォントを使用したデザインであっても、<span class="bold">色１つで印象が大きく変わってしまう</span>くらい、色は大事な要素となります。</p>



<p><strong>今回の記事ではそんな色の重要な基礎となる<span class="bold-red">「色の３属性」</span>について、</strong><strong>丁寧に解説していきます。</strong></p>



<div class="wp-block-cocoon-blocks-balloon-ex-box-1 speech-wrap sb-id-11 sbs-stn sbp-l sbis-cb cf block-box not-nested-style cocoon-block-balloon" style="--cocoon-custom-background-color:#efefef;--cocoon-custom-text-color:#333333;--cocoon-custom-border-color:#efefef"><div class="speech-person"><figure class="speech-icon"><img decoding="async" src="https://desaota.com/wp-content/uploads/2023/11/icon.jpg" alt="KT" class="speech-icon-image"/></figure><div class="speech-name">KT</div></div><div class="speech-balloon has-text-color has-background has-border-color has-cocoon-black-color has-key-color-background-color has-key-color-border-color">
<p>この記事は以下のような方にお勧めです！</p>



<ul class="wp-block-list">
<li>色を決める際に悩んでしまう方</li>



<li>色の組み合わせ方が苦手な方</li>



<li>色の基礎を学びたいが何から学んで良いか分からない方</li>
</ul>
</div></div>



<p><strong>この記事を読む事で<span class="red">「色の３属性」</span>を理解でき、デザイン制作時に必要な色の基礎知識を身に付けることが出来る様になります</strong></p>



<p>それではどうぞ！</p>




  <div id="toc" class="toc tnt-number-detail toc-center tnt-number_detail border-element"><input type="checkbox" class="toc-checkbox" id="toc-checkbox-4" checked><label class="toc-title" for="toc-checkbox-4">目次</label>
    <div class="toc-content">
    <ol class="toc-list open"><li><a href="#toc1" tabindex="0">はじめに</a></li><li><a href="#toc2" tabindex="0">色相</a><ol><li><a href="#toc3" tabindex="0">色相環</a></li><li><a href="#toc4" tabindex="0">類似色</a></li><li><a href="#toc5" tabindex="0">補色</a></li><li><a href="#toc6" tabindex="0">反対色</a></li></ol></li><li><a href="#toc7" tabindex="0">明度</a></li><li><a href="#toc8" tabindex="0">彩度</a></li><li><a href="#toc9" tabindex="0">トーン</a></li><li><a href="#toc10" tabindex="0">まとめ</a></li></ol>
    </div>
  </div>

<h2 class="wp-block-heading"><span id="toc1">はじめに</span></h2>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1000" height="525" src="https://desaota.com/wp-content/uploads/2024/06/beginning-3.jpg" alt="" class="wp-image-757" srcset="https://desaota.com/wp-content/uploads/2024/06/beginning-3.jpg 1000w, https://desaota.com/wp-content/uploads/2024/06/beginning-3-300x158.jpg 300w, https://desaota.com/wp-content/uploads/2024/06/beginning-3-768x403.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></figure>



<p><span class="bold"><span class="bold-red">「色の3属性」</span>とは、<span class="bold-red">「色相・明度・彩度」</span>を表します。</span><br><br>色は<strong>「色相・明度・彩度」</strong>から成り立っており、これらを組み合わせる事で、数多くの色を作り出せます。<strong>「色の3属性」を正しく理解する事が、<span class="bold-red">色を使いこなす為の基礎</span>となります。</strong><br><br>それでは各属性の内容について詳しく見て行きましょう。</p>



<h2 class="wp-block-heading"><span id="toc2">色相</span></h2>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1000" height="525" src="https://desaota.com/wp-content/uploads/2024/06/hue.jpg" alt="" class="wp-image-685" srcset="https://desaota.com/wp-content/uploads/2024/06/hue.jpg 1000w, https://desaota.com/wp-content/uploads/2024/06/hue-300x158.jpg 300w, https://desaota.com/wp-content/uploads/2024/06/hue-768x403.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></figure>



<p><span class="bold"><strong><span class="bold-red">色相</span></strong>とは<strong>「赤、青、緑、黄色」</strong>などの<strong><span class="bold-red">色味</span></strong>を指します。</span></p>



<h3 class="wp-block-heading"><span id="toc3">色相環</span></h3>



<figure class="wp-block-image size-full is-resized"><img loading="lazy" decoding="async" width="1000" height="525" src="https://desaota.com/wp-content/uploads/2024/06/color-wheel.jpg" alt="" class="wp-image-759" style="width:840px;height:auto" srcset="https://desaota.com/wp-content/uploads/2024/06/color-wheel.jpg 1000w, https://desaota.com/wp-content/uploads/2024/06/color-wheel-300x158.jpg 300w, https://desaota.com/wp-content/uploads/2024/06/color-wheel-768x403.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></figure>



<p><strong>「赤→橙→黄→緑→青→紫」等へ、<span class="bold-red">色相が変化していく状況を円で表現したものを「色相環」</span>と呼びます。</strong>この「色相環」の色同士を組み合わせることで、効果的な配色を行えます。</p>



<p>特に<span class="bold">「類似色」「補色」「反対色」</span>を意識してみましょう。</p>



<h3 class="wp-block-heading"><span id="toc4">類似色</span></h3>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1000" height="525" src="https://desaota.com/wp-content/uploads/2024/06/analogous-colors.jpg" alt="" class="wp-image-761" srcset="https://desaota.com/wp-content/uploads/2024/06/analogous-colors.jpg 1000w, https://desaota.com/wp-content/uploads/2024/06/analogous-colors-300x158.jpg 300w, https://desaota.com/wp-content/uploads/2024/06/analogous-colors-768x403.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></figure>



<p><strong>色相環で隣り合う色を<span class="bold-red">「類似色」</span>と呼びます。</strong>色相が似ているため、まとまりやすく特に統一感を出したい時に有効な配色となります。</p>



<h3 class="wp-block-heading"><span id="toc5">補色</span></h3>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1000" height="525" src="https://desaota.com/wp-content/uploads/2024/06/complementary-color.jpg" alt="" class="wp-image-762" srcset="https://desaota.com/wp-content/uploads/2024/06/complementary-color.jpg 1000w, https://desaota.com/wp-content/uploads/2024/06/complementary-color-300x158.jpg 300w, https://desaota.com/wp-content/uploads/2024/06/complementary-color-768x403.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></figure>



<p><strong>色相環で反対側に位置する色のことを<span class="bold-red">「補色」</span>と呼びます。</strong>正反対の色同士のため、目に留まりやすくお互いの色を際立たせる効果があります。</p>



<h3 class="wp-block-heading"><span id="toc6">反対色</span></h3>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1000" height="525" src="https://desaota.com/wp-content/uploads/2024/06/opposite-color.jpg" alt="" class="wp-image-763" srcset="https://desaota.com/wp-content/uploads/2024/06/opposite-color.jpg 1000w, https://desaota.com/wp-content/uploads/2024/06/opposite-color-300x158.jpg 300w, https://desaota.com/wp-content/uploads/2024/06/opposite-color-768x403.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></figure>



<p><strong>色相環で補色よりも少し元も色に近い色を<span class="bold-red">「反対色」</span>と呼びます。</strong><br>補色よりも調和が取れやすいという特徴があります。</p>



<h2 class="wp-block-heading"><span id="toc7">明度</span></h2>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1000" height="525" src="https://desaota.com/wp-content/uploads/2024/06/brightness.jpg" alt="" class="wp-image-686" srcset="https://desaota.com/wp-content/uploads/2024/06/brightness.jpg 1000w, https://desaota.com/wp-content/uploads/2024/06/brightness-300x158.jpg 300w, https://desaota.com/wp-content/uploads/2024/06/brightness-768x403.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></figure>



<p><strong>色の明るさのことを<span class="bold-red">「明度」</span>と呼びます。</strong><br><br><strong>最も明度が高い色は白色、最も明度が低いのが黒色となります。</strong><br>白色に近づくほど明度は高く、黒色に近づくほど明度は低くなります。</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1000" height="525" src="https://desaota.com/wp-content/uploads/2024/06/brightness-2.jpg" alt="" class="wp-image-766" srcset="https://desaota.com/wp-content/uploads/2024/06/brightness-2.jpg 1000w, https://desaota.com/wp-content/uploads/2024/06/brightness-2-300x158.jpg 300w, https://desaota.com/wp-content/uploads/2024/06/brightness-2-768x403.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></figure>



<p><strong>「柔らかい、しなやか、軽い、優しい」</strong>といったイメージを出したい時には<strong>明度の高い色</strong>を使用して、<strong>「厳格、重厚、がっしり」</strong>といったイメージを出したい時には<strong>明度の低い色</strong>を使用するのがお勧めです。</p>



<h2 class="wp-block-heading"><span id="toc8">彩度</span></h2>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1000" height="525" src="https://desaota.com/wp-content/uploads/2024/06/saturation.jpg" alt="" class="wp-image-687" srcset="https://desaota.com/wp-content/uploads/2024/06/saturation.jpg 1000w, https://desaota.com/wp-content/uploads/2024/06/saturation-300x158.jpg 300w, https://desaota.com/wp-content/uploads/2024/06/saturation-768x403.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></figure>



<p><strong>色の鮮やかさのことを<span class="bold-red">「彩度」</span>と呼びます。</strong></p>



<p><strong>彩度が高いと「鮮やかな色」となり、彩度が低いと「くすんだ色」になります。</strong>最も鮮やかな色を<strong>「純色」</strong>と呼び、グレーや白黒などの色味のないモノトーンカラーを<strong>「無彩色」</strong>と呼びます。純色に近づくほど彩度が高く、無彩色に近づくほど彩度は低くなります。</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1000" height="525" src="https://desaota.com/wp-content/uploads/2024/06/saturation-2.jpg" alt="" class="wp-image-767" srcset="https://desaota.com/wp-content/uploads/2024/06/saturation-2.jpg 1000w, https://desaota.com/wp-content/uploads/2024/06/saturation-2-300x158.jpg 300w, https://desaota.com/wp-content/uploads/2024/06/saturation-2-768x403.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></figure>



<p><strong>「インパクトを出したい時」には彩度の高い色</strong>を使用して、<strong>「見ていて疲れない落ちついた雰囲気を出したい時」には彩度の低い色</strong>を使用するのがおすすめです。</p>



<h2 class="wp-block-heading"><span id="toc9">トーン</span></h2>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1000" height="525" src="https://desaota.com/wp-content/uploads/2024/06/tone.jpg" alt="" class="wp-image-688" srcset="https://desaota.com/wp-content/uploads/2024/06/tone.jpg 1000w, https://desaota.com/wp-content/uploads/2024/06/tone-300x158.jpg 300w, https://desaota.com/wp-content/uploads/2024/06/tone-768x403.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></figure>



<p><strong>明度と彩度の変化を組み合わせた色の度合いを<span class="bold-red">「トーン」</span>と呼びます。</strong></p>



<p><strong>「明度×彩度＝トーン」</strong>の構図で表す事が出来、同じ色相であってもトーンによって色合いや印象は大きく変わってきます。</p>



<figure class="wp-block-image size-full"><img loading="lazy" decoding="async" width="1000" height="525" src="https://desaota.com/wp-content/uploads/2024/06/tone-2.jpg" alt="" class="wp-image-768" srcset="https://desaota.com/wp-content/uploads/2024/06/tone-2.jpg 1000w, https://desaota.com/wp-content/uploads/2024/06/tone-2-300x158.jpg 300w, https://desaota.com/wp-content/uploads/2024/06/tone-2-768x403.jpg 768w" sizes="(max-width: 1000px) 100vw, 1000px" /></figure>



<p>配色を考える際には<strong>「同じトーン同士の色相」</strong>を組み合わせると、調和の取れたまとまった印象の配色が可能となります。</p>



<h2 class="wp-block-heading"><span id="toc10">まとめ</span></h2>



<p><strong>今回の記事では<span class="bold-red">「色の３属性」</span>を紹介してきました。</strong></p>



<p>この「色の３属性」である「色相・明度・彩度」を意識することで、デザイン制作時に必要な色の基礎知識を身に付けることが出来る様になります。</p>



<div class="wp-block-cocoon-blocks-tab-box-1 blank-box bb-tab bb-check block-box has-border-color has-amber-border-color">
<p><span class="fz-20px"><strong>色の3属性のまとめ</strong></span><br>・<span class="fz-18px">色相：色味を表す</span><br>・明度：色の明るさを表す<br>・彩度：色の鮮やかさを表す</p>
</div>



<p>デザインの色を決める上で「色の３属性」を理解する事は大切です。ぜひ皆さんも「色の３属性」を意識して、制作活動に取り入れてみて下さい。</p>



<p>今回の記事は以上です。<br><span class="marker-under-red"><strong>最後まで読んで頂き有り難うございました</strong>！</span></p>



<p>良かったら別の記事も読んでみて下さい！</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
