レスポンシブウェブデザイン(Responsive Web Design)とは

ここでは、レスポンシブウェブデザインとは何か、レスポンシブとSEOの効果について解説します。

レスポンシブウェブデザインとは?

レスポンシブウェブデザインとは、ウィンドウサイズに合わせて自動的にページのレイアウトを最適化する技術のことを呼びます。

デバイス毎に対応したサイトを作る場合、デバイス毎にURLを分けて、それぞれに個別のHTMLファイルを用意していました。
しかしこの方法だと、修正の度に全てのHTMLを変更する手間がかかったり、デバイス別でURLが別に存在することになるので、重複コンテンツと判断されるリスクがありました。

レスポンシブウェブデザインを採用することで、上記のような問題を解消するだけではなく、Googleから評価されやすくなり、ユーザビリティの向上にも繋がるとあり注目されるようになりました。
近年では、スマートフォンからのアクセスが増えており、スマートフォン対応の重要性が増えています。ウェブマスターはSEO対策として、「レスポンシブウェブデザイン」の採用を検討してみると良いでしょう。

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

レスポンシブウェブデザインでは、デバイスごとにCSS(スタイルシート)を振り分けて記述することで、デバイス毎に最適に表示することができます。

レスポンシブに対応する方法をいくつかご紹介します。

まず、最初にビューポート(viewport)を設定します。

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

方法1.メディアクエリを設定する

1つ目は、スタイルシート内でデバイス毎にCSSを分ける方法です。

@media(min-width:769px){
.header{...}
.footer{...}
}

@media(max-width:768px) and (min-width: 321px){
.header{...}
.footer{...}
}

@media(max-width:320px){
.header{...}
.footer{...}
}

方法2.CSSを振り分ける

2つ目は、CSS自体をデバイス毎に分ける方法です。

<link rel="stylesheet" href="pc.css" media="(min-width:769px)">
<link rel="stylesheet" href="tablet.css" media="(max-width:768px) and (min-width: 321px)">
<link rel="stylesheet" href="smp.css" media="(max-width:320px)">

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

レスポンシブウェブデザインにすることで、下記のようなメリットがあります。

1.ページ管理の効率化

レスポンシブウェブデザインではページの更新を行う際に、HTMLファイルを1ヵ所変更するだけでいいので、更新作業にかかる時間が少なくなります。従来では、デバイス毎の修正のし忘れなどがありましたが、レスポンシブウェブデザインではそのようなミスも解消できます。

2.Googleに最新の状態をインデックスさせやすい

レスポンシブウェブデザインの場合、URLが1つなので、Googlebotがクロール(巡回)しやすくなり、最新の状態を反映させやすくなります。

3.ユーザー間での情報共有がしやすく、ユーザーから評価されやすい

レスポンシブウェブデザインで作られたサイトは、1つのURLで情報を共有することができるので、ユーザーエクスペリエンスが高くなり、ユーザーから評価されやすくなります。
レスポンシブウェブデザインを採用することによって、SEO上のメリットがあるだけでなく、サイトのアクセスアップなどにもつながります。

メリットが大きいレスポンシブウェブデザインですが、その分構築の手間が大きく比較的コストが高いというデメリットがあります。また、スマホ用サイトを個別につくるのに比べてデザインの自由度も低くなってしまうのもデメリットのひとつです。
レスポンシブウェブデザインを採用する際には、メリットとデメリットを考慮したうえで対応しましょう。

上位表示を目指すURL *
(例)http://○○.co.jp
上位表示を目指すキーワード *
(例)中古車
ご担当者様名 *
電話番号 *
メールアドレス *

※個人情報の管理は、「プライバシーポリシー」に同意の上お申し込みください

この記事が役に立つと思ったら、ぜひ『フォロー』して下さい。
この記事が役に立つと思ったら、ぜひ『いいね!』して下さい。