このページの本文へ

DESIGN ゼロから始めるレスポンシブWebデザイン入門 ― 第1回

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

2012年06月04日 11時00分更新

菊池 崇/Web Directions East

  • この記事をはてなブックマークに追加
本文印刷

スマートフォンやタブレット、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の種類やバージョンを自動的に通知している。これらの情報を組み合わせた識別子のことで、利用者エージェントとも呼ばれる

zu01.png
振り分けの考え方

 こうした振り分け型のスマートフォン対応は、デバイスごとに最適な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、対応する画像データを作成していく手法は、将来にわたっても時間と労力の増加=コスト増を招く手法だと言わざるを得ないでしょう。

Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング