Web標準のススメ

木達一仁

株式会社ミツエーリンクス WEB開発チーム フロントエンドエンジニア
Web Standards Projectメンバー
k-kidachi@mitsue.co.jp / kidachi@kazuhi.to

目次

  1. 自己紹介
  2. Web標準の定義
  3. 過去に流行らなかった理由
  4. 近年における状況の変化
  5. Web標準に取り組むべき理由
  6. 欠点や短所はあるのか？
  7. Web標準を使いこなすポイント
  8. Q&A
  9. おわりに

自己紹介(1)宇宙開発事業団ホーム

自己紹介(2)現在の立場や業務内容など

自己紹介(3)Designing with Web Standards

Designing with Web Standards～XHTML+CSSを中心とした「Web標準」によるデザインの実践

著者
Jeffrey Zeldman
発売
2004年10月
発行
毎日コミュニケーションズ
翻訳
石田優子・ソシオメディア株式会社
技術校正
株式会社ミツエーリンクス

自己紹介(4)Web Standards Solutions

Web標準デザインテクニック即戦ワークブック～XHTML+CSSを正しく賢く書くための15問

著者
Dan Cederholm
発売
2005年6月
発行
毎日コミュニケーションズ
翻訳
森本眞吾
監修
株式会社ミツエーリンクス

自己紹介(5)Eric Meyer on CSS

スタイルシート スキルアップ・デザインブック I

著者
Eric A. Meyer
発売
2005年12月下旬
発行
毎日コミュニケーションズ
翻訳
吉川典秀
監修
株式会社ミツエーリンクス

Web標準の定義

  1. 広義のWeb標準
  2. W3Cについて
  3. 代表的なW3CによるWeb標準＝W3C標準
  4. 狭義のWeb標準
  5. 構造のためのWeb標準：マークアップ言語
  6. (X)HTMLの特色
  7. W3C標準としての(X)HTMLの歴史
  8. 表現のためのWeb標準：スタイルシート
  9. CSSの歴史

Web標準の定義(1)広義のWeb標準

  • World Wide Webで標準的に利用される技術の総称
  • 国際的な組織によって策定
    • W3C（World Wide Web Consortium）
    • ISO（International Organization for Standardization）
    • IETF（Internet Engineering Task Force）
    • ...etc.
  • ベンダー中立
  • 誰でも利用可能

Web標準の定義(2)W3Cについて

Web標準の定義(3)代表的なW3CによるWeb標準＝W3C標準

Web標準の定義(4)狭義のWeb標準

Webコンテンツのフロントエンド実装におけるWeb標準3要素

以後、構造と表現についてさらに詳しくご紹介

Web標準の定義(5)構造のためのWeb標準：マークアップ言語

文書や情報をマークアップ（一定のルールに基づくタグ付け）することで、その構造的意味を記述するための言語

  • HTML（HyperText Markup Language）
  • XHTML（Extensible HyperText Markup Language）
  • XML（Extensible Markup Language）

Web標準の定義(6)(X)HTMLの特色

  • ハイパーリンク
  • フォームコントロールによるインタラクションの実現
  • シンプルで学習が容易
  • アクセシビリティへの配慮
  • 過去および将来にわたる利用可能性

Web標準の定義(7)W3C標準としての(X)HTMLの歴史

  1. HTML 3.2（1997年1月14日勧告）W3Cによる初のHTML仕様
  2. HTML 4.0（1998年4月24日勧告）
  3. HTML 4.01（1999年12月24日勧告）
  4. XHTML 1.0（2000年1月26日勧告）XMLによる再定義
  5. XHTML 1.1（2001年5月31日勧告）モジュール化・一部後方互換性を排除
  6. XHTML 2.0（現在仕様策定中）

