Googleのウェブマスターが薦めるデザイン手法 - Chrome+HTML5 Conference

グーグルおよびHTML5 Developers JPは8月21日、グーグル東京オフィスにおいてHTML5関連技術勉強会の第20回目の記念カンファレンスとなる「Chrome+HTML5 Conference」を開催した。

「Chrome+HTML5 Conference」はWebデベロッパおよびHTML5/CSS3に関して初心者～中級者クラスのマークアップエンジニア/Webデザイナを対象とした規模の大きな勉強会だ。デザイナートラックとプログラマートラックの2つのトラックが併設され、基礎から応用まで幅広く学べる内容となった。ここでは、グーグル 小久保浩大郎氏のセッション「実践CSS3デザイン」から特に興味深かった部分を紹介しよう。

Webデザインの基本

まず小久保氏はこれまでの開発経験から、Webデザインが達成すべき3つのゴールを次のように紹介した。

1. アクセシブルな情報を提供する(アクセシビリティ)
2. 情報を正しくわかりやすく伝える(情報デザイン)
3. 「かっこいい」や「かわいい」などの情緒的な体験を提供する(情緒価値の訴求)

氏は、土台としてのアクセシビリティがあり、その上に情報デザインがあり、その上に情報価値があるのだと説明。一般的にWebデザイナが担当する仕事は3番の「かっこよさ」の部分のみのように思われるが、実際には1番と2番をしっかりとこなさなければ意味がない。Webデザインとは見た目を作ることではなく、体験を作ることだと説明する。

注目の開発手法「Graceful Degradation」

こうしたWebデザインの考え方を前提とした上で、氏が紹介したのが、最近注目されている「Graceful Degradation」という開発手法だ。

「Graceful Degradation」は、簡単に言えば「プログレッシブエンハンスメント」の考え方を逆方向に適用したもの。プログレッシブエンハンスメントは2003年に発表された手法で、WebサイトやWebページ開発の手法として広く知られている。具体的には、基準となる表現レベルを規定し(例えば、[CSSおよびJavaScriptを使用せずに]IE6でも必要最小限の情報すべてにアクセスできるようにするなど)、そこからより上位のリッチなブラウザに対してはよりリッチなUXを提供するという考え方だ。上位へ向けて表現を拡張していくことからプログレッシグ(進歩的な)エンハンスメント(拡張)と呼ばれている。

これに対し「Graceful Degradation」は、プログレッシブエンハンスメントとはベースを置く位置と方向性が逆になっている。つまり、ベースは最新の環境であり最新のブラウザだ。最新の環境では最新の機能を活用したリッチな表現を実現し、対応していない古い環境ではその環境で表現できる妥当なことろまでリッチさを落としていく。「フィーチャーディテクション」の普及とともに注目されはじめた手法といえる。

ここで重要なのは、この手法を開発者やデザイナのみならず、顧客と共有するところにあるという。「Graceful Degradation」の手法を関係者全員で共有することで、スムーズなプロジェクト進行が可能になると説明があった。

なお、「Graceful Degradation」とよく似た手法に「Regressive Enhancement」という手法がある。「Graceful Degradation」のように機能やUXのレベルを落としていくのではなく、古い環境においても同様のUXであり体験を実現するようにさまざまな方法で対応していく手法という違いがある。

「レスポンシブWebデザイン」とオススメJavaScriptライブラリ

次に小久保氏はユニバーサルデザインを実現するためのひとつの手法として「レスポンシブWebデザイン」を紹介した。具体的にはCSS3メディアクエリを活用して表示領域のサイズに対応した見やすデザインを実現するというもの(Less Framework 3などこれを実現するためのJavaScriptライブラリのひとつ)。ユーザの環境に合わせてなるべく優れたデザインを提供するというものといえる。インターネットにアクセスするデバイスが多様化する現状において「レスポンシブWebデザイン」はCSSメディアクエリの登場とともに注目度が高い。

最後に小久保氏は、セッションで紹介した手法を開発に適用するためのJavaScriptライブラリとして「Modernizr」を紹介した。Modernizrはいわばフィーチャーディテクションを自動的に実施してくれるライブラリ。ブラウザが何の機能を提供するかを包括的に提供してくれる。CSS3側では特にフィーチャーディテクションに苦慮することなく「Graceful Degradation」を実現できるようになる(フィーチャーディテクションに関しては動作速度が問題になりやすいという特徴もあり、ほかの手法と組み合わせて効率のよい検出を実施する方法も提案されている)。

また小久保氏はデザイナ、コーダ、ディレクタという役割はすでに変化しているとも指摘した。デザイナはHTML5やCSS3について把握していないと問題になることが多く、単純に分業すればいいという時代ではないという。完全な分業はコストがかかる。ディレクタも何ができて何ができないということを把握していなければならないと説明があった。