RWDとは何か
RWD（Responsive Web Design）は、ウェブデザインの概念で、同じページを異なるデバイス（例：デスクトップ、ノートパソコン、タブレット、スマートフォンなど）で表示し、CSSの設計によりページ全体のレイアウトを微調整し、ユーザーに同じコンテンツを提供することができます。
RWDウェブサイトの作成方法
RWDウェブサイトを作成する際には、”一般的なサイズ”と”@mediaの記述ルール”の2つの重要な要素を覚えておく必要があります。残りはエンジニアのCSS記述スキルに依存します。以下に、RWDウェブサイトの作成方法について説明します：
（RWDウェブサイトの例：左図はデスクトップ版のページ、右図はモバイル版の画面）
RWDウェブサイトの一般的なサイズ
RWDウェブサイトを設計する際、私たちは異なるデバイスのスクリーンサイズを考慮する必要があります。一般的に、以下のサイズに基づいて設計します：
◆1200px以上の大型スクリーン（例：デスクトップ）
◆992pxから1199pxの中型スクリーン（例：ノートパソコン）
◆768pxから991pxの小型スクリーン（例：タブレット）
◆767px以下の超小型スクリーン（例：スマートフォン）
上記の4つのサイズは現在のデバイスサイズをほぼカバーしています。もちろん、皆さんは自分の好みに応じて、異なるデバイスに対して異なるRWDウェブサイトのサイズ変更を設定することもできます。
meta viewportの設定
meta viewportは、<head>セクションに記述されるHTMLタグで、ウェブページが各種デバイス上でのズーム動作とウィンドウサイズを制御することができます。meta viewportを設定するには、HTMLの<head>部分に以下のコードを追加するだけです：
<meta name="viewport" content="width=device-width, initial-scale=1">このコードは、ウェブページの幅がデバイスのスクリーン幅と等しく、初期のズーム比率が1であることをブラウザに伝えます。この設定により、ウェブページは各種デバイス上で適応的に表示され、後述のmedia宣言に対応することができます。
mediaの記述例
CSSには、「ページの幅がxxxのときにこのCSSを使用する」という宣言があります。具体的な例を挙げると、「ページの幅が1000pxのときに画像の縦横比は1:1、幅が500pxのときに画像の縦横比は10:1になる」などです。
この宣言は”media query”とも呼ばれ、この宣言を利用してRWDウェブサイトを作成することができます。具体的な記述方法は以下の通りです：
@media screen and (max-width: 1200px) {
body {
background-color: yellow; /* 螢幕寬度小於或等於1200px時的背景顏色 */
}
}
@media screen and (max-width: 992px) {
body {
background-color: red; /* 螢幕寬度小於或等於992px時的背景顏色 */
}
}または
@media screen and (min-width: 1200px) {
body {
background-color: yellow; /* 螢幕寬度大於或等於1200px時的背景顏色 */
}
}
@media screen and (min-width: 992px) {
body {
background-color: red; /* 螢幕寬度大於或等於992px時的背景顏色 */
}
}これにより、スクリーンの幅が変わると、ページの背景色もそれに応じて変わります。
RWDウェブサイトはSEOに影響を与えるか
モバイル版のコンテンツとデスクトップ版のコンテンツが一致している
Googleのモバイル版のベストプラクティスによると、モバイル版のコンテンツはデスクトップ版のコンテンツと一致しているべきです。特に、現在のスマートフォン普及の時代では、Googleは徐々にモバイル検索を主要なランキング基準の一つとしています。そのため、RWDウェブサイトのCSSスタイルを調整する特性を利用して、モバイル版のコンテンツとデスクトップ版のコンテンツが一致していることを確認し、SEOのランキングに影響を与える可能性のある一貫性のないコンテンツを避けることができます。
ユーザーフレンドリー
あなたは古いウェブサイトに行ったことがあるかもしれません。スマートフォンでページを見ると、デスクトップのスタイルが表示されますが、サイズが合わないために画像が小さすぎたり、コンテンツがスクリーンの外に出てしまい、手でスクロールしなければならない状況が発生します。これらのユーザーフレンドリーでないデザインは、SEOの成果を間接的に減少させます。
RWDウェブサイトは、ユーザーの異なるデバイスサイズに応じて適切な画面を切り替えることができます。これにより、上記のようなネガティブな状況を避け、ユーザーエクスペリエンスを向上させるとともに、画面設計が不適切であるためにGoogleがページのインデックスを拒否することを避けることができます。
ロード速度が速い
RWDウェブサイトは、非RWDウェブサイトよりもロード速度が速いことが一般的です。これは、RWDウェブサイトは一度だけロードする必要があるのに対し、非RWDウェブサイトは複数回ロードする必要があるからです。高速なロード速度は、ユーザーエクスペリエンスを向上させ、Google SEOランキングの重要な要素でもあります。
URLが一意
RWDウェブサイトのもう一つの利点は、そのURLが一意であることです。以前に述べたように、URLが少しでも異なると、Googleはそれを異なるページと判断します。一部のウェブサイトやアプリの設計要件に対応するために、デスクトップとモバイルのURLを異なるものに設定することがあります。例えば、デスクトップ版はwww.example.com、モバイル版はm.example.com（淘宝、momoなどがこのような設計方法を採用しています）。このような設計方法には間違いはありませんし、canonical設定を利用して解決することもできます。しかし、システムのメンテナンスやGoogleのインデックスなどの観点から考えると、RWDの設計方法はSEOにとってより良いと言えます。
拡張読み：Canonicalとは何か？標準URLを利用して重複ページを解決する
まとめると、RWDウェブサイトはユーザーにより良いブラウジング体験を提供し、GoogleやSEOの成果にとってもプラスになります。ウェブサイトを作成する際には、良い選択肢となります。ただし、読者の皆さんは注意してください。RWDウェブサイトを作成するだけでSEOが完全に成功するわけではありません。良好な成果を得るためには、さまざまなウェブサイトの最適化を行う必要があります。
これだけ読んでいただいたので、RWDレスポンシブウェブデザインとSEOの関連性についてある程度理解していただけたと思います。私の記事が気に入った方や、今後SEOに関する最新情報を知りたい方は、私のウェブサイトをフォローしてください。私は皆さんにさまざまな知識を共有するために努力しています。
Last Updated on 2月 20, 2024 by 己見室
