<?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/"
		xmlns:xhtml="http://www.w3.org/1999/xhtml"
>

<channel>
	<title>坂本邦夫の「基礎からわかるホームページの配色」&#187; 視線</title>
	<atom:link href="http://www.webcolordesign.com/tag/%e8%a6%96%e7%b7%9a/feed" rel="self" type="application/rss+xml" />
	<link>http://www.webcolordesign.com</link>
	<description>自分でウェブサイトの配色を行うための色彩学の基礎知識、配色前の準備、色彩設計などウェブサイトのカラーデザインに関する情報サイトです。</description>
	<lastBuildDate>Thu, 26 Aug 2010 14:47:59 +0000</lastBuildDate>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.webcolordesign.com/tag/%e8%a6%96%e7%b7%9a/feed" />
		<item>
		<title>目の動きを考える</title>
		<link>http://www.webcolordesign.com/color_point/%e7%9b%ae%e3%81%ae%e5%8b%95%e3%81%8d%e3%82%92%e8%80%83%e3%81%88%e3%82%8b.html</link>
		<comments>http://www.webcolordesign.com/color_point/%e7%9b%ae%e3%81%ae%e5%8b%95%e3%81%8d%e3%82%92%e8%80%83%e3%81%88%e3%82%8b.html#comments</comments>
		<pubDate>Wed, 27 Jan 2010 09:31:59 +0000</pubDate>
		<dc:creator>坂本邦夫</dc:creator>
				<category><![CDATA[配色のポイント]]></category>
		<category><![CDATA[レイアウト]]></category>
		<category><![CDATA[視線]]></category>

		<guid isPermaLink="false">http://cpfortuna.heteml.jp/webcolor/?p=278</guid>
		<description><![CDATA[色を置く時には目の動きなども考慮する必要があります。 重要な部分へ目の動きを このサンプルではアクセントカラーのえんじ色が左右に置かれていますが、本来読んでほしい中央部の文章よりもメニューの方が目立ってしまい、視線が定ま... <a href="http://www.webcolordesign.com/color_point/%e7%9b%ae%e3%81%ae%e5%8b%95%e3%81%8d%e3%82%92%e8%80%83%e3%81%88%e3%82%8b.html" class="excerpt_more">続きを読む</a>
]]></description>
			<content:encoded><![CDATA[<p>色を置く時には目の動きなども考慮する必要があります。</p>
<p><a id="more-278"></a></p>
<h3>重要な部分へ目の動きを</h3>
<p><a href="http://cpfortuna.heteml.jp/webcolor/wp-content/uploads/2010/01/eye_flow1.gif" rel="lightbox[278]"><img src="http://cpfortuna.heteml.jp/webcolor/wp-content/uploads/2010/01/eye_flow1-300x147.gif" alt="読ませたい部分にアクセントカラーを" title="読ませたい部分にアクセントカラーを" width="300" height="147" class="alignnone size-medium wp-image-280" /></a>このサンプルではアクセントカラーのえんじ色が左右に置かれていますが、本来読んでほしい中央部の文章よりもメニューの方が目立ってしまい、視線が定まりません。</p>
<p>そこで右の例のようにアクセントカラーを文章の見出しに持ってきて、視線を中央に誘導しています。</p>
<p>アクセントカラーは目立つ色を設定しているはずですので、見せたい部分に上手に配置することで、美しさだけでなく色の機能を利用することが出来ます。</p>
<h3>目の動きは左から右、上から下</h3>
<p><a href="http://cpfortuna.heteml.jp/webcolor/wp-content/uploads/2010/01/eye_flow2.gif" rel="lightbox[278]"><img src="http://cpfortuna.heteml.jp/webcolor/wp-content/uploads/2010/01/eye_flow2-300x253.gif" alt="視線が定まりにくい色の配置" title="視線が定まりにくい色の配置" width="300" height="253" class="alignnone size-medium wp-image-281" /></a>サンプルのようにメニューを色分けして表示したい場合などは多いことと思いますが、この色の並びも適当にするわけには行きません。</p>
<p>この並びですと、左から黄→青→赤→緑となっておりますが、赤や橙などは非常に目立つ色（誘目色と呼ばれます）ですので、左から３番目を先に見てしまい、そのまま視線が下に流れていってしまう場合もあります。</p>
<p><a href="http://cpfortuna.heteml.jp/webcolor/wp-content/uploads/2010/01/eye_flow3.gif" rel="lightbox[278]"><img src="http://cpfortuna.heteml.jp/webcolor/wp-content/uploads/2010/01/eye_flow3-300x253.gif" alt="視線の流れに従った色の配置" title="視線の流れに従った色の配置" width="300" height="253" class="alignnone size-medium wp-image-279" /></a>そこでこのようなメニューの場合、読んでほしい順番に左から並べていきます。そして一番目立つ赤色から色相順に並べると、リズムも出て視線の動きもスムーズになります。</p>
<h3>グラデーションで動きを</h3>
<p>グラデーションを看板部や文字でお使いになる方がいらっしゃいますが、暑苦しかったり読みにくかったりすることが非常に多いです。</p>
<p>しかし品良く使えば、非常に美しく、目の動きに対する効果の高い配色になりますので、少し小さめの面積で使ってみることにしましょう。</p>
<p> <strong>関連記事：</strong>
<ul class="similar-posts">
<li><a href="http://www.webcolordesign.com/color_point/usability/%e9%9d%a2%e7%a9%8d%e3%81%ab%e3%82%88%e3%81%a3%e3%81%a6%e5%a4%89%e3%82%8f%e3%82%8b%e3%82%b3%e3%83%b3%e3%83%88%e3%83%a9%e3%82%b9%e3%83%88%e3%81%ab%e6%b3%a8%e6%84%8f%e3%81%99%e3%82%8b.html" rel="bookmark" title="2010年2月14日">線の太さと色のコントラストから強調を考える</a></li>
<li><a href="http://www.webcolordesign.com/color_designing/sub_color/%e5%bd%a9%e5%ba%a6%e3%81%a0%e3%81%91%e3%82%92%e5%8b%95%e3%81%8b%e3%81%99%e4%be%8b.html" rel="bookmark" title="2010年1月27日">色の三属性の２つを動かす</a></li>
<li><a href="http://www.webcolordesign.com/color_designing/sub_color/%e8%89%b2%e7%9b%b8%e3%81%a0%e3%81%91%e3%82%92%e5%a4%89%e3%81%88%e3%81%a6%e3%82%b5%e3%83%96%e3%82%ab%e3%83%a9%e3%83%bc%e3%82%92%e4%bd%9c%e3%82%8b.html" rel="bookmark" title="2010年1月27日">色相だけを変えてサブカラーを作る</a></li>
<li><a href="http://www.webcolordesign.com/column/html%e3%81%ae%e8%ab%96%e7%90%86%e7%9a%84%e3%81%aa%e3%83%9e%e3%83%bc%e3%82%af%e3%82%a2%e3%83%83%e3%83%97%e3%81%a8%e3%82%ab%e3%83%a9%e3%83%bc%e3%82%b3%e3%83%bc%e3%83%87%e3%82%a3%e3%83%8d%e3%83%bc.html" rel="bookmark" title="2005年3月29日">HTMLの論理的なマークアップとカラーコーディネート</a></li>
<li><a href="http://www.webcolordesign.com/color_designing/color_4up/%e3%82%a2%e3%82%af%e3%82%bb%e3%83%b3%e3%83%88%e3%82%ab%e3%83%a9%e3%83%bc%e3%81%ae%e5%88%86%e5%89%b2.html" rel="bookmark" title="2010年1月27日">アクセントカラーの分割</a></li>
</ul>
<p><!-- Similar Posts took 4.428 ms --></p>
]]></content:encoded>
			<wfw:commentRss>http://www.webcolordesign.com/color_point/%e7%9b%ae%e3%81%ae%e5%8b%95%e3%81%8d%e3%82%92%e8%80%83%e3%81%88%e3%82%8b.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.webcolordesign.com/color_point/%e7%9b%ae%e3%81%ae%e5%8b%95%e3%81%8d%e3%82%92%e8%80%83%e3%81%88%e3%82%8b.html" />
	</item>
	</channel>
</rss>

