プログレッシブエンハンスメント

プログレッシブエンハンスメント (Progressive Enhancement)は、核となるコンテンツを最重要視するウェブデザイン戦略である。この戦略では、エンドユーザーのウェブブラウザやインターネット接続に合わせて、表示や機能において、異なる内容や技術的に困難な内容をコンテンツに漸次追加していく。この戦略の利点として挙げられるのは、すべてのユーザーが任意のブラウザーまたはインターネット接続を用いて、ウェブページの基本的なコンテンツと機能性にアクセスできることと、より高度なウェブブラウザーまたはより広帯域の接続を有するユーザーには同じページの拡張バージョンを提供できることである。

 歴史 
「プログレッシブエンハンスメント」という用語は、オースティンで2003年3月11日に開催されたSXSWインタラクティブカンファレンスと、Champeon, Steven & Finck, Nick (2003) Inclusive Web Design for the Future, SxSWi presentation 2003年3月から6月にかけて発行されたWebmonkeyの連載記事を通じて、スティーブン・チャンピオンとニック・フィンクによって形成された。Champeon, Steven (2003), Progressive Enhancement and the Future of Web Design, Webmonkey

様々な画面解像度に対応する柔軟なページレイアウトを実現するCSSテクニックは、レスポンシブウェブデザインの手法として知られる。.net Magazineは、プログレッシブエンハンスメントを2012年ウェブデザイントレンドランキングの第1位に選んだ (レスポンシブデザインは第2位だった)。Googleは、「我々のシステム (およびより多くのブラウザー) が、ウェブデザイン上の特定の機能がまだサポートされていない場合に、使用できるコンテンツと基本的な機能性を理解できる」よう支援するため、プログレッシブエンハンスメントの採用を奨励した。Pierre Far (2014), Updating our technical Webmaster Guidelines, Webmaster Central Blog

 導入と背景 
この戦略は、古いバージョンのブラウザーソフトウェアでも動作する最新ブラウザー向けウェブページをデザイナーが制作するという点で、グレイスフルデグラデーション (Graceful Degradation)として知られている従来のウェブデザイン戦略の進化版であると言える。グレイスフルデグラデーションではページが「退化 (degradation)」、つまりデザイン上想定されたテクノロジーが存在しない場合でも表示できるとされていた。しかし実際には、エンドユーザーは「とにかくアップグレード」すべきだという考え方に取って代わられた。

プログレッシブエンハンスメント (以下、PE) では、熟慮の末、戦略が逆転された。最小公分母となるブラウザーソフトウェアの機能性に合わせて基本となるマークアップ文書を作成し、デザイナーがCSSやJavaScript (またはFlash、Javaアプレット、SVG等、他の高度なテクノロジー) を用いてページのプレゼンテーションや振る舞いに機能性または拡張内容を追加するのである。そのような拡張内容はすべて外部リンクとするので、特定のブラウザーで使用できないデータが不必要にダウンロードされることはない。

PE手法は、チャンピオンがHTMLまたは他のウェブプレゼンテーション言語に取り組む前に行ったSGMLに関する初期の実験 (1993～1994年頃)、またその後ブラウザーのバグに対処するためのCSSに取り組んだ際の経験に由来している。その初期のSGMLの文脈においては、セマンティックなマークアップが重要とされ、プレゼンテーションはマークアップ自体に組み込まれず、ほぼ必ず別途検討されていた。このコンセプトは、マークアップ界隈では「プレゼンテーションとコンテンツの分離」の原則、「コンテンツとスタイルの分離」の原則、あるいは「セマンティクスとプレゼンテーションの分離」の原則等、様々に呼ばれていた。1990年代半ば、CSSの導入と普及の前、ウェブが進化するにつれてSGMLの根本規則はHTML拡張派が度々破るところとなった。その結果、ウェブデザイナーは新しい破壊的技術とタグを採用してデザインせざるを得なくなった。誰もが最新のブラウザーを使っているわけではないということが認知され、グレイスフルデグラデーションに賛同が集まったが、最新、または1つ前のメジャーリリースのブラウザーでしかサポートされていないデザイン方法やテクノロジーが使われることが多くなり始めた。数年間、大半のウェブは最新の、最も人気のあるブラウザーでしか利用できなくなった。これはCSSの登場、採用、そして普及、ならびにウェブデザイナーにCSSを使ったレイアウトのしかたを教える (エリック・コステロ、オーウェン・ブリッグス、デイブ・シェアらによる) 人道主義的な草の根の教育活動が起こるまで続いた。

