<?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>ＷＥＢデザインとＳＥＯを考える人の為のブログ &#187; ライディング</title>
	<atom:link href="http://webdesign-monster.com/category/blog/riding/feed" rel="self" type="application/rss+xml" />
	<link>http://webdesign-monster.com</link>
	<description>ＷＥＢデザインとＳＥＯは共存できるのか？リピーターが増えてしまうサイト作りのポイントやブログネタをＳＥＯを交えながら発信します。</description>
	<lastBuildDate>Tue, 05 Oct 2010 07:41:39 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.1</generator>
	<language>ja</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>ブログ記事の書き方とかブロガーが知っておくべきライディングに関するいくつかの事</title>
		<link>http://webdesign-monster.com/blog-news-756.html</link>
		<comments>http://webdesign-monster.com/blog-news-756.html#comments</comments>
		<pubDate>Fri, 23 Jul 2010 04:32:13 +0000</pubDate>
		<dc:creator>ＷＥＢモンスター</dc:creator>
				<category><![CDATA[ブログ構築]]></category>
		<category><![CDATA[ライディング]]></category>

		<guid isPermaLink="false">http://webdesign-monster.com/?p=756</guid>
		<description><![CDATA[

	ブログの記事の書き方には定義はない、僕はそう思っている。
	時には世の中で言われている、一般的な文法で記述したり、時には携帯のメールの様な記述にしてみたり、時にはＨＴＭL上減点対象になる様な記述でブログの記事を書い [...]]]></description>
			<content:encoded><![CDATA[<p><img alt="" class="alignnone size-full wp-image-757" height="265" src="http://webdesign-monster.com/wp-content/uploads/2010/07/blog_news.jpg" title="ブロガーに気を付けてほしい 記事の書き方講座その１" width="430" /></p>
<p>
	ブログの記事の書き方には定義はない、僕はそう思っている。<br />
	時には世の中で言われている、一般的な文法で記述したり、時には携帯のメールの様な記述にしてみたり、時にはＨＴＭL上減点対象になる様な記述でブログの記事を書いたりしてみます。</p>
<p>&nbsp;</p>
<p>ＷＥＢ上で記事を書く時に、僕が一番意識しているのは、正しい文法とか、そんな薄っぺらい表面上の事ではなくて、ＳＥＯの記事でも何度も述べているけれど、自分のブログに来てくれた訪問者がいかに読みやすい構造にしているか？という事です・・・そんな訪問者の事を考えてブログの記事の書き方を考えて見ると、フォントやフォント色、ブログレイアウトや、選ぶテンプレート、改行の仕方やスペースまで、ある程度自分でも何が良くて悪いのか？区別がつきやすいですよね。</p>
<p>&nbsp;</p>
<p>定義はないのだけれど、今日は僕が思うブロガーに気を付けてほしい記事の書き方をまとめて見ました。ライディングって意味不明だ～！って人は是非ご覧頂けると幸いです。それでは下記項目へどうぞ&darr;</p>
<p><span id="more-756"></span></p>
<h3>フォントとか背景色とか、ブログレイアウトとか</h3>
<p>&nbsp;</p>
<p><span style="color: rgb(0, 128, 0);"><strong>フォントについて&darr;&darr;</strong></span><br />
	ＷＥＢ上に表示されるフォントは、ＣＳＳで指定されていますが、各ＰＣによって標準で装備されているフォントが違う為、特殊なフォントを使用しても、観覧車側のＰＣにそのフォントがインストールされていないと、指定したフォントを見る事は出来ません。通常販売している、又は無料でもＷＥＢに長く携わっている人が作ったテンプレートならば、フォント指定は一般的なものになっていると思いますので変更する必要はありません。もし不安な場合はＣＳＳファイルを開き、font-family: を変更してください。</p>
<div class="frame_tag01">font-family: Verdana, Arial, sans-serif;<br />
	又は<br />
	font-family:Verdana,&#39;ヒラギノ角ゴ Pro W3&#39;,sans-serif;</div>
<p>良くある一番ベーシックと思われる指定です。（たぶん）CSS内のbody 内に上記font-family:を記述します。「ヒラギノ角ゴ Pro W3」の様なフォント名にスペースが含まれる場合はダブルクォーテーション「&quot;」かクォーテーション「&#39;」で囲んでください。</p>
<p><span style="color: rgb(255, 0, 0);"><br />
	</span></p>
<p><strong><span style="color: rgb(0, 128, 0);">フォント色とフォントサイズについて&darr;&darr;<br />
	</span></strong>フォント色は背景色とのＳＥＴになってきますが、集客に使いたいのなら背景色は白以外（＃ＦＦＦＦＦＦ）考えられません。デザインサイトなどで使う場合背景に画像を使ったり黒ベースの物が使われる事もありますが、そう言った場合は色相環なども考えて、サイト訪問者が長時間滞在しても疲れない、又は飽きられない色に指定する事が必要です。白ベースの場合は黒（＃000000）だと逆に硬すぎる印象になるので、灰色などをセレクトして訪問者の目が疲れないようにしてあげる配慮も必要ですね。≫<a href="http://www.htmq.com/color/mono256.shtml" target="_blank">ＷＥＢカラーリファレンス</a></p>
<p>
	フォントサイズは px（ピクセル） / pt（パーセント）/em（エム）で指定します。<br />
	タイトル、見出し、記事によってフォントサイズは変えて欲しいのですが、今回は記事（メインコンテンツ）について話します。僕の今の環境では12pxで指定していますが、13pxでも良いと思います。≫<a href="http://www.s-cut.net/memo/archives/web/070523_fontSizeTable/" target="_blank">フォントサイズ早見表　</a><br />
	&nbsp;</p>
<p><span style="color: rgb(255, 140, 0);">小さすぎるフォントは目に疲れを与え、大きすぎるフォントは、記事量が増えた時スクロールが面倒で逆に疲れます。</span>使用者が任意でＰＣ側で調節すれば済む話なのですがデフォルトの状態で出来るだけ誰もが見やすいサイズに設定をしておきましょう。</p>
<p>&nbsp;</p>
<h3>ブロガー必須！改行の仕方を考よう！</h3>
<p>
	実はコレが一番問題だったりする。まずはサンプルをご覧ください&darr;&darr;</p>
<div class="frame_ex01">
<p><strong>サンプル１　改行なし</strong></p>
<p>		ＷＥＢ作成をするにはＸＨＭＬ＆ＣＳＳのスキルは必須です。また活字ばかりではなく訪問者により分かりやすい情報を提供する為にデザインなどのスキルも必要になってきます。人が訪問しないサイトにならない為に分かりやすいサイト作成を心がけたいものですね。</p>
</div>
<div class="frame_ex01">
<p><strong>サンプル2　改行あり</strong></p>
<p>		ＷＥＢ作成をするにはＸＨＭＬ＆ＣＳＳのスキルは必須です。<br />
		また活字ばかりではなく訪問者により分かりやすい情報を提供する為にデザインなどのスキルも必要になってきます。</p>
<p>
		人が訪問しないサイトにならない為に分かりやすいサイト作成を心がけたいものですね。</p>
</div>
<div class="frame_ex01">
<p><strong>サンプル3　改行あり2</strong></p>
<p>		ＷＥＢ作成をするにはＸＨＭＬ＆ＣＳＳのスキルは必須です。<br />
		また活字ばかりではなく訪問者により分かりやすい情報を提供する為に<br />
		デザインなどのスキルも必要になってきます。</p>
<p>
		人が訪問しないサイトにならない為に<br />
		分かりやすいサイト作成を心がけたいものですね。</p>
</div>
<div class="frame_ex01">
<p><strong>サンプル4　改行あり</strong></p>
<p>		ＷＥＢ作成をするにはＸＨＭＬ＆ＣＳＳのスキルは必須です。</p>
<p>
		また活字ばかりではなく訪問者により分かりやすい情報を提供する為に</p>
<p>
		デザインなどのスキルも必要になってきます。</p>
<p>
		人が訪問しないサイトにならない為に</p>
<p>
		分かりやすいサイト作成を心がけたいものですね。</p>
</div>
<p>一番ブログで好ましい物は？と言うと、コンテンツ内容やテンプレートのメインコンテンツ（記事コンテンツ）の幅によっても変わってくるので、それぞれ長短はあります。</p>
<p><span style="color: rgb(255, 140, 0);">ＷＥＢ界は横書きが基本ですので3番目の「サンプル3改行あり２」の様にあまり長すぎない場所で適度に改行するのが僕的には１番良いと思います。</span>４番目の記述は、最近芸能人ブログやmixi,個人ブログで良く見られる改行の仕方ですが見にくい上、記事量が膨大になるとマウスのスクロールが長すぎて、個人的にはＮＧです。先の内容が予測できない事を狙って使う場合以外にはヘッダーに戻るのも面倒ですし、ユーザビリティ上好ましくはないでしょう。</p>
<p>
	僕のこのブログの場合、１つの記事量が膨大な為（なるべくこれでも減らしていますが・・・）1番目「サンプル1　改行なし」と２番目「サンプル2改行あり」をＭＩＸさせて使っています。先にも述べたようにサイトコンテンツ、訪問者の属性、メインコンテンツの幅などなど、環境によって使いやすさや見やすさは違いますので参考までにお考え下さい。</p>
<p>&nbsp;</p>
<h3>テキスト色の使い方</h3>
<p>次に意識するのがテキスト色の選び方です。<br />
	テキスト色もＷＥＢデザインを意識して作成した場合、場合によってはユーザーが目的の情報に辿りつけなかったり、目に負担を与えるなど悪影響も与えます。記事中でも少し話ましたが情報発信サイトで一番理想的だと思われる背景が白ベースだった場合に基本的なテキスト色を以下項目にまとめました。</p>
<p>&nbsp;</p>
<div class="frame_ex01">
<p><span style="color: rgb(0, 128, 0);"><strong>テキスト色</strong></span><br />
		黒又は灰色を基本とする。黒は堅い（しっかりとした）灰色はそれよりも少し柔らかい印象を与える。</p>
<p><span style="color: rgb(0, 128, 0);"><strong>リンク色</strong></span><br />
		リンク色（a:link）はサイト内は必ず統一し他のテキスト色の色は絶対に使用しない。<br />
		どこがリンクが分からないサイトが最近多数あります。推奨リンクは青とする。ＷＥＢデザイン上青に出来ない場合は下線を付けリンクの場所だと訪問者に分かりやすくしておきましょう</p>
<p><span style="color: rgb(0, 128, 0);"><strong>リンク色（マウスが乗った時）<br />
		</strong></span>マウスが乗った時（a:hover）をリンク色（a:link）と別にする事でそこがリンクしている場所であることがより明確になる。決まりはないがコレも同じくサイト内の他のテキスト色と同じ物はなるべくさける。</p>
<p>リンク色（a:link）に下線を使っていない場合は、ここで下線をつける事をお勧めします。尚クリックした時（a:active）は使っても使わなくてもどちらでも良ですが訪問済みリンク（a:visited）は逆に使いづらいので僕は使わない場合が多いです。</p>
<p><span style="color: rgb(0, 128, 0);"><strong>強調</strong></span><br />
		記事中で協調したい部分は太字にする（bold）。ＳＥＯ上リンク部分にboldを使うと効果があるとされていた時代があるが、今はそれほど効果がない。使いすぎは見にくいブログになるので上手くポイントで使いましょう。</p>
<p><span style="color: rgb(0, 128, 0);"><strong>注意して欲しいところ</strong></span><br />
		注意して欲しいところやデンジャーな部分、大切な部分は赤字で書く。超注意事項は更に太字の２段使いにする</p>
</div>
<p>&nbsp;</p>
<p>色にはそれぞれイメージがあって、なんとなく使われているのではなく、きちんとした理論や検証があって使われている場合が多いです。</p>
<p>リンク色などが青系が推奨なのは、ヤフーやグーグルなどの大手サイトで採用されている為、すでに青＝リンクと認識している人がとても多い為で、リンクでもないのに青系のテキストを使用しているサイトやブログに訪問した際、クリック後「何も起こらない」苦い経験をした事がある人も多いでしょう。</p>
<p>
	こちらもサイト構成によってすべて上手くいかない部分もあるとは思いますが、サイト内の統一性だけは厳守して訪問者に好かれるライディング＆構成を心がけたいですね。それではまた/</p>
]]></content:encoded>
			<wfw:commentRss>http://webdesign-monster.com/blog-news-756.html/feed</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

