Webデザイナーにとって嬉しい時代だ。Webパブリッシングの主流を形付けた枯れ行く技術や方法論と10年ほど戦った現在、ユーザエクスペリエンスをコントロールしようとすることから離れて、新たなチャレンジに取り組む時が来ている。
その一つのチャレンジであるスマートフォンやタブレットブ向けのデザインは、大胆な流れをいくつか生んでいる：Flashの放棄、HTML5の躍進、Luke Wroblewski氏の「モバイルファースト」という考え方、そして最近ではEthan Marcotte氏が掲げる「レスポンシブWebデザイン」だ。
すべてはこのデモから始まったと言っても過言ではない。ブラウザのサイズに応じて、文字サイズ・画像サイズ・レイアウトが変わる
Marcotte氏の記事（和訳）と本によると、レスポンシブWebデザインとは、Webコンテンツの並び替え・リサイズ・表示／非表示をする技術に基づいた、コンテンツ表示における柔軟で適応性のあるアプローチだ。スクリーン解像度とダウンロード速度が異なるさまざまな端末に、より可読性と利便性の高いページを提供することが可能となる。
その人気ぶりは、多くの人にとって多くのサイトにおけるより良いコンテンツ消費の体験につながるだろう。しかしながら、わたしはレスポンシブWebデザインには「コンテンツ、プレゼンテーション、インターフェイス」という3本柱があると考える。そして、見た目の最適化について話し合っているだけでは、その1本だけを見ているに過ぎないと思うのだ。レスポンシブWebデザインの定義を広げることによって、ユーザの今日と、技術と思考が発展した未来におけるWebのエクスペリエンスをより上手にサポートすることができるだろう。
さて、このエッセイでは1本目の「コンテンツ」がレスポンシブになる方法を考える。その前に、このような体験を可能とする物理的なデバイス、具体的にはレスポンシブWebデザインのムーブメントを巻き起こしたモバイル端末を観察しよう。
Marcotte氏が書籍「Responsive Web Design」で提案しているのは、Media queryとJavascriptを使って、端末の特徴・解像度・大きさ・縦横を推定した上でより読みやすいページをレスポンスとして返すことだ。
しかし、Gino Zahnd氏が指摘するように、端末とは単純にモデムがつながった画面ではない。ユーザ入力の受け取り、知覚反応、処理能力とデータストレージの所有、周辺環境への反応性を持ち合わせるメカニズムでもある。
これらのデバイス能力を生かすことによって、私たちはユーザの目標とコンテキストについて少し理解を深めた上で、より役に立ち、より労力のかからないレスポンスを返したい。デバイス能力がどんどんと強化されるなかで、デバイスとユーザを混同しがちになるので、気をつけたい。常に「この端末で何ができるか？」ではなく「この人は何がしたいのか？」ということから考え始めることによって、そのような事態に陥らなくて済むだろう。
モバイルの話しは、移動中のユーザを想定することが多い。電車のなか、散歩先、カフェなどでデバイスを使うシーンが描かれる。まずは、この仮説を見直そう。Marcotte氏も指摘をしているが、移動中での利用時間とソファやベッドの上での利用時間は、実は同等程度である。両方のコンテキストを考慮することによって、私たちは想像力を羽ばたかせることができる。モバイル対応、すなわちPCサイトのシンプル版だ、という見方は避けようではないか。
より強力な仮説は「モバイル端末、特にタブレットは、非常に個人的なデバイスである」というものだ。iPhoneやiPadを誰かと共有することは可能だ。でも、複数アカウントに対応していないため、それはぎこちない体験であり、両者にとって機器の価値自体を下げることになる1。
階層を通じて移動するデータ
このような個人所有へのバイアスに起因して、私たちはモバイルには非常に個人的な情報を大量に持ち歩いている。例えば、わたしのiPhoneには、現在地・現時刻・使用言語、・朝起きた時間・最後にいつ運動をしたか・最近読んだもの・明日の予定・明日会う友だちの連絡先・彼らとの会話履歴などがすべて入っている。望ましいかどうかは別として、これらの情報はいつか、Webエクスペリエンスをよりレスポンシブにするために活用されることになるかもしれない。2
もちろん、ブラウザからアクセス可能なのはその一部であり、Webサイトからアクセス可能な情報は更に限定される。アクセスの度合いは、デバイス能力、業界標準、世間の感覚、個人の設定が変わるに連れて、常に変わってゆくものだと思う。責任あるデザイナー3として、私たちは技術的に可能であるラインからは数歩引いたところでデザインをし、そこから先に踏み込む際はユーザの許可を都度得ながら進まなければいけない。
さて、デバイスとユーザの関係についての復習はこれくらいにしよう。次に、ユーザがコンテンツから価値を見出す方法を分析し、その価値を最大化するレスポンスをいくつか考える。
コンテンツとの価値ある接触と体験には、以下のような要求のヒエラルキーがある：
提供側がこれらの欲求に答えれば答えるほど、コンテンツとのエンゲージメントが深まる4。
2011ロンドン暴動のニュース記事を例にしよう。どうしたら、エンゲージメントの質を高めることができるだろうか？
わたしがこの記事を既に読んでいると分かるなら、変更された箇所を教えて欲しい。 刻々と事態が変化する危機を報道する際、一本の記事は1日を通じて何回も更新される。文章や段落にタイムスタンプを付与し、わたしの「最後に読んだ時刻」と比較して、新しい箇所をハイライトすれば、時間が特に貴重である緊急事態の時に、無駄な労力をかけなくて済む。
わたしが日本にいると分かるなら、東アジアのリーダの発言や国内での類似事例を見せて欲しい。馴染みの薄い地域やトピックとのエンゲージメントが増えることによって、世の中や社会の出来事に対するリテラシーが上がる。社会貢献にもつながるかもしれない。
簡単な例ではあるが、上記の2つ目の例は、コンテンツの新しい見せ方（プレゼンテーション）だけではなく、人によって異なるバージョンのコンテンツを提供している。この違いは役立ちそうに思えるが、カスタマイズの度合いが深まったり、よりパーソナルな体験が提供されたら、ユーザエクスペリエンスはどのように変化するのだろうか？例えば、Webサイトがわたしの年齢を知ることが出来たら、文章の難易度を調整して欲しいだろうか？性別に応じてトーンを変えて欲しいものだろうか？いや、気持ち悪いだろう！つまり、個人の体験としてイヤだと思わせたり、社会に害を与える可能性のある「やり過ぎ」も存在する。
今後、均一なエクスピアレンスの分散が加速することが想像できる56。ユーザのIPアドレスに基づいて地域ごとに違う引用を表示する、というシンプルな例であっても、そのコンテンツから派生する会話や二次利用を分散させ、混乱を招くかもしれない。少しずつバージョンが違う記事を読んだ上でのコメント、ブログ記事、ツイート、メール転送が行われている状態を想像してもらいたい。大げさかもしれないが、選挙活動の議論の場に影響を及ぼしさえすることも考えられる。解決策はいろいろとあるのだろうが、意義あるインプリのための新しい基準が出来上がるには、相当時間がかかると考えられる。
こういったようなカスタマイズは、コンテンツ周りのコンテンツに適用するケースの方がスムーズだ。関連リンク、イラスト、地図などだ。
事件の場が現在地に近いのなら、ズームインする。遠ければ、ズームアウトする。先のロンドン暴動の記事に、被害を受けた地域の地図が掲載されていたとしよう。東ロンドンのアパートから読んだ場合、東京都内で言う区のレベルで見られる地図が有益だ。もっとアップでも良いかもしれない。逆に、イスタンブルのカフェにいる人が読んだ場合、都市の全貌が見えた方が分かりやすい。地理的なコンテキストにピンポイントで反応することによって、記事まわりで起きる会話の邪魔をせずに、多くの読者の理解を深めることができる。
あまり土地勘のないロンドンの地図の隣に、同じズームレベルの東京の地図を表示したら、事態の規模が直感的に伝わる
2011年ロンドン暴動とあなたの現在地を表示するデモ（要GPS）。コード：Raphaël Mazoyer
似たような方法で、比較を通じて理解を深めることもできる。先月、ロンドン暴動の規模を示した地図と東京23区の地図を隣り合わせにした画像がTwitpicに投稿された。その画像によって、遠く離れたロンドンで起きている事態が、一気に自分に近づいた気がした。例えば、凝ったパブリッシャーは、ユーザの現在地とロンドン暴動の地図を隣り合わせに表示することによって、この体験を動的に再現することができるだろう。
お気づきでしょうが、この記事は「ハウツウ」にはあまり触れていない。上記のアイディアはすべて既存の技術によって実現は可能だが、デモが単体であったとしても、アイディアの展開を実証することはできない。（その展開が望ましいかどうかも分からないだろう！）
本当にレスポンシブなWebデザインは、パブリッシャー、デザイナー、エンジニアの継続的なコラボレーションによって生まれる。コンテンツ制作のツール、マークアップ言語、制作ワークフロー、そしてデジタルのストーリーテリングと商品開発への新しいアプローチを試行錯誤していく過程のなかで、生まれるのだ。制作と配信のコストがかさむだろうが、エンゲージメントと効率が向上したデジタルコンテンツを実現するためには、投資に値すると信じる。
進化と分散化がどんどんと進むWebのコンテキストに対応するベストプラクティスが確立されるまでには、多くの失敗が繰り返されるだろう。コンテンツ制作者、編集者、デザイナー、ビジネスマン、開発者、ユーザのみんなで、一緒に試行錯誤しようではないか。そうしたら、やっと、レスポンシブWebデザインを実験から応用へと移し、デバイスではなく人間にレスポンシブなWebをつくり始めることとが出来るのだ。
1.一つのiPadを囲んでコラボレーションをするのはとても素敵な体験である。でも、主に個人所有が中心となる体験のうちの一瞬でしかないと思う。
2. もちろん、既に行っているアプリやウェブサイトもある。
3.ここで言うデザイナーは、デジタルコンテンツ制作の意思決定に関わるすべての人を指す。インタラクションデザイナー、エンジニア、編集者、プロダクトマネージャを含む。
4.エンゲージメントが必ずしも最終目的でないかもしれないが、各シチュエーションの最終目的におけるパワフルな中間地点であると考える。
5. Craig Mod氏は、これを編集可能なデジタル版とソーシャルネットワーキングサービスの派生物による「偉大なる普遍なアーティファクトの墜落」と呼んでいる。
6. デジタル出版物を読み手に反応させるというのは最近の試みだが、ニュース組織は以前から媒体ごとのバージョン管理には対応している。良くページの一番下に「この記事は、2011年8月28日のNew York Timesで掲載されました」などと書いてある。
7.ぜひEli Pariser氏のTED Talkを見てほしい。FacebookやGoogle Searchのようなサイトでのパーソナライズ機能によって、自己の世界観に疑問を投げかけたり視野を広める情報に触れる機会を失わせる「フィルターバブル効果」が発生し、全体の知能が低下していると警告している。
なかなかまとまらない考えを文章化する手伝いをしてくれたOlivier ThereauxとRaphaël Mazoyerに感謝する。特に、わたしが寝ている間に地図のデモを作ってくれたRaphaëlにはダブルで感謝する！
