スマートフォンやタブレット、PCなどあらゆるデバイスに対応する制作手法として注目されている「レスポンシブWebデザイン」。レスポンシブWebデザインの概念からサイト制作の基本まで、レスポンシブWebデザインによる制作案件を数多くこなす菊池 崇氏が解説します。（編集部）
この連載が本になりました！
本連載で紹介したレスポンシブ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、対応する画像データを作成していく手法は、将来にわたっても時間と労力の増加＝コスト増を招く手法だと言わざるを得ないでしょう。
