 http://hukugyouseikatu.com |
|
副業すべし、内職在宅ワークで余裕生活 ＞ ＨＴＭＬの構造とＳＥＯ対策
ＨＴＭＬの構造とＳＥＯ対策 |
| 心構え HTMLの構造 ﾀｲﾄﾙﾀｸﾞ ﾒﾀﾀｸﾞ ﾚｲｱｳﾄ カラー お手本ｻｲﾄ |
ホームページ作成の心構えとは
ＨＴＭＬの構造と解説
ＨＴＭＬの構造
これが基本的なＨＴＭＬの構造です。
まず、最初にＤＴＤ（Ｄｏｃｕｍｅｎｔ Ｔｙｐｅ Ｄｅｆｉｎｉｔｉｏｎ・文書型宣言文）、＜ＨＴＭＬ＞、ヘッダ、ボディー、＜/ＨＴＭＬ＞の順で、ＤＴＤとヘッダに書いてあることはタイトル以外ブラウザには表示されません。ここでのタイトルとは、ブラウザで一番上と一番下のタブに表示されるページの名前です。タイトルはＳＥＯ対策にとても重要なので、ページ内容に最適なキーワードを含めて決めましょう。また、タイトルの中にサイト名など沢山書き込みたくなりますが、解りやすさとＳＥＯを重視してページ名だけに留めておきましょう。
メタタグとはページについての付加情報です。作成者名や作成日、検索エンジンの為のページ紹介文、キーワードなどが入ります。 通常、ＨＴＭＬは開始タグ「<要素>」で始まり、終了タグ「</要素>」で終わらなくてはいけません。
終了タグには必ず「/（スラッシュ）」が入ります。終了タグが要らないのもありますが・・・。
ちなみに、<!--ここから本文-->はコメントなのでブラウザには表示されません。作成者がＨＴＭＬ文章を整理しやすいよう自由に使えます。
| <!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01
Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title>ＨＴＭＬの構造とＳＥＯ対策</title> <meta name="robots" content="INDEX,FOLLOW"> <meta name="description" content="ＨＰがワンランクアップする方法を紹介。"> <meta name="keywords" content="ＨＴＭＬ,ホームページ・・・"> <link href="style.css" rel="stylesheet" type="text/css"> </head> </body> <!--ここから本文--> <h1>１ランクアップするＨＴＭＬ作成講座</h1> <h2>ホームページ作成の心構えとは</h2> ： </body> </html> |
━┓ ┣━ ━┛ ━━━ ━┓ ┐┣━ ｜┃ ┤┃ ﾒﾀ┃ ﾀｸﾞ┃ ┤┃ ｜┃ ｜┃ ┘┃← ━┛ ━┓ ┣━ ┃ ┃ ┃ ━┛ ━━━ |
ＤＴＤ （文書型宣言文） 無くても可。 <ｈｔｍｌ> ヘッダ（head要素）には、この文書に関する情報（タイトルタグ、メタタグ、スタイルシート情報など）が詰め込まれています。 スタイルシート情報。 ボディー（body要素）には、ブラウザに表示されるページの内容を書き込みます。 </ｈｔｍｌ> |
まず、最初にＤＴＤ（Ｄｏｃｕｍｅｎｔ Ｔｙｐｅ Ｄｅｆｉｎｉｔｉｏｎ・文書型宣言文）、＜ＨＴＭＬ＞、ヘッダ、ボディー、＜/ＨＴＭＬ＞の順で、ＤＴＤとヘッダに書いてあることはタイトル以外ブラウザには表示されません。ここでのタイトルとは、ブラウザで一番上と一番下のタブに表示されるページの名前です。タイトルはＳＥＯ対策にとても重要なので、ページ内容に最適なキーワードを含めて決めましょう。また、タイトルの中にサイト名など沢山書き込みたくなりますが、解りやすさとＳＥＯを重視してページ名だけに留めておきましょう。
メタタグとはページについての付加情報です。作成者名や作成日、検索エンジンの為のページ紹介文、キーワードなどが入ります。 通常、ＨＴＭＬは開始タグ「<要素>」で始まり、終了タグ「</要素>」で終わらなくてはいけません。
終了タグには必ず「/（スラッシュ）」が入ります。終了タグが要らないのもありますが・・・。
ちなみに、<!--ここから本文-->はコメントなのでブラウザには表示されません。作成者がＨＴＭＬ文章を整理しやすいよう自由に使えます。
ＳＥＯ的に最も重要視されるタグ ＜ｔｉｔｌｅ＞タグ
＜ｔｉｔｌｅ＞タグは上記の通りページの題名をあらわすタグであり、ＳＥＯ的に最も重要視されるタグです。検索エンジンで表示される際、画面Ａのようにタイトルが大きく表示されて検索した人の注意を引き付けます。
画面A トップページとサブページのタイトルを決める上で理解しておきたいことをまとめてみました。
１．重要なキーワードほど先頭に配置しましょう。
普段、検索エンジンで情報を探す時に、ほとんどの場合複数のキーワードで検索すると思います。その時、一番欲しい情報のキーワードを先頭にしますよね。どのページタイトルも同じことです。ページの中で一番重要なキーワードを先頭にしておけば、検索エンジンで上位表示されてアクセスアップにつながります。 たまに、「○○の内職日記」のような個人の名前やあだ名が入ったサイトを見かけます。（マーヤも最初のサイトはこうでしたが・・・）人名を入れてしまうと、その名前がわかる人以外は検索できませんし、ＳＥＯ的に不利になってしまいます。この場合の人名は諦めて、ＳＥＯに有利になるタイトルにすることをオススメします。
ちなみに、当サイトのトップページ名「副業すべし、内職在宅ワークで余裕生活」は、１番「副業」、２番「内職」、３番｢在宅ワーク」で検索してほしかったのでこの名前に決めました。そして生活がかかっているから「生活」、余裕が欲しいから「余裕」、決め手に欠けたので「すべし、」を付けました。 ２．タイトルの中の重要なキーワードが占める割合について。
副業すべし、内職在宅ワークで余裕生活（１８文字）の中で、重要なキーワード「副業、内職、在宅ワーク」（９文字）と、それ以外の「すべし、、で、余裕生活」（９文字）を割合にすると 、重要なキーワードは５０％になります。重要なキーワードだけを羅列しただけでは文章にならないので、それを補う文字が必要ですが、肝心な割合が少なくならないように、そしてタイトルが短すぎず長すぎないように注意して決めましょう。サブページも同様ですよ。 ３．トップページタイトルは１度決めたら変えない。
トップページ名つまりサイト名だけは１度決めてしまったら変えられません。サブページは自由に変えられますが、トップページ名は相互リンクや検索エンジンに登録するので相手サイトに残ります。トップページ名を変えるとなると、すべての相手サイトにページ名変更のお願いをしなくてはなりません。登録したサイト数が多いほどこの作業は時間がかかりますし、相手サイトにも貴重な時間を費やすので迷惑がかかります。さらに当サイトのような商用サイトの場合、ＡＳＰやリンクスタッフ、ポイント獲得サイトまで変更が及びます。
以上のことを踏まえて、トップページタイトルは慎重に考えて決めるようにしましょう。 ４．トップページタイトルで差別化を図る。
当サイトのような商用系（お小遣い系・内職系・在宅ワーク系等）のサイトは非商用サイトに比べて類似しているサイトがとても多いです。どれもお金を稼ぐことに変わりはないのですが、やること（ポイント獲得・ＡＳＰなどの紹介）が同じなのでやっぱり似通ってしまいます。それでも差別化したい時、どこにオリジナリティーを求めるかというと、トップページタイトルや独自のコンテンツ、ページデザイン等になると思います。では、トップページタイトルにオリジナリティーを出す際、どのような名前が良いのかというと、
４−１．相手にインパクトを与えるトップページタイトルで差別化
どのような言葉が相手にインパクトを与えるのでしょうか。マーヤが知っている内職系サイトの中で、最もインパクトを受けたタイトルは、金持ち兄さんへの道-ネット内職/株式投資-さんと、＋内職！節約！迷わず行けよ！！さんです。金持ち兄さんって？、迷わず行けよ！！って？どちらもスゴイタイトルですよね。普通なら付けませんよ。それでもあえてそうしたタイトルを付けるということは、名前負けしない自信と技術、プライド、内容等があるからだと思います。（言っておきますが、両サイトはマーヤにとって目標であり尊敬しています。決してけなしているワケではないので・・・念の為。）
ということは、相手にインパクトを与えるタイトルとは、誰もが思いもつかなかったような、誰も使わないような言葉が入ったタイトルということになります。でも、キチンとした裏づけ（コンテンツや技術）が無いと、ただの内容が無い物珍しいタイトルになってしまいます。 ４−２．覚えやすいトップページタイトルで差別化
マーヤが考える覚えやすいタイトルとは、「独特の言葉が入っているタイトル」、「タイトルだけでサイトの内容が判断できる」、「要点だけをまとめた簡単なタイトル」、「他と類似していないオリジナルのタイトル」等だと思います。 ４−３．ＳＥＯ対策を考慮したページタイトルで差別化
「ＳＥＯ対策を考慮したタイトル」とは、重要なキーワードを埋め込んだタイトルということです。ロボット型検索エンジンのロボットはページの中でタイトルを最重要視しますので、検索してもらいたいキーワードをタイトルの中に入れましょう。 ４−４．ある程度長めのトップページタイトルで差別化
この「ある程度長めのタイトル」と４−２の「要点だけをまとめた簡単なタイトル」とは相反していますが、トップページは少し長めのタイトルのほうが人は思い出しやすいのです。何かを忘れた時、重要なキーワードを手がかりに思い出すと、後からどんどん出てきた経験がありますよね。その手がかりが多ければ多いほど思い出しやすくなります。
また、言葉が長い場合、人は省略して記憶します。一番重要なキーフレーズを記憶させるように名付ければ、人は芋づる式にすべてを思い出すわけです。当サイトの場合、「副業すべし」が一番重要なキーフレーズなので、先頭に配置しました。
逆に短い場合、「副業内職在宅ワーク」にするとタイトルに特徴が無く、ありふれた名前なので誰のサイトなのかが解らなくなり、また覚えにくくなってしまいます。 長すぎても短すぎてもダメなので、丁度良い１５文字前後でキーワードは４〜６個くらいが適当とされていますので、よく考えて決めましょう。
画面A トップページとサブページのタイトルを決める上で理解しておきたいことをまとめてみました。
１．重要なキーワードほど先頭に配置しましょう。
普段、検索エンジンで情報を探す時に、ほとんどの場合複数のキーワードで検索すると思います。その時、一番欲しい情報のキーワードを先頭にしますよね。どのページタイトルも同じことです。ページの中で一番重要なキーワードを先頭にしておけば、検索エンジンで上位表示されてアクセスアップにつながります。 たまに、「○○の内職日記」のような個人の名前やあだ名が入ったサイトを見かけます。（マーヤも最初のサイトはこうでしたが・・・）人名を入れてしまうと、その名前がわかる人以外は検索できませんし、ＳＥＯ的に不利になってしまいます。この場合の人名は諦めて、ＳＥＯに有利になるタイトルにすることをオススメします。
ちなみに、当サイトのトップページ名「副業すべし、内職在宅ワークで余裕生活」は、１番「副業」、２番「内職」、３番｢在宅ワーク」で検索してほしかったのでこの名前に決めました。そして生活がかかっているから「生活」、余裕が欲しいから「余裕」、決め手に欠けたので「すべし、」を付けました。 ２．タイトルの中の重要なキーワードが占める割合について。
副業すべし、内職在宅ワークで余裕生活（１８文字）の中で、重要なキーワード「副業、内職、在宅ワーク」（９文字）と、それ以外の「すべし、、で、余裕生活」（９文字）を割合にすると 、重要なキーワードは５０％になります。重要なキーワードだけを羅列しただけでは文章にならないので、それを補う文字が必要ですが、肝心な割合が少なくならないように、そしてタイトルが短すぎず長すぎないように注意して決めましょう。サブページも同様ですよ。 ３．トップページタイトルは１度決めたら変えない。
トップページ名つまりサイト名だけは１度決めてしまったら変えられません。サブページは自由に変えられますが、トップページ名は相互リンクや検索エンジンに登録するので相手サイトに残ります。トップページ名を変えるとなると、すべての相手サイトにページ名変更のお願いをしなくてはなりません。登録したサイト数が多いほどこの作業は時間がかかりますし、相手サイトにも貴重な時間を費やすので迷惑がかかります。さらに当サイトのような商用サイトの場合、ＡＳＰやリンクスタッフ、ポイント獲得サイトまで変更が及びます。
以上のことを踏まえて、トップページタイトルは慎重に考えて決めるようにしましょう。 ４．トップページタイトルで差別化を図る。
当サイトのような商用系（お小遣い系・内職系・在宅ワーク系等）のサイトは非商用サイトに比べて類似しているサイトがとても多いです。どれもお金を稼ぐことに変わりはないのですが、やること（ポイント獲得・ＡＳＰなどの紹介）が同じなのでやっぱり似通ってしまいます。それでも差別化したい時、どこにオリジナリティーを求めるかというと、トップページタイトルや独自のコンテンツ、ページデザイン等になると思います。では、トップページタイトルにオリジナリティーを出す際、どのような名前が良いのかというと、
- 相手にインパクトを与えるタイトル
- 覚えやすいタイトル
- ＳＥＯ対策を考慮したタイトル
- ある程度長めのタイトル
４−１．相手にインパクトを与えるトップページタイトルで差別化
どのような言葉が相手にインパクトを与えるのでしょうか。マーヤが知っている内職系サイトの中で、最もインパクトを受けたタイトルは、金持ち兄さんへの道-ネット内職/株式投資-さんと、＋内職！節約！迷わず行けよ！！さんです。金持ち兄さんって？、迷わず行けよ！！って？どちらもスゴイタイトルですよね。普通なら付けませんよ。それでもあえてそうしたタイトルを付けるということは、名前負けしない自信と技術、プライド、内容等があるからだと思います。（言っておきますが、両サイトはマーヤにとって目標であり尊敬しています。決してけなしているワケではないので・・・念の為。）
ということは、相手にインパクトを与えるタイトルとは、誰もが思いもつかなかったような、誰も使わないような言葉が入ったタイトルということになります。でも、キチンとした裏づけ（コンテンツや技術）が無いと、ただの内容が無い物珍しいタイトルになってしまいます。 ４−２．覚えやすいトップページタイトルで差別化
マーヤが考える覚えやすいタイトルとは、「独特の言葉が入っているタイトル」、「タイトルだけでサイトの内容が判断できる」、「要点だけをまとめた簡単なタイトル」、「他と類似していないオリジナルのタイトル」等だと思います。 ４−３．ＳＥＯ対策を考慮したページタイトルで差別化
「ＳＥＯ対策を考慮したタイトル」とは、重要なキーワードを埋め込んだタイトルということです。ロボット型検索エンジンのロボットはページの中でタイトルを最重要視しますので、検索してもらいたいキーワードをタイトルの中に入れましょう。 ４−４．ある程度長めのトップページタイトルで差別化
この「ある程度長めのタイトル」と４−２の「要点だけをまとめた簡単なタイトル」とは相反していますが、トップページは少し長めのタイトルのほうが人は思い出しやすいのです。何かを忘れた時、重要なキーワードを手がかりに思い出すと、後からどんどん出てきた経験がありますよね。その手がかりが多ければ多いほど思い出しやすくなります。
また、言葉が長い場合、人は省略して記憶します。一番重要なキーフレーズを記憶させるように名付ければ、人は芋づる式にすべてを思い出すわけです。当サイトの場合、「副業すべし」が一番重要なキーフレーズなので、先頭に配置しました。
逆に短い場合、「副業内職在宅ワーク」にするとタイトルに特徴が無く、ありふれた名前なので誰のサイトなのかが解らなくなり、また覚えにくくなってしまいます。 長すぎても短すぎてもダメなので、丁度良い１５文字前後でキーワードは４〜６個くらいが適当とされていますので、よく考えて決めましょう。
ロボット型検索エンジン等に対してページ情報を教えるタグ ＜ｍｅｔａ＞タグ
＜ｍｅｔａ＞タグはロボット型検索エンジンのロボット（クローラまたはスパイダー）やブラウザにページの情報を教えるタグです。ここでは一般的でＳＥＯ対策上重要なメタタグについて解説したいと思います。
上記の「ＨＴＭＬの構造」にあるメタタグの一段目、
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
これは文字コードを指定しています。赤で示してある部分はこの場合「シフトＪＩＳ」ですが、他に「ＥＵＣ」の場合は「charset=euc-jp」、「ＪＩＳ」の場合は「charset=iso-2022-jp」を指定します。
ここで文字コードを指定しているので、日本語を使用しても良いのはこの後になります。仮に、文字コードの前に日本語を使用するとどうなるのか？。結果は文字化けを起こす可能性があります。
また、ＨＴＭＬ文章の中で文字コードの指定が最も適した場所は＜ｈｅａｄ＞の直後とされています。 次の二段目、
<meta name="robots" content="INDEX,FOLLOW">
これはロボット型検索エンジンのロボットに対してデータベースへの登録とページ内のリンクを辿ることを許可するという意味です。「ＩＮＤＥＸ」はデータベースへの登録許可。「ＦＯＬＬＯＷ」はリンクを辿ることを許可します。また、「ＮＯＩＮＤＥＸ」にするとデータベースへの登録を許可しない。「ＮＯＦＯＬＬＯＷ」にするとリンクを辿ることを許可しないとなります。通常の場合「ＩＮＤＥＸ，ＦＯＬＬＯＷ」にしておけば問題ありません。 三段目、
<meta name="description" content="ＨＰが・・・">
これはページの紹介文です。「content="○○"」の部分に全角１００文字程度の紹介文を記入します。あまりに長すぎても検索エンジンに無視されてしまいます。この紹介文は＜ｔｉｔｌｅ＞タグの解説の中の画面Ａのページ名の下（副業すべし、内職在宅ワークで余裕生活は、副業、ネット内職（お小遣い稼ぎ・ポイント獲得・・・など詳しく丁寧に解説した情報・・・）のように表示され、検索した人がページに訪れるかどうかの重要な判断材料になりますので、重要なキーワードを含めながら慎重に決めましょう 四段目、
<meta name="keywords" content="ＨＴＭＬ,ホームページ・・・">
これは重要なキーワードを「,」(半角カンマ）で区切りながら全角５００文字程度に羅列していきます。しかし、長すぎるとＳＰＡＭになる可能性があるので、キーワードは８〜１０個が良いとされています。また、優先したい重要なキーワードほど先頭に配置しましょう。 五段目、
<link href="style.css" rel="stylesheet" type="text/css">
これはメタタグではなくてリンク要素です。スタイルシート（style.css）が別ファイルな為、そのファイルを呼び出して、ＨＴＭＬ文書と同じ階層にスタイルシート文書がある時に使います。
<link href="abc/style.css" rel="stylesheet" type="text/css">
この場合は「ａｂｃ」フォルダ内のスタイルシートを使う時の書き方です。
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
これは文字コードを指定しています。赤で示してある部分はこの場合「シフトＪＩＳ」ですが、他に「ＥＵＣ」の場合は「charset=euc-jp」、「ＪＩＳ」の場合は「charset=iso-2022-jp」を指定します。
ここで文字コードを指定しているので、日本語を使用しても良いのはこの後になります。仮に、文字コードの前に日本語を使用するとどうなるのか？。結果は文字化けを起こす可能性があります。
また、ＨＴＭＬ文章の中で文字コードの指定が最も適した場所は＜ｈｅａｄ＞の直後とされています。 次の二段目、
<meta name="robots" content="INDEX,FOLLOW">
これはロボット型検索エンジンのロボットに対してデータベースへの登録とページ内のリンクを辿ることを許可するという意味です。「ＩＮＤＥＸ」はデータベースへの登録許可。「ＦＯＬＬＯＷ」はリンクを辿ることを許可します。また、「ＮＯＩＮＤＥＸ」にするとデータベースへの登録を許可しない。「ＮＯＦＯＬＬＯＷ」にするとリンクを辿ることを許可しないとなります。通常の場合「ＩＮＤＥＸ，ＦＯＬＬＯＷ」にしておけば問題ありません。 三段目、
<meta name="description" content="ＨＰが・・・">
これはページの紹介文です。「content="○○"」の部分に全角１００文字程度の紹介文を記入します。あまりに長すぎても検索エンジンに無視されてしまいます。この紹介文は＜ｔｉｔｌｅ＞タグの解説の中の画面Ａのページ名の下（副業すべし、内職在宅ワークで余裕生活は、副業、ネット内職（お小遣い稼ぎ・ポイント獲得・・・など詳しく丁寧に解説した情報・・・）のように表示され、検索した人がページに訪れるかどうかの重要な判断材料になりますので、重要なキーワードを含めながら慎重に決めましょう 四段目、
<meta name="keywords" content="ＨＴＭＬ,ホームページ・・・">
これは重要なキーワードを「,」(半角カンマ）で区切りながら全角５００文字程度に羅列していきます。しかし、長すぎるとＳＰＡＭになる可能性があるので、キーワードは８〜１０個が良いとされています。また、優先したい重要なキーワードほど先頭に配置しましょう。 五段目、
<link href="style.css" rel="stylesheet" type="text/css">
これはメタタグではなくてリンク要素です。スタイルシート（style.css）が別ファイルな為、そのファイルを呼び出して、ＨＴＭＬ文書と同じ階層にスタイルシート文書がある時に使います。
<link href="abc/style.css" rel="stylesheet" type="text/css">
この場合は「ａｂｃ」フォルダ内のスタイルシートを使う時の書き方です。
トップページのレイアウトについて
ここから紹介するのは、内職系やお小遣い系、在宅ワーク系等の商用サイトのレイアウトの解説です。趣味のホームページや自己紹介等の一般のホームページには当てはまらない可能性がありますが、参考にしていただければ光栄です。
商用系ページのレイアウトで１番重要なのは、「見やすいことと解りやすいこと」です。大抵の内職系サイトのレイアウトが似ているのは、見やすく解りやすいことが証明されているからです。他には無い独自のレイアウトで差別化するのもＯＫですが、他のサイトと似ていても一向に構いません。独自のレイアウトを作っても訪問者が戸惑うよりは他のサイトと似ていて戸惑わないほうが大切です。
そこで、代表的なトップページのレイアウトをまとめてみました。
まず始めに視線が止まる左上に重要なタイトルを配置して、訪問者にどのようなホームページなのか全体像を示します。視線を右に移して更新情報や紹介文で最近の更新記録、もしくは紹介文で大まかなページ概要を確認してもらいます。、左下に視線を落としつつ紹介文やメニューでホームページの内容やホームページ構成を確認して、最後にコンテンツを見てどんな内容があるのかを知ってもらいます。
このように訪問者の視線を意識して作成すると、大まかなレイアウトが自然に決まってきますのでレイアウトが似てくるのです。一般的な非商用サイトの場合はホームページを審査されたりすることが少なく、ＳＥＯ対策はそれほど必要ではありませんが、商用サイトの場合は生命線とも言えるべき重要なことです。見やすい・解りやすいレイアウトはアクセスアップにも繋がりますので、お手本にしたいサイトを見つけて参考にするのが良いと思います。 また、１番上の検索エンジン用テキストは訪問者にとってそれほど重要ではありませんが、ロボット型検索エンジン対策及び、ＳＥＯ対策として重要でなテキストなので、タイトルの上に配置するのが一般的です。このテキストにはページの中で重要なキーワードをいくつか入れた文章を記入しておきます。
商用系ページのレイアウトで１番重要なのは、「見やすいことと解りやすいこと」です。大抵の内職系サイトのレイアウトが似ているのは、見やすく解りやすいことが証明されているからです。他には無い独自のレイアウトで差別化するのもＯＫですが、他のサイトと似ていても一向に構いません。独自のレイアウトを作っても訪問者が戸惑うよりは他のサイトと似ていて戸惑わないほうが大切です。
そこで、代表的なトップページのレイアウトをまとめてみました。
まず始めに視線が止まる左上に重要なタイトルを配置して、訪問者にどのようなホームページなのか全体像を示します。視線を右に移して更新情報や紹介文で最近の更新記録、もしくは紹介文で大まかなページ概要を確認してもらいます。、左下に視線を落としつつ紹介文やメニューでホームページの内容やホームページ構成を確認して、最後にコンテンツを見てどんな内容があるのかを知ってもらいます。
このように訪問者の視線を意識して作成すると、大まかなレイアウトが自然に決まってきますのでレイアウトが似てくるのです。一般的な非商用サイトの場合はホームページを審査されたりすることが少なく、ＳＥＯ対策はそれほど必要ではありませんが、商用サイトの場合は生命線とも言えるべき重要なことです。見やすい・解りやすいレイアウトはアクセスアップにも繋がりますので、お手本にしたいサイトを見つけて参考にするのが良いと思います。 また、１番上の検索エンジン用テキストは訪問者にとってそれほど重要ではありませんが、ロボット型検索エンジン対策及び、ＳＥＯ対策として重要でなテキストなので、タイトルの上に配置するのが一般的です。このテキストにはページの中で重要なキーワードをいくつか入れた文章を記入しておきます。
トップページの色について
１．トップページ全体の色
トップページもサブページも見やすいことを第１に考え、あまり派手に何色も使わないようにしましょう。また、暖色系の色を使うなら暖色系に、寒色系を使うなら寒色系に色を統一して、ページ全体の色を最初に決めましょう。 ２．壁紙
トップページはページ全体の顔であり、「人形は顔が命です」同様、見やすく解りやすくなくてはなりません。壁紙に赤や青等の原色は使わずに、文章を引き立てる白や淡い色を使いましょう。出来るなら壁紙は使わないほうが良いですね。理由は訪問者の視線を文章に固定できなくなり、せっかく書いた長い文章を途中で視線をそらしてしまうからです。そうすると、クリックされる数が少なくなってしまいますので、壁紙は無しか淡色にして訪問者の視線を文章に釘付けにさせましょう。 ３．テキストの色
テキストの色は基本的に「黒」がベストです。壁紙や背景を白か淡色にして、テキストの色を黒にすると読みやすく目が疲れません。また、文字同士の上下・左右の間隔はある程度離れていたほうが読みやすく、左右よりも上下の間隔を多めにとったほうがいいでしょう。 ４．テキストリンクの色
テキストリンクの色は明るい青（＃００００ＦＦ）にアンダーラインが一般的です。この方法が一番解りやすく、どのサイトでも同じなので訪問者が戸惑いません。アンダーラインが無かったり、一見してリンクが分からないような色では訪問者に無駄な時間を与えてしまいます。 ５．タイトル画像
タイトルの画像（ロゴ）はサイトを代表する顔です。ロゴだけでそのサイトの名前や種類、内容までわかってしまうのでとても重要です。ロゴを作っているとついつい複雑にカッコ良くしようと思ってしまいますが、シンプルで解りやすく、何より軽い（容量が少ない）のが１番です。当サイトのロゴは、せいぜい３ＫＢ程度しかありません。ソフトはＯＳに付属しているペイントソフトで作りました。立派なロゴを作っても表示するのに時間がかかっては本末転倒ですので、色数は少なく、軽いことを重視して作りましょう。
ちなみに、当サイトのタイトルロゴはバナーの規格サイズ「２３４×６０ピクセル」で作成しました。
トップページもサブページも見やすいことを第１に考え、あまり派手に何色も使わないようにしましょう。また、暖色系の色を使うなら暖色系に、寒色系を使うなら寒色系に色を統一して、ページ全体の色を最初に決めましょう。 ２．壁紙
トップページはページ全体の顔であり、「人形は顔が命です」同様、見やすく解りやすくなくてはなりません。壁紙に赤や青等の原色は使わずに、文章を引き立てる白や淡い色を使いましょう。出来るなら壁紙は使わないほうが良いですね。理由は訪問者の視線を文章に固定できなくなり、せっかく書いた長い文章を途中で視線をそらしてしまうからです。そうすると、クリックされる数が少なくなってしまいますので、壁紙は無しか淡色にして訪問者の視線を文章に釘付けにさせましょう。 ３．テキストの色
テキストの色は基本的に「黒」がベストです。壁紙や背景を白か淡色にして、テキストの色を黒にすると読みやすく目が疲れません。また、文字同士の上下・左右の間隔はある程度離れていたほうが読みやすく、左右よりも上下の間隔を多めにとったほうがいいでしょう。 ４．テキストリンクの色
テキストリンクの色は明るい青（＃００００ＦＦ）にアンダーラインが一般的です。この方法が一番解りやすく、どのサイトでも同じなので訪問者が戸惑いません。アンダーラインが無かったり、一見してリンクが分からないような色では訪問者に無駄な時間を与えてしまいます。 ５．タイトル画像
タイトルの画像（ロゴ）はサイトを代表する顔です。ロゴだけでそのサイトの名前や種類、内容までわかってしまうのでとても重要です。ロゴを作っているとついつい複雑にカッコ良くしようと思ってしまいますが、シンプルで解りやすく、何より軽い（容量が少ない）のが１番です。当サイトのロゴは、せいぜい３ＫＢ程度しかありません。ソフトはＯＳに付属しているペイントソフトで作りました。立派なロゴを作っても表示するのに時間がかかっては本末転倒ですので、色数は少なく、軽いことを重視して作りましょう。
ちなみに、当サイトのタイトルロゴはバナーの規格サイズ「２３４×６０ピクセル」で作成しました。
お手本サイトを徹底的に研究しよう
マーヤがトップページをお手本にしたいサイトをまとめてみましたので参考にしてみてください。
- Ｇｏｏｇｌｅ（グーグル）
言わずと知れた検索エンジン最大手のグーグルです。トップページも検索結果ページも非常にシンプルですよね。必要なことを必要なだけ表示して、無駄が一切無いレイアウトです。背景色も白一色と一部の青色系しか使っていません。これは見習えますね。無駄が無い分視線が固定されて使いやすく、目が疲れないのが良いですね。 - Ｙａｈｏｏ！ Ｊａｐａｎ
ご存知、ヤフー！ジャパンです。膨大な情報量を簡単に見えて実は考えられたレイアウトで整然と配置しています。中央は枠線が無いのに「見えない線」でキチンと区切られていますよね。あなたには「見えない線」が見えるでしょうか？。 - Ａｍａｚｏｎ．ｃｏ．ｊｐ
アマゾンは「さすが老舗」と感じさせるレイアウトですね。カテゴリを上部に色分けして配置し、見たい商品をすぐに探し出せます。利用者に無駄な時間と無駄なクリックを与えないようにして、気になるポイントを押さえた商品を配置しています。 - Ｈｏｎｄａ
サイト管理人ならば一度は是非見ておいて下さい。随所に工夫が施されたホンダのサイトは見ているだけで楽しくなってしまいます。ヤフーとは正反対に思えるデザインですが、利用しやすさは同じ位に便利に作られていると思いますよ！。
SEO効果があるﾀｸﾞの使い方当サイトの内容の一部または全てのテキスト、画像等の無断転載・無断使用を禁止します。
Copyright© 2006
副業すべし、内職在宅ワークで余裕生活 All Rights Reserved.