プログレッシブエンハンスメント（Progressive Enhancement）という考えかた

最近、プログレッシブエンハンスメント（Progressive Enhancement）という言葉をよく目にするようになりました。Webユーザーの増加、ユーザーの閲覧環境の多様化（パソコンだけでなく、携帯電話やスマートフォン、支援技術など）、ユーザーの抱える身体的状況の多様化（障害、加齢、怪我、など）、といった背景を踏まえて、より幅広く、多くの人が情報にアクセスできるようにすることを目指したWebサイトの開発理念です（Webアクセシビリティを実現するための技術的方法論のひとつとも言えますね）。以下、簡単にご紹介したいと思います。

基本的な考えかた

あらゆるユーザーに対して、基本的な体験ができるようにします（たとえば、そのサイトが伝えたい情報には、どんな閲覧環境下にいるユーザーでもちゃんと到達できるようにしておく、といった具合です）。その上で、広い帯域幅や高機能なブラウザを使っているユーザーには、より豊かな体験を提供します。HTML、CSS、JavaScript/Ajax、の3つのレイヤーで考えます。

プログレッシブエンハンスメントの3つのレイヤー

大切なのは、どんな閲覧環境でも、HTMLレベルで情報内容がきちんと伝わることです。HTMLファイルは単にバリデータ（検証ツール）でのチェックをパスするだけでなく、ドキュメント構造（メタデータ、大見出し、小見出し、段落、強調箇所、箇条書き、挿絵、ハイパーリンクといった文書を構成する要素の相互関係）が意味的に適切であること（セマンティックであること）、つまり、視覚的なレイアウトを外した状態でも意味が伝わることが大切です。

その上で、より高機能な閲覧環境（多くのWebユーザーが使っている、いわゆる「モダンブラウザ」はこれに相当します）のために、視覚的なデザイン（見栄え）を整えるために、CSSを加えます。

さらに、より効果的で便利なインタラクション（ふるまい）を加えたい場合は、JavaScript/Ajaxを使います。その際には、「控えめなJavaScript（Unobtrusive JavaScript）」という考えかたをおすすめします。「控えめ」とは、JavaScriptをサポートしているブラウザでは適切に機能し、より豊かなユーザーエクスペリエンスを提供しますが、JavaScriptをサポートしていないブラウザでは「何事もなかったかのように」存在感を消すこと（それによって、ユーザー行動を妨げないこと）、を意味します。

Hijax（ハイジャックス）

当サイトでも、以前にコラム記事「Ajaxは取り扱い注意」の中で以下のように述べたことがありますが、プログレッシブエンハンスメントにおけるAjaxやJavaScriptのありかたを平易に表現すると、このようになるのではないかと思います。

  • Ajaxは（JavaScriptが使えるユーザーに対しては）より良いユーザーエクスペリエンスを提供するもの。
  • Ajaxによるユーザーインターフェースは、「無くても困らないけどあれば便利」なもの。

ちなみに、プログレッシブエンハンスメントの概念に準じたAjaxの使いかたを、Hijax（ハイジャックス）と呼ぶことがあります。英国のWeb開発者、Jeremy Keith（ジェレミー・キース）氏が名付けた表現ですが、「ハイジャック（飛行機の乗っ取り）」と「Ajax」をかけた造語です。

これは、本来の姿（伝統的な仕組みによる、サーバーとのリクエストのやりとり）はそのまま残しておいて、より快適なユーザーエクスペリエンスを享受できる環境にあるユーザーに対しては、Ajaxを施すことによって、その伝統的な仕組みを「乗っ取る」（サーバーとのやりとりが発生するのをブロックして、ユーザーの使用しているブラウザの中だけで、よりスムーズなインタラクションを実現する）という考えかたです。

Graceful Degradation（グレースフルデグレデーション）

プログレッシブエンハンスメント（Progressive Enhancement）という概念に対して、グレースフルデグレデーション（Graceful Degradation）という概念もあります。これは基本的にはまず、リッチなインタラクションを前提としていて、下位の閲覧環境（パソコン用のモダンブラウザ以外の環境、たとえば携帯機器やテキストブラウザ、支援技術など）に対しては、使えるインタラクションを減らしてゆく、という考えかたになります。現実世界でたとえるならば「バリアフリー」に近い概念と言えるかもしれません。これはこれで有効そうに見えますが、リッチなインタラクションありきで情報提供を実現したうえで、後から（下位の閲覧環境向けに）インタラクションを間引くという考えかただと、一部のユーザーに基本的な情報が伝わらないという結果を招く恐れがあり、注意が必要でしょう。

これに対して、プログレッシブエンハンスメントは、最初から様々な環境に配慮することを前提としているので、その意味では、グレースフルデグレデーションを「バリアフリー」にたとえるならば、プログレッシブエンハンスメントは「ユニバーサルデザイン」に近い概念と言えそうです。