PEの根拠は、「グレイスフルデグラデーション」の背後にある根本的な仮定——ブラウザーは必ずより高速かつ強力になるということ——が、低機能なブラウザーと深刻な帯域制限を有するハンドヘルド機器とPDAの台頭によって誤りだったと証明されたという認識にある。さらに、ウェブの黎明期におけるHTMLと関連技術の急激な進化が減速したこと、また非常に古いブラウザーが使われなくなったことで、デザイナーは、CSS等の強力なテクノロジーを使ってプレゼンテーション作業をすべて行い、JavaScript等でクライアントサイドの複雑な振る舞いを拡張することが自由にできるようになった。

当初、PEは「文書構造とコンテンツのセマンティクス、プレゼンテーション、そして振る舞いからの分離」という繊細な技術を説明するための幾分使いやすいキャッチオールなフレーズとして提案された。また、特定のブラウザーのレンダリングバグに対処するための、当時広く使われていたCSSハックをベースにしていた。新人デザイナーがPEのコンセプトを受け入れ、PEの手法の拡張と修正を行うにつれて、PEの戦略は形成されていった。

 基本方針 
PEの戦略は以下の基本方針で構成されている。
 基本となるコンテンツはすべてのウェブブラウザからアクセスできる
 基本となる機能性はすべてのウェブブラウザからアクセスできる
 疎なセマンティクスですべてのコンテンツがマークアップされる
 拡張レイアウトは外部リンクされたCSSで提供する
 拡張された振る舞いは外部リンクされた控えめなJavaScriptで提供する
 エンドユーザーのウェブブラウザーの好みを尊重する

 支持と採用 
 2003年8月、ジム・ウィルキンソンはPEのウィキページを作って秘訣やコツを収載し、かつ全体的な戦略を説明した。Wilkinson, Jim (2003), Progressive Enhancement - CSS Discuss
 ジェレミー・キース等のデザイナーは、PEを他のモダンなウェブデザイン (Ajax等) の手法と調和させることで、柔軟かつ強力なユーザー体験を提供できることを示した。Jeremy Keith's Adactio blog (2005), Progressive Enhancement with Ajax
 アーロン・グスタフソンは、根底にある哲学に始まってCSSのアプローチにJavaScriptの扱い方に至るまでを含む、プログレッシブエンハンスメントの基礎を網羅した連載をA List Apartのために執筆した。Aaron Gustafson (2008), Understanding Progressive Enhancement, A List ApartAaron Gustafson (2008), Progressive Enhancement with CSS, A List ApartAaron Gustafson (2008), Progressive Enhancement with JavaScript, A List Apart
 デイブ・シェア等はCSSベースのデザイン戦略を指す用語の採用を普及させる支援を行った。
 Acid2テストとAcid3テストを作成したウェブスタンダードプロジェクト (WaSP) を始め、各組織はPEを教育上の取り組みの基礎として組み込んだ。
 2006年、Yahoo!のネイト・コエチリーはウェブデザインとブラウザーサポートに関する独自の取り組みであるグレイデッドブラウザーサポート (Graded Browser Support, GBS) においてPEに詳細に言及した。Nate Koechley, Graded Browser Support
 AOLのスティーブ・チップマンは、自身のウェブデザイン戦略の基礎として (DOMスクリプティングによる) PEに言及した。Steven G. Chipman (2005), New Skool DOM Scripting
 AOL最適化チームのリーダーであるデイビッド・アーツは、アクセッシブルレンダリングテクノロジー (Accessible Rendering Technologies) 一式の開発と「拡張 (enhancement)」の分解をオンザフライで行う技術の考案を行い、ユーザーの好みを守れるようにした。
 クリス・ハイルマンは、CSSの標的化導入によってブラウザーがそれぞれ扱えるコンテンツ (と拡張内容) だけを取得できるようにすることの重要性を議論した。Chris Heilmann, Double Vision – Give the Browsers CSS They Can Digest (2005)
 フィラメントグループのスコット・ジェールは、「テスト駆動プログレッシブエンハンスメント」を提案し、 デバイスの機能を (検出されたユーザーエージェントから推測するのではなく) テストしてから拡張内容を提供することを推奨した。
 Wtはオープンソースのサーバーサイドウェブアプリケーションフレームワークで、ブートストラップ時にプログレッシブエンハンスメントを透過的に実装し、プレーンなHTMLから完全なAjaxにまで展開する。

 アクセシビリティ上の利点 
PEの原則に従って作られたウェブページはその性質上アクセシビリティが高くなる。これは、PEの戦略によってコンテンツが必ず利用可能であることと、通常サポートされないか、または容易に無効化されるスクリプティングによって妨害されないということが要求されるためである。さらに、疎なマークアップの原則によって、読み上げツールがその内容を探しやすくなる。ただし、テーブルレイアウトや「タグスープ」等に対応できるよう設計された古いツールがPEサイトでどの程度使用できるかは定かではない。

 SEO上の利点 
