Web標準って何ですか
このごろはやりのWeb標準。でもWeb標準って何?そんなあなたはしっかりチェック!Webサイトを作る上で大切なことが盛りだく さんです。
Web標準について、いろいろと見ていくことにしましょう。
(『こ れならわかる Web標準サイトの作り方 入門の入門 (著: WINGSプロジェクト うえがき麻矢)』を要約)
Chapter.1 Web標準とは何か
『Web標準』という言葉を聞いたことがあるでしょうか。Web標準というのは「Web上での標準規格」。 要するに「Webで利用される技術を統一して、あらゆる環境からアクセス可能なWebにする」 ということです。
そして、統一するために「技術文書」というものが存在します。たとえば HTMLならW3C(World Wide Web Consortium)という標準化団体によって策定された「HTML 4.01」という技 術文書が存在します。
「こんな堅苦しいものなんて読んだことがないけどいままで普通に作ってきたし、ブラウザで表示もできた」 という人もいると思います。確かに表示する分には問 題はありません。しかし、Webサイトは表示するだけではないということを知っていただきたいのです。視覚障害のある人など は音声読み上げブラウザでアク セスしている場合があるかもしれません。この場合文法がめちゃくちゃだと正しく読み上げてくれません。はたしてこれは『誰 にでも使いやすくどんな環境でもアクセス可能である』といえるのでしょうか。答えはおそらく「No」でしょう。また、検索エンジンはWebページを表示してデータを収集しているのでなく、Webページの内容、つまりソー スを解析して順位を決めています。
Web標準を無視したページは、見た目はきれいですが中身がグダグダです。 見る分にはいいですが、中身と向き合うのは少々つらいものがある、ということを覚えておいてください。
Chapter.2 構造と見栄えの分離
Web標準は主として「XHTML」と「CSS」の標準規格に沿って制作することを指して使われる言葉でもあります。つまり、 「XHTML」で文書構造(つまり内容)を示し「CSS」で見栄えの情報を記述するという、「構造」と「見栄え」を分離した 制作方法を指します。
従来の制作方法では次のように記述しました。
〈html〉
〈head〉
〈title〉俺's ウェブサイト〈/title〉
〈/head〉
〈body〉
〈font size=5〉俺's ウェブサイト〈/font〉〈br〉
俺's ウェブサイトへ〈font color=red〉ようこそ!〈/font〉
〈/body〉
〈/html〉
これを表示してみるとこうなります。 → 従 来の方法
…いたって普通に見えると思います。1行目は2行目より少し大きくて、2行目の「font」タグで囲まれた「ようこそ!」と いうテキストは赤く表示されるようになっています。こうすることで1行目のテキストは見出し、Web標準というテキストは強調しているように見 せることができますが、音声読み上げブラウザや検索エンジンのロボットは「文字サイズは5」や「文字色は赤」のような視 覚的な情報に意味を持たないため、どこが見出しでどこが重要なのか分からない、 ということになります。
次にこの文書をWeb標準にのっとって構造化してみましょう。まず、Webサイトの構造を示すXHTMLを 書きます。
〈html〉
〈head〉
〈title〉俺's ウェブサイト〈/title〉
〈/head〉
〈body〉
〈h1〉俺's ウェブサイト〈/h1〉
〈p〉俺's ウェブサイトへ〈strong〉ようこそ!〈/strong〉〈/p〉
〈/body〉
〈/html〉
ではこれを表示してみましょう。 → ス タイル定義前のXHTML文書
…一見地味に思えるかもしれません。しかし、h1要素は「見出し」、p要素は「段落」、strong要素は 「強調」という意味を持っ ています。見るとそのように見えるのが分かると思います。
このように文書を構成する要素を使うことで、どこが重要な部分であるのか人やロボットに、文 書の意味的 な内容が伝わりやすくなります。たとえばstrong要素なら音声読み上げブラウザでも強調 して読む傾向にあるし、検索ロボットもそこが段落の中で強調される部分だと解析するは ずです。
これはまだ文書の構造だけで視覚情報は含まれてないので、ここで見栄えを定義するのにCSS(Cascading Style Sheet – カスケーディングスタイルシート)というものを使ってみます。次のように記述したものをHTMLや XHTMLから読み込むようにすると、strong要素で囲まれた部分が赤く表示されます。
strong { color: red; }
では先ほどの地味なものにこのスタイルを定義してみましょう。参考までに従来の方法のものも並べてみます。
どうでしょうか。ほぼ同じような表示になっていると思います。このように、従 来の表現もWeb標準を意識したものにすることができます。また、「HTML/XHTML+CSS」を利用して文書構造と 見栄えを完全に分離することで、あらゆる環境で情報が伝わりやすくなるといったメリットが得られます。 実は、「構造」と「見栄え」のほかに「ECMAScript」 や「DOM」 といった「振る舞い」というのもあります。これらもHTML/XHTML から切り離し、文書構造を独立させるのが基本です。 この「構造」「見栄え」「振る舞い」は「Web標準」の基本的な考えを理解するためのキーワードとなるで しょう。
…ちょっと面倒だ? いいえ、ケフィアです(爆
面倒に思えるかもしれませんがやっておくと大変役に立つこともあるの です。それでは次にWeb標準のメリットを説明しましょう。
Chapter.3 Web標準のメリット
「Web標準に準拠する」などというと「規 則には従うべきだ」という感じがして難しそうに見えますが、Web標準は制作者とユーザーの双方に様々なメリットをもたら します。
Web標準には法的な拘束はないので、従わなかったら罰則があるというものではありません。 あくまでも「勧告」です。ではなぜWeb標準を意識する必要があるのでしょうか。それは作 り 手にとって理にかなったものだからです。
Webサイト制作者、Webサイト制作ソフト開発者、Webブラウザ開発者など、Webを作る人たちが基準に合わせて物を作っていけ ば、結果としてWebを利用する人たちを制限するものがなくなり、「どこでもだれでも利用できるWeb」 というものが実現します。言いかえれば、サイト作成者側から見たらどんな人にでも自サイトを見てもらえる(可能性がある)と いう ことになります。
それでは、具体的にWeb標準のメリットを見ていきましょう。
Web標準のメリット1 ――― メンテナンスが容易になる
Webの制作方法で「構造」「見栄え」「振る舞い」を完全に分離することによって得られるメリットは様 々です。たとえばサイトのデザインをリニューアルする場合、いままでの「構造+見栄え」の方法だと個 々のページを1つ1つ編集する必要があ り、時 間や労力を使うことになりますが、「構造」と「見栄え」を完全に分離したWeb標準の制作方 法では、「見栄え」のファイルを1つ編集するだけ。イメージ的 に は「イメチェンしたっぽいけど、性格は全然変わってないね」的な感じです。(←
また、「構造」と「見栄え」を完全に分離することによって、「見栄 え」のバリエーションを増やして、複数の「見栄え」を「振る舞い」によってユーザー好みのサイトのデザインにスイッチすることもできちゃいます。
このように「見栄え」の管理が容易になることだけではありません。手間も容量も省けるようになります。
たとえば200ページのWebサイトがあって、各ページで印刷用画面を提供しようとする場合は、従来の 「構造+見栄え」の方法だと印 刷用ページを別途作成することになるので、倍の手間がかかることに なり、合計400ページものWebサイトが完成します。また、手間がかかるばかりか、ページの分だけ容量も増えることにな ります。
Web標準の制作方法では、印 刷用のCSSファイルを用意するだけで画面にはサイトのデザインが表示されていて、印刷時に勝手に印刷用スタイルで印刷してくれるようになります。
そして、Web標準をベースに作成されたWebページは、読み上げソフトでも、グラフィカルブラウザで も、携帯電話やPDA(個人用 の 手のひらに収まる程度の大きさの携帯情報端末機器)でも利用することができます。これは印刷 用のCSSを用意することと同じ要領で、ブラウザや携帯電話な ど、出力するメディアに合わせたCSSファイルを用意するだけですみます。
これまでのようにHTMLを作りかえる必要もないので、たった一つのHTML/XHTML文書を様々な 環境で使いまわすことができ て、デー タとしての汎用性が高くなります。
Web標準のメリット2 ――― 制作者/ユーザー好みにスタイル自在
ブラウザのCSS実装不足で視覚表現をHTMLに頼るしかなかった時代には、Webデザイナーの描いた ビジョンをブラウザ画面に反映 さ せることができないということも少なくありませんでした。その理由は制作者側が一方的に提示 する環境以外ではうまく表示することができなくて、情報を入手 することがで きないユーザーを出す恐れがあったからです。
しかし今は違います。デザイナーが自由にビジュアルを制御できる一方で、ユーザーもまた自分用のスタイ ルに切り替えることができま す。「視覚表 現は必要ない、テキストだけの画面でいい!」というユーザーはスタイルをオフにすればいいですし、弱視で画面いっぱいにテキストを表示したい場合は、ユー ザーが用 意したスタイルにきりかえればいいです。Windows Internet Explorer 6以上にはユーザーが用意したスタイルシートに切り替えるという設定があります。
Web標準のメリット3 ――― 軽くて高速。
Web標準で作成されたページは非常にシンプルです。かつての「構造+ 見栄え」のWebページから「見栄え」をそぎ落とした状態なの で、ファイルのサイズが小さくなります。その結果、ページの読 み込み時間が短縮されて、ページのレンダリング(表示)が早くなります。またWebサイト全 体でみてもサ イズが少なくなるので、サーバースペースの節約にもなります。
Web標準のメリット4 ――― ロボットに優しい
見栄えの部分がそぎ落とされた「構造」だけのWebページはブラウザの処理だけでなく、検索エンジンの ロボットにも重要なキーワード をスマートに伝えることができます。
このようにWeb標準をすることによるメリットをあげてみましたが、逆にWeb標準に沿っていなければどのようになるのかまとめてみ ました。
・ 新しく登場するブラウザやデバイスとの互換性がない。
・ アクセシブルでないために潜在的なユーザーを逃す。
・ 検索エンジンのロボットに情報が伝わらず、検索エンジンでヒットしにくい。
・ ソースが煩雑になるため表示速度が遅くなる。
・ ファイルが重くなるため、サーバースペースを圧迫、運用コストがかかる。
・ デザインリニューアルの際、時間とコストがかかる。
上にあげたのは一例で、実際はまだあると思います。このようなデメリットのあるWebページの管理にかける手間と、Web 標準化することの手間。比べれば後者のほうがずっと楽だとおもいませんか?
上のデメリットは、Web標準化することで解決して、次のようにメリットへと転じます。まだWeb標準化していない場合は早めに やっておきましょう。
・ 過去、現在、未来のブラウザやデバイスと互換性をたもてる。
・ アクセシブルなページを作成することができ、潜在的なユーザーを獲得できる。
・ 検索エンジンのロボットに情報が伝わりやすくなり、SEOの効果を得られる。
・ ソースがシンプルになり、表示速度が早くなる。
・ ファイルが軽くなるため、サーバースペースや運用コストを節約できる。
・ デザインの管理が容易になる。
というわけでWeb標準というものがなんとなくわかったでしょうか。では最後、これからのWebサイト作りに求められることについて 書いておきます。
Chapter.4 Web制作に求められるモノ
Webサイトを作るなら、より多くの人に利用してもらいたい。そのように思うのは当然です。そのために、ユーザーを制限することのな いように、どんな環境でも情報を得ることができるかどうかといった「ア クセシビリティ」に関する知識が必要になってきます。
また、ユーザーがどこからサイトを訪問するかというと、その大半が検索エンジンを入り口にして訪問します。ここでは検索結果で上位に 表示するための「SEO」 というテクニックが必要となります。
SEO対策がうまくいってアクセスされたとしても、必要としている情報がどこにあるかわからない、使い勝手が悪い、などと感じると ユーザーは去ってしまいます。ここではわかりやすさ、使いやすさといった「ユー ザビリティ」に対する取り組みも必要になってきます。
「アクセシビリティ」「SEO」「ユーザビリティ」のどれか一つが欠けても、機能するWebサイトにはなりえません。あらゆるユー ザーを対象にアクセシビリティを確保する必要もありますし、そのうえでターゲットユーザーにとって使いやすいWebサイトにするために、ユーザビリティの 向上に取り組む必要もあります。さらに、Webページが検索されやすいようにSEOにも取り組まなければなりません。Web制作ではこうしたテクニックを 体系的に取り組む必要があります。
難しそうに聞こえますがノープロブレム、なんくるないさー。(←
これまでの文章にもちらっと出てきたように、Web標準とこれらのテクニックは関連しています。こうしたテクニックはWeb標準とい うベースの上に成り立っているのです。
例えばWeb標準に準拠して正しい文法を使用するだけで、最低限のアクセシビリティを確保することができて、それと同時にSEOでも 効果が得られるようになっています。アクセシビリティを向上させることは、使いやすさやわかりやすさが向上することになるので、ユーザビリティもアップし ています。このように連鎖反応を起こしながらWebページの質がアップしていきます。もちろん、Web標準はあくまでベースにすぎません。このベースをよ り強固なものにするために、Webサイトを作るうえで知っておきたいことを次項で書いていきます。