Web標準で一歩先へ

概要

多くのWeb制作者に支持されているにも関わらず、Web標準への移行は確固たる理由がない限り躊躇してしまう、という企業が見受けられます。この現状を打破するため、Web標準を提唱するWeb制作者にご利用いただけるよう、この文書が作られました。 ここではWeb標準に関する意見や情報を統括し、ビジネスへの影響という視点からWeb標準を説明していきます。 まずWeb標準の大まかな意味とその使用法の概略をまとめ、さらに多岐にわたるWebサイトの改良がWeb標準を導入することで可能になることを実証していきたいと思います。 改良の対象としては、例えばネットワーク帯域の使用量やローディングにかかる時間、アクセシビリティの基盤の構築、デバイス(機器)依存からの脱却、品質保証のプロセスといったものが挙げられます。 この文書はWeb標準に関する否定的な誤解を解き、標準を真に生かすための戦略について言及しています。MACCAWSでは、これからもビジネス観点からのWeb標準導入の利点についてリサーチを進めていく予定です。この文書はまさにその根幹を成すものと言えるでしょう。

当文書の現状

この文書はこれで完結したわけではありません。常に改良を重ねていくため、感想・コメント・提案ほか、ご意見のある方はぜひMACCAWSリサーチグループまでご連絡ください。

アイデアをくださり、熱意を持って参加していただいた皆さまにMACCAWSから感謝いたします。

目次

はじめに

Webサイトの制作に関わっていらっしゃいますか?もしかすると既にいくつかサイトをお持ちのかたや、実際の制作や運営に現在進行形で携わっているかたもいらっしゃるかと思います。Web標準になじみのないかたは、先にWeb標準手引きのほうに目を通されると良いかもしれません。

Web標準は、Webサイトの制作に欠かせないものです。ここでは、以下について記します。

標準規格とWeb

標準規格は、日々面する様々な作業や製品の安全な利用、また品質を確保するために存在するものです。例えば世界中でほぼ共通して使われている信号の規格。赤信号は「止まれ」、黄色は「注意」、青は「進め」を表します。このように標準化されたルールは、安全に道路を運転することの保証に一役買っています。これはもちろん車種や運転している人間、目的地によって変化することはありません。もし信号機が標準化されていなかったとしたら、一般的なラッシュアワーの渋滞さえ比べ物にならないほどひどい混乱が、日常的に見られたことでしょう。製品や作業工程を確立するのと同様、Web標準はWebに関するいくつもの技術が、それぞれどのように機能すれば、安定した健全なる土台を保つことができるのか、定義づけるものと言えます。

汎用標準

HTMLXHTMLCSS。これらはWebで今日最も頻繁に使用されている標準規格の3つです。この章では、これらの仕様書の成り立ちとその開発の経緯について説明します。この部分は飛ばしてくださっても結構ですが、多少お時間を割いていただけるなら、これらの技術とその歴史についてお読みいただくことをお勧めいたします。

HyperText Markup Language (HTML) とeXtensible HyperText Markup Language (XHTML)

HTMLはWeb文書のためのマークアップ言語です。HTMLは進化とともに、文書の構成を表す仕様書へと成長しました。HTMLによって、見出し、文節、表組み、略語、引用文などのコンポーネントから文書を組み立てることが可能になります。カスケーディングスタイルシート(CSS)というもうひとつの技術は、文書のプレゼンテーション(言い換えれば“見ための部分”)の指定に使われます。

現在、HTMLに関する仕様書の更新は行われていません。HTML 4.01がHTML標準の最終版にあたり、現在ではXHTMLがその後任となっています。XHTMLでのオーサリングもHTMLでのオーサリングも、それほど大きく異なるものではありません。ですがXHTMLの利用によってもたらされるビジネス面での利点は膨大なもので、特に複雑なアプリケーションになるほどその利点が生きてくると言えます。XHTML 1.0はHTMLをXMLのルールに乗っ取って再定義したもの—つまりXHTMLは、HTMLでありなおかつXMLでもあるということ。つまりこれは、XHTMLを使用することで、HTMLの導入ベースの広さを生かしつつXMLの情報変換力を活用でき、HTMLとXML双方の長所を享受できることを意味します。

Cascading Style Sheets (CSS)

CSSはWebサイトの見ための部分をシンプルかつ容易に定義づけるために開発されました。HTMLが構造を定義づけるのに対し、CSSはサイトの“look and feel”、つまり外観の部分が責任範疇となります。CSSの使用により、Webオーサーはプレゼンテーション要素(レイアウト、フォント、色など)をコンテンツ自体のマークアップとは切り離して制御することができます。スタイルの定義を単独のファイルに別途定義し、複数のページから参照することも可能です。これにより、スタイルシート内で色やレイアウトに変更を加えるだけで、個々のHTML文書には手を入れずに更新を済ませることができるのです。数行のコードを変えるだけで、多くのページに一挙に変更を加えること、ときにはサイト全体のレイアウトの変更をすることさえも可能にするパワフルさが、CSSをこれほどまでに価値の高い技術にしています。

また、CSSではメディアごとに異なるスタイルを指定することができるという利点があります。ここで言うメディアには、以下のようなものが挙げられます。

CSSを使うと、複数のHTMLを書き分けることなしに、使用されているデバイスに合わせてページを適切にアウトプットすることが可能になります。

