「レスポンシブWebデザイン」が変えるWebの未来

　昨日、アップルストア銀座で行われた『Web Business Shuffle2.0』に行ってきました。メイン講演は、エル・カミノ・リアルの木寺祥友さんで講演内容は「レスポンシブWebデザインが変えるWebの未来」でした。以前お会いしたときもお話するのが好きなんだなぁという印象ですが、今回もそれはそれは楽しそうにお話されていました。その講演内容をベースに「レスポンシブWebデザイン」について書いてみます。

レスポンシブWebデザインとは

　まずここから。昨日の木寺さんの言葉を借りると「レスポンシブWebデザイン」とは「ブラウザのウインドウサイズに合わせてフレキシブルに最適なレイアウトに変化する新しい制作手法」です。すでにAndroidアプリ等を開発した方なら考えたことはあるでしょうが、一口にAndroid端末といってもメーカによって画面の大きさはそれぞれです。そこはかなり曲者で、10.1型を前提に作ると7.0型ではちょっと・・・、スマフォではちょっと・・・みたいなことが起きる。この辺に気を使うのは大変です。フォーカスをそこにあてればその辺りも解決できる手法と言えます。

歴史的にも、現在も、未来にも起きる問題

　技術者にとってH/Wによってコードを分ける、みたいなことは極力したくありません。最近クライアントアプリではiOSとAndroidというOSの違いによるコードが分離されて、Titaniumのような環境も出てきたりしていますが、Webビューを使う、いわゆるWebアプリならばサーバ側でコードを一括に集約することができます。クライアントアプリかWebアプリかという問題は別にあるけれども、仮にハイブリッドという選択をしたとしても少なくともWebの部分は共通に管理できます。
　ところが、ビュー部分がそれを簡単には許してくれません。つまりiPhoneとiPadで同じデザインだと「iPhoneは小さくて見にくい」とかそういうことが現実に起きるわけです。もっと言えば、PCでも見れるように、ハイビジョンTVでも見れるように・・・なんていう要求は今後増していくことでしょう。もっと言うとデジタルサイネージとかそういうところでも。それらが同じデザインでいいか、というとそんなはずはありません。Android端末なんて今後どんな大きさの端末が提供されるか分からない、だからアプリ提供者は動作的な部分以外のところでも機種を指定するしかありません。そういった問題にどう立ち向かうか、今までもこれからも技術者の課題です。

一筋の光「レスポンシブWebデザイン」

　そこに（私の中では）彗星のごとく現れた「レスポンシブWebデザイン」という手法。木寺さんは「1つのサイトが複数の顔を持つことができる」と上手い表現をされていましたがまさにその通り。前述のブラウザではいいけどスマフォではちょっと・・・みたいなことをコードを分けずして解決することができるわけです。また、昨日のデモでは、iPad対応のサイズになったとき、タブがタッチしやすいデザインに変化するようなサイトもありました。（下記のサイトにアクセスしてブラウザの大きさを変えてみてください。）

http://naomiatkinson.com　　　　　　　　　　　　　　http://kingshillcars.com

今まではなかったのか

　いやいや今でもスマフォ用のサイトとかあるじゃないか、と。確かにあります。それはUAで判断したり、URLを変えたりとコードベースで分離されているはずですし、そもそも「レスポンシブWebデザイン」はデザインの変化の起点というかトリガーが異なります。ブラウザ、スマフォというようなデバイスベースでの変化ではなく、あくまでサイズをトリガーにするのです。そのためにまだ見ぬデバイスへの対応が実現できる、そこが「レスポンシブWebデザイン」の今までにない考え方といえます。
　また、サイズをトリガにしてデザインを変更するにもその辺りの変更の仕方が重要になってきます。その意図として木寺さんは「サイズとサイズの間の動き方、例えば画像は回り込むようにデザインを変えるけどテキストはそのまま、みたいなところが考えどころ」と言われていました。

具体的にはどうやる！？

　それでその「レスポンシブWebデザイン」はどう実現するのか。それはHTML5&CSSで実現します。サイズごとにそれらを指定する上、サイズとサイズの間の動き方も定義するわけですから仕様を考えるのも実装するのもきっと簡単ではないでしょうが、一旦実装してしまえばビュー部分のデバイスによる差異は吸収できるという幸せが待っています。

「レスポンシブWebデザイン」のメリット

　木寺さんの講演から覚えている限りを引用します。

・まだ見ぬデバイスにも対応できる
・プログラムがHTML5&CSSでW3C準拠である
・JavaScriptの工夫でHTML5に対応していにいブラウザでも対応できる
・クラウドに対応
・サーバ環境には変更はない
・PCでは必要ないときにスマフォに最適なデザインで置いておける（ブラウザを小さくしても最適化される）
・SONYの2画面タブレットにも対応
・Windows7Phoneにも対応

実績

　私が知らなかっただけで、実はヨーロッパではこういった実績がかなりたくさんあるそうです。ググると「レスポンシブWebデザインで作られた10の美しすぎるサイト」のようなサイトもありました。

最後に

　昨日の木寺さんの講演のまとめとして書くつもりがちょっと書き味がおかしくなって・・・ここに書いてあることは木寺さんの講演をちりばめつつ自分の言葉で表現したところも多いので若干意図が間違って伝えていることがあるかも、というところはご了承くださいｗ

でもテストはやっぱり大変だよなぁ・・・とか、ぼそっとｗｗ