レスポンシブウェブデザイン

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

レスポンシブウェブデザインとは、ページレイアウトをデバイスに合わせて変化させることによって、単一のURL・HTMLを持つページでも複数のデバイスに対応させることが出来るようになる、ウェブデザイン手法のことをいいます。

従来のウェブデザイン手法では、複数のデバイスに対応したページを作る場合、デバイス毎にURLを確保して、それぞれに最適なページレイアウトのHTMLファイルを用意していました。しかしこの方法だと、HTMLファイルを一つ一つ扱わなければならないので管理に手間がかかったり、ページにURLが複数あることによって、Googleから正しくクローキングされないことがありました。←(重複コンテンツ参照)

そこで、従来の問題を解消する、新しいウェブデザイン手法として「レスポンシブウェブデザイン」が注目されるようになりました。レスポンシブウェブデザインを採用することは、上記のような問題を解消するだけではなく、サイトをGoogleから評価されやすくしたり、ユーザビリティを向上させることにも繋げることができます。
近年では、ウェブページをスマートフォンに対応させることの必要性が高まっていますから、ウェブマスターはその構築法の一つとして、「レスポンシブウェブデザイン」の採用を検討してみるべきでしょう。

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

レスポンシブウェブデザインでは、デバイスのスクリーンの横幅に応じて、複数のCSS(スタイルシート)を振り分けて表示することで、デバイス毎にページレイアウトを変化させます。
具体的には、CSS3の機能であるメディアクエリを使って、各CSSが表示される条件(画面の横幅の範囲)を指定します。

例えば、800px以上ならパソコン用のCSS、800px未満750px以上ならタブレット用のCSS、750px未満ならスマートフォン用のCSSを表示するというようにHTMLに記載します。
これにより、デバイス毎にページレイアウトを変化させることが出来るようになります。しかし、このままだとスマートフォンやタブレットでページを表示したときに、コンテンツのサイズが合いません。そこで、ページを見やすくするために、Viewportを設定します。

Viewportとは、ページの尺度などに関わるスマートフォンのブラウザの機能で、パソコンの「ウィンドウサイズ」に似た機能となります。Viewportを設定することによって、ページの横幅や縦幅、倍率などを指定することできます。
このようにレスポンシブウェブデザインの作成は、メディアクエリによるCSSの指定と、Viewportの設定を基本的な手順とします。

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

従来のウェブデザイン手法と比較して、レスポンシブウェブデザインを採用することのSEO的なメリットは数多いです。以下が、SEOにおける、レスポンシブウェブデザインの主なメリットになります。

1.ページの更新を効率よく行える

レスポンシブウェブデザインではページの更新を行うときに、HTMLファイルを一つ更新するだけでいいので、更新作業にかかる時間が少ないです。また、従来の手法だと、ページの更新をし忘れるといったミスも起こりましたが、レスポンシブウェブデザインではそのようなミスも起こりづらくなります。

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

レスポンシブウェブデザインの場合、URLが一つであることから、Googlebotが巡回(クロール)しやすいです。そのため、更新作業などを行った場合にも、Googleに最新のページの状態を反映させやすくなります。

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

レスポンシブウェブデザインで作られたサイトは、デバイスを跨いで一つのURLで情報を共有することができるので、ユーザーエクスペリエンスが高くなり、ユーザーから評価されやすくなります。
>このようなSEO的メリットがあることから、レスポンシブウェブデザインを採用することによって、サイトのアクセスアップなどを期待することが出来ます。ただし、レスポンシブウェブデザインにもデメリットがないわけではないので、採用するときは注意が必要です。

例えば、レスポンシブウェブデザインの構築には比較的高いコストがかかりますし、デザインの自由度も従来の手法に比べて低くなってしまいます。
レスポンシブウェブデザインも最善の手法というわけではありませんから、サイト構築に採用する際には、そのメリットとデメリットをよく踏まえておくようにしましょう。

他のデザイン手法と組み合わせることが大事

いかがでしたか？この記事では、”レスポンシブウェブデザインのSEO的メリットについて”説明しました。レスポンシブウェブデザインは、マルチデバイス対応ページを構築する手法としてメリットも多く、SEO的にも有効です。ただし、レスポンシブウェブデザインを採用することが必ずしもメリットになるわけではないので、状況に合わせて他のデザイン手法と使い分けていくことが必要です。

スマートフォン対応サイトの需要は年々高まっていますから、レスポンシブウェブデザインを上手に利用して、ランキング上位に表示されるページを目指していきましょう。

SEO Pack 費用・料金とご契約期間

必要な対策を必要な分だけ。SEO Packは余計なメニューが無いから高品質なSEO対策を低価格でご提供しています。