その他Web標準

HTMLやCSSは、現在利用されているWeb標準という点から言えば氷山の一角にすぎません。他にもWebとインターネットのインフラストラクチャにおいて、様々なレベルで機能している標準が数多く存在します。例えばWebコンテンツがインターネット上でどう提供されるかを舞台裏で指示しているHTTP (HyperText Transfer Protocol)といった標準規格。これらの仕様すべてについて知っておく必要はないかもしれませんが、他にもいくつか重要度の高いWeb標準について、多少なりとも知識を持っておくことは無駄にはならないでしょう。今学んでおくことで、将来的にこのような情報が必要になった際、他社に一歩リードするための武器となります。

その他一般的に使用されているWeb標準には、DOM (Document Object Model)やECMAScript (Javascriptの一般的なもの)があります。

XMLファミリー

XML (eXtensible Markup Language)という言葉をお聞きになったことがあるかもしれません。これは以下のような関連性のある技術の集合体の、核となる標準規格です。

またXMLは、リソース間の関係を特定の語彙(「オントロジー」と呼ばれる)を使用して解説するフレームワークであるRDF (Resource Description Framework)を実装する手段のひとつでもある。RDFにより、リアルの世界に存在するナレッジモデルを利用することができるようになるため、再利用のための情報の関連付けの精度が上がる。

アクセシビリティ

Web技術以外にも、アクセシビリティ国際化といったものに関して、サイトや制作ツールが一定の品質基準を保っていることを確認するためにも、標準規格は重要な役割を果たしています。

アクセシビリティガイドラインは、Webサイトとユーザエージェントのために存在します。ここではガイドラインとその適用対象となるシステムやソフトウェアを表にまとめました。

ガイドライン 適用対象
Webコンテンツアクセシビリティガイドライン (WCAG) Webサイト
オーサリングツールアクセシビリティガイドライン (ATAG)
  • ホームページビルダー、
  • Dreamweaver、
  • コンテンツマネジメントシステム(CMS)
などのソフトウェア
ユーザエージェントアクセシビリティガイドライン (UAAG)
  • ブラウザ、
  • 検索エンジン、
  • その他、コンテンツを表示あるいはその他の方法で再利用することによって、情報を使うシステム

国際化

Webを誰にでも使えるものにするため、アクセシビリティに関する標準が存在します。同じく誰もが自らの母国語でWebを使うことができるよう、国際化への取り組みでは様々な活動が行われています。

国際化における重要な概念とプロジェクトには、以下のようなものがあります。

標準関連団体

World Wide Web Consortium (W3C)は今日使われているWeb標準の多くを制定した団体です。このコンソーシアムは1994年、MIT(マサチューセッツ工科大学)CERN(欧州合同素粒子原子核研究機構)DARPA(米国国防省防衛高等研究計画局)European Commission(欧州委員会)の協力を受け、Tim Berners-Lee氏によって設立されました。会員にはソフトウェアベンダー、ハードウェアベンダー、政府、標準規格団体、コンテンツプロバイダ、研究機関などが名を連ねています。Webに関する技術仕様書、勧告その他の文書はこれらの会員の合意を受けて実現されており、公開フォーラムやディスカッションでの一般からの意見も取り入れつつ作り上げられるものです。W3Cのミッションとゴールは、Webのビジョンをサポートすること、すなわちオープンで信頼があり、共同利用が可能で分権的、普遍的なアクセシビリティを備え、特定のベンダーに依存しない中立的なものであり続けられるよう努力しています。

その他標準関連団体には以下のような団体が挙げられます:

よくある誤解

標準というものには、特別心躍るようなエキサイティング感も、クリエイティブの最先端を行くトレンド感もないかもしれません。「標準」ということば自体から、規制であるとか柔軟性の欠如が喚起されると思うかたさえいらっしゃるでしょう。ですがこれはまったくの誤解です。これほど事実からかけ離れたマイナスイメージが関連づけられているのは、非常に残念なことと思われます。

それではここで、こうしてよく聞かれる誤解のいくつかについて、一つひとつ検討していきましょう。 そしてWeb標準をプロジェクトに組み込むことで、実際にどういったメリットがあるのかをご紹介します。

誤解その1:Web標準に準拠させると、サイトは「格好悪く、面白みのない」ものになる

Web標準の使用は、必ずしもサイトの外観に影響するものではありません。Web標準のせいで「格好悪く、面白みのない」サイトができるという論理は、コンクリートの成分構成に関する規定によって、建物の外観が影響されると言っているのと同じ、言いがかりにすぎません。コンクリートの成分は、建物の構造が一定の安全基準を保つために規定されており、この部分を確立したうえで、思い通りに塗装や内装をすることができます。

建物がきちんとデザインされていれば、壁のもととなるコンクリートの種類に限らず魅力的な外観は保たれます。しかし、そのコンクリートが規格外で質の劣るものであれば、これを使って建てられた建築物は脆く、崩壊の危険性をはらむものとなる可能性が考えられます。このシナリオをWeb標準にも当てはめてみるとどうでしょう。—標準規格はWebサイトの見た目や機能をおびやかすものではありません。標準に沿うということは、Webサイトの堅牢性を高めることを意味します。サイトが醜くつまらないものであったとすれば、それはデザイン的な問題であり、Web標準の影響ではないのです。

