2013.04.22
レスポンシブWebデザインは何を変えるのか
レスポンシブWebデザインについて少しずつ学んでいるが、この変化が何を意味するのか、ちょっとずつわかってきた気がする。

レスポンシブWebデザイン自体は、ざっくりいえば、「ひとつのウェブサイトで、スマホ、タブレット、PCまで全部対応できるような、サイトのつくりかた」といった意味である。技術的には、ウィンドウの横幅によってCSSを切り替える、CSS3の「メディアクエリ」という仕組みによって、この方法が可能になった。

現実的な側面では、最近のブラウザがこのCSS3をサポートし、かつスマホとタブレットが爆発的に普及していることが、このレスポンシブWebデザインというアプローチをいっそう後押ししている。これがもしPCだけだったら、古いブラウザを使う人がそれなりに残っているために、サイトがCSS3の採用になかなか踏み切れず、これによってCSS3の普及はいまよりも遅くなっていただろう。

実際、PCで古いブラウザを使っている人は、いまでもけっこういる。しかしいまの状況では、とにかくスマホが爆発的に普及しているので、PCで古いブラウザの人を相手にするよりも、スマホでサイトをちゃんと見られるようにすることのほうが、はるかに優先度が高いわけだ。だから、CSS3をサポートしていない古いブラウザを見切ってでも、CSS3のメディアクエリを使って、サイトをレスポンシブWebデザインにする、という流れになっているのだろう。

レスポンシブWebデザインでは、ひとつのウェブサイトで、スマホ、タブレット、PCまで全部対応できるように、サイトをつくる。しかし実際には、スマホ、タブレット、PCを均等に考えるのではなく、まずもっとも小さいスマホを起点に考える、というのが主流の考え方のようだ。この考え方を「モバイルファースト」というらしい。まずスマホで、最低限の構成要素でサイトを組み立てておいて、タブレットやPCの場合は、横幅を生かしたレイアウトやナビゲーションにしていくわけだ。

レスポンシブWebデザインというアプローチをとるならば、この「モバイルファースト」の考え方は自然だろう。だとすれば、今後のウェブサイトは、必然的にスマホ中心になっていくのではないか。これから作られるウェブサイトは、まずスマホを起点として、「モバイルファースト」で構想される、というものが増えていくように思う。

これは、きわめて大きな変化だろう。いままでのウェブサイトは、ウェブができてから20年くらいのあいだ、ずっとPCというデバイスを想定して作られてきた。これが、スマホ中心に変わっていくのだ。

スマホが出てきたときから、スマホ向けの「スマホサイト」というのはあった。そのはるか以前、ケータイでネットが見れるようになった頃から、ケータイ向けの「ケータイサイト」もたくさんあった。しかし、「スマホサイト」や「ケータイサイト」というのは、PC向けのサイトとは違うもので、別の世界だった。

いまや、スマホの圧勝によってケータイは駆逐されつつあり、よって「ケータイサイト」も消えゆく運命にある。ケータイに比べてスマホは高機能なので、「スマホサイト」はPCサイトに大きく近づいた。まずこれによって、PCとのギャップが小さくなっていた。

そこへ、レスポンシブWebデザインというアプローチが出てきて、そのギャップも取り払われたのだ。もはや、「スマホサイト」「タブレットサイト」「PCサイト」という別々のサイトではなく、単にウィンドウの横幅に応じて姿を変える、ひとつのサイトになった。

それどころか、「モバイルファースト」によって、これからはスマホがウェブサイトの標準デバイスになっていくわけだ。こうなると、ウェブサイトのつくりかたは、大きく変わらざるをえない。すると、ウェブサイトは大きく変わっていくだろうし、わたしたちが「ウェブサイト」に対して持っているイメージも、大きく変わっていくだろう。つまり、ネットというもの自体が、大きく変わっていくだろう。

もちろん、何が何でもレスポンシブWebデザインでなければいけない、ということもない。「スマホサイト」「タブレットサイト」「PCサイト」を別々に作るようなアプローチも、当然残っていくだろう。しかし、各デバイス向けに複数のサイトをつくり、それぞれをメンテしていくというのは、ものすごくコストが高い。つまり、それは「ぜいたく」なアプローチなのであり、こういう「ぜいたく」なアプローチができるところは少ない。よって、レスポンシブWebデザインによって「ひとつのサイト」で済ませることが、今後は標準になっていくだろう。


関連エントリ:
レスポンシブWebデザイン、CSS3の「メディアクエリ(Media Queries)」
http://mojix.org/2013/04/07/responsive-web-design