大規模サイトをレスポンシブWebデザインで作る3つのメリット

賃貸マンション情報ポータルサイト「HEYAZINE（ヘヤジン）」

不動産ポータルサイト「HEYAZINE」では、大規模サイトとしては珍しいレスポンシブWebデザインによるマルチデバイス対応を実現しています。最近、注目されることの多いレスポンシブWebデザインにはどのような利点があるのでしょうか。

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

レスポンシブWebデザインは、スマートフォンやタブレット端末といった画面サイズの異なるデバイスに、ウェブサイトを対応させる方法のひとつです。

ウェブサイトのマルチデバイスへの対応方法には、いくつかの方法がありますが、大きく下記の3つの方式に分けられます。

（１）同一のページを異なるURLに転送し、異なるソースで最適化する
（２）同一のページを同一のURLで、異なるソースで最適化する
（３）同一のページを同一のURLで、同一のソースで最適化する（レスポンシブWebデザイン）

レスポンシブWebデザインは、3番目の「ページを同一のURL、同一のソースで最適化する」方法で、CSS3のメディアクエリを使用して実装されます。URLがデバイス毎に分離しないため、ユーザによるシェアやリンクが容易であったり、Googleがページを別々にクロールする必要がないためコンテンツをより適切にインデックスしやすい特長があります。

レスポンシブWebデザインのメリット

レスポンシブWebデザインのメリットとしては、第一に、スマートフォンやタブレット端末からページを最適化して閲覧できることが挙げられます。
スマートフォンの普及が進み、マルチデバイス対応はウェブサイトの必須の要件になりつつあります。
私たちが管理するウェブサイトでは、現在、概ね20～30％のアクセスがモバイル端末からのものになります。これらのユーザに、ストレスなくコンテンツにアクセスしてもらえるメリットは看過できません。

第二に、レスポンシブWebデザインがGoogleが推奨するマルチデバイスへの対応方法であることが挙げられます。

"Google recommends webmasters follow the industry best practice of using responsive web design, namely serving the same HTML for all devices and using only CSS media queries to decide the rendering on each device."