2016.02.19 Fri

レスポンシブ・ウェブデザインとは(メリット、デメリット)

はじめまして。ジーニアスウェブの前田です。
本日より、ジーニアスウェブのブログに記事を投稿させて頂きます。
Web制作の上で為になる情報を配信していきたいと思います。
よろしくお願いいたします。

今までもWebに関わる仕事をしておりましたが、ジーニアスウェブで学ぶことがたくさんあり、日々勉強と思い仕事に取り組んでおります。
ご挨拶はこのくらいにいたしまして、本題に入っていこうと思います。

今回は”レスポンシブ・ウェブデザインとは(メリット、デメリット)”についてご説明させていただきます。

最近では、「レスポンシブ・ウェブデザイン」が主流になってきており、弊社のお客様でも「レスポンシブ・ウェブデザイン」のサイトを多数製作しております。
「レスポンシブ・ウェブデザイン」とはウィンドウのサイズに合わせて、自動的にページのデザインを変化させたり、最適化をする技術のことです。
僕もこの仕事を始まる前はレスポンシブってなに？美味しいの？レベルだったのですが現在ではレスポンシブウェブデザインが主流になってきていますのでそんなことは言ってられません（笑）

レスポンシブ・ウェブデザインのメリット

・内容の修正・更新が簡単
こちらは制作側のメリットではあるのですが、従来はPCサイトとスマホサイトでHTMLが別で作る必要がありましたので、一箇所の修正でもPC用のHTML、スマホ用のHTMLの二箇所を修正しなければならなかったため作業時間が倍かかっていました。しかし、レスポンシブ・ウェブデザインの場合はHTMLが一つなので作業スピードも上がり、修正が簡単に行うことができます。
・SEOの順位に効果的
Googleは、モバイルサイトを構築する際の設定として以下の3つを提案しています。

レスポンシブウェブデザイン: ユーザーのデバイス（パソコン、タブレット、モバイル、非視覚的ブラウザ）に関係なく、同じURLで同じHTMLコードを配信しますが、画面サイズに応じて（つまり「レスポンシブ」に）表示を変えることができます。Googleでは、デザインパターンとしてレスポンシブデザインを推奨しています。
動的な配信: デバイスに関係なく同じURL を使用しますが、ユーザーのブラウザに関してサーバーが把握している情報に基づいて、デバイスタイプごとに異なる HTML を生成します。
別々の URL: デバイスごとに別々のコードを配信します。この設定では、ユーザーのデバイスの検出を試み、HTTPリダイレクトとVary HTTPヘッダーを使用して適切なページにリダイレクトします。

→参考：最適化されたウェブサイトの構築方-Google Developers

上記の参考サイトで「Googleではレスポンシブ・ウェブデザインを推奨しております」と明言されております。
Googleがなぜレスポンシブウェブデザインを推奨しているかは大きく3つに分けられます。
・1つのURLを使うことで、ユーザーがシェアしたりリンクを貼ったりすることが簡単になり、さらにGoogleのアルゴリズムがコンテンツを容易にインデックスしやすくなる。
・デバイス毎に最適化されたサイトへのリダイレクトが不要。
ユーザーエージェントによるリダイレクトは間違いが起こりやすく、ユーザーエクスペリエンスの品質低下を起こす可能性がある。
・（サイト管理者にとっては）サイト管理のリソースも減らすことができ、Googleのクローラもー一度のクロールで済むので手間がかからない。さらにより多くのコンテンツをインデックスし、それらを最新の状態に保つことに間接的に役立つかもしれない。
ユーザー、製作者、そしてGoogleにとってもとてもに魅力的のある技術ですね。

レスポンシブ・ウェブデザインのデメリット

・ページ読み込み速度が遅くなる場合がある
全てのデバイスで同じHTMLファイルを読み込むことになりますのでページ数や画像などが多い場合、モバイル用サイトでの読み込み速度が遅くなってしまうこともあります。原因としては、画像サイズの容量やソースコードの煩雑さなど様々なことが考えられます。
・作成に時間がかかる
表示させるデバイスごとにレスポンシブ対応のデザインを用意したり、一つのHTMLファイルでの作成になるので構築が複雑なため、単純にPC用のサイトをコーディングする時間より作業時間が増えます。
・Internet Explorer8以下で対応していない
レスポンシブデザインは、メディアクエリ(@media)という技術を使って、ユーザーの端末のサイズを判断し、レイアウト表示しています。
問題点は古いブラウザー、特にInternet Explorer8以下はメディアクエリを認識していません。しかしIE8以下にも対応する作り方はいくつかでてきていますが、IE用に全く異なるスタイルシートを用意したりjavascriptで設定したりする必要があるため、圧倒的に作業時間がかかってしまいます。