スマートフォンが誕生する前は、PC（パソコン）からコンテンツを閲覧するのが一般的でした。

しかし現代では、PC以外にもスマートフォンやタブレットでコンテンツを閲覧するユーザーが増えたため、各デバイスのサイズに調整されたWebサイトが求められています。

その場合、各デバイスごとにHTMLページを制作するのも一つの手ですが、それには制作にかかる時間や制作費用など様々なコストを要します。

そこで注目を集めたのが、「レスポンシブデザイン」というWebデザインの手法です。

デバイスに合わせてWebサイトを設計しなくても、ひとつのHTMLでユーザーが見やすいデザインに切り替えてくれるので、比較的コストもかかりません。

つまり、レスポンシブデザインを活用すればユーザーに最適化したデザインを効率よく表示できるのです。

本記事では、レスポンシブデザインのメリット・デメリット、実際の作り方について解説します。

「レスポンシブデザインについて知りたい」

「レスポンシブデザインの活用方法は？」

このような要望・疑問がある方はぜひ最後までご覧ください

レスポンシブデザインとは？

レスポンシブデザインとは、PCやモバイル・タブレットなど、あらゆるデバイスのサイズに応じてcssを切り替え、ひとつのHTMLで複数の表示を可能とするデザインです。

冒頭でも少し解説したとおり、レスポンシブデザインを使えばスマホやタブレットごとのHTMLページを作らなくても、各デバイスに最適化したサイズのページを表示することができます。

では、一見便利なように見えるレスポンシブデザインにデメリットはあるのでしょうか。次の章では、レスポンシブデザインのメリット・デメリットについて解説します。

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

レスポンシブデザインには、SEOの観点やサイト運用の観点、ユーザーの観点でそれぞれメリットがあります。

• SEO効果が期待できる
• サイト修正の修正が容易になる
• リダイレクトの手間がなくなる

それぞれ詳しく解説します。

SEO効果が期待できる

スマートフォンやタブレットに最適化したページを個別で作る場合、PCのページとは異なるページURLになるため、SEOの評価が分散しかねません。

しかしレスポンシブデザインを活用すれば、あらゆるデバイスから同じURLでアクセスできるため、サイト評価が1つのURLに統一されて検索エンジンから正しく評価されるようになります。

また、URLが1つに統一されることでリンク効果が高まりやすくなり、SEO効果の向上が期待できるでしょう。

URLの正規化について詳しく知りたい方はこちら

サイト修正の修正が容易になる

デバイスごとに別のURLでサイトを公開していては、修正するたびに複数のファイルごとに対応する必要があり手間がかかります。

レスポンシブデザインを活用すれば、ファイルが一つになるのでこのようなサイト修正の手間を省くことができます。

リダイレクトの手間がなくなる

PC版・スマホ版でURLが分かれている場合、ユーザーがスマホでPC版にアクセスするとリダイレクトの手間が発生します。

レスポンシブを使用するとページURLが1つに統一されるので、リダイレクトの手間を省けます。ユーザーの利便性向上につなげることができるでしょう。

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

続いては、レスポンシブデザインのデメリットについて解説します。

• レスポンシブデザイン用のcssの記述に時間と費用がかかる
• サイトの読み込みが遅くなる

レスポンシブデザイン用のcssの記述に時間と費用がかかる

レスポンシブデザインの場合、専用のcssの記述が必要になるため、その分構築する時間・費用がかかってしまいます。

ただし、メリットの部分でも説明した通り、一度設定してしまえば後々のサイト修正が楽になるので、最初に設定しておくのがおすすめです。

 

サイトの読み込みが遅くなる

レスポンシブデザインは、スマホ・タブレットでPC用のHTMLコードや画像などのサイズの大きいファイルを読み込む場合があります。そのため、環境によっては読み込み速度が落ちる可能性があるでしょう。

あまりにも読み込みが遅い場合は、PC版の画像をスマホ・タブレット版ではテキストなどに代替するのも一つの手段です。サイトの読み込み速度が遅いとSEOにマイナスの影響を及ぼすため、ぜひ検討してみると良いでしょう。

 レスポンシブデザインの作り方

ここまで見ると、「レスポンシブデザインはなんだか難しそう」と思われた方もいるかもしれません。

しかしながら、レスポンシブデザインの作り方は意外とシンプルです。

本記事では2つの作り方を解説します。

