京都市 ホームページ制作 会社 / アクセシビリティ・ユーザビリティ配慮
メルマガバックナンバー13
パンくずリストで現在位置を示し迷わないサイトを作る vol.13
【2006.11.28 vol.13】毎月第2・4火曜日発行
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
障害者や高齢者をはじめ、誰もがアクセス可能なホームページについて
考えるwebアクセシビリティは、検索エンジン（SEO）対策に最も効果的です。
顧客拡大、売上増のための「アクセシビリティとSEOの融合」やホームページ
作成について出来るだけ簡単に解説いたします。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
いつも当メルマガをお読みいただき、ありがとうございます。
レボネットでは、ホームページ制作のご紹介をいただいた方に制作費の
10%以上、ご紹介された方にも5%をキャッシュバックする制度を
スタートさせました。お近くにホームページ制作をお考えの方が
いらっしゃいましたらご相談ください。
ビジネスパートナー募集サイトはこちら →http://www.revonet.co.jp/bp
サービス案内サイトREVOplusはこちら →http://plus.revonet.co.jp
私、坂井のブログでは、アクセシビリティ、SEO対策、ホームページ
制作等について日常の業務や出来事と絡めて書いております。
レボネットのスタッフブログはこちら
→http://blog.livedoor.jp/revonet_sakai
このメルマガではこれからのインターネット環境やウェブサイトにとって
必要不可欠なアクセシビリティ対策を中心に、検索エンジンで上位表示を
実現するSEO(検索エンジン最適化)対策と絡めてご説明します。
SEO効果の高いアクセシビリティ対策を施したホームページ制作に
ついてお気軽にご相談ください。
■■ レボネット株式会社 電話番号 075-344-3348 ■■
□アクセシビリティとSEOの関連について□
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
目次 ・パンくずリストで現在位置を示し迷わないサイトを作る
・初歩からのアクセシビリティ・SEO対策実践講座（header編）
・編集後記
発行元・レボネット株式会社
坂井 和広
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
第1号のメルマガでは、簡単にSEOとアクセシビリティの用語説明をしました。
まだ、アクセシビリティという言葉を聞いたこともないという方は
当メルマガの第1号バックナンバーをご覧ください。
アクセシビリティの用語説明はこちら
→http://plus.revonet.co.jp/backnumber_1.html
■パンくずリストで現在位置を示し迷わないサイトを作る
本日はアクセシビリティとSEO対策に共通して効果のあるパンくずリストに
ついて、ご説明します。
パンくずリストという名称を、初めて聞く方はピンとこないかもしれません
ので、まずは用語説明をします。
パンくずリストとは、別名トピックパス（topic path）とも呼ばれ、
ウェブサイト上の現在位置を、上位階層のページへのリンクのリストで
簡潔に記述したものです。
それはページ内で迷わないように、現在位置を簡潔に示した適切な
ナビゲーションと言えます。
具体的には
現在位置：ホーム＞サービス一覧＞ホームページ制作＞アクセシビリティ
といった具合に上位階層のページにはリンクを貼り、ページを開いた
瞬間にわかるように、また、音声ブラウザを利用している方にも
コンテンツを閲覧する前に現在位置を把握できるようにページ上部に
記載すると効果的です。
パンくずリストを設置している、レボネットのサービス案内サイト
REVOplusのアクセシビリティのページを一度、ご覧ください。
→http://plus.revonet.co.jp/access.html
このアクセシビリティのページは、ホームのサービス一覧メニュー内、
サービス一覧の中のホームページ制作のカテゴリに入っていることを
示しています。
次にパンくずリストについて、JIS X8341-3ウェブコンテンツJISに
記載されていますので、今回もそちらを参照します。
----------------ここから引用----------------------------------
閲覧しているページがウェブサイトの構造のどこに位置しているか
把握できるように、階層などの構造を示した情報を提供することが
望ましい。
参考 作業の中断などによって、それまでの操作の記憶があいまいに
なり、現在の位置の把握又は作業の目的が分からなくなる場合がある。
ウェブサイトの構造の中での順路と、現在位置をテキストの順序
などで表現する、リストなどを提供する。
トップページ＞製品一覧＞加工食品＞ハム＞ボンレスハム
----------------ここまで引用----------------------------------
以上のように示されています。
コンテンツを閲覧し、違うページも見たい、このページはどのページ
だったのかな、と思った時に初めて訪れるサイトの訪問者は迷って
しまう場合がありますが、ページ全体の現在位置をパンくずリストで
示すことで、サイト構成や現在位置を理解できるようになります。
大規模なウェブサイトであれば、大きなカテゴリに分かれ、その下に
いくつかの小カテゴリ、個別ページという形で階層構造で複雑であるため
パンくずリストでナビゲーションし、管理するとよりわかりやすくなります。
問題点としては、パンくずリストはこの階層の他にどんなカテゴリがある
のか、同じカテゴリ内に他にどんなページがあるのか表現できないことや、
階層が深くなると、目的のページまでたどり着くのにクリック数が多く
なるなどが挙げられます。
特に初めての訪問者の場合は、目的のページが、どこにあるのか
わからない場合がありますので、パンくずリストだけではなく、
メニューや、サイトマップを用いて欠点を補うことで、ウェブサイト
全体のユーザビリティを高める必要があります。
そのような問題点はありますが、検索などで、トップページではない
個別ページに直接アクセスした場合でも、パンくずリストがあれば
サイト構成や現在位置を容易に把握することができます。
制作者側にとっては、階層を明確に分離できるためファイルの管理も
しやすくなります。
また、カテゴリごとを示すテキストをリンクすることで、クリック
すると階層ごとのページにとべますので、どこにいるのかわからなく
なったり、どうやって現在のページにたどり着いたかわからなく
なってしまっても、現在位置を確認し、いつでもトップページに
戻ったり、上位の階層やカテゴリに戻って他のページを閲覧する
ことができます。
音声ブラウザ利用者にとっては、ページタイトルが最初に読み上げられ、
コンテンツを閲覧し、他のページにとんでしまった場合や、どのページを
閲覧しているかわからなくなった場合でも、現在のページを把握できる
ため、良い手がかりとなります。
ただ単に、
ホーム＞アクセシビリティ
とすることよりも、
現在位置 ホーム＞アクセシビリティ
と記載する方が、ただのテキストではなく、現在位置を示しているのだと
わかりやすいので、"現在位置"と記載した方が音声ブラウザ利用者に
とってはより親切であると思います。
以上のようにパンくずリストはアクセシビリティ・ユーザビリティの
観点で重要でありますが、それだけでなく以下のようにSEOの効果も
高めます。
SEOの観点から主に次の3つのメリットがあります。
1.サイト内リンク
パンくずリストを設置することで、サイト内におけるリンクを
張り巡らせることになり、重要な階層のページにリンクが集まり、
検索エンジンに、関連の深いキーワードやページを適切に伝える
ことができます。
2.適切なクロール
パンくずリストで階層のリストを表示し、リンクしますので、
検索エンジンのクロールが適切におこなわれ、サイト内のページ情報を
読み取りやすくなります。
3.キーワード率のアップ
キーワードを盛り込んだカテゴリを全ページのパンくずリストに
記載することで、ページ内、またはページ全体のキーワード率が
アップします。
具体的には、
現在位置 ホーム＞ホームページ制作＞アクセシビリティ
現在位置 ホーム＞ホームページ制作＞ユーザビリティ
などとした場合、ホームページ制作のカテゴリのページ全てに
ホームページ制作というテキストが記載され、キーワードが増え、
検索エンジンに主要なキーワードがわかりやすくなります。
このように、パンくずリストはウェブサイト全体のナビゲーションを
大きく向上させ、アクセシビリティ・ユーザビリティに配慮した
作りになるだけでなく、SEO対策としても効果がありますので、
是非、全てのページに設置し、ホームページの質を高めてください。
■初歩からのアクセシビリティ・SEO対策実践講座（header編）------------
ここからは初歩的なことからアクセシビリティ対策・SEO対策の実践方法に
ついて、ご説明していきます。本日はheaderについてです。
以下にヘッダーや、コンテンツをわかりやすく記載をしたソースを
示しております。ファイル名をindex.htmlとして保存してください。
本日はヘッダー部分をお伝えします。
<?xml version="1.0" encoding="shift_jis"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta name="Keywords" content="ここにキーワード10個を目安に記載" />
<meta name="Description" content="ここにホームページの紹介文を記載" />
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis" />
<title>ここにタイトルを記載</title>
<link rel="stylesheet" type="text/css" href="site.css" />
</head>
<body>
<!--▽ ここからヘッダー -->
<div id="header">
<a href="index.html">
<img src="images/logo.gif" alt="ロゴ" width="400" height="80" id="logo" />
</a>
</div>
<!--▲ ヘッダーここまで -->
<!--▽ ここからコンテンツ -->
<h1>一番重要な見出し1(大見出し)</h1>
<p>見出し1の<strong>内容</strong></p>
<!--▲ コンテンツここまで -->
</body>
</html>
ここからヘッダーからヘッダーここまでの部分で、幅400、高さ80の
画像を置き、そのロゴ画像にホームへのリンクを貼りました。
幅400、高さ80のロゴ画像を作り、ファイル名をlogo.gifとします。
幅775、高さ90のヘッダー画像を作り、ファイル名をheader.gifとします。
その画像をindex.htmlと同じ階層に画像参照用のimagesフォルダを作り、
そのフォルダの中に入れます。
そして、スタイルシートのsite.cssに以下のように記載します。
#header {
background-color: #FFFFFF;
border-color: #333333;
background-repeat: no-repeat;
background-image: url(images/header.gif);
height: 90px;
}
このCSSファイルでは、背景（background-color）に白（ #FFFFFF）を
指定し、それに対応して文字の色を黒（#333333）に、背景にヘッダー画像
（header.gif）を置いております。
ヘッダー画像はCSSで読み込むように背景にし、ホームにリンクを貼った
ロゴを置いたheader部分を作りました。
headerを背景に置いたところで本日のメルマガはここまで。
次回からも"SEOとアクセシビリティの融合"について、なぜ”検索エンジン
対策に最も効果的”なのか基本的事項から順に詳しくお伝えします。
さらに、初歩からわかるようにアクセシビリティ・SEO対策の基本的な
対策方法を"初歩からのアクセシビリティ・SEO対策実践講座"と題して
具体的に掲載していきます。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
情報格差をなくすための障害者や高齢者に配慮したアクセシビリティ対策や
長期的な検索エンジン対策に最も有効なXHTML・CSSコーディング、顧客拡大・
売上増のための検索キーワードを意識したSEO対策など、「アクセシビリティ
とSEOの融合」を図り、web標準に準拠した最も新しいホームページを制作
いたします。
【レボネット株式会社サービス案内サイトREVOplus】
→ http://plus.revonet.co.jp
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■SEO・アクセシビリティ対策済 ホームページ制作をご依頼の場合
20ページまで 207,900円（税込）
※企画・構成等が含まれております。
こちらは特別モニター価格となっておりますので、実績、ご感想などを
ホームページ上で公開させていただきます。
★ご紹介者・被紹介者の両方にキャッシュバック
ホームページ制作をご紹介いただいた方に制作費の10%、被紹介者の方に
5%を還元いたします。詳しくはこちらをご覧ください。
→http://www.revonet.co.jp/bp
ご依頼・お見積もり・お問い合わせ・ご紹介はsakai@revonet.co.jpまで
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【編集後記】
---------------------------------------------------------------------
早いもので11月も終わりを迎え、今年もあと一ヶ月ですね。
京都では綺麗な紅葉の時期ですので、観光の方がたくさん
訪れております。
今年の紅葉は少し遅く、12月上旬頃まで楽しむことができるそうで、
今週末が最後になるかと思います。
京都の紅葉は特に綺麗ですので、今年一年の締めくくりの前に京都の
紅葉を見に来てください。
----------------------------------------------------------------------
これからアクセシビリティを広めるため、皆さんのSEO対策のため、
皆さんのさらなる顧客拡大、しいては売り上げアップのための情報源
となり、インターネットの利用環境がより充実したものとなるように
当メルマガがお役に立てるよう願っております。
毎月第2・4火曜日に当メルマガを発行しております。
----------------------------------------------------------------------
☆このメルマガへのご意見・ご質問やホームページ制作・オンラインショップ
構築のご依頼・ご紹介などございましたらご遠慮なくメールください。
メルマガ【 誰でもわかる！SEO効果の高いアクセシビリティ対策 】では、
もっとお役にたてる情報を配信したいと考えておりますので、あなたの
アクセシビリティやSEOについてのご意見・ご感想などもお待ちしております。
必ずお返事させていただきます。
..... sakai@revonet.co.jp
最後までお読みいただき、ありがとうございました。
レボネット株式会社
坂井 和広
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
「誰でもわかる！SEO効果の高いアクセシビリティ対策」
───────────────────────────────────
□ 発行元 ..... "アクセシビリティ・SEO対策ホームページ制作会社"
レボネット株式会社 http://www.revonet.co.jp/
REVOplus http://plus.revonet.co.jp
ビジネスパートナー募集 http://www.revonet.co.jp/bp
スタッフブログ http://blog.livedoor.jp/revonet_sakai
京都府京都市下京区朱雀正会町24番地
TEL:075-344-3348 FAX:075-344-3343
□ E-mail ..... sakai@revonet.co.jp
このメールマガジンの転送は自由です。よろしければ転送してください。
----------------------------------------------------------------------
□ 発行周期 ..... 毎月第2・4火曜日
□ バックナンバー.. http://plus.revonet.co.jp/backnumber.html
■ メルマガ配信登録・アドレス変更・配信停止はこちらからお願いいたします。
まぐまぐ .... http://plus.revonet.co.jp/magazine.html
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━