CSS Zen Garden:CSSでレイアウトされた美しいデザインのショーケース。参考になります。

標準規格が統括する範囲はコーディング部分のみではありません。Webの視覚的な部分を司る標準というものも存在し、中にはアニメーションやグラフィックに関する、新しくエキサイティングなものもあります。例を挙げると、Scalable Vector Graphics (SVG)、 Syncronised Multimedia Integration Language (SMIL)、Portable Network Graphics (PNG)などがこれにあたります。

誤解その2:Web標準を使うと制作時間が増加する

「Web歴は長いけれど、標準に合わせたコーディングを書くことには慣れていない」というオーサーは、新しい習慣と考えかたになじむまで、時間がかかるかもしれません。ですが制作者のスキルレベルによっては、Web標準の使用により開発時間を短縮することも可能です。

誤解その3:自分のサイトへはどうせマイクロソフトのインターネットエクスプローラを使っているユーザしか来ない

ブラウザは変化する

Internet Explorerはここ最近最も利用されているブラウザですが、将来的にはどうなるかわかりません。2003年5月の末、マイクロソフトはMicrosoft Internet Explorerの無料スタンドアローン版の開発停止を発表しました。また2003年7月には、オープンソースブラウザの開発を促進するためMozillaファンデーションが発足しました。そして同時期、AOLによるネットスケープのブラウザ開発が打ち切りとなりました。この他にも無料で提供されているブラウザは多数存在します。よく知られているものでは、Mozilla、Opera、Safari、Konquerorなど。最終的には、ユーザが好みのブラウザを自由に選ぶ権利を持っていますから、標準がもたらすフレキシビリティを大切にすべきであると肝に銘じておきましょう。

あなたのサイトを訪れるその他の「ブラウザ」

PCを使っているユーザ以外にも、あなたの意識していない訪問者はいませんか?例えば検索エンジンロボットやスパイダーなど。検索エンジンは通常、スパイダーやロボットなどと呼ばれる自動化されたコンピュータプログラムを使用し、Webサイトのテキストを読み込みます(「クロールする」とも言います)。これにより、検索エンジンはデータベースのインデックスを更新するのです。もしサイトがこういったロボットやスパイダーに対して読めない状態にあれば、あなたのコンテンツは検索エンジンにひっかかりにくくなる可能性があります。

Webサイトを標準に沿って制作することで、どのようなメディアを使ってもコンテンツがアクセスできる状態を確保できるようになります。さらに副作用として、携帯電話やPDAへの対応といった、新しい未来技術の登場に合わせて別途工数をかける必要性からも解放されるという特典もついてきます。

ブラウザ依存

イントラネットなどの閉じたネットワーク向けにWebサイトを作る場合、標準規格を使うことは特定のブラウザのバージョンや技術から解放されることを意味します。例えば想像してみてください。

  1. 御社の標準環境ではIE4を使用
  2. イントラネット全体がIE4のみで機能するように設計されている
  3. イントラネットは拡張し、年々部署から部署に渡って更新が続けられる
  4. 2年が経過し、御社はMozillaへの以降を決定
  5. 特定のブラウザに縛られることのないようにサイトをコーディングし直す作業に、以降6ヶ月を費やす

初めからWeb標準に沿ってイントラネットを構築していれば、後に多くの労力を省くことができます。Web標準は、ブラウザや機器に関わらず機能するようデザインされています。標準に合わせてイントラネットを構築しておけば、サイトの再構築に余分な時間を費やす必要はなくなります。

誤解その4:全ブラウザで同じように表示されない

この誤解は多少やっかいなものです—事実その通りなのですから。ただし、Webサイトはすべてのブラウザで同じように表示されるべきであるという多くのWebオーサーの信念自体が誤解と言えるでしょう。

「同じように表示される」ようにデザインされたWebサイトは、ユーザとなり得る一部の人びとにとって、フレキシビリティに欠けたり使用不可能となったりという問題を呼び起こします。あるユーザがサイトを訪れたとき、そのユーザは次のような状態にある可能性があります。

CSSを用いたレイアウトメソッドでWebサイトを制作するということは、システムやデバイスに関係なく、ブラウザにすべての最適な判断をゆだねることを意味します。CSSを最大限に生かすことで、Webコンテンツを1バージョンのみ制作することに集中でき、デバイスやユーザには、おのおのに最適なスタイルでサイトを閲覧する自由が与えられます。すべての人に同じく見えるWebサイトを作ろうとすると、中には使用が困難であったり、不可能であったりするユーザを出してしまうというリスクを負うことになります。

Web標準の利点

では今度はWeb標準を取り入れる利点を検証していきましょう。Web標準をプロジェクトに組み込むことで、以下のことが見込めます。

これらの利点を最大に生かすためには、Web標準を最大限に利用し、CSSを用いたレイアウトにすると良いでしょう。

制作のコスト削減

初期制作時

従来のWebの制作メソッドであれば、プレゼンテーションに関わる要素(色やフォント、ページレイアウトまでを含む)を変更するには、個々のページに変更を加えること、時には数百にものぼるスペーサーGIFやその他画像について変更を加える必要がありました。プロトタイプ作成も、制作半ばでのデザイン変更も、コンテンツとスタイルが完全に分離され、レイアウトにCSSを用いている場合、非常に楽になります。