Web標準の定義(8)表現のためのWeb標準：スタイルシート

  • 情報に表現を提供するための仕組み
    • CSS（Cascading Style Sheet）
    • XSL（Extensible Stylesheet Language）
    • DSSSL（Document Style Semantics and Specification Language）
  • Webコンテンツのフロントエンド実装によく利用されているのがCSS
  • CSSは視覚表現のみならず、音声やページなど、出力メディアに応じたプロパティを定義

Web標準の定義(9)CSSの歴史

  1. CSS Level1（1996年12月17日勧告)
  2. CSS Level2（1998年5月12日勧告)
  3. CSS Level2.1（2005年6月13日勧告候補）
  4. CSS Level3（現在仕様策定中）
    • モジュール化されており、全ての勧告はまだまだ先
    • 一部のブラウザでは先行して実装済（Mac OS XのDashboardでも一部を採用）

過去に流行らなかった理由

  1. 理由1：Webブラウザの実装
  2. 理由2：Webコンテンツ制作者の認識
  3. 理由3：Webコンテンツ制作ソフトの傾向
  4. 理由4：Webコンテンツ発注者の意識
  5. 理由5：ユーザの認識

過去に流行らなかった理由(1)理由1：Webブラウザの実装

  • 開発者を落胆させるに十分だった初期の実装状況
    • CSS1リリースの数ヵ月後、Internet Explorer3が実装するもバグが山積
    • 後続のNetscape 4.xもスタイル継承機能が欠落するなど問題アリ
  • ブラウザ戦争（IE vs. Netscape）
    • 過剰なシェア獲得競争を背景に独自拡張が誕生
    • 見栄えもHTMLで記述する「物理マークアップ」の隆盛
    • 多方面に混乱とコスト高が発生

過去に流行らなかった理由(2)理由2：Webコンテンツ制作者の認識

  • Webブラウザの実装不足やバグに起因する問題
    • 「CSSは使えない技術」という誤解
    • ブラウザに内包されたデフォルトスタイルシートへの誤解
    • いまだに残るブラウザ固有のバグ、仕様の解釈の相違への嫌悪感
  • 誤った情報の氾濫
  • テーブルレイアウトへの過度の習熟
  • 正しい論理的なマークアップを学習する機会の欠如
  • WYSIWYG（What You See Is What You Get）エディタへの過度の依存

過去に流行らなかった理由(3)理由3：Webコンテンツ制作ソフトの傾向

「WYSIWYG」の罠

  • 文書の視覚表現にまず目が向く設計＝意味的構造には目を向けにくい設計
  • 文書の見栄えは希望通りに手に入れられても、適切な構造は手に入らない
  • 「HTMLを知らなくてもWebページは作れます」という謳い文句に隠された、論理マークアップの重要性

ユーザを見栄えにばかり固執させ、結果的にWebの持つ潜在的可能性を覆い隠してしまう傾向

過去に流行らなかった理由(4)理由4：Webコンテンツ発注者の意識

  • Webというメディアに対する誤解
    • 紙メディアと同じ、もしくはその類似品という誤認識
    • マークアップ品質に対する意識、HTMLの正しい知識の欠如
  • 見栄えが違う＝切捨て？
    • Internet ExplorerとNetscape Navigatorで同じに見えれば良い？
    • 自分の使っているブラウザで綺麗に見れればそれで良い？

Jesse James Garrett氏によるWebの階層構造……基礎工事（＝より下層に含まれる戦略・要件・構造・骨格）がしっかりしていなければ、どんなに立派な見栄え（＝表面）の家（＝Webサイト）を建てようとも「砂上の楼閣」

過去に流行らなかった理由(5)理由5：ユーザーの認識

  • Webというメディアに対する誤解
    • どのブラウザで見ても同じ見栄え、体験を期待
    • インターネット＝Internet Explorer？
      • 文字サイズがpx単位で指定されるとIEでは文字の拡大・縮小ができない問題を、あたかもWebコンテンツ側の問題と誤解
  • CSSを知らない
    • ユーザースタイルシートを使えば、ユーザーの好みに見栄えを変更できるのに！

