新しいWebデザイン「レスポンシブ」とは？

 

スマートフォンやタブレットなど、近年増え続けるさまざまなデバイス（＝情報端末機器。例えば携帯電話やiPhoneなど。）に対応するため、「レスポンシブ」というWebデザインが注目されています。

 

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

アクセスした人のデバイス（実際は画面サイズ）によって、自動的にレイアウトが切り替わるデザイン。
レスポンシブWebデザインは、既にマイクロソフト、NTT DATA、パナソニック、ソニーなどの有名企業でも採用されています。

例えば、デザインと使い心地にこだわったブランドrusset - ラシットでは、レスポンシブWebデザインをうまく活用しています。

 

 

（1）ウィンドウの幅が狭くなると、横並びのメニューがプルダウンメニューに変わる。

（2）イメージ画像が、縦横比を保ったまま縮小される。

（3）ウインドウを狭めると、ヘッダーがシンプルになり、商品が縦並びで表示される。

 

 

レスポンシブWebデザインの特徴

レスポンシブWebデザインによって、Webサイトのレイアウトやデザインをデバイス毎に最適化できるため、PCサイトやスマートフォンサイトなど、専用サイトをそれぞれ用意する必要がなく、ユーザーにとっては見やすく、制作者にとっては管理しやすくなります。

 

• 「デザイン効率が良い」⇒　ひとつのデザインで、いろんなデバイスに対応できる。
• 「管理が楽」⇒　デバイス毎にWebサイトを用意する必要がない。
• 「SEO対策に良い」⇒　全てのデバイスで同じURLになる事で、検索エンジンから評価が高くなる。

 

便利な一方、レスポンシブWebデザインはまだ新しい技術ということもあり、業界内でも活発に議論されています。
例えば、通常のデザインに比べて時間やコストがかかる、スマートフォンでは表示が遅くなりやすい。
古いバージョンのInternet Explorerに対応していない等のデメリットもあげられます。

 

現在では多くの企業がレスポンシブのWebデザインをとり入れていますが、
メリットとデメリットがあることを知っておく必要がありそうです。

全てがレスポンシブ対応である必要はなく、
目的に合わせて使い分けることが費用対効果の高いホームページ制作になると言えます。

「今っぽいレスポンシブ対応のWebデザインにしたい」とお考えの方は
その前に「今よりも○○したいので、レスポンシブ対応にする」を決めることが大切です。

レスポンシブ対応の場合、費用が上がる場合も多いので目的に応じて判断することが必要になります。

 

 

 

レスポンシブ対応のメリットとデメリット（まとめ）

レスポンシブ対応の「メリット」

• 更新時の効率：　1回の更新でスマホとPC両サイトが更新される
• SEOの効果：　　2つのURLが1つになるのでSEO対策になる

レスポンシブ対応の「デメリット」

• 制作時のコスト：　制作費用が増える可能性がある
• アクセスの負荷：　表示スピードが遅くなる可能性がある
• ブラウザの対応：　IEなど古いブラウザは未対応になる

 

ホームページ制作でのレスポンシブ対応については、
「結果」最優先なのか「見た目」だけのデザイン変更レベルなのかでも変わってきます。

レスポンシブ対応のWebデザインを効果的に活用するには、
メリットとデメリットを知り目的にあわせて費用対効果で決めることが大切です。

また、レスポンシブWebデザインを制作会社に依頼するケースでは、
「頼れる制作会社」を見極めることが非常に重要になります。

外注制作を考えている場合、制作会社の選び方がわかるこちらも参考にどうぞ。

 

 

参考サイト：

• 目的と結果をつくる！頼れるHP制作会社の見分け方（集客に特化したホームページ）
• 予想以上に結果の出た！Web制作（ホームページ）事例
• Responsive Web Design JP | 国内の秀逸なレスポンシブWebデザインを集めたギャラリーサイト
• レスポンシブWebデザインのメリット、デメリット比較まとめ
• レスポンシブ・ウェブデザインの簡単な作り方