Web標準はコンテンツとプレゼンテーションの分離を推奨することで、片方を変更しても、もう片方には変化が及ばないようにデザインされています。コンテンツを変更したり追加したりといったとき、Webオーサーはプレゼンテーションに関する情報に手を加える必要はありません。同様に、サイトの外見を変える際には、CSS上でプレゼンテーションに関する要素の説明の部分に手を加えさえすれば良いのです。

大規模な制作チームといった環境で起きる、コーディングスタイルの差異による混乱や秩序の乱れも、特定の標準規格に沿ったコーディングを全オーサーに義務づけることで最小限に抑えることができます。

リニューアル時

CSSを用いたレイアウトとWeb標準を活用している場合のWebサイトリデザインは、各ページのマークアップには触れずに、新しいスタイルシートをいくつか書くだけというシンプルさになります。

これからは、Webサイトのプレゼンテーション要素を変えるためにテンプレートや高価なCMSを使う必要はありません。コンテンツとプレゼンテーションを切り離してさえおけば、サイト全体のフォントを変えるにもレイアウトを変えるにも、CSSファイルに手を加えるのみで用が足せます。

また、サイト制作のプロセスにWeb標準を組み込むことの副次的な効果として、各コーダー固有の習慣や癖にとらわれる心配が減ることが挙げられます。経験を積んだ標準の知識を持つWebオーサーによるサイト運営・制作は迅速かつ効率的に進めることができるでしょう。

メンテナンスのコスト削減

標準に沿って正確に記述されたマークアップは、完結で無駄がなく、かつ明確なものとなります。 これにより平均的なWebオーサーは、コンテンツの変更や更新のプロセスにおける工数を大きく削減できるでしょう。

Web標準の使用によって、Webサイトが成長と変化に対応できる柔軟性を持ち合わせることを確かなものにできるでしょう。

日々のコスト削減

どんな小さなデータでも、送信には費用がかかります。ご使用になっているホスティングサービスによっては、ユーザがダウンロードするデータ量に対して課金されているかたもいらっしゃるのではないでしょうか。御社サイトからユーザに送られている不必要な情報をできる限り削減することで、サイト運営のコストダウンをはかることができます。

上記の2点はネットワーク帯域の削減に貢献し、単に今ある技術を最大限に生かしさえすれば、これだけでサイト運営のコストが削減できることでしょう。

対象ユーザの拡大

Webサイトをアクセシビリティと国際化の標準やガイドラインに準拠させると、以前は対象から外れていた潜在顧客にもサイトが使えるようになります。

御社のイメージアップ、費用対効果の改善

Web標準は御社のイメージアップにつながります。短期的には多少投資額が上がるように感じられるかもしれませんが、社会的に企業イメージが向上するのは間違いありません。標準に準拠することで、顧客に以下のようなメッセージを伝えることができます。

Web標準を組み込むことは、合理的で経営理念として立派なものであるのみでなく、より広くよりロヤリティの高いお客様を潜在顧客に、そしてさらには顕在顧客に変えられるまたとない機会です。これは御社の利益に直接的な影響を及ぼすことでしょう。

最先端企業としての確立

Web標準について知識のある企業は大変少なく、その影響力を考慮し効果的に取り入れることを検討しているビジネスは数えるほどです。これは御社にとって、他社との差別化に最適なチャンスと言えます。

Web標準は将来的な成長との協調、拡張を踏まえて編み出されました。将来性のある投資としてお薦めする理由として以下のようなことが挙げられます。

競合他社に先手を打ってWeb標準を導入することで、先を行く企業としてのイメージを手にするこのチャンスを逃すのはもったいないとは思われませんか?

Web標準の有効利用法

Webサイトのレイアウト向上のためのWeb標準利用法

Web標準とWebデザインに関連性はありますが、両者はそれぞれ個別のものです。標準準拠していないWebサイトを、デザインはそのまま保ちつつ準拠させることも可能です。その一方Web標準の導入で、準拠していないレイアウトの手法では不可能だった、よりフレキシブルなデザインも可能になります。

レイアウトメソッド 長所 短所
テーブル使用
  • たいていのビジュアルブラウザに一貫して対応
  • HTML標準に準じたレイアウトが可能
  • テーブルで組んだレイアウトで実際にWeb標準に準じているものは少ない
  • すべてのメディアに対応する柔軟性に欠ける
  • コンテンツがユーザの一部にとってアクセス不可能な場合がある
CSS使用
  • デバイスのメディアやOSに関わらず、コンテンツへのアクセスが可能
  • ファイルの軽量化、ページローディングの時間短縮
  • ネットワーク帯域使用量の軽減
  • 制作・更新の時間短縮
  • リデザインが容易に
  • その他諸々
  • 古いブラウザではCSSすべてが正確に理解されないため、モダンブラウザ以外でサイトを利用するユーザは、視覚的に異なるレイアウトになる
  • Webオーサーは新しいコーディング技術を学ぶ必要がある

テーブルを用いたレイアウト

Webページの典型的なデザインの方法は、経験を積んだWebオーサーには「テーブルで組んだレイアウト」として知られています。このメソッドを使う場合、Webページ上の要素—ページタイトル、メニュー、画像、コンテンツ—は、全てHTML テーブルを用いて配置されます。

