GoogleもレスポンシブWebデザインを推奨にするようになり日本でもレスポンシブWebデザインに注目が浴びるようになりました。レスポンシブWebデザインを考案したイーサンが記載した記事の和訳です。ぜひ一読されることをおすすめいたします。

# 306

レスポンシブWebデザイン

「デザイナーが時としてWebの中での欲する、印刷分野のコントロールは印刷分野の機能制限でしかない。Webにはそのような制限がないという事実を受け入れ、Webの柔軟性のためにデザインをする必要がある。そして、最初に我々は、物事に流れと衰退があることを受け入れなければならない。」

John Allsopp(ジョン・アルソップ), “A Dao of Web Design(Webデザインの道)

イギリス人の建築家クリストファー・レンはかつて、建築というものは「永遠が目標である」と皮肉りましたが、この常套句にはある意味、説得力があります。というのは、来週のことを目標とするWebと違い、建築は不変性が非常に物をいう分野だからです。建物の土台によってその専有面積が決まり、専有面積によって建物の骨組みが決まり、骨組みによって建物の前面の形が決まります。建築プロセスの各段階は、直前の段階よりも不変性が高まり、変化しにくくなっていきます。創造性を発揮した判断はそのまま物理的な空間をデザインし、人々が何十年、あるいは何百年も建物の中で行き来するスタイルを定めます。

Webをデザインをすることは、建築とは全く異なります。
Webデザインはその移ろいやすさによって定義され、1~2年でリファインされたりリニューアルされたりする場合が多くあります。
統一性に欠けるウィンドウの幅、画面の解像度、ユーザーの設定、ユーザー環境にインストールされたフォントなどは、Webサイトを公開する際にクライアントと交渉する実体のない問題のほんの一例に過ぎませんが、長年の経験で、Webデザイナーはそのようなことへの対応が驚くほどうまくなっています。

とはいえ、状況は自分たちが望むよりも早くめまぐるしく移行しつつあります。35年以内にモバイルを利用した閲覧がデスクトップでの閲覧のアクセス数をしのぐことが予想されています。ビデオゲームコンソールの2/3はWeb ブラウザ機能を搭載しています(中には非常に高性能なWeb機能をもつ機種もあります)。
私たちはマウスやキーボード向けのデザインや、携帯ゲーム機のコントローラ、T9キーパッドやタッチインターフェイス向けのデザインも行っています。要するに、以前と比べてデバイス、入力モード、ブラウザの数が増している状況に直面しているのです。

(2010年)近年では、プロジェクトの一部として「iPhone用サイト」を求める企業の数が増加しています。企業が額面通りブラウザとしての機能を評価しているのと同時に、デスクトップの領域を超えて考えられる強力なビジネスケースとしてモバイルWebKitのブラウザ品質を論じているのは、興味深いものがあります。ただしWebデザイナーとしては、そのような明確な要件を都合がよいとすることが多くあると思われます。
というのは、企業が既にデザイナーが直面する問題が区分化してくれているからです。「非iPhone用のウェブサイト」とは違う個別のサブドメインスペースでモバイル体験を隔離できるからです。ですが、「非iPhone用のウェブサイト」の次はなんでしょうか?iPad用ウェブサイト?ノキア N90用ウェブサイト? この先も各々の新しいユーザーエージェントをカスタムでサポートし続けることが可能でしょうか?ある時点で、これはゼロ・サム・ゲーム(全員が敗者)のように感じ始めるでしょう。でも、どのようにして私たち(およびWebデザイン)は適応させていけばよいでしょうか?

柔軟な基盤

サンプルのデザインを考えてみましょう。架空のマガジンの簡単なページを作成したとします。フルード(流動的)グリッドをベースとするシンプルな2コラムレイアウトで、中には多数のフルードイメージを配置しています。
固定化されていないフルードレイアウトの手法をずっと擁護してきた者として、このようなデザインは「将来もなくならない」ものだと考えてきました。理由は単純で、明確な見解のないレイアウトだからです。ある程度はこの認識は正しいでしょう。柔軟なデザインは、ブラウザのウィンドウ幅を仮定する必要はなく、ポートレートとランドスケープモード機能を持つデバイスにも見事に対応するからです。

