レスポンシブWebデザインとは、デバイスや表示範囲で、問題なく表示させるために、CSSでレイアウトを変えて最適化するテクニックです。 コンテンツを切り分けせず、1つのソースを、幅に合わせて、収まるように表示させます。

何故、レスポンシブWebデザインを行うのか？

今では、当たり前の技術かもしれませんが、改めて考えてみましょう。 Googleでは、スマホサイトの構築において、レスポンシブデザインを推奨しており、SEOにおいて有利になると考えられています。 レスポンシブでなくても、不利にならないです。 しかし、リダイレクトでスマホ対応していると、新しいデバイスなどでリダイレクトループが発生するリスクがあり、SEOペナルティを受ける可能性があります。

モバイル設定を選択する – ウェブマスター向けモバイルガイド

近年では、スマホからのアクセスが50％を超えるサイトが増えてきており、そういった環境では、レスポンシブを採用するメリットが大きいと言えるでしょう。 （ツクメモでは、スマホからのアクセスが10％くらいです…） このことから、レスポンシブで、マルチデバイスに対応させるメリットが、大いにあります。

（2015.3.2追記）検索結果をもっとモバイル フレンドリーに

2015年2月27日にGoogle ウェブマスター向け公式ブログに書かれていました。 4月21日から、Webサイトがモバイル フレンドリー（スマホ対応）かどうかを、ランキングの要素にするようです。 GoogleがGoogleの検索結果に大きな変化をもたらします と言っているくらいなので、スマホ対応されていないサイトにとっては、大きな影響になるかもしれません。

Google ウェブマスター向け公式ブログ: 検索結果をもっとモバイル フレンドリーに

対応しているはずだけど…、と心配の方は、テストしてみてはいかがでしょうか。

モバイル フレンドリー テスト

Google Webmaster Toolsでの警告

ちなみに、Google Webmaster Toolsを使用している場合、スマホ対応していないサイトには、以下のようなメッセージが出たりします。

http://****/ のウェブマスター様 Google のシステムは、貴サイトの * ページをテストし、そのうちの 100% に重大なモバイル ユーザビリティ上の問題を検出しました。この * ページの問題の影響で、モバイル ユーザーは貴サイトを十分に表示して楽しむことができません。これらのページは Google 検索でモバイル フレンドリーとは見なされないため、スマートフォン ユーザーにはそのように表示、ランク付けされます。

レスポンシブWebデザインのデメリットは？

よく言われているデメリットは、以下の3つが多いです。

  • 不要な要素を読み込む可能性による遅延
  • コーディングに時間（手間）がかかる可能性
  • 向かないデザインがある（デザインに制約がある可能性）

不要な要素を読み込む可能性による遅延

PCサイトで必要な要素が、あるデバイスでは表示させないときでも、そのリソースが読み込まれる場合があります。 必要のないものが読み込まれるという意味では、表示が遅くなっているかもしれません。

しかし、スマホサイトで、きれいに表示しようと考えると、Retinaディスプレイ用に、PCサイトよりも大きい（2倍/3倍）画像を用意しなくてはなりません。

重いからレスポンシブにしないという選択より、軽量化を考えたサイトに改善する方が、効果的です。

ただ、少しの遅延が、売り上げ（サービスの価値）に大きく影響するようなサイトだと、難しいかもしれません。 表示幅で判定する、現状のレスポンシブWebデザインでは、限界があると言えるでしょう。

新しい（？）アダプティブWebデザインという概念であれば、そういったサイトにも対応できるかもしれません。

コーディングに時間（手間）がかかる可能性

スマホとPCのサイトを制作すると考えたら、単純に考えても倍の時間が掛かると言えます。 面倒だからレスポンスデザインを行わない、というのではなく、マルチデバイスのために時間や予算を確保できるかという話になるでしょう。

向かないデザインがある（デザインに制約がある可能性）

確実に、レスポンシブに向かないデザインは、存在します。 デバイスごとに専用のリソースを用意しなくてはいけないもの、共通するデザインや機能が少ないものが、それに当たります。

レスポンシブWebデザインを実現する技術