長所

テーブルを用いたレイアウトの長所としては、長らく使われてきたメソッドであり、ビジュアルブラウザのほぼ全てにおいてくずれず機能するということ。つまり様々な環境でデザインが同じように保てると考えられるところが挙げられます。

HTML標準に基づいたテーブルレイアウトをすることは可能。

短所

Webオーサーの不十分な知識と多くのオーサリングツールでの標準サポートの欠落のせいで、テーブルレイアウトのWebサイトは標準に準拠していない場合が多い。

残念なことにテーブルで組まれたレイアウトはすべてのメディアを通じて機能するほどの柔軟性は備えていません。ワイヤレス技術や補助技術などの先端的なもの、例えばスクリーンリーダーなどではテーブルレイアウトをうまく表現できないのです。つまりテーブルで組んだWebサイトは、一部の人々にとって使いづらく不満のつのるものとなる可能性が大きいということです。

CSSを用いたレイアウト

最近Webオーサーの間で人気のあるのが、レイアウトにテーブルタグを使わない方法です。HTMLまたはXHTMLは文書構造をマークアップするためだけに使い、1ページあるいは複数のグローバルCSSファイルで見た目の部分をすべて指定するのです。コンテンツの配置もCSSで制御します。

長所

CSSを用いたレイアウトの長所のひとつとして、柔軟性が挙げられます。コンテンツは使用ブラウザに関わらずアクセシブルになります。またPCだけでなく、様々なデバイスで機能するサイトが実現されます。

他にも利点を挙げると:

  • ファイルの軽量化、ページローディングにかかる時間短縮
  • ネットワーク帯域使用量の軽減
  • 制作・更新の時間短縮
  • リデザインが容易に
  • その他諸々

これら長所の詳細は「Web標準の利点」をご参照ください。

短所

CSSを用いたレイアウトの短所として最も大きなものは、古いブラウザではデザインが完全なかたちで再現できない場合があることです。こういった古いブラウザが誕生した頃、CSSはまだ先端技術であったため、完全に対応されていなかったことが原因です。ですがWeb標準をうまく取り入れれば、CSSを用いたWebページを古めのブラウザで見てもコンテンツはすべて利用可能であることを保証できます。ただ単に視覚的な面で完全に同じではないというだけのことです。Mozilla、Opera、Konqueror、Safariのような大抵のモダンブラウザはCSSを用いたレイアウトで全く問題ありません。最もユーザベースの広いブラウザであることは認めざるを得ないマイクロソフトのInternet ExplorerはCSSを用いたデザインをほぼサポートしていますが、最新バージョンでさえCSSの解釈に誤りが見られます。こちらの問題に関しては誤解:「全ブラウザで同じように表示されない」で詳しく解説していますのでご参照ください。

もうひとつの難点は、CSSを用いたレイアウトに慣れているWebオーサーはまだそれほどいないという点です。ブラウザが正しく標準を認識するまでには時間がかかりました。その結果、この方法に慣れていないWebオーサーは、異なるブラウザで動作に支障なく一貫したデザインを達成するためのテクニックを学び直さなければならなくなりました。

どちらを使うべきかの選択

どちらのWebデザインレイアウト法でも標準準拠したコードは書けますが、どの標準規格を選ぶか、どちらのメソッドを使うか、その是否を比較して最終的な判断を下さなければなりません。Web標準の利点を最大限に生かすためには、思い切ってCSSを用いたレイアウトの使用をご検討なさることを強くお薦めします。こちらのメソッドは将来的にも多くの利益をもたらすものですから。

どの標準規格を選ぶかの選択

レイアウトメソッドの選択

今日Webオーサーに使われている2つの大きな制作方法を前述しました:テーブルレイアウトというHTMLのテーブルタグを使ったレイアウト方法と、CSSを使ったページレイアウト法です。テーブルを使用した方法では、Webオーサーは古いタイプのブラウザに合わせることで、携帯電話やPDAといったより新しいデバイスへの対応に支障をきたすことをやむなくしています。CSSを使ったWebデザインには、古いブラウザで見た際の視覚的相違を譲歩することで、基本的なアクセシビリティと互換性という付加的な利点も得ることが可能となります。

XHTMLかHTMLか

テーブルを用いたレイアウトCSSを用いたレイアウトも標準に準拠したXHTML 1.0 StrictやCSSにすることは可能です。技術的にはHTML 4.01を選ぶ理由はもうありませんので、新規のプロジェクトにはXHTMLの導入をご検討ください。異なるXHTMLバージョン(例えば携帯電話用のXHTMLなど)の取り扱いが非常に楽になります。XHTMLはXMLでもあるため、情報を拡張する必要性が出てきた際のデータ管理の選択肢がより広いものとなるのです。

現在普及しているほとんどのブラウザにおいてXHTMLとHTML 4.01の解釈に差はないのだから、XHTMLで記述する真の利点はないという人がいるかもしれません。ですが、HTML 4.01と比べてもXHTMLでのオーサリングは難しいものではありません。すべてのブラウザがXHTMLを正しく解釈できるようになったときには、サーバの設定にひとつだけ簡単な変更を加えるだけで切り替えができます。ですから、今からXHTMLを使う習慣をつけておいても悪くないでしょう。

