レスポンシブデザインとは
レスポンシブデザイン(Responsive Web Design:RWD)とは、1つのHTMLで、PC・タブレット・スマートフォンなどデバイスの画面サイズに応じて、レイアウトや表示を自動的に最適化するWebデザイン手法です。
レスポンシブデザインが標準となった背景
以前はPC用とスマホ用のサイトを別々に作る「別URL方式(m.example.comなど)」が一般的でした。しかしコスト・管理の複雑さ・SEOの重複問題などの欠点から、Googleが2015年にレスポンシブデザインを推奨方式と明言し、現在の標準となりました。
レスポンシブデザインの実装
CSSのメディアクエリ(@media)で画面幅に応じたスタイルを定義します。「モバイルファースト」の考え方で、最小画面サイズ向けのCSSを基本とし、画面が大きくなるにつれてスタイルを追加するアプローチが現在の主流です。
SEOとの関係
Googleのモバイルファーストインデックスはレスポンシブデザインを前提としています。別URL方式はcanonicタグ設定が複雑でSEO管理が難しいため、新規サイト構築では必ずレスポンシブデザインを採用すべきです。