近年における状況の変化

  1. 数年前までの実装におけるHTML+CSS
  2. 海外に端を発したWeb標準準拠
  3. モダンブラウザの普及
  4. HTML→XML
  5. Blogの大流行

近年における状況の変化(1)数年前までの実装におけるHTML+CSS

HTMLの誤用
例えば見出し要素の代わりにfont要素で文字を大きく、太くしても見出しとしての「意味」や「構造」は伝わらない
table要素を用いたレイアウト
  • 本来は表を記述するためのHTML要素を用いたレイアウト
  • 1ピクセル四方の透明画像（スペーサーGIF）を用いたスペーシング
CSSの限定的利用
せいぜい、文字の大きさや色、行の高さを制御する程度

「このサイトはIE4以上、800x600ピクセル以上で見てください」などという文言が平然とトップページに
（「この映画は○○製の50インチ以上のプラズマテレビでご覧ください」なんてDVDのパッケージに書いてありませんよね？）

近年における状況の変化(2)海外に端を発したWeb標準準拠

  • アメリカでWebアクセシビリティに関する法律「リハビリテーション法508条」が施行（2001年6月）
  • WIREDリニューアルの衝撃
    • 2002年10月：商用大規模サイトとしては初めてWIREDがWeb標準に準拠しフルCSSレイアウトでリニューアル（2002年10月）
    • Netscape 4.xに「すっぴんの刑（CSS非適用）」
  • 続々とWeb標準に準拠したサイトが登場、文書構造と視覚表現は分けて扱う方向へより一層シフト
  • Webアクセシビリティへのニーズが高まり、CSSの存在は見直され、Web標準が一層普及

近年における状況の変化(3)モダンブラウザの普及

モダンブラウザの定義（Designing with Web Standardsより）
(X)HTML,CSS,ECMAScript, W3C DOMを比較的良くサポートするブラウザ
  • Mozilla 1.0以上
  • Netscape 6以上
  • Win IE 6以上
  • Mac IE 5以上
  • Opera 7以上

多くのWebブラウザがWeb標準への準拠を念頭に開発

近年における状況の変化(4)HTML→XML

  • 拡張性に富む新たなマークアップ言語、XMLの登場
  • HTMLをXMLによって再定義したXHTMLで、データの再利用性・相互運用性が向上
  • RSSの普及
    • RSS：Webサイトの更新内容をより効率的に伝達するためのXML形式によるデータフォーマット
    • Blogの流行が後押し

近年における状況の変化(5)Blogの大流行

Blog：バックエンドにXML技術を活用したCMS（コンテンツマネジメントシステム）によって運用される、更新頻度の高いWebコンテンツ

  • 構造と表現の分離の推進
    • 多くの場合、デフォルトで文書構造と見栄えを分離してコンテンツを管理するCMSを採用、ユーザーが意識せずともWeb標準を理想に近いかたちで利用
  • CSSによるテンプレートコンテスト
  • CSSの大衆化、Web標準の普及

Web標準に取り組むべき理由

  1. 必要性1：Webアクセシビリティ
  2. Webアクセシビリティへの社会的ニーズ高まり
  3. 必要性2：検索エンジン最適化（SEO）
  4. 必要性3：閲覧環境の多様化
  5. 必要性4：ファイルサイズの削減
  6. Doug Bowman氏による試算
  7. 必要性5：前方互換性と後方互換性の確保
  8. 必要性6：メンテナンス性の向上
  9. 必要性7：リニューアル時のコスト低減
  10. css Zen Garden
  11. 多様なニーズへ網羅的に対応

Web標準に取り組むべき理由(1)必要性1：Webアクセシビリティ

  • 障碍者や高齢者のためだけのものではない（ユーザーの年齢や国籍、障碍、利用環境などの相違をクリアする必要性）
  • 誰もが加齢や不慮の事故からは避けられない
  • 対人間のみならず対機械でのアクセシビリティという視点
  • 潜在顧客を逃がさない
  • 企業の社会的責任（CSR）
  • 企業イメージの向上