正確に解釈できる機器を対象に、XHTMLを使い始めることが可能です。こちらをご参照ください

アクセシビリティ法

アクセシビリティの標準を取り入れることは、御社に利益をもたらします。最も業界標準として見なされているものは、Webコンテンツアクセシビリティガイドラインと呼ばれています。アメリカで最も権威のあるWebアクセシビリティに関する法律は「米国リハビリテーション法508条」というものですが、国により法的なガイドラインは異なります。例えばUKでは障害者差別禁止法が適用されます。御社の場合どういった法律が関連してくるか、調査してみると良いかもしれません。アクセシビリティ性の高いWebサイトにすることは、良い習慣というだけでなく、法的な問題の回避にもつながります。また顧客層拡大にも影響するという点を踏まえ、アクセシビリティの考慮をお薦めします。

最高品質のもの以外受け付けない

外注、または外部スタッフを雇い入れてのWebサイトの制作をお考えでしたら、Web標準をプロジェクトのRFP(提案依頼書)や仕様書の重要事項として組み込むことをお奨めします。以下をご参照ください。

御社には、御社に最良の制作プロセスと最終的な作品との両方を要求する権利があるのです。Web標準準拠を要件に組み込みましょう

制作チームへの教育

Webオーサーのスキルと経験値によって、Web標準の知識がある場合とない場合とが考えられます。Web標準の話をはじめに出した時には、何の話かまるで検討がつかない制作者や、皮肉な返答をする制作者もいるかもしれません。

制作者がWeb標準を導入するのに時間がかかっている原因には次のようなものが考えられます。

正式な教育を受けたことがない

Webは猛烈なスピードと勢いで発展を遂げました。その結果、Webの成長に便乗して稼ごうと、多くの書籍やデザインを教えるクラスは古く誤ったWebの慣習を教えることとなりました。これは今日のWebオーサーのスキルレベルと知識を大きく損なう結果となりました。

一部のWebオーサーは、時代が変化していることに気づかずにいるのかもしれません。注意せずにいると、スキルはすぐに時代遅れになってしまいますし、既に手遅れの可能性もあります。Web標準を制作チームに教育することは非常に重要です。Webサイトが標準に準拠していて、常に支障なくスムーズであることを保証するのは制作者たちなのですから。そのためには以下の人々の教育が必要です。

  • 制作担当、
  • デザイン担当、
  • プロジェクトマネージャー、
  • 更新担当、
  • QA(品質管理)担当、
  • コンテンツ担当
使用しているツールが標準準拠のコードに対応していない

Webのめまぐるしい激動の成長期には、ベンダーは質の高いサイトを作ることよりも、市場の確保に気を取られていました。それゆえに多くのWebオーサリングツールは、誤ったHTML知識と時代遅れのオーサリングの慣習に基づいて作られてしまいました。サイト制作関連者がWeb標準準拠でないツールを使っているとしても、最良のWebのありかたというものに触れることなくここまで来てしまったというのは仕方のないことと言えるでしょう。

Web標準を取り入れる際に役立つツールがいくつも存在します。Dreamweaver MXの最新版はCSSにかなりの精度で対応しており、CSSでのレイアウトの達成を容易にしてくれます。こう並べると大変な作業の積み重ねのようですが、最も難解な部分は制作チームの教育、次いでWeb標準準拠のコードを生成できるオーサリングツールを選択し、その使用を奨励することかと思われます。

「難しすぎる」

多くのWebオーサーがサイトの作りかたを学び、これまではその手法を変える必要もなく過ごしてきました。これは標準に準拠しておらず構造的にも整備されていないHTMLでも、ブラウザがそれを許容してきたためです。この結果、Webオーサーの一部はサイト制作の新しくより良い方法に対していい顔をしないという状況が生まれました。また「ピクセルパーフェクト」デザイン(誤解その4参照)に固執するため、CSSは使い難いものと考える制作者から反発を受けることもあるかもしれません。旧バージョンのブラウザを対象にしたCSSの組み込みがうまくいかない場合を考えて、制作者のなかには標準に対して及び腰になっているように見受けられます。しかしながらMozillaやSafari、Konquerorなどのいわゆるモダンブラウザとされているものは標準に対応しています。ブラウザ、ツール、制作者のすべてが標準対応への道を歩みだしているのです。

御社のチームを教育し、必要な情報・技術・道具で武装できたら、次はサイトがWeb標準を継続的に使用し続けるためのメソッドを紹介します。

現存のWebサイトに関して

現存のWebサイトを標準準拠のものに変えるには、徐々にWeb標準を導入していく戦法をお薦めします。

この方法はW3C品質保証サイトの「Web標準への切り替え」で詳しく解説されています。

以下の作業を行うことで、通常の品質管理プロセスの一環として、Web標準への切り替えプロセスを組み込むことができます。

  1. どの標準規格を使うか、サイトをどんな方法でアクセシブルにするか、サイトの国際化についてはどうするか、その他のサイト改善策の検討。
  2. ログバリデータ—W3Cの開発した、特定のサイト内でアクセスの多いページを修正するのに役立つツールを使用して、サイトをこれらの条件に照らし合わせた分析。
  3. 最も見られているページのトップ10をログバリデータを介して選び出し、これを定期的に修正するためのスケジュールを組む。こうすればユーザが目にする可能性の多いところから始め、最終的にはサイト全体へと進めていくことができる。
  4. 定期的にプロセスを見直し、必要なページが標準規格に変換されているかの確認を行う。

