<?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/%e3%82%b3%e3%83%bc%e3%83%9d%e3%83%ac%e3%83%bc%e3%83%88%e3%82%ab%e3%83%a9%e3%83%bc/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/%e3%82%b3%e3%83%bc%e3%83%9d%e3%83%ac%e3%83%bc%e3%83%88%e3%82%ab%e3%83%a9%e3%83%bc/feed" />
		<item>
		<title>ビジネスブログの色に関する考察</title>
		<link>http://www.webcolordesign.com/column/businessblog.html</link>
		<comments>http://www.webcolordesign.com/column/businessblog.html#comments</comments>
		<pubDate>Thu, 26 Aug 2010 03:43:16 +0000</pubDate>
		<dc:creator>坂本邦夫</dc:creator>
				<category><![CDATA[ウェブ配色に関するコラム]]></category>
		<category><![CDATA[コーポレートカラー]]></category>
		<category><![CDATA[ビジネス]]></category>
		<category><![CDATA[ブログ]]></category>
		<category><![CDATA[ユーザビリティ]]></category>
		<category><![CDATA[配色]]></category>

		<guid isPermaLink="false">http://www.webcolordesign.com/?p=620</guid>
		<description><![CDATA[先日、Twitter上でブログの色についてつぶやいてみました。内容はこんな感じです。 ブログの色について。検索などからブログにたどり着く場合、ヘッダだけ変えて目立たせた個人の無料ブログって、ものすごく記事に到達しにくい。... <a href="http://www.webcolordesign.com/column/businessblog.html" class="excerpt_more">続きを読む</a>
]]></description>
			<content:encoded><![CDATA[<p>先日、Twitter上でブログの色についてつぶやいてみました。内容はこんな感じです。</p>
<blockquote>
<ul>
<li>ブログの色について。検索などからブログにたどり着く場合、ヘッダだけ変えて目立たせた個人の無料ブログって、ものすごく記事に到達しにくい。この人の考えや意見を知りたいという強い意志がない場合には、ヘッダだけ目立ってるのはマイナス</li>
<li>既にリピーターになってる人には関係ない話なんだけども、そもそもリピーターにさせるためには内容の充実が必要なわけで、内容をよく知ってもらうためには、サイトの回遊性を高める色を選ぶことも重要。ヘッダ変えただけでは集客は無理だ</li>
<li>と言うわけで、やっぱりコンテンツがよくないとどうにもならんなといういつもの話に落ちついた</li>
</ul>
</blockquote>
<p>とは言うものの、140字では多少言い足りない部分や、誤解を招きそうなところもあるので、もう一度整理してみようと思います。個人のブログで、特にビジネスにつながらなくても、好きなことが発信できればいいという場合には、どんな色でも構わないと思いますので、今回はビジネスブログに限った場合で考えてみましょう。</p>
<p>まずブログが読まれる場合には、大きく「その記事を読みたい」という場合と、「ある人の書いた記事を読みたい」という場合に分けて考えることが出来るかと思います。前者は検索エンジンやTwitter・ソーシャルブックマークなどで記事のタイトルなどを見て興味をひかれた場合、後者はその分野の第一人者や芸能人など誰が記事を書いたのかがその時点でわかっている場合ですね。</p>
<p>記事そのものに興味を持っての訪問の場合には、まず興味の対象は記事の内容です。そこで内容が良ければ、他のページの記事も読んでみたいと思うでしょうし、上手くいけばTwitterでフォローされたり、ブックマークなどもしてもらえるでしょう。このようにリピーターやフォロワーが増えればよいのですが、そのためには内容の充実というのが大前提になります。</p>
<p>リピーターを増やすためには、その時幸運にも読んでもらえた記事だけが見られればよいわけでもないでしょう。出来れば他の記事も読んでもらい、「この人の書いていることはおもしろい」や「なかなか勉強になるなぁ」などと感じてもらえるようにしなければなりません。</p>
<p>ああ、ここまでまったく色のことは書かれていません。そして書きようもありません。当たり前のことですが、1回目の訪問をしてもらうまでは、色なんて読者には関係ありません。つまりブログの色で訪問者数アップというのは、ただのファンタジーなのですね。</p>
<p>ただ訪問してもらってからということであれば、話はまったく別です。</p>
<p>どこからともなくやってきた読者は、そのブロガーの名前や経歴などは知らず、記事のタイトルの情報だけを持ってブログに到着します。そのような人に向けて、<strong>まず記事の部分に視線が向くように配色をする</strong>必要があります。</p>
<p>そして出来れば他の記事も読んでもらって、このサイトのリピーターになってもらいたいという希望を実現させるためには、<strong>サイト内の回遊性を高めるために、リンクなどがわかりやすい色</strong>を施す必要があるのです。</p>
<p>アメブロをはじめとする無料のブログサービスのテンプレートの中には、どう考えてもその人の記事よりも、各種サービスが大事なのではないかと思われる（運営側としてはおそらくそう）ものがたくさんありますので、テンプレートをそのまま使うには注意が必要かもしれません。</p>
<p>次に後者の著名人のブログなどでは、そもそもリピーターが多かったり、○○のブログのように内容より誰のブログかということで訪問されたりするので、上記のような配慮はしなくてもよいのかもしれませんが、それでも回遊性を高めるための工夫は必要ですね。</p>
<p>では、ヘッダのデザインなんかはどうでもいいのかというと、けしてそうではありません。サイトのユーザビリティとは別にブランディングとして重要になるわけです。</p>
<p>書いている人や内容をわかりやすいイメージで表現することで、より顧客になってくれそうなターゲットをひきつけてくれます。企業のブログではその企業の理念を表すコーポレートカラーが、個人のブログでは、その人をの人柄や考え方、文体などに合った色を表現することが重要でしょう。</p>
<p>まとめると、ブログに重要なのは内容の充実で、それを支えるための色・デザインが必要です。</p>
<p>逆に<strong>一番よろしくないのは、ヘッダなどのデザイン部分だけ派手に作って、内容がまったく充実していない場合ですね。顔出しまでして、内容がしょぼかったという印象が残るのだけは避けたい</strong>ものです。</p>
<p>そしてせっかく訪問してくれた人がクライアント候補にさせるために、わかりやすいナビゲーションの配色にすることです。</p>
<p>ビジネスブログの色を真剣に考えるなら、コンテンツの充実度合いとデザイン・ユーザビリティを総合的に考えた方がよいでしょう。デザインだけ突出しているのはマイナス効果を生むこともあると考えています。</p>
<p>ビジネスブログの色については、<a href="http://www.color-fortuna.com/">大阪と東京のWebカラーセミナー</a>でも少しお話ししようと思います。</p>
<p>企業サイトや個人事業主の方で、ブログの配色はこれでいいのかというお悩みをお持ちの方は、<a href="http://www.color-fortuna.com/landing_webcolorcheck/" class="broken_link">フォルトゥナでアドバイス</a>も行っておりますので、ご相談ください。<strong>関連記事：</strong>
<ul class="similar-posts">
<li><a href="http://www.webcolordesign.com/information/about_this_site/%e8%91%97%e4%bd%9c%e6%a8%a9%e7%9f%a5%e7%9a%84%e8%b2%a1%e7%94%a3%e6%a8%a9%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6.html" rel="bookmark" title="2010年1月25日">著作権(知的財産権)について</a></li>
<li><a href="http://www.webcolordesign.com/color_point/out_sourcing/%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%e3%82%bf%e3%83%bc%e3%81%ae%e9%81%b8%e3%81%b3%e6%96%b9.html" rel="bookmark" title="2010年1月27日">カラーコーディネーターの選び方</a></li>
<li><a href="http://www.webcolordesign.com/color_point/%e3%83%ac%e3%82%a4%e3%82%a2%e3%82%a6%e3%83%88%e3%82%92%e3%81%97%e3%81%a6%e3%81%8b%e3%82%89%e9%85%8d%e8%89%b2.html" rel="bookmark" title="2010年1月28日">レイアウトをしてから配色</a></li>
<li><a href="http://www.webcolordesign.com/column/%e8%aa%8d%e7%9f%a5%e5%bf%83%e7%90%86%e5%ad%a6%e3%81%8b%e3%82%89%e8%a6%8b%e3%81%9f%e3%80%8c%e8%bf%b7%e3%81%86%e3%80%8d%e3%83%a1%e3%82%ab%e3%83%8b%e3%82%ba%e3%83%a0.html" rel="bookmark" title="2005年12月26日">認知心理学から見た「迷う」メカニズム</a></li>
<li><a href="http://www.webcolordesign.com/information/about_this_site/%e9%96%a2%e9%80%a3%e3%82%b5%e3%82%a4%e3%83%88%e3%81%ae%e7%b4%b9%e4%bb%8b.html" rel="bookmark" title="2010年1月25日">関連サイトの紹介</a></li>
</ul>
<p><!-- Similar Posts took 5.800 ms --></p>
]]></content:encoded>
			<wfw:commentRss>http://www.webcolordesign.com/column/businessblog.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.webcolordesign.com/column/businessblog.html" />
	</item>
		<item>
		<title>CIカラーの扱い方</title>
		<link>http://www.webcolordesign.com/color_check/examination_ci/ci%e3%82%ab%e3%83%a9%e3%83%bc%e3%81%ae%e6%89%b1%e3%81%84%e6%96%b9.html</link>
		<comments>http://www.webcolordesign.com/color_check/examination_ci/ci%e3%82%ab%e3%83%a9%e3%83%bc%e3%81%ae%e6%89%b1%e3%81%84%e6%96%b9.html#comments</comments>
		<pubDate>Tue, 26 Jan 2010 14:04:56 +0000</pubDate>
		<dc:creator>坂本邦夫</dc:creator>
				<category><![CDATA[CIカラーの検討]]></category>
		<category><![CDATA[CIカラー]]></category>
		<category><![CDATA[コーポレートカラー]]></category>

		<guid isPermaLink="false">http://cpfortuna.heteml.jp/webcolor/?p=169</guid>
		<description><![CDATA[今まで考えてきた1色とCIカラーが一致するかどうかを考えながら、その取り扱いについて考えていきます。 CIカラーの扱い 「言葉からの色彩イメージ」と「色相を分析する」のページによって、使うべき色相については見えてきたので... <a href="http://www.webcolordesign.com/color_check/examination_ci/ci%e3%82%ab%e3%83%a9%e3%83%bc%e3%81%ae%e6%89%b1%e3%81%84%e6%96%b9.html" class="excerpt_more">続きを読む</a>
]]></description>
			<content:encoded><![CDATA[<p>今まで考えてきた1色とCIカラーが一致するかどうかを考えながら、その取り扱いについて考えていきます。</p>
<p><a id="more-169"></a></p>
<h3>CIカラーの扱い</h3>
<p><a href="http://www.webcolordesign.com/color_check/%e8%a8%80%e8%91%89%e3%81%8b%e3%82%89%e3%81%ae%e8%89%b2%e5%bd%a9%e3%82%a4%e3%83%a1%e3%83%bc%e3%82%b8.html">「言葉からの色彩イメージ」</a>と<a href="http://www.webcolordesign.com/color_check/website_analysis/%e8%89%b2%e7%9b%b8%e3%82%92%e5%88%86%e6%9e%90%e3%81%99%e3%82%8b.html">「色相を分析する」</a>のページによって、使うべき色相については見えてきたのではないでしょうか？　もしここまででまったく見えてきていないとすれば、もう一度元に戻っていただいても構いませんが、その前にここでCIカラーについて考えてみることにします。</p>
<p>すでにCIカラーをお持ちの企業の方は、現在のCIカラーが伝える色彩のイメージと今から配色する<a href="http://www.webcolordesign.com/color_check/%e3%82%a6%e3%82%a7%e3%83%96%e3%82%b5%e3%82%a4%e3%83%88%e3%81%ae%e7%9b%ae%e7%9a%84%e3%81%a8%e8%89%b2%e5%bd%a9.html">ウェブサイトの目的</a>が一致するのかどうかを確認してみましょう。</p>
<p>今からCIカラーを決めるという方、もしくはCIカラーと関係なく独自の配色でやっていくという方は、これまでの課程で候補として上げた色相をそのまま維持してください。</p>
<h3>今までの行程とCIカラー</h3>
<p>この段階でCIカラーが打ち出すイメージとウェブサイトの目的が一致するかどうかの判断が出来るようになっているはずです。CIカラーの扱いに関しては次のようなものが考えられます。</p>
<ul>
<li>CIカラーとホームページの目的が一致する</li>
<li>CIカラーとホームページの目的が一致しない</li>
<li>CIカラーとホームページの目的が一致しないが、どうしても使いたい</li>
</ul>
<p>CIカラーとホームページの目的が一致し、なおかつ競合サイトとの関係もクリアな場合は、メインの色をここで決めていただいて結構です。</p>
<h3>CIカラーがイメージと違う場合</h3>
<p>CIカラーと候補に挙がった色がまったく違うが、そのまま使いたい場合は問題ありませんので、そのまま使うことにしましょう。これは配色のテクニックでCIカラーを組み込んでいくことにし、実際に伝えたいイメージの色相を中心にしていくとよいでしょう。</p>
<h3>「基礎からわかるホームページ」の場合</h3>
<p>このホームページは新規立ち上げで、今回決定するメインカラーをCIカラーと同じような扱いにすることになっておりましたので、特にCIカラーについては考慮しておりません。</p>
<p> <strong>関連記事：</strong>
<ul class="similar-posts">
<li><a href="http://www.webcolordesign.com/color_check/website_analysis/%e7%ab%b6%e5%90%88%e3%82%b5%e3%82%a4%e3%83%88%e6%8e%a2%e3%81%97.html" rel="bookmark" title="2010年1月26日">競合サイト探し</a></li>
<li><a href="http://www.webcolordesign.com/color_check/%e3%82%a6%e3%82%a7%e3%83%96%e3%82%b5%e3%82%a4%e3%83%88%e3%81%ae%e7%9b%ae%e7%9a%84%e3%81%a8%e8%89%b2%e5%bd%a9.html" rel="bookmark" title="2010年1月26日">ウェブサイトの目的と色彩</a></li>
<li><a href="http://www.webcolordesign.com/color_basic/rgb%e3%82%92%e7%9f%a5%e3%82%8b.html" rel="bookmark" title="2010年1月26日">RGBを知る</a></li>
<li><a href="http://www.webcolordesign.com/color_check/color_psychology/%e8%89%b2%e5%bd%a9%e3%81%a8%e9%a3%9f%e6%ac%b2.html" rel="bookmark" title="2010年1月26日">色彩と食欲</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.771 ms --></p>
]]></content:encoded>
			<wfw:commentRss>http://www.webcolordesign.com/color_check/examination_ci/ci%e3%82%ab%e3%83%a9%e3%83%bc%e3%81%ae%e6%89%b1%e3%81%84%e6%96%b9.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.webcolordesign.com/color_check/examination_ci/ci%e3%82%ab%e3%83%a9%e3%83%bc%e3%81%ae%e6%89%b1%e3%81%84%e6%96%b9.html" />
	</item>
		<item>
		<title>CIカラーとは</title>
		<link>http://www.webcolordesign.com/color_check/examination_ci/ci%e3%82%ab%e3%83%a9%e3%83%bc%e3%81%ae%e6%84%8f%e5%91%b3.html</link>
		<comments>http://www.webcolordesign.com/color_check/examination_ci/ci%e3%82%ab%e3%83%a9%e3%83%bc%e3%81%ae%e6%84%8f%e5%91%b3.html#comments</comments>
		<pubDate>Tue, 26 Jan 2010 14:03:11 +0000</pubDate>
		<dc:creator>坂本邦夫</dc:creator>
				<category><![CDATA[CIカラーの検討]]></category>
		<category><![CDATA[CIカラー]]></category>
		<category><![CDATA[コーポレートカラー]]></category>
		<category><![CDATA[可読性]]></category>
		<category><![CDATA[視認性]]></category>

		<guid isPermaLink="false">http://cpfortuna.heteml.jp/webcolor/?p=163</guid>
		<description><![CDATA[そもそもCIカラーとは何か、またどのような役割を持つのかについて説明しております。 CIカラーの意味 CIとはコーポレートアイデンティティのことで広辞苑によれば「会社の個性・目標の明確化と統一をはかり、社内外にこれを印象... <a href="http://www.webcolordesign.com/color_check/examination_ci/ci%e3%82%ab%e3%83%a9%e3%83%bc%e3%81%ae%e6%84%8f%e5%91%b3.html" class="excerpt_more">続きを読む</a>
]]></description>
			<content:encoded><![CDATA[<p>そもそもCIカラーとは何か、またどのような役割を持つのかについて説明しております。</p>
<p><a id="more-163"></a></p>
<h3>CIカラーの意味</h3>
<p>CIとはコーポレートアイデンティティのことで広辞苑によれば「会社の個性・目標の明確化と統一をはかり、社内外にこれを印象づけるための組織的活動」と定義されています。企業サイトの配色でない場合は「会社」というのを「今から配色しようとするホームページ」と置き換えて読んでください。</p>
<p><a href="http://cpfortuna.heteml.jp/webcolor/wp-content/uploads/2010/01/cicolor.gif" rel="lightbox[163]"><img src="http://cpfortuna.heteml.jp/webcolor/wp-content/uploads/2010/01/cicolor-300x156.gif" alt="三井住友銀行のCIカラー" title="三井住友銀行のCIカラー" width="300" height="156" class="alignnone size-medium wp-image-164" /></a>この定義からCIの一部であるCIカラーはただ色を付けるだけではなく、内外にアピールできる色であることが重要となってきます。例えば三井住友銀行は明るい黄緑と暗い緑の２色をCIカラーに用いております。黄緑色は若々しさ、知性、やさしさを表しておりフレッシュグリーンと名付けられています。暗い緑は重厚なイメージがしますが、伝統、信頼、安定感を表すトラッドグリーンです。このイメージから<a href="http://www.smbc.co.jp/">三井住友銀行</a>の目指す方向性という物が内外に伝わるようになっております。</p>
<p>もしCIカラーが存在しない場合や現状のものを変更可能であるという場合には、きっちりと決めてしまわれることをおすすめしますし、すでに存在する場合にはそれを上手く活かすように検討します。またイメージにそぐわないような場合にはCIカラーそのものを変更するような場合も出てくるでしょう。</p>
<h3>CIカラーを決める</h3>
<p>CIカラーの決定に際しては慎重に行わなければなりません。ウェブサイト上だけではなく、名刺や汎用的に使用することを考えるのであれば、カラーコーディネーターに依頼するのもよいでしょう。</p>
<p>決めるにあたっては色々と考えなければならないことが多いのですが、まずはここまで候補に残った色相の中から選んでください。</p>
<p><a href="http://cpfortuna.heteml.jp/webcolor/wp-content/uploads/2010/01/vietato.gif" rel="lightbox[163]"><img src="http://cpfortuna.heteml.jp/webcolor/wp-content/uploads/2010/01/vietato-300x117.gif" alt="避けた方がよいCIカラーの例" title="避けた方がよいCIカラーの例" width="300" height="117" class="alignnone size-medium wp-image-166" /></a>最低限白の上に置いた時に見えやすい色を使うようにしましょう。右の画像のような色をそのまま使うと見えにくく、名刺や封筒にロゴマークを入れることも難しくなりますし、訴求力にも欠けることとなります。</p>
<p>このような色をどうしても使いたい場合には暗めの色で縁取りをすることにしましょう。</p>
<p> <strong>関連記事：</strong>
<ul class="similar-posts">
<li><a href="http://www.webcolordesign.com/color_point/out_sourcing/%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%e3%82%bf%e3%83%bc%e3%81%ae%e9%81%b8%e3%81%b3%e6%96%b9.html" rel="bookmark" title="2010年1月27日">カラーコーディネーターの選び方</a></li>
<li><a href="http://www.webcolordesign.com/color_basic/hsb_basic/hsb%e3%82%ab%e3%83%a9%e3%83%bc%e3%83%a2%e3%83%87%e3%83%ab.html" rel="bookmark" title="2010年1月26日">HSBカラーモデル</a></li>
<li><a href="http://www.webcolordesign.com/color_designing/color_4up/%e3%82%b5%e3%83%96%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>
<li><a href="http://www.webcolordesign.com/color_designing/%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%82%92%e6%b1%ba%e5%ae%9a.html" rel="bookmark" title="2010年1月27日">アクセントカラーを決定</a></li>
<li><a href="http://www.webcolordesign.com/color_basic/web%e3%82%bb%e3%83%bc%e3%83%95%e3%82%ab%e3%83%a9%e3%83%bc.html" rel="bookmark" title="2010年1月26日">Webセーフカラー</a></li>
</ul>
<p><!-- Similar Posts took 4.713 ms --></p>
]]></content:encoded>
			<wfw:commentRss>http://www.webcolordesign.com/color_check/examination_ci/ci%e3%82%ab%e3%83%a9%e3%83%bc%e3%81%ae%e6%84%8f%e5%91%b3.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
	<xhtml:link rel="alternate" media="handheld" type="text/html" href="http://www.webcolordesign.com/color_check/examination_ci/ci%e3%82%ab%e3%83%a9%e3%83%bc%e3%81%ae%e6%84%8f%e5%91%b3.html" />
	</item>
	</channel>
</rss>

