ウェブ業界では当たり前の施策となった、レスポンシブウェブデザイン。本記事では、レスポンシブウェブデザインの基本についてまとめました。レスポンシブって何？という方から、復習として確認したい方まで、必見の内容です。
レスポンシブデザインってなに？
近年では、スマホやタブレットなどさまざまなディスプレイサイズのデバイスが存在しています。そのため、ウェブサイトもさまざまなデバイスに適した表示・コンテンツを提供する必要が出てきたのです。その一つの手法が、レスポンシブウェブデザイン。レスポンシブウェブデザインとは、デバイスによってCSSを振り分ける方法のことです。具体的には、ユーザーが使っているデバイスのウィンドウサイズ（横幅）によって、適用するCSSを切り替えて、ウェブページを表示しています。そのため、通常はページ当たり一つのHTMLファイルを使用しています。
レスポンシブデザインのメリット、デメリット
ウェブサイトにとっては非常に効果的な方法に思えるレスポンシブウェブデザインなのですが、メリットだけでなくデメリットがあることも事実。レスポンシブなサイトを検討する場合は、これらの点についてしっかり理解した上で、活用していく必要があります。それでは、メリット・デメリットについて確認していきましょう。
メリット
デバイスによらず同一のコンテンツを提供できる
従来は、デバイスごとに別々のHTMLを用意していましたが、レスポンシブウェブデザインは違います。一つのHTMLを使用して、デバイス（ディスプレイサイズ）ごとにCSSを切り替えているのです。これはつまり、どのデバイスで見ても同様のコンテンツが表示される、ということになります。
コスト削減につながる
ページをレスポンシブにしている場合、運用の手間を省くことができます。レスポンシブウェブデザインでは、ページあたりのHTMLが一つでしたよね。ページに変更を加える時は、一つのHTMLで済むのです。運用の工数が減り、サイトの管理もし易くなります。このため、コストの削減につながるとも言えます。
SEOに有利になる
レスポンシブなサイトではページ辺りのHTMLは一つですが、デバイスごとにHTMLを分けているサイトではページ辺りのHTMLは複数になります。ページ辺りのHTMLが複数あると、アクセスが分散することになってしまいます。そのため、HTMLが一つのレスポンシブの方がSEO面で有利ということがわかるでしょう。また、Googleなどの検索エンジンはレスポンシブなサイトとの親和性も高いので、やはりレスポンシブはSEOに強い、ということになりますね。
シェアに強い
レスポンシブなサイトはSNSでのシェアに強い、ということができます。HTMLをデバイスごとに分けている場合、シェアされるURLがデバイスごとに異なることになってしまいます。シェアされるURLが分散してしまいますから、あまりよろしくありませんよね。その点、レスポンシブなサイトはURLが一つなので、そういった心配もありません。
デメリット
コンテンツの出し分けが苦手
レスポンシブウェブデザインでは、どのデバイスでも同様のコンテンツを表示することができます。逆に、デバイスごとにコンテンツを出し分けることは苦手なのです。スマホの場合だけ表示したいコンテンツや要素がある場合は、CSSやJavaScriptなどを利用して一工夫しなければいけなくなります。
読み込みに時間がかかることがある
レスポンシブなサイトでは、CSSを切り替えることでデザインレイアウトを振り分けています。デザインは振り分けていても、データまでは振り分けできていないケースがあります。つまり、表示はされていなくても、読み込まれているデータ（ソース）があるのです。これが原因となって、ページの読み込みに時間がかかってしまうことがあります。
制作や改修が手間になる（場合がある）
ケースバイケースなのですが、レスポンシブウェブデザインを採用する場合は制作が手間になってしまうことがあります。特に、サイトをリニューアルする場合はそれが顕著になります。レスポンシブなウェブサイトを制作する際は、デザインの基本設計から見直さなければいけません。そのため、リニューアルをする場合は既存の設計との兼ね合いについて考慮する必要があります。状況によっては、サイトを改修するよりも、新規にサイト制作をした方が時間がかからないケースもあります。
レスポンシブウェブデザインの今後
レスポンシブウェブデザインは、今後も脚光を浴び続けていくでしょう。しかし、レスポンシブウェブデザイン以外にも、新しい技術が生まれてきていることは知っておくべきです。例えば、レスポンシブウェブデザインとよく比較されるものとして、アダプティブデザインがあります。デバイス中心のレスポンシブウェブデザインに対して、アダプティブデザインはユーザー中心と言えます。他にも、プログレッシブエンハンスメントなどの方法もよく知られています。ウェブと人との関わり合いも多様になってきている以上、さまざまな技術や施策が登場し、複合的に活用していくことが求められるでしょう。
あとがき
いかがでしょうか。2010年に提唱されたレスポンシブウェブデザインは、あらゆるデバイスが存在している現代において欠くことのできない技術となりました。ご紹介したとおり、レスポンシブに対応することは、メリットもあり、デメリットもあります。ウェブ戦略と照らし合わせた上で、必要なタイミングでは存分に活用していきたいものですね。
