レスポンシブWebデザインとは (1/5)

• 
• ツイートする

この連載が本になりました！

本連載で紹介したレスポンシブWebデザインの基礎に加えて、画像や動画のレスポンシブ対応、パフォーマンス改善といった商用サイト構築のノウハウを大幅に加筆。さらに、解像度に依存しないレスポンシブWebデザインの考え方やスマートテレビ対応などの応用テクも盛り込みました。

レスポンシブWebデザイン
マルチデバイス時代のコンセプトとテクニック

定価：2,625円 (本体2,500円)／形態：B5変 (232ページ)
ISBN：978-4-04-886323-0

　レスポンシブWebデザイン（Responsive Web Design）は、PC、タブレット、スマートフォンなど、あらゆるデバイスに最適化したWebサイトを、単一のHTMLで実現する制作手法です。ブラウザーのスクリーンサイズを基準にCSSでレイアウトを調整することで、デバイスごとに専用サイトを用意することなく、マルチスクリーンに対応したWebサイトを制作できます。

注目されるレスポンシブWebデザイン

　レスポンシブWebデザインが注目される背景は、スマートフォンです。スマートフォンの急速な普及により、Webサイト制作の現場では、PC向けの従来型のWebサイトに加えて、スマートフォンの小さな画面でも見やすいようにデザインされた、専用のWebサイトである「スマートフォンサイト」が登場しました。

“振り分け”型スマートフォン対応の課題

　スマートフォンサイトでは、ユーザーエージェント（UA）^※1で振り分けることで、多くのデバイスやスクリーンサイズに対応する方法が採られることがあります。JavaScriptやサーバーサイドでユーザーエージェント情報を読み出し、デバイスの種類に応じて用意した専用のWebページ（HTML）へ移動させるのです。

※1端末のブラウザーがWebサーバーからデータを得る際、サーバーにブラウザーやOSの種類やバージョンを自動的に通知している。これらの情報を組み合わせた識別子のことで、利用者エージェントとも呼ばれる

振り分けの考え方

　こうした振り分け型のスマートフォン対応は、デバイスごとに最適なWebサイトをユーザーに提供できるのがメリットですが、おもに4つの問題が指摘されています。

(1)開発コストの増加

　あらゆる端末の解像度、スクリーンサイズ、OS、UAを調査して、それぞれに適したHTMLやCSSを用意する必要があります。
　国内で発売されているスマートフォンのOSにはiOS、Android、Windows Phoneの3つがあり、それぞれ搭載しているブラウザーが異なります。解像度やスクリーンサイズは端末ごとに異なるうえ、スマートフォンにはポートレートモード（縦置き）とランドスケープモード（横置き）があるので、単純にいえば100種類の端末があれば200種類のスクリーンサイズに対応しなければなりません。
　OSや端末が頻繁にバージョンアップされる現状では、調査するためのコスト、それらを反映するためのコストも決して安いものではありません。また、一部のスマートTVのように、メーカーによってUAが開示されていないデバイスもあります。

(2)煩雑なファイルの更新

　たとえば、HTMLファイルが振り分けのため端末ごとに5種類あった場合、画像を1つ更新するたびに5つのHTMLを更新しなければなりません。また、画像サイズや解像度などの細かい指定が必要であれば、更新作業はさらに煩雑になります。

(3)CMSの対応

　CMSの機能を使ってページを振り分けている場合、CMSが新しい端末に対応するまで待たなければなりません。

(4)URLの問題

　ソーシャルメディアなどで紹介されたリンクが、“ipn”や“mobile.サブドメイン”といったスマートフォン用のドメイン、“/m/ディレクトリ”のようなスマートフォン用のディレクトリであった場合、PCから適切にアクセスできないかもしれません。また、Google Analyticsなどのアクセス解析ツールでは、URLごとにレポートが分かれてしまい、解析に時間や人数が必要になります。

　このように、振り分けによる端末別対応には、現状でも多くの問題があります。さらに、今後はPCやスマートフォン、タブレットに加えて、スマートTV、カーナビゲーション、冷蔵庫や洗濯機、電子レンジなどのあらゆるエレクトロニクス製品がWebにアクセスできるようになるでしょう。

　端末が増えるたびに、解像度、スクリーンサイズ、OS、UAを調査し、新しいHTMLとCSS、対応する画像データを作成していく手法は、将来にわたっても時間と労力の増加＝コスト増を招く手法だと言わざるを得ないでしょう。