レスポンシブデザインとは、パソコンだけでなく、タブレットやスマートフォンなどでサイトを閲覧しても問題なく閲覧が可能なサイトデザインのことです。
この記事は、Google検索セントラルの「レスポンシブ ウェブ デザイン」を参考に作成しています。
レスポンシブデザインの定義
Googleは、レスポンシブデザインについて次のように言及しています。
レスポンシブ ウェブ デザインは、サーバーからどのデバイスに対しても常に同じ HTML コードを配信しつつ、CSS を使用して各デバイスでのページのレンダリングを変更する設定方法です。
「レスポンシブ ウェブ デザイン」- Google検索セントラル
パソコン以外のデバイスからサイトを閲覧しても、見やすいデザインのサイトで、かつ、URLがどのデバイスから確認しても同じサイトのことをレスポンシブデザインが実装されたサイトと定義できます。
レスポンシブデザインの特徴
レスポンシブデザインの特徴を紹介します。
同じURL
レスポンシブデザインは、コードの記述よってさまざまなデザインを実現するため、どのデバイスから閲覧しても同じURLになるという特徴を持ちます。
複数のデバイスの情報を同じページで管理
同じページを複数のデバイスに対応させる構造上、一つのページで複数デバイスのデザインを管理可能です。
レスポンシブデザインとSEO
Googleは2016年頃より、スマートフォンのデザインを優先することを明記しています。
Google では 2016 年後半から、ランキング、構造化データの解析、スニペットの生成についてサイトのコンテンツのモバイル バージョンを優先的に使用するというテストを開始しています。
サイトをモバイル フレンドリーにする - Google検索セントラル
また、「ようこそ！｜Google検索セントラル」には以下のように言及されています。
米国では、スマートフォンのユーザーの 94% が地元の情報をスマートフォンで検索しています。 モバイル検索の 77% は自宅または職場で行われています。パソコンがある可能性が高いこれらの場所でモバイル検索が行われているのは、興味深いことです。
ようこそ！｜Google検索セントラル
このような情報があることから、サイトを制作する際はレスポンシブデザインを意識しましょう。
SEOを意識したレスポンシブデザインの作り方は、以下のキーワードで検索して表示されるGoogle検索セントラルを参考に行いましょう。
・Google検索セントラル レスポンシブデザイン
・Google検索セントラル モバイルフレンドリー
SEO対策の概要については下記の記事で紹介しています。
WordPressとレスポンシブデザイン
WordPressは、初めからレスポンシブデザインが実装されており、タブレットやスマートフォンなどデバイス（画面サイズ）に応じてデザインが自動的に切り替わるようになっています。
WordPressのレスポンシブデザインは以下の方法で確認します。
1. https://[ドメイン名]/wp-admin/ よりWordPressへログイン
2. 上部に表示される、「カスタマイズ」ボタンをクリック
3. 左下のパソコン、タブレット、スマートフォンのアイコンをクリックし、デザインを確認する