Web標準に取り組むべき理由(2)Webアクセシビリティへの社会的ニーズ高まり

WCAG 1.0（1999年5月5日勧告）
W3CのWAIが発表したガイドライン、現在2.0を策定中
リハビリテーション法508条（アメリカ、2001年6月21日施行）
連邦政府が購入するIT機器やソフトは、障碍者に使えるものでなければならず、場合によっては訴訟を起こすことも可能

ヨーロッパなども含め、世界規模で「情報格差」への取組みが加速中

日本での動き

  • 障害者基本法の改正（2004年6月）
  • JIS X 8341-3「高齢者・障害者等配慮設計指針 － 情報通信における機器・ソフトウェア・サービス － 第3部：ウェブコンテンツ」（2004年6月）

Web標準に取り組むべき理由(3)WebアクセシビリティとWeb標準

(X)HTMLは、アクセシビリティにも配慮した仕様であり、文法に則って適切にマークアップを行うことで、基礎的なアクセシビリティを確保

視覚障碍者が利用するスクリーンリーダーや音声読み上げブラウザは、(X)HTMLソース上にある文字情報を登場順に読み上げる

画面
2次元（ディスプレイ上の縦軸・横軸）※z-indexを考慮すれば奥行きも含めた3次元
音声
1次元（時間軸）

可能な限りレイアウトはCSSで制御、やむを得ずtable要素で代用する場合は読み上げ順に配慮

Web標準に取り組むべき理由(4)必要性2：検索エンジン最適化（SEO）

  • 高い検索サービスの利用率……今やブックマーク代わり
  • 検索結果で上位に表示されることのビジネスにおける優位性
    • ユーザーは検索結果ページの全部を見るわけではない
    • ターゲットユーザーを効率的に誘導
    • 高いコンバージョンレート→優れた投資対効果（ROI：Return On Investment）

Web標準を利用して作成された文法的に妥当で、意味的に適切なマークアップが施された(X)HTML文書は、言葉の重み付けの根拠を適切に提供でき、高いマシンリーダビリティ（機械可読性）を確保することでSEOに貢献

Web標準に取り組むべき理由(5)必要性3：閲覧環境の多様化

いまや、WebはPCでアクセスするだけのものではない

  • 携帯電話
  • テレビ
  • PDA
  • 音声ブラウザ
  • スクリーンリーダ
  • キオスク端末
  • etc.

異なる環境要素

  • 解像度
  • 表示色数
  • 回線速度
  • 入力デバイス
  • etc.

全部とまでいかずとも、多くの環境でサイトの提供する情報や機能が利用できるようにするには、文書の構造と見栄えを分離したほうがベター

Web標準に取り組むべき理由(6)必要性4：ファイルサイズの削減

構造と表現の分離

  • 見栄え目的の(X)HTMLソースを削除（CSSの記述は(X)HTML文書と分離してキャッシュ可能な別ファイルに分離）
  • 単位時間あたりに処理できるアクセス数の増加（見方を変えればサーバの負荷軽減）
  • ダウンロード時間の短縮→レンダリングの高速化→より少ないストレスでブラウジング（ユーザー体験の質の向上）
  • Webサイトに対する好印象からよりアクセスの増加（正のフィードバック、好循環）が期待できる

ミツエーリンクスWebサイトでの実例（2004年4月）

  • 約1300のHTMLファイルを対象にWeb標準準拠
  • 総計15.3MBだったファイル容量が9.88MBまで軽量化（約35%減）

Web標準に取り組むべき理由(7)Doug Bowman氏による試算

Microsoftを例にWeb標準準拠を想定（原文：2004年7月27日公開「Throwing Tables Out the Window」、邦訳：「テーブルは窓から投げ捨てろ」 by MinuteDesignさん）

 Web標準準拠前
