第４回　レスポンシブWebデザインの事例

オープンガバメント・コンソーシアム　顧問　木寺祥友

レスポンシブWebデザインはどのようなメリットがあり、どのような用途に向いているのかを知っておこう。

まず、 標準的なPCの横画面だけでなくタブレットのような縦画面にも対応するということである。

スマートフォンやタブレットは縦だけではなく横画面もあるので、アプリ制作時はそれも考慮する必要があるが制作工数上、縦型限定にせざるを得なかった。

しかし、レスポンシブWebデザインにすれば縦横最適なレイアウトに対応することができる。iPhoneだけがスマートフォンだという時代ならいざ知らず、タブレット端末も各種でてきたマルチスクリーンの時代だからこそ、レスポンシブWebデザインの必要性がでてきたとも言える。

また、小さいサイズのデバイスだけがレスポンシブWebデザインの強みではない。

デジタルサイネージやスマートテレビのような大画面に合うような画面いっぱいに表示するレイアウトも作ることができる。表示したままにするため、スクロールバーが出ないような一画面で表現するWebにも適している。URLもひとつなのでサイネージの画面URLをスマートフォンで見てもスマートフォンに合った画面が表示されるので違和感なく同じWebをユーザーに提供できる。

このあたりがレスポンシブWebデザインの醍醐味でマルチデバイス、マルチスクリーン、対応がひとつのWebページでできるのが素晴らしい。

ブラウザーだけでなくメール添付のURLでも、端末のメーラー表示に合うようにサイズ変更してくれるので、ユーザーエクスペリエンスが向上する。コマースのサイトなどの誘導では威力を発揮するであろう。

上級な使い方としては、PCの場合、必要のないときには折りたたんでスマートフォンのサイズにして脇に寄せておける。メーラーやスケジューラーなどのWebアプリケーションがレスポンシブWebデザイン対応になれば、このような使い方が主流になるであろう。

ドコモがすすめているTizenやKDDIのFirefox OSなどiOSやAndroid以外の端末のブラウザーでの表示が可能である。TizenやFirefox OSはHTML5で作られたWebアプリを前提に作られているので、レスポンシブWebデザインとの相性は抜群である。

アマゾンキンドルFireにも対応しており、レスポンシブWebデザインでWebページを制作するということ以上に互換性のあるアプリケーションプラットフォームはない。

（レスポンシブWebデザインで作られた会津若松スマートシティー実証実験サイト）

(2013/8/15)

次回、レスポンシブWebデザインの課題

◎シリーズ予定
第１回　HTML5への期待
第２回　レスポンシブWebデザインとは
第３回　Web標準化の歴史
第４回　レスポンシブWebデザインの事例
第５回　レスポンシブWebデザインの課題
第６回　レスポンシブWebデザインの未来

木寺祥友（きでら・よしとも）
株式会社エル・カミノ・リアル（http://www.ecreal.co.jp/pc/top/index.html）　代表
パソコン黎明期よりＩＴ業界へ足を踏み入れ、1995年日本初のJavaプロジェクトにかかわり日本人としてはじめてJavaをプログラムする。サン・マイクロシステムズの協力により『Javaを創った人々』を執筆。2001年、携帯電話にJavaが搭載されることを機にNTTドコモｉアプリのプラットフォーム作りに携わる。2006年ラスベガスで開催されたCTIAで講演。著書『アンドロイド・ジャパン ―日本企業の命運を握るプラットフォーム―』『Javaを創った人々』『マックユーザーのための目標ナビゲーション』『川柳で覚えるビデオ撮影術』『今すぐできるiアプリプログラミング』