これにより、指定した標準規格の品質レベルにサイトが達していることを保証することが可能になります。

新規のWebサイトに関して

新規でこれから制作にかかるWebサイトプロジェクトに関しては、まっさらの状態から始められるという最高の環境にあります。Web標準の利点を最大限に生かすことができるでしょう。

Web標準をサイトの要件定義に組み込む。

サイトを内部の制作チームで担当する場合も、社外や別部署に外注で頼む場合も、どの標準に準拠する必要があるのかを明確に指定することが重要です。W3C品質保証グループの発表した“Buy standards-compliant Web sites(標準準拠のWebサイトを発注するには)”という記事をご参考になると良いかもしれません。こちらでは具体的な要件の表が公開されているので、ご参考にできる部分もあるかと存じます。

Web標準をCMSの要件定義に組み込む。

コンテンツマネジメントシステム(CMS)を組み込もうと思われているなら、要件としてWeb標準準拠を挙げることをお薦めします。既にCMSを選択していらっしゃるなら、モジュールか変更を加えることでWeb標準に沿ったコードを生成できないか調べましょう。

Web標準を保つためのプロセスを確保する。

Webサイトの制作過程の全場面においてWeb標準が保たれているよう確認しましょう。ここでのサイトの全制作過程とは、デザイン、制作、テスティング、更新を指します。Webオーサーまた制作に関わる者全員が、選択したWeb標準の規格に沿ったサイトを制作し、更新できるツールを使用するよう指導してください。例えばCMSを使ってコンテンツの制作をしている者は、Web標準準拠に貢献している状態を保つこと。とはいえ、CMSを直接いじる権限は持っていない場合もあるでしょう。ということは、CMSはすでにWeb標準のコードを出力するよう設定されている必要があるということです。

重要なのは、最初の要件定義を越え、将来的にもWeb標準準拠を保つことを見越したプロセスを計画することです。Web標準の恩恵を完全なかたちで授かるためには、こうする他ありません。

制作進行中のWebサイトの変換に関して

制作に入っているWebサイトでは、要件を再定義するのはそれほど単純ではないかもしれません。要件の変更には、費用の加算やスケジュールの延長の検討がつきものですが、Web標準の使用は長期的に見ればコスト削減につながることをお忘れにならないように。プロジェクト開始時点で標準準拠を要件として提示しなかったことに対し、追加料金を要求する外注ベンダーなどもいるかもしれません。その場合、Web標準をプロジェクトに組み込むことは費用効率が悪いかのように感じられることもあるでしょう。また、余分な時間が必要になるとお考えになるかたもいらっしゃるかもしれません。ですが十分にご検討なさってください。プロセス全体を改善することを考えれば、長期的なコストパフォーマンスと比べて初期投資は微々たるもの。さらにアクセシビリティに関する法律にもあらかじめ対応でき、準拠していないサイトを制作して法的に危うい立場になることも避けられます。完全により良いプロセスへと切り替えるため、標準準拠をWeb制作プロジェクトのプロセス自体の一環として組み込んでしまいましょう。

プロジェクトの段階

現在進行しているプロジェクトが制作のどの段階にあろうと、Web標準を導入することには多大な利点があるのです。

品質管理のための検証

バリデーションとは

バリデーションとはWebページの正確さをチェックするプロセスを指します。正当でシンプルなこの方法を用いることで、御社のサイトは標準準拠への道を歩みだすのです。HTMLとCSSはフォーマルな言語であるため、フォーマルな文法(Document Type DefinitionまたはDTDと呼ばれる)に照らし合わせてチェックします。メールを書くときに誤字脱字や文法のおかしなところがないかをチェックするのと同じように。バリデーションには様々な種類が存在しますが、この記事の文脈ではHTMLとCSSに関するバリデーションについてのみ言及します。

Webページをチェックするツールはバリデータ(準拠チェッカー)と呼ばれています。これはW3Cから無償で公開されており、ここのページの準拠度をチェックすることが可能です。また他社からもサイト全体をチェックできるバリデータが(有償で)公開されています。しかしながら最新の情報に基づいた、一番権威のあるバリデータはW3Cの提供しているものであることは心に留めておいたほうが良いでしょう。

W3Cは現状の標準が作られるのに並行して更新される、HTMLとCSSのバリデータ(チェッカー)をホスティングし一般公開しています。バリデータへのアドレスはこちら。

バリデーションは品質管理の一環

特定のブラウザでの予想外の動作やレイアウトの崩れといった問題は、単にHTMLまたはCSSにエラーがあることが原因という場合があります。ページをチェッカーにかけてエラーを見つけ修正することで、ユーザエージェントに関わらずサイトのプレゼンテーションの改良のつながります。

バリデーションとは:

バリデーションで手間暇解消

バリデーションはデザイン上の問題を検証するうえで信頼できる術を与えてくれます。ページをチェッカーにかけることで、どの行のコードが標準に準拠していないのかを素早く特定することができます。バリデータにかけたからといってすべての問題点がひっかかるとは限りませんが、少なくとも露骨なエラーの発見はできるため、単純な過ちに品質管理の時間を無駄使いすることなく、有意義な問題解決に費やすことが可能になります。