大きい画像は大きいままです。このようなレイアウトは、柔軟ではありますが、解像度やviewportサイズの変更にはうまく対応しません。

固定されたデザインであろうと流動性があるデザインであろうと、元々意図した表示環境を超えてシームレスにサイズ調整することはできません。上記の例のデザインは、ブラウザウィンドウのサイズを調整すれば完璧に収まりますが、低解像度ではすぐにストレスポイント(欠けてします部分)が現れてしまいます。「800×600ピクセル」以下の表示領域で表示すると、ロゴの背後の画像がトリミングされ、ナビゲーションテキストは見えない部分で折り返され、最下部に配置された画像は小さくなりすぎて判読できません。さらに、影響を受けるのは低解像度の領域部だけではありません。ワイドスクリーンディスプレイでデザインを表示すると、画像がすぐに引き伸ばされ、周囲のテキストにはみ出してしまいます。

つまり、柔軟なデザインは本来のデザイン対象であるデスクトップ中心の表示環境では十分に機能しますが、それを超えてしまうと最適化されることはないのです。

反応性を高める

最近では、「反応型建築(responsive architecture)」と呼ばれる分野が登場し、物理的な空間がそこを往来する人間の存在に対してどのように反応するかが問われています。組み込みロボット工学と伸縮性のある素材を組み合わせることによって、建築家は、群衆が近づくと折れ曲がったり、屈曲したり、伸長したりする美術的な設置物と壁面構造を用いた実験を行っています。人間でいっぱいになると室温および周辺照度を調整するための温度調節システムとモーションセンサーがペアで使用されています。企業によってすでに「スマートガラステクノロジー」が生み出されています。これは、室内の人数が一定のしきい値に達すると自動的にガラスが不透明になり、プライバシーを守るための追加レイヤーとして利用される技術です。

Michael Fox(マイケル・フォックス) と Miles Kemp(マイルズ・ケンプ)の著書「Interactive Architecture」では、この技術は「人が会話に参加する際のマルチループシステム(つまり、連続的かつ建設的な情報交換システム)」としてのアプローチにより適応度が高いと論じられています。
強調したいのは、僅かではあるが重大な特徴があると考えていることです:特定の体験を定義する不変の空間を創り出すよりも、居住者と構造が相互に影響を与えることが可能(そして必須)であると提案しています。

これこそが私たちが進む方向です。増え続ける各ウェブデバイスと繋がりがないデザインをカスタマイズしなくても、そのようなデザインを同一体験の一面として扱うことができます。最適の表示体験に向けたデザインはできなくても、標準ベースの技術をデザインに組み込み、柔軟性を高めると同時にデザインをレンダリングするメディアへの適応力を高めることができます。つまり、レスポンシブ・ウェブデザインを実践する必要があるのです。では、その方法とは?

メディアクエリとの出会い

CSS 2.1の頃よりスタイルシートでメディアタイプによってデバイス認識の手段を一部利用してきました。プリント用スタイルシートを記述したことがあるなら、次のコンセプトはもう馴染み深いかもしれません。

<link rel="stylesheet" type="text/css" href="core.css"
  media="screen" />
<link rel="stylesheet" type="text/css" href="print.css"
  media="print" />

整然としたフォーマットでのプリントアウトができるように、CSSの仕様書では多数のメディアタイプを提供しています。それぞれメディアタイプはWeb機能を搭載したデバイスの特定のクラスを対象としてしています。しかし、実際のところ大半のブラウザとデバイスには仕様の目的が全く内包されておらず、たくさんのメディアタイプが不完全のまま実装されているか、あるいは全く実装されていませんでした。

それが、嬉しいことに W3CメディアクエリCSS3 の仕様書の一部として作成し、メディアタイプの定義を改善しました。メディアクエリによって、特定のデバイスクラスを対象にできるだけではなく、デザインをレンダリングするデバイスの物理的特性を実際に検証することができるようになったのです。そして、最近隆盛のモバイルWebkitに従い、メディアクエリはカスタマイズしたスタイルシートをiPhone、アンドロイド、その同種のデバイス などに配信するためのクライアントサイドの技術としてよく実装されるようになりました。実装するには、クエリを以下のようにlink要素のスタイルシートにあるmedia属性に組み込みます。

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px)"
  href="shetland.css" />

