未来に向けた
包括的ウェブデザイン
―漸進的ウェブ開発―
スティーブン・シャンピオン、ニック・フィンク

2003年3月11日
SXSW(於テキサス州オースティン)
http://www.sxsw.com
永久保存版(英語原典/ Original English Version)
http://hesketh.com/presentations/sxsw/2003/

En Español (Traducido por: mort (Manuel González Noriega) para Simplelógica)
日本語版翻訳工房M&O 訳)

はじめに

 ウェブデザインは大人になるべきである。ここ数年の状況の変化に学び、粗野で落ち着きのないドットコム時代に身につけた排他的な態度を捨てなければならない。来たるべき未来では、機器やプラットフォームが多様化することを認識し、表現のための論理および動作と、意味のためのマークアップとを分離すべきである。

 ウェブデザインの目標は、耳目を引きつけることだけにあるのではない。ドキュメントに盛り込まれた情報を可能な限り多くの人に届けることも目標の一つなのだ。

 デザイン上の妥協はあり得るし、望ましいことだ。しかし、それは利用者の犠牲を意味すべきではない。利用者が本来持つはずの機器選択権を確保する観点から論じられるべきである。

 今日では、強力な機能を誇る最新のグラフィカルデスクトップブラウザーがある。だが、低機能なブラウザーから最新のブラウザーに至るまで、漸進的に機能を増やしていくことが、唯一つのマークアップドキュメントと複数のスタイルシートを使って可能だ。しかも、利用者の使っているブラウザーを調べて切り替えるのではなく、ブラウザー自体がスタイルシートを選ぶようにできるのだ。

 誰をも見捨ててはならない。

ウェブ技術の略史

1984
SGML が ISO 標準に
1991
CERN に行単位のブラウザーが登場
1993
NCSA Mosaic など
1994
Netscape Navigator 登場、W3C 設立
1995
Microsoft Internet Explorer
1996
ブラウザー戦争、CSS1、JavaScript、DHTML
1997
HTML 3.2、CSS2、HTML 4.0
1998
XML
2000
XHTML 1.0

ブラウザーの発展

「思いやりのある縮退」

 この「思いやりのある縮退(graceful degradation)」という概念は、ウェブでは 1994 年に始まるが、コンピューター科学などの分野ではそれ以前から導入されていた。一般に、ブラウザーは、リリース後に登場した新機能を使っているドキュメントを表示することはできない。しかし、その場合でも、ドキュメントに含まれる基本的な情報や機能を提供することをもって是とする、という考え方である。

 だが、近年では、alt や title 属性などで十分だという前提の下に、機能の低いブラウザーに配慮せずに、一つのバージョンだけでサイトを構築するという意味に変わってきた。

 ほとんどのウェブ利用者は、グラフィカルデスクトップブラウザーを使っている。ビジュアルデザイナーらがそう考えているのが大きな原因だ。だから、経済優先で事が決定されてしまうのである。しかし、この議論は、次のような基本的な事実を見逃している。

  1. 最新のブラウザーでさえ、その機能は多様である
  2. アクセシビリティーは、すべての人のためにある。障害者のためだけではない
  3. X/HTML と CSS で、すべてのブラウザーに対応可能

基礎となる標準の高度化

デザインアプローチの相克

ウェブアプリケーションと動的 HTML の登場

「思いやりのある縮退」に伴う問題

新しいプラットフォーム/機器がもたらす問題

漸進的開発

 「漸進的開発(Progressive Enhancement)」は、HTML を生み XML を誕生させた意味的マークアップ技術の歴史を辿ろうというものである。ウェブドキュメントのデザイナーやビジュアルデザイナー、あるいは開発者たちは存分に腕を振るいたいと考え、一方、利用者は必要な情報と操作性を求める。それらの両立を図ることが、CSS などの新しい表現技術を活用することによって可能である。しかも、アクセシビリティーや将来の互換性を考慮し、更には、新しい機器の持つ機能を活用することも可能なのだ。

 今までは、クライアントに送るべきデータはサーバーが決定していた。これに対して、漸進的開発においては、新しい方法、すなわち、従来からあるマークアップの特性や種々のブラウザーが持つバグなどを駆使する情報伝達法を提案する。ドキュメントの開発では、「思いやりのある縮退」を考えるのではなく、まず、最も機能の少ない、最も機能の異なる機器を目標にドキュメントを構築する。その上で、個々のブラウザーや機器に固有の表現論理を導入するのだ。その際、基本となる機器に不適切な負担を課さないようにしつつ、最新のグラフィカルブラウザーを持つ利用者には、より豊かな表現を届ける方法を用いるのである。

漸進的開発の根拠と目標

漸進的開発手順(基本)

漸進的開発手順(レイアウト)

漸進的開発手順(動作)

漸進的開発手順(じゃじゃ馬馴らし)

参考資料

CSS 技巧

http://tantek.com/CSS/Examples/
http://css-discuss.incutio.com/?page=CssHacks
http://www.albin.net/CSS/OwenHack.html
http://centricle.com/ref/css/filters/tests/fabrice/
http://css-discuss.incutio.com/?page=CaioHack
http://www.v2studio.com/k/css/n4hide/
http://css-discuss.incutio.com/?page=BoxModelHack
http://www.premonition.co.uk/cssd/ie51-only.html
http://www.sam-i-am.com/testsuite/css/mac_ie5_hack.html

リスト

http://WebDesign-L.com
http://evolt.org
http://css-discuss.org

書籍

http://css-discuss.incutio.com/?page=GoodBooks