更新:2015年10月8日いまや常識!レスポンシブデザインの基礎知識と今後の展望ココマッチー[著]TweetPocketウェブ業界では当たり前の施策となった、レスポンシブウェブデザイン。本記事では、レスポンシブウェブデザインの基本についてまとめました。レスポンシブって何?という方から、復習として確認したい方まで、必見の内容です。レスポンシブデザインってなに?近年では、スマホやタブレットなどさまざまなディスプレイサイズのデバイスが存在しています。そのため、ウェブサイトもさまざまなデバイスに適した表示・コンテンツを提供する必要が出てきたのです。その一つの手法が、レスポンシブウェブデザイン。レスポンシブウェブデザインとは、デバイスによって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年に提唱されたレスポンシブウェブデザインは、あらゆるデバイスが存在している現代において欠くことのできない技術となりました。ご紹介したとおり、レスポンシブに対応することは、メリットもあり、デメリットもあります。ウェブ戦略と照らし合わせた上で、必要なタイミングでは存分に活用していきたいものですね。中小企業のWEBデザインでよく見られる5つの間違いスマホのサイトデザインで固定表示は上か下か考えてみた。レスポンシブ10万いいね!目指してます。株式会社ココマッチーTwitterでフォローするFeedlyでフォローするココマッチーココ街の運営を担当しています。*メールアドレス(公開はされません。人気の記事トップ20LINEの裏ワザを一挙大公開!役立つ裏技からドッキリまで。意外と知らないTwitterの裏ワザ検索。【まさに大人の自習室】都内厳選6コワーキングスペースを一挙ご紹介こ、こんなに違うの?各SNSの特徴を知って注目される配信を目指そう急上昇キーワードを把握できるGoogle・Yahoo!のお役立ちツール5選フォントや配色でこんなに違うの!?興味を惹くWEBサイトの各事例デザインの秘密なんと無料!超カンタンにアニメーション動画を作ってみようココ街は(株)ココマッチーが運営しています。