Webサイト制作をご検討中の方へ。ScuderiaWebが低価格・短納期・高品質なWebサイトを制作いたします。

  • Home  » 
    • Web標準

Web標準

今や当然のように求められるWeb標準。
従来のWebサイトとWeb標準準拠のWebサイトの違い、メリットなどを解説します。

Web標準とは

どんな環境(PC)からでも利用でき、同じように表示されるユニバーサルデザインのWebサイトを作るための一つの指針がWeb標準です。
身の周りにある電化製品や化学製品などのほぼ全てには、標準規格というものが存在しています。
例えば、家庭用のコンセントは、どこのメーカーのどのような製品であってもつなぐことができます。これは、日本工業規格(JIS)で定められたコンセントの形状や電圧などに従って各メーカー製造しているからです。
Webサイトも同じです。
Web標準に従ってサイトを構築することで、年齢や身体的な制約、利用環境等に関係なく、Webサイトへアクセスし、情報を得たり機能を利用できるようにする(=アクセシビリティの確保)必要があります。
大手企業や官公庁のサイトを中心にWeb標準化がすすみ、最近では官公庁のサイト構築は、Web標準準拠が入札条件になってきています。

守らなくていけないこと

Web標準では、例えば「1ページの文字数は○○文字以内」「画像は○枚以内」といった規定はありません。
「正しい(X)HTMLとCSSでWebサイトを構築し、構造とデザインを分離すること」が求められています。

Webサイトは、HTMLかXHTMLで作成されることが一般的です。
InternetExplorer等ブラウザのどこかでマウスの右クリックをすると、「ソースの表示」というメニューがあり、これを選択すると、メモ帳などでテキストファイルが表示されます。このファイルをソースファイルと言い、HTMLやXHTMLなどで書かれています。HTMLもXHTMLもWebサイトを作るための言語ですが、文法が多少誤っていても、InternetExplorerなどのブラウザはそれらしく表示してくれるようにできています。しかしそれでは、ある環境化でしか表示できなかったり、制作者の意図した通りに表示されないといった問題があります。
そのため、正しい文法で記述することが求められているのです。

CSS(Cascading Style Sheets)とは、Webサイトのデザイン(見た目)を指定するための仕様です。
Webサイト上の文字は、色や大きさが様々です。
文章そのものは(X)HTMLで記述されますが、その文字の装飾はCSSで定義するというのが、Web標準で求められている「構造とデザインの分離」です。

Web標準準拠のサイトを構築することのメリット

メンテナンス性の向上

(X)HTML+CSSでサイトを制作することにより、構造とデザインの分離が可能です。
サイトを構築する際、または更新する際に、特にデザインを意識する必要がありません。デザイン部分は全ページから共通で利用されているCSSファイルにのみ記述されているため、一定のルールの下で作成するだけで、他のページとの統一感や安定した品質が保証されます。
また、一つのCSSファイルを全てのページから利用するということは、例えば、リンク文字の色を赤から青に変更する場合も、CSSファイルの「リンク文字の色」を定義している部分を修正するだけで、全てのページの全てのリンクに反映させることが可能です。

SEOに効果的

Web標準に準拠し、XHTMLを利用する場合、必然的に、厳密なXHTML文書(ソースファイル)を記述することになります。「厳密な」というのは、例えば、重要な単語を適切にマークアップすることや、文法違反を行わないことなど、XHTMLで定められたルールに基づいて作成することです。そうすることで、検索エンジンのクローラ(ロボット)にとっても理解しやすいサイト構造となり、結果的にSEO対策を施すことができます。

また、(X)HTMLファイルからデザインのための記述がなくなることでとてもシンプルになり、クローラが理解し易く、誤った認識をしてしまう危険性を回避することができます。

表示が速い

デザイン部分はCSSファイルに記載しているため、従来のHTMLに比べ記述量が減り、表示に掛かる時間が短縮されます。
Webサイトが表示されるまでに時間が掛かってしまったら、折角サイトを訪れてくれた人が、表示される前に他のページへ移動してしまう可能性が高くなります。
最近では携帯電話でもPCサイトを表示できますが、PCを使ってのインターネット接続環境のように快適に表示させることはできません。また、記述量が多い分パケット代も上がり、閲覧者にとって負担となることも考えられます。

アクセシビリティの向上

例えば、どこが重要で、どれがタイトルなのかを適切にマークアップしておくことで、視覚障害者向けの音声ブラウザ(Webサイトを音声で読み上げてくれるブラウザ)であっても、情報の重要度の格付けをすることが可能です。
先に挙げた表示速度の向上や記述量の削減によるファイル容量の削減も、低速なインターネット接続環境であっても大きなストレスを感じることなくWebサイトの閲覧が可能です。

デザイン変更が比較的容易

(X)HTMLは位置や大きさなどの情報を一切持っていません。
例えば、左寄せだったメニューを右寄せに変える場合も、CSSファイルの修正だけで可能です。
Webサイトのデザインを頻繁に変更されているサイトも多く、そうすることで過去に訪れた人であっても新鮮さを感じることができます。
しかしそのたびにゼロからサイトを構築していては、時間もコストも掛かりすぎてしまいます。
構造とデザインを分離したサイトであれば、部分的な修正とCSSファイルの変更だけで大きなデザイン変更が可能になるということも、Web標準に準拠したサイトを構築するメリットです。