バリデータの出力メッセージの理解

W3Cバリデーションを初めてご覧になった際には、出力された文章の意味がつかめないかもしれません。自動処理ツールでしかないため、見つかったエラーについて全て書き出し、解説を加えるという動作が行われます。ひとつエラーを直して再度チェックをかけてみると、エラー数が激減していることが多く見受けられます。これは各エラーが相互に連鎖反応を起こしてさらにエラーを呼び起こしていたところに、エラーを削除することでこの鎖が断ち切られたためです。数回この作業を繰り返した頃には、頻繁に見られるエラーメッセージの意味するところを理解できるようになっているでしょう。

標準準拠したページを作成するためのオーサリングツールの設定

ホームページビルダーやFrontPage、Dreamweaver、GoLiveなどのWYSIWYG (What You See Is What You Get) エディタは、Webサイトの制作をシンプルで素早くするのに役立ちます。こういったツールは主として独自の非準拠なHTMLやCSSをはき出すものが多いようです—これは環境設定を変えたりといった変更を行わなかった場合の話ですが。簡単な設定変更を行うだけで、ほとんどのツールはWeb標準に準じたページを生成できるようになります。大抵のアプリケーションでは、“環境設定”(またはそれに準ずるもの)で標準準拠のコードを出力できるような設定に変えることができます。これでうまくいかない場合には、HTML TidyLiftアクセシビリティキット(英語原文)のようなツールが単体のソフトウェアとして、またはプラグインとして付け加えることができるようになっています。

標準準拠のページ制作をするためにDreamweaver MXを設定するのは簡単です。同様にDreamweaver 4でも標準準拠のコードを書けるように設定できます。FrontPage 2000とFrontPage 2002でも準拠したコードを生成するように設定できますが、Dreamweaver MXよりは複雑な行程になっています。Mozillaコンポーザは初期設定でWeb標準に沿ったコードを吐き出すようになっているので、こちらのご使用を検討なさっても良いかもしれません。http://www.mozilla-japan.org/から無料でダウンロードできます。

付録

HyperText Markup Language (HTML)とeXtensible HyperText Markup Language (XHTML)

Webの誕生以来、HTMLはいくつかのバージョンを経て変化を遂げてきました。そのなかで現在でもWeb制作で使われているものは3つ:HTML 3.2、HTML 4、そしてXHTML 1です。

HTML 3.2は、1996年のWebオーサーのHTMLの組みかたをcaptureするために作られました。HTML 3.2は1994年時点での慣習をまとめたHTML 2.0に取ってかわるものでした。

HTML 4.0は1997年にリリースされ、1998年に微調整が加えられてHTML 4.01となりました。このHTML 4.01の最終版が公開されたのが1999年12月になります。

HTML 4.0、4.01と共にWebデザインへの新たなアプローチが生まれました。アクセシビリティへの注目、国際化、ブラウザ内でのページのレンダリング速度や、CSSを使ったプレゼンテーションと文書構造との分離などもここから始まりました。

2000年1月に公開されたXHTML 1.0は、HTMLをeXtenxible Markup Language (XML) 1.0の実装として再編成したマークアップ言語ファミリーです。HTMLの前身とXMLとをつなぐ架け橋となり、現存のWebブラウザでHTML文書を表示する能力を保ちつつ、XML技術の力を最大限に生かすことが可能です。XHTML 1.1が2001年5月にリリースされ、ここではこれからのXHTMLファミリーの文書タイプ拡張への基盤を明記されました。

XHTML 1.0とHTML 4.01とのオーサリングには、さほど技術的な違いはありません。最も大きな違いといっても、標準準拠のXMLに適応したマークアップの精度に関する細かな要件程度のものです。これにより、すでに準拠したHTML 4.01を書いているWebオーサーは容易くXHTML 1.0で書き始めることができます。

XHTML 2.0は現在開発中です。Web文書は完全に構造マークアップに徹したもの、プレゼンテーション部分はカスケーディングスタイルシートで定義づけるものとする方向へ定まりつつあります。XHTML 2.0ではXML技術との融合がさらに改良されます。(X)HTMLの一部は、同様の役目を果たすXML技術に取って代わられ、非推奨の対象になる、または廃止される可能性もあります。XHTML 2.0の開発はいまだ初期段階にあり、その仕様書は未定の部分が多いと言えます。

謝辞

以下の人々に感謝を捧げます:

貢献者MACCAWSチーム:Tara Cleveland、Tony Crockford、Tom Dell'Aringa、Char James-Tanny、Rebecca Milot-Bradford、Dunstan Orchard、Ranjan、Francis Storr、Stephen Taylor、Stephanie Troeth。

校閲者:Stephanie Booth、Garrett Coakley、Maciej Ceglowski、Gordon Cleveland、Karl Dubost、Emma Jane Hogbin、Holly Marie Koltz、Ethan Marcotte、Judah McAuley、Rebecca Tierney-Hynes、Olivier Thereaux。

Credits

この文書はStephanie Troethがまとめ、Tara ClevelandとRebecca Milot-Bradfordが編集を担当、清水麻遊が日本語に訳し、編集を加えました。

MACCAWSキットの文書はすべて Creative Commons のライセンスに準じます。| 翻訳:清水麻遊