11月13日に開催されたWeb Directions East 2009は、スピーカ陣の豪華さがとにかく半端ではなく、世界に名だたるWeb開発者が「デザイントラック」と「ビジネストラック」に分かれて講演を行った。筆者はデザイナではないもののデザイントラックの全セッションに参加し、様々な視点から語られるWeb開発の次世代像にいたく感銘を受けた次第である。

本記事では、それらのセッションについて簡潔にまとめたレポートを、いくつかのスライド画像とともにお伝えしたい。

また、Google WaveのUIデザインについて語った基調講演については、こちらの記事を参照して頂きたい。

「壁を壊せ」 - Andy Clarke氏

Andy Clarke氏は著名なWebデザイナで、Webデザイン プロフェッショナルワークフロー・バイブルを初めとした書籍の執筆や、Stuff and Nonsenseというデザインコンサルタント企業を手がけるなど、多彩な活動を行っている。

Andy Clarke氏のセッション「壁を壊せ」は、Webデザイナはよりクリエイティブな活動にこそ時間を割くために、現在の一般的なワークフローや常識と思われている事柄を見直すべきだ、というもの。改善すべき「現在の一般的なワークフロー」とは以下のようなものだ。

1. コンテンツを用意する
2. Adobe PhotoshopやAdobe Illustratorなどを用いて、静的にデザインを行う
3. HTML/CSS/JavaScriptを用いてWebデザインに変換する
4. テストを行い、全てのブラウザで同様に表示されるよう調節する

Clarke氏は、このワークフローを次のように改善すべき、としている。

1. コンテンツを用意する
2. HTML/CSS/JavaScriptを用いて、Webブラウザ上でデザインを行う
3. テストを行う

つまり、デザインツールを用いて静的なデザインを行う事をやめ、デザインの作業自体もWebブラウザ上で行うという改善が必要だということだ。これにより、インタラクティブなUI(例:「hover時に色が変わるボタン」など)のデザインをどう行うかに頭を悩ませる必要もなくなり、顧客の要望に対して即座にフィードバックを返す事もできるようになる。

また、後者のワークフローでは「全てのブラウザで同様に表示されるように調整する」という文章が省かれている事にも注意して欲しい。Clarke氏は「デザインが『異なる』という事は、デザインが『壊れている』という意味ではない」("Different does not mean broken")として、全てのブラウザで全く同じ見た目を保証する必要はないと主張している。特定のCSSをサポートしていないようなレガシーなブラウザでは、見た目が多少異なるのは当然、という立場だ。

例えば以下の画像では、モダンブラウザ(右)では最初の段落のフォントが大きく表示され、段落の下に下線が表示されるが、古いブラウザ(左)ではそうした効果が見られない。

他にも「モダンブラウザでは角丸四角形で表示されるが、古いブラウザでは通常の四角形として表示される」など、デザインを大きく損なわない範囲でならばブラウザ間にデザインの差異があっても問題ないはずだ。全ブラウザで同様の見た目を確保するために多大な時間を割くのであれば、顧客とのコミュニケーションを密に図ることで、より生産的な活動に時間を使えるようにすべきである、というのが同氏の主張である。

「社会的なウェブインタフェースの設計」 - Christian Crumlish氏

Christian Crumlish氏は、Yahoo! Design Pattern Libraryの基礎を作り上げた人物として著名な人物であり、Designing Social Interfacesを初めとした多くの著作を持つ事でも知られている。同氏のセッションはソーシャルなWebアプリのデザインを行うにあたって押さえておくべきパターンに関するもので、前掲の著作や、こちらのWikiなどで紹介されているものを元にしている。

本セッションで取り上げられたパターンは非常に多岐に渡るが、まず基本原則として示されたのは以下の5つだ。

• 牛の通った後を舗装せよ(Pave the Cowpaths): Twitterの「『@ユーザ名』と文中に含めると特定のユーザ向けのメッセージになる」という機能は元々あった訳ではなく、ユーザが発明した使い方を機能として取り入れたものである。このように、システムをユーザがいかに利用しているかをきちんと理解し、システムの機能として取り込む姿勢が良いデザインの近道となる
• 人間のように話せ(Talk Like A Person): 「システムが自身を非難するようなエラーメッセージにせよ」(Self-deprecating Error Messages)、「Ask Questions」(質問せよ)など、システムが一人の高尚な人間であるかのように振る舞うべきとするパターン
• オープンであれ(Be Open): Web標準への準拠や他のサイトとのデータ連携など、システムの外部にも広くオープンなサイトであるべきとするパターン
• ゲームから学べ(Learn from Games): 人間はゲームが大好きだ。既存の様々なゲームから多くの事を学ぶべきとするパターン
• 倫理的な面を尊重せよ(Respect the Ethical Dimension): 自分のサイトにとって有益だからといって、倫理的に問題のある設計を行うべきではない、というパターン

これらの基本的な5パターンを中心とし、目的別のパターンが96種類存在するとの事。

こうしたデザインパターン群については、さすがに本セッションでも全てを説明する事はかなわず、いくつかのパターンをさわり程度に紹介する事しかできなかった。詳細を知りたい方は、Yahoo! Design Pattern Libraryや、同氏の書籍などをあたってみて欲しい。