• meta viewportタグを入れる
• メディアクエリを使用する

具体的に解説しますので、ご覧ください。

meta viewportタグを入れる

HTMLのheadタグ内に、meta要素のname属性値の一つである「viewport（ビューポート）」というメタタグを記述します

meta viewportタグは、画面表示をデバイスの幅に応じて自動で調整してくれるコードです。このコードでデバイスに応じた具体的な表示領域の設定ができます。

下記はコードの記述例です。

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

viewportタグ内で個別に指定できる項目があります。こちらは必要であれば設定しましょう。

• width=device-width：訪問ユーザーの使用デバイスの横幅を取得する
• initial-scale：表示倍率を指定する（デフォルトは1.0の指定で問題ない）
• user-scalable：ユーザーにズームを許可するか否かを指定できる

上記のような指定項目を許可する場合は、末尾に=yes、許可しないなら=noと記載します。

メディアクエリを使用する

メディアクエリとは、訪問ユーザーが使用するデバイスの幅に合わせたサイト表示を可能にするコードです。

スマホからPC用のWebサイトにアクセスした際に「見づらい」といった事態を防ぐために、画面サイズに適したデザインを表示してくれます。

記述する方法はPC用とスマホ用、タブレット用でcssが異なります。次をご覧ください。

＠media screen and (min-width: 768px) { /*ウィンドウの幅が768px以上の場合に適用する*/

（PC用のcssを記述する）

}

「min-width」は、コードで指定したpxを超えた場合に、適した画面サイズのページに切り替わります。

＠media screen and (max-width: 768px) { /*ウィンドウの幅が最大768pxまでの場合に適用する*/

（タブレット用のcssを記述する）

}

＠media screen and (max-width: 480px) { /*ウィンドウの幅が最大480pxまでの場合に適用する*/

（スマホ用のcssを記述する）

}

一方で「max-width」は、コードで指定したpx以下の場合に、適した画面サイズのページに切り替わります。メディアクエリで表示する画面サイズを指定した後、各デバイス用の背景カラーやフォントサイズなどのcssを記述します。

メディアクエリとは？レスポンシブデザインの効果的な書き方を解説

レスポンシブデザインに便利なcss

レスポンシブデザインに便利なcssを2種類紹介します。

• display:none（コンテンツの非表示）
• コンテンツの横幅調整

display:none（コンテンツの非表示）

レスポンシブデザインを使ってWebサイトを構築すると、PC用のページをスマホ用のページにうまく対応させられない場合があります。

そのような時に役立つのが「display:none」です。「display:none」で指定した要素を非表示にすることができます。

記述方法は次のとおりです。

＠media screen and (min-width: 768px) { 

.sample {display:none}

}

PCでは表示させたいけど、スマホでは非表示にしたい要素があるときに使いましょう。

コンテンツの横幅調整

スマホでPＣ版サイトを閲覧すると、コンテンツが横に長いあまり、横スクロールができる場合があります。

各コンテンツの横幅が可変になっていないと、サイトの一部分しか画面に表示されず不便なので、横幅調整しておきましょう。

記述方法は次のとおりです。

＠media screen and (min-width: 768px) { 

.sample {overflow-x:scroll}

}

上記のcssを記述することで、画面からはみ出した要素を横スクロールで表示することができます。

レスポンシブデザインのチェック方法

レスポンシブデザインをチェックする方法を紹介します。

まずは、レスポンシブデザインの確認対象となるサイトを開き、F12キーを押します。するとデベロッパーツールが表示されるので、デバイスマークを押して任意のデバイスを選択します。

デバイスを選択したら、リロードしてレスポンシブデザインの表示を確認しましょう。もちろん、スマホやタブレットで実機を使って確認する方法もあります。そちらも試してみましょう。

まとめ

本記事では、レスポンシブデザインのメリット・デメリットや実際の作り方について解説しました。

レスポンシブデザインは、ユーザーが使用するデバイスのサイズに応じて表示デザインを最適化してくれる手法のことです。

Webサイトをレスポンシブデザインにすることで、SEOの効果が向上したりサイト修正を容易になるといったメリットがあります。

また、現代ではモバイルユーザーが増えているため、各デバイスに最適化したデザインで表示することは、ユーザビリティの向上にもつながります。

レスポンシブデザインになっているかどうか不明な方は、本記事で紹介したチェック方法で一度確認してみましょう。