SEO対策に繋がることも、PEベースのウェブデザイン戦略の副次的作用である。基本となるコンテンツは必ずサーチエンジンスパイダーからアクセスできるので、PEの手法で作られたページでは、サーチエンジンのインデクシングを妨げる恐れのある問題が回避される。Stephan Spencer, PE is good for SEO | Searchlight - CNET News

 批判と反応 
ギャレット・ダイモン等の懐疑派の一部は、あるユーザーインターフェースプレゼンテーションまたは振る舞いを達成するためにJavaScriptに重度に依存しているような状況ではPEは機能できないとする懸念を表明したが、Dimon, Garret, The Reality of Progressive Enhancement  これに対しては控えめなJavaScriptが1つの答えとなっている。あるいは情報を含んだページはスパイダーによるインデクシングを受けるためにPEでコーディングすべきだと反論し、IA Summit 2006 » Blog Archive » Web 2.0 and SEO?  あるいはFlashを多用したページでもPEでコーディングすべきだと反論した。deconcept » Using alternate content as content in Flash 関連する分野では、コンテンツとプレゼンテーションの分離の原則に関する疑念を絶対的に表明する者が多く、この2つは緊密に連結しているという現実的認識を主張した。Stopdesign | Are They Really Separated? (2003)A List Apart: Articles: Separation Anxiety: The Myth of the Separation of Style from Content (2000)

 脚注 

 参考文献 

 Bowman, Doug (2003) Are They Really Separated? Retrieved April 14, 2006.
 Edwards, James & Adams, Cameron (2006) Script Smarter: Quality JavaScript from Scratch Retrieved April 14, 2006.
 Heilmann, Christian (2006) Seven Accessibility Mistakes, Part I Retrieved April 14, 2006.
 Koechley, Nate (2006) Graded Browser Support Retrieved April 14, 2006.
 Malicoat, Todd (2003) Form vs. Function in Site Design Retrieved April 14, 2006.
 Nyman, Robert (2006) What is Accessibility? Retrieved April 14, 2006.
 Olsson, Tommy (2007) for Accessites.org Graceful Degradation & Progressive Enhancement Retrieved April 2, 2007.
 Shea, Dave (2004) Zen and the Art of Web Improvement (WE04 Keynote) Retrieved April 14, 2006.
 Stearns, Geoff (2006) Using Alternate Content As Content In Flash Retrieved April 14, 2006.
 van der Sluis, Bobby (2005) Ten Good Practices for Writing JavaScript in 2005 Retrieved April 14, 2006.
 101 Search Engine Optimization Tips Retrieved April 14, 2006.

 関連文献 
 記事

 Gustafson, Aaron (2008) Understanding Progressive Enhancement Retrieved July 7, 2011
 Gustafson, Aaron (2008) Progressive Enhancement with CSS Retrieved July 7, 2011.
 Gustafson, Aaron (2008) Progressive Enhancement with JavaScript Retrieved July 7, 2011
 Gustafson, Aaron (2007) Ruining the User Experience Retrieved May 7, 2007.
 hesketh.com, September 12, 2003 Progressive Enhancement: Paving the Way for Future Web Design
 Keith, Jeremy (2006) Behavioral Separation Retrieved May 7, 2007.
 Olsson, Tommy (2007) Graceful Degradation & Progressive Enhancement

 書籍

 Briggs, Owen; Champeon, Steven; Costello, Eric; Patternson, Matthew (2004) Cascading Style Sheets: Separating Content From Presentation (2nd ed.). San Francisco: Apress. 
 Gustafson, Aaron (2011) Adaptive Web Design: Crafting Rich Experiences with Progressive Enhancement. Chattanooga: Easy Readers. .
 Keith, Jeremy (2007) Bulletproof Ajax. Berkeley: New Riders. 
 Keith, Jeremy (2005) DOM Scripting: Web Design with JavaScript and the Document Object Model. Berkeley: friends of ED. 
 Parker, Todd; Toland, Patty; Jehl, Scott; Costello Wachs, Maggie (The Filament Group) (2010) Designing with Progressive Enhancement Peachpit/New Riders. 

 関連項目 
 Ajax
 コンテンツアダプテーション (コンテンツをデバイスの機能に適合するよう変化させる)
 フォールトトレラントシステム
 jQuery Mobile
 フルードレイアウト
 セマンティックHTML
 控えめなJavaScript

 外部リンク 
 Color Vision, by Cal Henderson
 The W3C Markup Validation Service

Category:ユーザビリティ
Category:ウェブアクセシビリティ
Category:ウェブデザイン