(Windows 版 IE向け)		Web標準準拠前
(その他向け)		Web標準準拠後
使われているテーブルの数40360
スペーサーGIFの数35760
img要素の数431226
CSS 背景画像の数1111
HTML ファイルサイズ40 KB39 KB15 KB
ファイルサイズの削減-3%62%

1ページ25キロバイトの節約で、1日あたり平均3870万ページビューという数字に掛け算すると、1日あたりおよそ924ギガバイト、1年で329テラバイトもの通信帯域を節約

Web標準に取り組むべき理由(8)必要性5：前方互換性と後方互換性の確保

前方互換性
将来の閲覧環境に対応
後方互換性
過去の閲覧環境に対応
  • W3Cの仕様に準拠する＝独自拡張を使わない、ブラウザベンダに振り回されない
  • 過去の資産（コンテンツ）を無駄にすることなく、将来における利用を保証

Web標準に取り組むべき理由(9)必要性6：メンテナンス性の向上

  • よりシンプルなソースを実現
    • レイアウトに変更が生じたり、新たなビジュアルデザインを導入しない限りCSSの編集は不要、更新作業は(X)HTML文書のみで完結
    • マークアップのルールさえしっかり決めて共有すれば、複数の作業者による更新作業もより簡便に
  • バージョン分岐の放棄
    • 単一の情報は単一のリソースでもって管理・運用することがコスト面でもベター
    • Web標準を使えば、多くの場合ブラウザの種類やバージョン、利用シーン毎に別ページを設けずに済む
      • 印刷用ページ、またはそれを動的に出力するプログラムを用意せずともprintメディア向けCSSを用意すれば良くなる
      • アクセシビリティ対応のためにテキスト版のページを作成せずとも良くなる

Web標準に取り組むべき理由(10)必要性7：リニューアル時のコスト低減

コンテンツは増えることはあっても減ることは稀→サイトリニューアルにかかるコストは永遠に右肩上がり？

  • リニューアルのたびにHTML文書を1から作り変えていませんか？
  • そのリニューアルは「見栄えだけ」のリニューアルのはずではないですか？

リニューアルの都度「総作り直し」ではコストに見合わない→構造と表現をできるだけ分離することで、以後のリニューアル時にマークアップし直す作業量を減らし、コストを抑える

Web標準に取り組むべき理由(11)css Zen Garden

http://csszengarden.com/

  • バンクーバー在住のWebデザイナー、Dave Shea氏のプロジェクト
  • 完全に同一のXHTML文書に対し、異なるスタイルシートを適用することで全く別のデザインを実現
  • 世界中のWebデザイナーにとってCSSの実験場

CSSをレイアウトに全面的に用いリッチな視覚表現の可能性を追求

Web標準に取り組むべき理由(12)多様なニーズへ網羅的に対応

Web標準準拠により期待される数々のメリット

  • アクセシビリティの向上
  • SEOの実施
  • より多くの閲覧環境への対応
  • アクセス集中への対処（ファイル軽量化）
  • リニューアル時の負荷軽減

ROIをどの程度のタイムスパンで捉えるかにも拠るものの、上記の「すべての」ニーズをより低コストで満たすには、Web標準の活用のほかに考えられない

欠点や短所はあるのか？

  • いまだ足並みの揃わぬブラウザのWeb標準サポート
    • バグ
    • 仕様の解釈の相違
  • 旧来の手法に慣れ親しんでいた場合、発想の転換が必要
  • 高い学習曲線
  • ワークフローの改革
    • まずコンテンツありき

Web標準を使いこなすポイント

  1. バランス問題に真っ向から取り組む
  2. 常に理由や動機を明確化
  3. ビルトイン・アクセシビリティ
  4. Web標準は便利な「ツール」

