新しいwebデザインの手法として、「レスポンシブwebデザイン」が国内外で大きな注目を浴びている。レスポンシブwebデザインとは、デスクトップパソコン、スマートフォン、タブレットなど、どのデバイスでも閲覧できるよう、ワンソースで最適なwebサイトを制作する手法である。1つのHTMLファイルをCSS3(Media Queries)で制御するため、各デバイスで用いるブラウザのサイズに応じて、ページのレイアウトを自動調整することが可能になる。今回は、この「レスポンシブwebデザイン」のメリットと驚異的な効果について紹介しよう。

 

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

レスポンシブwebデザインのメリットには、以下のような点があげられる。

  1. webサイトの管理と更新のしやすさ
    一つのレイアウト変更で、すべてのデバイス表示を変更できる。
  2. 一貫性のあるデザインでブランドイメージを作りやすい
    各デバイスのデザインが統一されるため、記憶されやすい一貫性のあるブランドイメージを作り上げることができる。
  3. 検索エンジン(SEO)対策になる
    全てのデバイスで同じURLになり、外部リンクが分散することがない。
  4. 低コスト
    デバイスごとに制作費、更新費がかからない。
  5. デバイスの多様化にも対応可能
    あらゆる画面サイズに対応しているため、新たなデバイスの出現にもサイトを調整することなく対応できる。

実際にレスポンシブwebデザインを採用すると、どれだけのインパクトをもたらすことができるのかを、次の事例で紹介しよう。 

 

レスポンシブwebデザインを採用したサイトの紹介

LukeWというサイトでは、TIMEをはじめとした、レスポンシブwebデザインの効果についてリポートされている。

37-1

TIME

米国の著名な週刊誌のwebサイトである。9ヶ月かけてレスポンシブwebデザインへ変更した結果、次のような成果が得られた。

  • モバイルユーザーが23%増加
  • Webサイトのユニークユーザーが15%増加
  • 滞在時間が7.5%増加
  • モバイルユーザーの直帰率が26%減少

37-2

Skinny Ties

アメリカにあるスキニータイの専門店のwebサイトである。レスポンシブwebデザインに変更した結果、次のような成果が得られた。

  • すべての端末で収入が42%増加
  • コンバージョン率が13.6%増加
  • iPhoneでの収入が377.6% 増加
  • iPhoneでのコンバージョン率が71.9%増加
  • 滞在時間が44.6%増加
  • 直帰率が23.3%減少 

海外だけでなく、日本においても、レスポンシブwebデザインを採用するECが出てきている。例えば、通販大手のベルメゾンは、女性向けファッションECサイト「embellish」で、レスポンシブwebデザインを導入している。

37-3

 

大手だけでなく、地方のEC会社もレスポンシブwebデザインを採用し始めている。中でも、青森県にあるセレクトショップ「THE STABLES」は、国内の秀逸なwebデザインとして、しばしば事例で取り上げられている。 

37-4

 

まとめ

メリットの多いレスポンシブwebデザインでも、デメリットがないわけではない。例えば、開発時間が長くかかる点や、Internet Explorer 8以下では動作しない点、またデバイスごとに異なる情報を提供したい場合は別々にサイトを構築する必要がある点、等があげられる。しかし、それらのデメリットを考慮してもレスポンシブwebデザインの効果は非常に大きい。

スマートフォン・ユーザーが増加している日本において、デスクトップパソコン以外のデバイスにwebサイトを対応させることは、事業の規模に係らず急務である。2013年は、国内で多く出現するであろうECサイトにおけるレスポンシブwebデザインの動向に注目していきたい。