京都市 ホームページ制作 会社 / アクセシビリティ・ユーザビリティ配慮
メルマガバックナンバー8
テーブルはレイアウトのために使わないことが"望ましい" vol.8
【2006.09.12 vol.8】毎月第2・4火曜日発行
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
障害者や高齢者をはじめ、誰もがアクセス可能なホームページについて
考えるwebアクセシビリティは、検索エンジン（SEO）対策に最も効果的です。
顧客拡大、売上増のための「アクセシビリティとSEOの融合」やホームページ
作成について出来るだけ簡単に解説いたします。
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
こんにちは、レボネット株式会社の坂井です。
当メルマガの第8号をお読みいただき、ありがとうございます。
このメルマガではこれからのインターネット環境やウェブサイトにとって
必要不可欠なアクセシビリティ対策を中心に、検索エンジンで上位表示を
実現するSEO(検索エンジン最適化)対策と絡めてご説明します。
SEO効果の高いアクセシビリティ対策を施したホームページ制作に
ついてのご相談は無料でお受けしておりますのでお気軽にどうぞ。
■■ レボネット株式会社 電話番号 075-344-3348 ■■
□アクセシビリティとSEOの関連について□
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
目次 ・テーブルはレイアウトのために使わないことが"望ましい"
・初歩からのアクセシビリティ・SEO対策実践講座（p要素編）
・編集後記
発行元・レボネット株式会社
坂井 和広
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
第1号のメルマガでは、簡単にSEOとアクセシビリティの用語説明をしました。
まだ、アクセシビリティという言葉を聞いたこともないという方は
当メルマガのバックナンバーをご覧ください。
バックナンバーはこちら→http://plus.revonet.co.jp/backnumber_1.html
■テーブルはレイアウトのために使わないことが"望ましい"
本日は現状のホームページ制作では広く使われているテーブルレイアウトに
ついてお話します。
まず、テーブルレイアウトとは、本来、表として使用するテーブルを
見た目を綺麗にするため、画像やテキストの位置を指定するために
テーブルを配置してデザイン指定をすることです。
ホームページ制作の中心として使用されてきたそのテーブルレイアウトは
昨今見直されつつあります。
そのテーブルレイアウトについては、JIS X8341-3ウェブコンテンツJISに
記載されています。
JIS X8341-3とは、財団法人日本規格協会が定めるもので、
正式名称は 高齢者・障害者等配慮設計指針-情報通信における機器、
ソフトウェア及びサービス－第３部：ウェブコンテンツ です。
----------------ここから引用----------------------------------
この規格は，主に高齢者，障害のある人及び一時的な障害のある人が、
ウェブコンテンツを利用するときの情報アクセシビリティを確保し、
向上させるために、ウェブコンテンツの企画、開発、制作、保守及び運用を
するときに配慮すべき事項について標準化を行い、生産及び使用方法の
品質の向上を図るための制定するものである。
----------------ここまで引用----------------------------------
とされています。簡単に言いますと、どんな環境の方でもホームページを
閲覧する際に、情報を均一に受け取れるよう標準化を行い、ウェブ開発や
利用の際の向上を図りましょうという規格です。
その規格ではテーブルレイアウトについて以下のように書かれています。
----------------ここから引用----------------------------------
表組みの要素をレイアウトのために使わないことが望ましい
参考 本来、表組みするためのHTMLのtable要素をレイアウトに使用すると、
ソースをその記述順に読み上げる音声ブラウザなどでは、意図しない順序で
読み上げる可能性がある。
特に、セルを結合したり、複雑な入れ子構造にすると顕著である。
参考 HTMLでは、レイアウトに用いる表において構造を表す要素(thなど)を
使用すると、高齢者障害者支援技術が表と解釈してしまう可能性がある。
----------------ここまで引用----------------------------------
簡単に言いますと、テーブルを使ったレイアウトをすると目が見えないため
音声ブラウザを利用している方などにとって情報を適切に受け取れず、
内容をしっかり把握できないような意図しない順序に読み上げる可能性が
あるため、使わないことが"望ましい"という訳です。
ここで"望ましい"とされているのは、かつて広まっていたテーブルレイアウトを
ある程度は容認し、現状では柔軟性を持たせていると思われます。
テーブルレイアウトについてもとをたどって考えてみると、もともとHTMLは
文書構造の記述を目的としており、本来、HTMLには見た目をレイアウト
するような要素は少なかったため、その手段としてテーブルが利用
されるようになりました。
ですが、テーブルレイアウトには以下のような欠点が多々あげられます。
・サイト全体のデザインを変更する場合、ページがたくさんあると手間がかかる
・レイアウトの指定のためテーブル要素を多用すると、HTMLが複雑になる
・複雑なHTMLは、修正しにくく、ソースが複雑なためファイルサイズが大きくなる
・ファイルが大きくなることでページの表示が重くなってしまう
・テーブルはあくまで「列と行がある表」なので、細やかなデザインの指定ができない
・見た目のためだけの、意味や内容のない画像要素やテーブルを使うことになる
・HTMLの本来の構造を無視した見た目ばかりに注目したサイトとなってしまう
・音声読み上げブラウザなどでは内容が正常に表現されない可能性がある
・レイアウト目的のテーブル要素が入るため検索エンジンがテキストを読みにくい
このように様々な弊害があり、やはりテーブルはもともと表を記載する
ものなので、アクセシビリティの観点からも考え直す必要がありました。
そこでCSSというレイアウトを制御する技術が広まってきました。
HTMLは文書の文書構造のみを記述し、レイアウトや文字デザインなど、
見た目の制御はCSSが行うという内容と表現を別々に制御することが
できるようになったのです。
CSSには以下のような利点があげられます。
・1ページのCSSの修正で全てのページのデザイン修正が完了する
・サイト全体のデザインを変更する場合、1つのデザインが全てのページに適用できる
・更新、デザイン変更が簡単にできる
・デザインはCSSで制御するため、HTMLがすっきりする
・HTMLがすっきりするため、ファイルサイズが小さくなる
・ファイルが小さくなることでページの表示が速くなり、ストレスを与えない
・細かなデザイン指定ができ、レイアウトが自由自在
・画面表示用レイアウトと印刷用レイアウトなど、それぞれのデザインを変更できる
・HTMLでは表現できないデザインが実現できる
・CSSファイルの使いまわしができる
・テーブルレイアウトで可能なことは、全てCSSでも再現できる
・音声読み上げブラウザ利用者にも正常に情報を伝えることができる
・検索エンジンにとっては順序通りにテキストを読むことができるため、テキストを読みやすい
現在、デザインはこのCSSを使用することが世界のウェブサイトの主流となり、
CSSを使用することはウェブの標準規格への準拠とされています。
ウェブ標準規格に準拠することにより、アクセシビリティと
SEO（検索エンジンへの最適化）対策の効果も高まります。
つまり、これからの主流であるCSSでデザインを外部から制御することで、
高齢者や障害者の方でも適切に文書を読み取れるようにアクセシビリティを
重視し、HTMLを軽く、ウェブ標準に準拠することで検索エンジンにも
読みやすいSEO対策となるのです。
本日のまとめ
本来、テーブルは表としてデータを扱う目的の物ですので、テーブルを使った
デザインの保持及び、レイアウトは、音声ブラウザで正確に情報を伝えれないなど
様々な弊害を生じているため、現在非常に厳しく見直されております。
アクセシビリティの観点からもSEO対策の観点からも皆さんのホームページを
一度見直してみてはいかがでしょうか。
CSSへの移行、リニューアル等のご相談はsakai@revonet.co.jpまでご連絡下さい。
■初歩からのアクセシビリティ・SEO対策実践講座（p要素編）------------------
ここからは初歩的なことからアクセシビリティ対策・SEO対策の実践方法に
ついて、ご説明していきます。本日はにp要素についてです。
前回のソースを使って、body内のソースを以下に表示します。
<body>
<h1>一番重要な見出し1(大見出し)</h1>
<p>見出し1の内容</p>
<h2>見出し2(中見出し)</h2>
<p>見出し2の内容</p>
<h3>見出し3(小見出し)</h3>
<p>見出し3の内容</p>
<h4>見出し4(小見出し)</h4>
<p>見出し4の内容</p>
<h5>見出し5(小見出し)</h5>
<p>見出し5の内容</p>
<h6>見出し6(小見出し)</h6>
<p>見出し6の内容</p>
</body>
本日はテーブル要素を使わずにデザインを外部CSSで指定することが
望ましいと伝えました。
前回では、<h1>～<h6>の見出しについてご説明しましたので、今回は
その見出しごとの内容をp要素を使って指定してください。
p要素とは
段落を指定するもので<p>内容</p>で囲みます。
タグの使い方
<p> ～ ( </p> )
</p> は省略可能です。
左揃え、中央揃え、右揃えなどの位置指定はCSSで制御してください。
p要素で囲む内容には検索エンジン対策を意識したキーワードを盛り込んだ
テキスト内容を作るとSEO対策にも効果的です。
見出しの内容であるp要素についてお伝えしたところで
本日のメルマガはここまで。
次回からも"SEOとアクセシビリティの融合"について、なぜ”検索エンジン
対策に最も効果的”なのか基本的事項から順に詳しくお伝えします。
さらに、初歩からわかるようにアクセシビリティ・SEO対策の基本的な
対策方法を"初歩からのアクセシビリティ・SEO対策実践講座"と題して
具体的に掲載していきます。
当メルマガではできるだけ専門用語なども簡単にご説明しておりますが、
もし、わからない用語がありましたら、こちらのヤフーコンピュータ
用語辞典で検索して調べてみてください。わからないことがあったら
なんでもインターネットで調べられるのでとても便利ですよね。
その他、当社へのご質問という形でも受け付けていますのでお気軽に
ご質問下さい。
→ http://computers.yahoo.co.jp/dict/
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
情報格差をなくすための障害者や高齢者に配慮したアクセシビリティ対策や
長期的な検索エンジン対策に最も有効なXHTML・CSSコーディング、顧客拡大・
売上増のための検索キーワードを意識したSEO対策など、「アクセシビリティ
とSEOの融合」を図り、web標準に準拠した最も新しいホームページを制作
いたします。
【レボネット株式会社サービス案内サイトREVOplus】
→ http://plus.revonet.co.jp
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
■SEO・アクセシビリティ対策済 ホームページ制作をご依頼の場合
20ページまで 207,900円（税込）
※企画・構成等が含まれております。
こちらは特別モニター価格となっておりますので、実績、ご感想などを
ホームページ上で公開させていただきます。
★ご紹介者にキャッシュバック
ホームページ制作をご紹介いただいた方に制作費の10%を還元いたします。
ご依頼・お見積もり・お問い合わせ・ご紹介はsakai@revonet.co.jpまで
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
【編集後記】
---------------------------------------------------------------------
9月15日締切 アックゼロヨン・アワード締め切り迫る
前号でも告知しましたアクセシビリティに考慮したアクセシブルで
クリエイティブなサイトを募集するアックゼロヨン・アワードの
締め切りが今週の金曜までとなっております。
ご応募は以下のホームページまで
→ http://www.acc04.jp/
締め切り間近ですので、忘れないようにご応募下さい。
どんなサイトが選ばれるか、今年の審査結果が楽しみです。
このアワードを通して、アクセシビリティに配慮し、かつデザイン性にも
優れたホームページが増え、これからのウェブサイトのレベルが
高まっていくことと思います。
----------------------------------------------------------------------
これからアクセシビリティを広めるため、皆さんのSEO対策のため、
皆さんのさらなる顧客拡大、しいては売り上げアップのための情報源
となり、インターネットの利用環境がより充実したものとなるように
当メルマガがお役に立てるよう願っております。
毎月第2・4火曜日に当メルマガを発行しております。
----------------------------------------------------------------------
☆このメルマガへのご意見・ご質問やホームページ制作・オンラインショップ
構築のご依頼・ご紹介などございましたらご遠慮なくメールください。
あなたもお気軽にこのメルマガへのご意見・ご希望をお送りください。
必ずお返事させていただきます。
メルマガ【 誰でもわかる！SEO効果の高いアクセシビリティ対策 】では、
もっとお役にたてる情報を配信したいと考えておりますので、あなたの
アクセシビリティやSEOについてのご意見・ご感想などもお待ちしております。
..... sakai@revonet.co.jp
最後までお読みいただき、ありがとうございました。
レボネット株式会社
坂井 和広
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
「誰でもわかる！SEO効果の高いアクセシビリティ対策」
───────────────────────────────────
□ 発行元 ..... "アクセシビリティ・SEO対策ホームページ制作会社"
レボネット株式会社 http://plus.revonet.co.jp/
京都府京都市下京区朱雀正会町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
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━