クエリには2つのコンポーネントを含んでいます:

  1. メディアタイプ(screen)と
  2. 丸カッコでくくられたクエリがあります。丸カッコ内には、検証対象の特定メディア特性(max-device-width)が含まれ、それに該当する値は(480px)です。

簡単にいうと、デバイスに対して水平解像度(max-device-width)が480pxと同じもしくは、それ以下に適合するかチェックします。適合する、つまりiPhoneのような小画面のデバイスで表示すれば、デバイスは「shetland.css」を読み込みます。不適合ならリンクは完全に無視されます。

過去にWebデザイナーは解像度を認識するレイアウトを試みたことがありますが、大半はCameron Adams(キャメロン・アダムス)の「excellent script」 などの JavaScript を利用したソリューションでした。
さらには、and」を用いて複数のプロパティ値を一括で変更することによって、1つのクエリで複数のプロパティ値をテストすることができます。

<link rel="stylesheet" type="text/css"
  media="screen and (max-device-width: 480px) and (resolution: 163dpi)"
  href="shetland.css" />

link要素の中で記述できるメディアクエリの数は限られていません。CSSファイルに記述したり、@mediaルールの一部として記述することもできます。

@media screen and (max-device-width: 480px) {
  .column {
    float: none;
  }
}

または、 @import 命令の一部として記述します。

@import url("shetland.css") screen and (max-device-width: 480px);

それぞれの場合において効果は同じです。デバイスがメディアクエリによって指定されたテストに適合すれば、関連するCSSがマークアップに適用されます。つまり、メディアクエリとはコンディショナルコメントと同じような働きをするのです。特定のブラウザの特定のバージョンを対象とするのではなく、レイアウトが当初の理想的な解像度を超えてサイズを調整できるように、外科手術のようにレイアウトの問題を修正することができるというわけです。

適応、反応、そして克服

ページ下部の画像に注目しましょう。デフォルトのレイアウトでは、関連するCSSは以下に示したように記述されています。

.figure {
  float: left;
  margin: 0 3.317535545023696682% 1.5em 0;   /* 21px / 633px */
  width: 31.121642969984202211%;             /* 197px / 633px */
}

li#f-mycroft,
li#f-winter {
  margin-right: 0;
}

レイアウトにフォーカスするために、タイポグラフィーに関連した多数のプロパティは省略しました。各.figure 要素は、その要素が含まれる列の約1/3のサイズとなっており、各行(li#f-mycroft, li#f-winter)の最後にある2つの画像のための右側のマージンはゼロに設定されています。この設定は表示領域が元のデザインに比べて著しく狭くなるか、または幅が広くなるまで、かなり巧く機能します。メディアクエリを用いると、解像度に特有のスポットフィックスが適用され、デザインをよりディスプレイの変更に反応するように適応することができます。

表示領域が特定の解像度のしきい値(600px)を下回ったら、ページを線形化しましょう。スタイルシートの下部で、新しい@media 部分を次のように作成します。

@media screen and (max-width: 600px) {
  .mast,
  .intro,
  .main,
  .footer {
    float: none;
    width: auto;
  }
}

更新されたページを最近のデスクトップブラウザで表示し、600px以下にウィンドウサイズを縮小する場合、メディアクエリによってデザインの主要素に適用されているフロートが無効化され、ドキュメント内で各ブロックが互いに上に積み上があります。このため、最小化デザインは上手にシェイプアップしています、しかし画像はうまく縮小化されません。別のメディアクエリを埋め込むと、レイアウトを適宜変更することができます。

@media screen and (max-width: 400px) {
  .figure,
  li#f-mycroft {
    margin-right: 3.317535545023696682%;    /* 21px / 633px */
    width: 48.341232227488151658%;          /* 306px / 633px */
  }

  li#f-watson,
  li#f-moriarty {
    margin-right: 0;
  }
}

目障りなパーセントの数字は気にしないでください。単にフルードグリッドの幅を再計算して新しい線形化されたレイアウトに適するようにしているだけです。つまり、ビューポート(表示領域)の幅が400pxを下回った場合、3列のレイアウトが2列のレイアウトになり、画像がより目立つようになります。

今度は、ワイドスクリーンの場合のアプローチも同様に行います。解像度が高い場合、画像を6個すべて同じ行に水平に並べることができます。

