クロスブラウザからProgressive Enhancementという制作コンセプトへ

今月号の記事

みなさん、「Progressive Enhancement」という制作コンセプトをご存じでしょうか？　「情報やサービスへのアクセシビリティを確保しつつ、ブラウザやデバイスの特徴を活かしたデザインや技術を実装する」という考え方です。日本ではあまり馴染みのない考え方ですが、海外では数年前から制作者間で話題となり、確実に浸透しつつあります。昨年、日本で開催された世界的に有名なWebカンファレンス「Web Directions East」では、多くのセッションでProgressive Enhancementが取り上げられました。これをきっかけに今後日本でも広がっていくと期待されます。本記事では、Progressive Enhancementとはどのような制作コンセプトなのか、そしてどのようなメリットがあるのかを解説します。

Progressive EnhancementとGraceful Degradation

Progressive Enhancementとは、「情報やサービスへのアクセシビリティを確保しつつ、ブラウザやデバイスの特徴を活かしたデザインや技術を実装する」という考え方です。たとえば、モダンブラウザの中には一部のCSS3をサポートしているものがあります。そうしたモダンブラウザのユーザにはCSS3を活かしたデザインや機能を提供し、Internet Explorer 6などのCSS3をサポートしていないブラウザのユーザにはCSS3を利用していないデザインや機能を提供するというものです。

日本では、「クロスブラウザ＝どのブラウザでも同じように見えるようにする」という制作コンセプトが主流です。これは「Graceful Degradation」と呼ばれ、「情報やサービスへのアクセシビリティを確保しつつ、下位のブラウザやデバイスへ同調したデザインや技術を実装する」という考え方です。先ほどの例になぞらえると、Internet Explorer 6がCSS3をサポートしていないため、モダンブラウザ向けにもCSS3を実装せず、すべてのユーザが利用できるデザインや機能を提供することになります。

Progressive Enhancementを実装するメリット

Webの世界ほど技術の進歩が速い世界はないでしょう。しかし、Graceful Degradationという考え方で制作していては、新しい技術の恩恵を受けることは難しくなります。一方、Progressive Enhancementという考え方で制作すれば、CSS3など新しい技術への取り組み方が大きく変わり、技術の研究や普及が早くなるでしょう。

新しい技術へ積極的に取り組むべき理由として、ひとつは、技術の進歩が速いWebの世界で新しい技術を学んで理解することは必須だからです。技術進歩の状況を世界的な観点などを踏まえずに、判断し先延ばしにするのはリスクが高いと言えます。もうひとつは、マーケティング的には他の人が使えない新しい技術を自由に実践で扱えるということは、自身がユニークな存在となり大きな武器になるからです。

Progressive Enhancementの実践例

Progressive Enhancementの対象となる技術は、CSSだけではありません。AjaxでもFlashでも可能です。ただ、今のところはCSS3の実装例が多いため、その中から代表的な例を紹介しましょう。

まずは、オランダのデザイナーEgor KloosがCSS Zen Gardenに投稿した「Gemination」です。属性セレクタを使い、同じInternet Explorerでもバージョン6とバージョン7では、まったく違うデザインが表示されるようになっています。バージョン7の方が見た目にも美しいデザインへと仕上がっています。

Internet Explorer 7で表示したところ
Internet Explorer 7で表示したところ。
FirefoxやSafariなどのモダンブラウザでも同じように表示されます

Internet Explorer 6で表示したところ
Internet Explorer 6で表示したところ

次に紹介するのは、イギリスのデザイナーAndy Clarkeの個人サイト「Stuff and Nonsense」です。これは、Internet ExplorerのCSSサポート状況を皮肉った例で、Internet Explorer 6だと白黒、その他のモダンブラウザだとフルカラーで表示されます。

モダンブラウザで表示したところ
モダンブラウザで表示したところ

Internet Explorer 6で表示したところ
Internet Explorer 6で表示したところ

※上記2サイトで使用しているテクニックの詳細については、A List Apartの記事「Progressive Enhancement with CSS」を参照してください。

最後に私自身とJohn Allsoppが実験的に作成した例を紹介します。Appleの公式サイトのナビゲーションは、通常、画像を使用しています。これをCSS3で再現してみました。CSS3を使用すると、画像を使用した場合に比べて、ファイルサイズを1/10に抑えることができます。

Appleの公式サイトのナビゲーション
Appleの公式サイトのナビゲーション

CSS3で再現したナビゲーション
CSS3で再現したナビゲーション