レスポンシブWebデザインを実現するためには、以下の3つを使います。

  • Media Queries（メディアクエリ）
  • viewport（ビューポート）
  • リキッドレイアウト、フルードグリッド

Media Queries（メディアクエリ）

CSS3の機能の1つで、レスポンシブデザインを構築するために、一番重要な技術になります。 基本的には、切り替えたい表示幅を指定して、CSSを切り分けます。 3つの書き方があります。

CSSファイル内に記述する方法

@media screen and (max-width: 320px) {
     img {display: block; width: 100%;}
}

HTMLのheadに記述する方法

<link rel="stylesheet" href="phone.css" type="text/css" media="screen and (max-width: 320px)">

CSSファイル内にインポートする方法

@import url(phone.css) screen and (max-width: 320px);

インポートやHTMLのheadに記述する方法は、リクエストが増えたり、あまり使い勝手が良くないです。 CSSファイル内に記述するのが、良いでしょう。 例えば、ある解像度を想定して、横幅を640px < X ≦ 768pxように考えた場合、 

@media screen and (min-width: 641px) and (max-width: 768px)｛
     ...
｝

と書くと良いでしょう。

viewport（ビューポート）

viewportは、スマホやタブレットなど、表示領域が限られたデバイスで、どのように表示させるかを決める設定で、HTMLのmeta要素に記述します。 viewportの設定がないと、980pxとして表示されるので、スマホやタブレットでは、適切な値を入れる必要があります。

よく使用されているパターン

下記のパターンが、よく使用されています。 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-widthで、デバイス幅で表示することができます。 initial-scaleは、最初に表示される拡大率の設定です。 device-widthだけでは、iPhoneでランドスケープ（横向き）にしたときに、ポートレート（縦向き）の解像度のまま、拡大してしまいます。 次のinitial-scale=1.0にすることで、ピクセルとデバイス拡大率が1対1になるので、ランドスケープでも幅全体で利用できるようにしています。

ビューポートを設定する

デバイス別にviewportを入れる

デバイス別にviewportにサイズを入れる場合、JavaScriptを使用します。 ツクメモでは、こんな感じにしていました。 user-scalable=0で拡大を禁止しているので、イケていませんが、サイトに使っているものを張っておきます。 ※jQueryが必要です。 

function addViewport(){

    var $viewport = $('meta[name = "viewport"]'),
        wid;
    //viewportがない場合
    if (!$viewport.length){
        $viewport = $('');
        $viewport.attr('name', 'viewport');
        $('meta:last').after($viewport);
    }

    function resize(){
        wid = $(window).width();
        if (wid > 640){
            $viewport.attr('content', 'width=960, user-scalable=1');
        }else if(wid <= 640){
            $viewport.attr('content', 'width=device-width, user-scalable=0');
        }
    }
    $(window).on('resize',resize).resize();

}
$(document).ready(function() {
    addViewport();
});

リキッドレイアウト、フルードグリッド

リキッドレイアウトとは、表示に合わせて可変するサイトのことを指し、リキッドレイアウトに対応したグリッドデザインをフルードグリッドと言います。

難しそうな言葉が並んだ感じがしますが、簡単に言えば、ピクセルではなくパーセントでデザインするということです。

PCサイトでは、ピクセル固定で問題ないですが、スマホやタブレットは、全てのデバイスが同じ解像度ではないので、差異があったとしても破綻しないようにパーセントでレイアウトを考えます。

横幅のブレイクポイントは？

それでは、どれくらいの幅になったときにデザインを変えていくのが良いのでしょうか。

Bootstrapでは、スマホ-768px未満、タブレット-768px以上、PC-992px以上、PC大きく表示-1200px以上、のようになっています。

ざっと最近のデバイスの幅を眺めてみると、以下のような感じでした。

スマホ320～738くらい
タブレット768～1280くらい

まずは、768pxが、スマホとを分ける境目になりそうですね。

どうしてなのか、忘れましたが、ツクメモでは、640pxでPCとスマホに分けていますね…。

まとめ

分かっているつもりでしたが、記事を書いてみると、かなり勉強になりました。 インターネットは、ますます、PCからマルチデバイスに変わります。 激しく時代が移り変わりますが、素晴らしいコンテンツを作っていきたいですね。