@media screen and (min-width: 1300px) {
  .figure,
  li#f-mycroft {
    margin-right: 3.317535545023696682%;    /* 21px / 633px */
    width: 13.902053712480252764%;          /* 88px / 633px */
  }
}

これで、画像は解像度の範囲内で整然と並んでいます。レイアウトはウィンドウの幅やデバイスの解像度の変化に合わせて最適化されます。

新しいメディアクエリでmin-widthをより広く指定すると、画像を1行のレイアウトで表示することができます。

ただし、これはまだ始まりでしかありません。CSSに組み込まれたメディアクエリを利用すれば、いくつか画像を配置する以上の変更を加えることができます。 それぞれの解像度の幅にあわせた別のレイアウトを紹介します。もしかしたら、ナビゲーションを幅広のスクリーンでは目立つにようしたり、ナビゲーションを小さいディスプレイではロゴの上に別に配置などもできるようになるかも知れません。

反応性が高くなるようにデザインすると、より小さいデバイスでコンテンツを線形化するだけではなく、さまざまなディスプレイのサイズの範囲を超えて表示を最適化することができます。

実は、反応性の高いデザインはレイアウトの変更のみに限定されません。メディアクエリによって、ページの形の変更に合わせて驚くほど精確な微調整を行うことができます。
小さい画面用にリンクのターゲットエリアを広げたり、タッチデバイスの「Fitts’ Law」への適合度を高めたり、ページのナビゲーションを強化する要素の表示/非表示を選択したり、テキストのサイズや太さを徐々に変更するようにフォント設定の反応性を高め、ディスプレイで提供する事で閲覧体験満足度を上げることができます。

いくつかの技術的な注意点

メディアクエリは、最近のブラウザでかなりサポートされ完成度が高いです。Safari3+ 以上、Chrome、Firefox 3.5以上、 Opera7 以上などのデスクトップブラウザでは、Opera モバイルや モバイルWebKit のような最新モバイルブラウザと同様に、メディアクエリがネイティブでサポートされています。これらより古いバージョンのデスクトップブラウザでは、メディアクエリをサポートしていません。
MicrosoftはIE9メディアクエリのサポートを確約していますが、Internet Explorerは現在のところネイティブ環境では実装していません。

ただし、メディアクエリをレガシーなブラウザでサポートするように実装したい場合は、JavaScriptを利用すれば可能になるでしょう。

  • 2007から jQuery プラグインによって、限定的にメディアクエリへのサポートが提供されており、個別のlink要素に付加した場合に「min-width」「max-width」メディアプロパティのみを実装することができます。
  • 最近、「css3-mediaqueries.js」というライブラリが公開されました。これは、IE 5以上、Firefox 1以上、Safari 2に対して、@media 部分から組み込まれた場合にCSS3 メディアクエリの透過的な解析、検証、適用が行われることを保証します。

JavaScript の使用を求めないのなら話は完全に理解できます。ただし、それによってレイアウトをフルード・グリッドの上に構築する場合に強みとなり、レイアウトがメディアクエリ非対応ブラウザとデバイスにおける柔軟性の手段の一部を利用することが保証されます。

今後の展望

フルード・グリッド、フレキシブルイメージ、メディアクエリは、レスポンシブ・ウェブデザインの三大技術要素ですが
それ以外のメリットもあります。

コンテンツをバラバラなデバイス特有の開発体験に隔離してしまわず、
メディアクエリを用いて異なる表示環境のデザインにする事で、プログレッシブ・エンハンスメントで制作する事ができるのです。

特定の機器に特化した個別のサイトを用意するビジネスケースがないという意味ではありません。
例えば、ユーザーがモバイル用サイトをデスクトップの表示範囲よりももっと小さくしたいなどの場合、
各デバイスに合わせたコンテンツを個別に用意する方が良いアプローチである事もあります。

しかし、このような振り分けのデザインに関する考え方をデフォルトにする必要はありません。
今まで以上に、私たちはWebデザインを個別のユーザー体験に合わせて微調整して表示することができるのです。
「レスポンシブ・ウェブデザイン」によって今後の展望が開かれ「物事の盛衰に適したデザイン」を実現する事ができるのです。