ちなみに、以下のCSS3のプロパティとセレクタを使用しています。

このようにProgressive Enhancementとして2パターンを用意しておけば、CSS3をサポートしていない古いブラウザでは画像ナビゲーションが表示され、CSS3に対応しているブラウザやデバイスではCSS3ナビゲーションが表示されるようになります。

日本の回線速度は速いですが、世界では回線速度が遅い国もまだまだあります。PCのスペックも高くなってきていますが、今では各種モバイル端末をはじめとした低スペックでネット接続環境を持つデバイスが数多く登場してきています。CSS3ナビゲーションが用意されていれば、遅い接続回線や低スペックのユーザはより快適に情報やサービスを利用できるようになるでしょう。

※モダンブラウザでは一部のCSS3をサポートしています。ただし、ブラウザごとにベンダープリフィックスと呼ばれる接頭辞（「-webkit-」「-moz-」「-ms-」など）をCSS3のプロパティの先頭に付ける必要があります。なお、Operaはプリフィックスを付けない形でCSS3を実装することに力を入れているようです。

※Dreamweaver CS４のレンダリングエンジンであるWebkitもCSS3に対しての取り組みが積極的に行われているため、Dreamweaver上で利用することもできます。

Progressive Enhancementを実装する際の注意点とアドバイス

本記事を読んで、Progressive Enhancementに興味を持ち、早速挑戦してみたいと思った方もいるでしょう。Progressive Enhancementを実装する際に一番大切なことは、「情報やサービスへのアクセシビリティを確保する」ことです。ユーザ体験よりも深い根本の部分を必ず大切にしながら、その上にCSSやJavaScriptなどの技術を実装していき、上位のデバイスには上位のデバイスの特徴（画面サイズ、携帯性）を活かした技術を実装するようにしましょう。

逆に「Progressive Enhancementって、面倒だ」と感じた方もいるかもしれません。しかし、考えてみてください。現在日本では、どのブラウザでも同じように見えるようにするクロスブラウザの考え方が主流だと思います。これはDTPのように見栄えを完全にコントロールできる世界で通用する考え方であり、現在のWebの世界では難しいように思えます。なぜなら、Webを利用するソフト（OS、ブラウザ）、ハード（機器）や環境（車や電車の中など）はここ数年で大きく変化しています。また、ユーザのWebサイトの見栄えは、例え同じOSとブラウザであっても必ずしも同一になるとは限りません。ユーザの設定いかんによって、文字サイズなどが異なります。つまり、クロスブラウザという考え方自体に無理があるのです。

「クライアントがクロスブラウザを求めるから」という意見もあるでしょう。しかし、クライアントはWebサイトのユーザではありません。ユーザとは、そのWebサイトを利用する人です。ユーザは異なるブラウザを使ってデザインを見比べるようなことはしません。Jeffrey Zeldmanによれば、Progressive Enhancementの考え方を生み出す過程で、ブラウザごとの見栄えの違いについて指摘をする人はいなかったそうです。

今まで、ハックを利用したりして、ピクセル単位で見た目を合わせていたことの方が、時間や手間、費用がかかっていたのかもしれません。また、Progressive Enhancementの考えを導入してCSS3を利用した場合、画像を利用したり余計なマークアップを減らしたりしてファイルサイズを抑えることができるので、ユーザは情報やサービスにより早くたどり着けるようになるでしょう。むしろ、この方が見栄えが完全に等しくなることより重要だと思います。

日本の制作現場では、Progressive Enhancementを取り入れているところは少ないでしょう。しかし、海外に目を向けると着実に浸透しています。昨年、日本で開催されたWebカンファレンス「Web Directions East」にスピーカーとして参加したEric Meyer、Jeremy Keith、John Allsoppなどに話を聞くと、彼らは当たり前のようにProgressive Enhancementを技術の実装に利用しているようです。Web Directions Eastをきっかけに、今後日本でも広がっていくと期待されます。

最後に、Progressive Enhancementを学ぶ上での情報リソースを紹介しておきましょう。

‹ 戻る

菊池 崇氏

菊池 崇

米国ボストンにてマーケティングを専攻、帰国後、貿易会社を米国（本社）と日本（支社）で立ち上げる。その後、会社を共同創業者に売却譲渡しWebを独学。現在はWeb Directions East.,LLC代表。Web Directions Eastトータルオーガナイザー。allWebクリエイター塾、XHTML+CSS講師。ゲリラユーザビリティテスティングツールのSilverback日本語版開発、販売元。gihyo.jp、Think ITで連載。