Webドクターコラム
> > レスポンシブWebデザインとは?
Webドクターコラム
デザイン

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

 

こんにちは。自社マーケティング担当の佐藤です。
スマートフォンやタブレットPCなど急速な普及率上昇に伴い、サイト制作においても「レスポンシブWebデザイン」というワードを聞くことが多くなってきました。
今回は、そんなレスポンシブWebデザインについて簡単にお話ししたいと思います。

 

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

 

モバイルサイトを表示する場合、PCサイトとは異なるモバイル用のHTMLを用意し、ユーザーが閲覧している環境(OSやブラウザ)によって表示されるHTMLを振り分ける手法が従来のものでした。

「レスポンシブWebデザイン」(以下レスポンシブ)を一言で説明すると、
『あらゆるデバイス(PC、スマホ、タブレットPC)に適したページを表示できる制作手法』です。
デバイスごとに複数のサイトやデザインを用意するのではなく、それぞれのブラウザの画面サイズに適してレイアウトを切り替えることが可能です。

レスポンシブWebデザイン(Webドクター)

 

上記はレスポンシブに対応しているこのWebドクターサイトを、ウィンドウサイズ別に表示したものです。

 

レスポンシブのメリット

1. メンテナンスが簡単!

どのデバイスから表示されるページも1つのHTML(ワンソース)なので、一度制作したあともページ修正などのメンテナンスが容易になります。

2. ブラウザが異なっても一貫性のあるデザイン!

PCから見てもスマホなどのモバイルから見てもデザインに統一性があるため、ユーザーからは印象に残りやすく覚えてもらいやすいデザインとなります。

3. URLが統一されるためシェアが簡単!

PC用・モバイル用ページが1つのURLに統一されるため、ユーザーにとってシェアが簡単になります。また、SEOの効果も高くなります。
※GoogleもレスポンシブWebデザインを推奨しています。

 

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

1. スマホでのサイト表示速度が遅くなる可能性がある

スマホで表示される際もPC用の大きい画像などを読み込むため、表示されるまで時間がかかる可能性があります。

2. デバイスごとの細かいデザイン・レイアウトの調整ができない

例えばPCではこの見せ方、スマホではこの見せ方といったように、デバイスごとにデザインやレイアウトを変えたくても、変えることができません。
※一部コンテンツのレイアウト調整や表示/非表示等の設定は可能です。

3. スマホからPC表示の画面が確認できない

レスポンシブに対応したサイトの場合、スマホからアクセスするとスマホ向けのレイアウトで強制的に表示されてしまうため、スマホからはPC用のレイアウトを確認することができません。 

 

さて、簡単にレスポンシブのメリット・デメリットについてご紹介しましたが、今後ますますレスポンシブは増え、定着していくものと思われます。
素晴らしい手法ではありますが、流行りだからといって安易に取り入れるのではなく、上記でご紹介したメリット・デメリットを踏まえた上でお客様にとって最良・最適な効果となるかを考えての導入を検討していくことが大切です。