レスポンシブWebデザイン不動産ポータルサイト事例
制作実績
2013-02-15
不動産ポータルサイトのレスポンシブWebデザイン対応の事例です。インフォアスリートの開発した「HEYAZINE」では、大規模サイトとしては珍しいレスポンシブデザインによるマルチデバイス対応を実現しています。
大規模サイトとしては珍しいレスポンシブWebデザインによるマルチデバイス対応を実現
不動産ポータルサイトのレスポンシブWebデザイン対応の事例です。
インフォアスリートの開発した「HEYAZINE」では、大規模サイトとしては珍しいレスポンシブデザインによるマルチデバイス対応を実現しています。
レスポンシブWebデザインとは
レスポンシブWebデザインは、スマートフォンやタブレット端末といった画面サイズの異なるデバイスに、ウェブサイトを対応させる方法のひとつです。
ウェブサイトのマルチデバイスへの対応方法には、いくつかの方法がありますが、大きく下記の3つの方式に分けられます。
- 同一のページを異なるURLに転送し、異なるソースで最適化する
- 同一のページを同一のURLで、異なるソースで最適化する
- 同一のページを同一のURLで、同一のソースで最適化する（レスポンシブWebデザイン）
レスポンシブWebデザインは、3番目の、ページを同一のURL、同一のソースで最適化する方法で、CSS3のメディアクエリを使用して実装されます。URLがデバイス毎に分離しないため、ユーザによるシェアやリンクが容易であり、また、Googleがページを別々にクロールする必要がないためコンテンツをより適切にインデックスしてもらえるメリットがあります。
スマートフォンに最適化されたサイト構築の推奨方法（Google）
レスポンシブWebデザインのメリット
スマートフォンの普及が進み、マルチデバイス対応はウェブサイトの必須の要件になりつつあります。そこで、「レスポンシブWebデザイン」を採用するメリットとは何でしょうか？
ひとつには、レスポンシブWebデザインが前述のようなGoogleが推奨する方法であることが挙げられます。Googleがインデックスしやすい方式でコンテンツを提供することで適切なキーワードによる検索結果表示を実現し、オーガニック検索によるウェブサイトへのアクセスの質と量を向上できます。
また、もうひとつの大きなメリットとして、ウェブサイトの運営コストが大きく削減されることが挙げられます。前述の1や2の方式では、デバイス別の異なるHTMLソースを用意する必要があります。異なるHTMLソースを用意すると、開発時はもちろん、機能の変更や追加のたびに、2重の開発、2重のテストが必要となり、運営にかかるコストが倍増してしまいます。
レスポンシブWebデザインでは、このような2重の開発コストがかからなくなるため、サイトの運営にかかる時間的、金銭的コストを大幅に下げることができます。
大規模サイトへのレスポンシブWebデザインの採用について
一方で、情報量の多い大規模サイトにおけるレスポンシブWebデザインの採用事例は少なく、多くの大規模サイトでは、スマートフォン用のURLに転送したり、専用のアプリを提供して、スマートフォンに対応しています。
実際のところ、スマートフォンとPCでは表示に適した情報量に違いがあるので、同一のHTMLソースを使用するのが難しかったり、PCサイトのみがすでにある場合に、それを大改修してレスポンシブWebデザインを実現するのが困難なケースがあったりするでしょう。
しかしながら、レスポンシブWebデザインで一度ウェブサイトを作ってしまうことで、煩わしい2重開発から解放されることや、Googleにも好まれることを考えると、今後は、大規模サイトこそ、レスポンシブWebデザインを採用するケースが増えてくるのではないでしょうか。