Web標準を使いこなすポイント(1)バランス問題に真っ向から取り組む

  • ビジネスゴールとユーザーニーズのバランス
    • Flash？PDF？「必要であれば」積極的に採用すべき
  • ビジュアル面での多様性のバランス
    • 共有可能なビジュアルデザインの最大化により効率的なスタイルシート設計を実現
    • 徹底したルール化とその共有
  • 前方互換性と後方互換性のバランス
    • アクセスログから読み取れるユーザー動向を考慮してビジュアルデザインのサポート対象ブラウザを決定
    • 最新のブラウザで確認してからより古いブラウザで確認
    • (X)HTML文書の文法的妥当性を保つ（validであること＝一定の品質を保証、トラブルシュートが容易）
  • 人間と機械による可読性のバランス

Web標準を使いこなすポイント(2)常に理由や動機を明確化

  • (X)HTML文書の提供
    • メディアタイプ
      • text/htmlかapplication/xhtml+xmlかapplication/xmlかtext/xmlか？
    • 文書型
      • HTMLかXHTMLか？
      • strictかtransitional（あるいはframeset）か？
  • スタイルシートの提供
    • メディアタイプ
      • screenかprintか？あるいは別のメディアに対応するのか？
    • CSSハック
      • ブラウザ側のWeb標準サポートが過渡期にあることを踏まえれば、使用もやむなし（ただし慎重に！）
      • IE7の登場でCSSハックを利用する機会はより限定的なものに？
  • 不明な事柄があれば仕様書を確認（一部邦訳もアリ）

Web標準を使いこなすポイント(3)ビルトイン・アクセシビリティ

  • ユニバーサル性への理解&想像力
  • 一定のアクセシビリティレベルをデフォルトでクリアできるよう、Web標準を利用して（後付けではなく）初めからアクセシブルな実装を実現
  • JavaScriptやCSS、画像の表示が無効であってもコンテンツにある情報や機能を利用できるよう配慮
    • 装飾？それともコンテンツ？それが問題
    • リスクや代償への気づき
      • 例：画像置換
  • マークアップは文法的のみならず意味的にも妥当となるよう注意し、常に最適解を模索する

Web標準を使いこなすポイント(4)Web標準は便利な「ツール」

  • 思考停止に陥ることは危険（Web標準は万能薬ではない！）
  • ビジュアルデザインの発想はCSSの仕様に縛られることなく自由に
  • 常によりクリーン＆コンパクト＆セマンティックなマークアップを目指す
  • 恒常的に考え、学び続ける必要性（新たな仕様、テクニックや議論は絶え間なく発生）
  • W3C信者というわけでもなくW3Cの動向は注視し、可能であれば仕様策定プロセスに積極的に参加
  • 一人ひとりがWebの未来を担っているという意識
  • Enjoy!（楽しまなきゃ意味がない！）

Q & A

おわりに(1)More Eric Meyer on CSS

スタイルシート スキルアップ・デザインブック II

著者
Eric A. Meyer
発売
2006年1月（予定）
発行
毎日コミュニケーションズ
翻訳
吉川典秀
監修
株式会社ミツエーリンクス

おわりに(2)The Zen of CSS Design

  • Dave Shea氏とWaSPリーダーのMolly Holzschlag氏の共著
  • css Zen Gardenに掲載された総計36案を取り上げ、個別にデザインやテクニックを解説
  • 和訳版制作進行中、来春発売予定！

おわりに(3)このプレゼンテーションについて

おわりに(4)最近、Ajaxなるものが流行っていますが……

  • Ajax＝Asynchronous JavaScript + XML
  • アイデア自体は古くからあった（らしい）
  • Web標準が普及し、(X)HTMLやCSS、DOM、JavaScriptといった仕様の解釈がブラウザ間で統一化されてきたことで実現したアプローチ
  • というわけで（謎）次回のCSS NiteのゲストはH2O Space.の谷口允さん、テーマは「Ajax（CSSと JavaScriptを組み合わせると何ができるの？）」

ご清聴ありがとうございました