先日、MetaLifeでレスポンシブ（responsive）について質問がありましたが、明確な解答ができませんでした。
私自身も理解していないと感じたので、レスポンシブについて調べました。
レスポンシブとは
レスポンシブ デザイン: ユーザーのデバイスの種類（パソコン、タブレット、モバイル、非視覚系ブラウザなど）に関係なく、同じ URLで同じHTMLコードを配信しつつ、画面サイズに応じてコンテンツの表示方法を変更します。Google では、実装と維持が最も簡単なデザイン パターンとしてレスポンシブ ウェブ デザインをおすすめしています。
モバイルファースト インデックスに関するおすすめの方法 | Google 検索セントラル | ドキュメント | Google for Developers
同じHTMLコードが異なるデバイスに応じて適切に表示されるよう調整するということです。
ユーザーは、デスクトップ、ラップトップ、タブレット、スマートフォンなど、さまざまなディバイスからWebサイトにアクセスします。
また、Google Chrome、Firefox、Safari、Edgeなど、さまざまなブラウザーを使用します。
どのデバイスやブラウザーを使用していても、快適にWebページを閲覧できるようにすることが重要です。
ポジティブなユーザーエクスペリエンス（UX）を提供することは、サイトの再訪問率を高める効果があります。
UXが優れているレスポンシブ対応のサイトは、Googleなどの検索エンジンからの評価も高くなる傾向があります。
レスポンシブにするには
WordPressを使ってサイトを制作する場合、次の方法でレスポンシブにすることができます。
レスポンシブ対応のテーマを選ぶ
基本的なレスポンシブデザインの機能が組み込まれているテーマを選びましょう。
レスポンシブ対応していないテーマがあります。注意してください。
プラグインを利用する
使用しているテーマがレスポンシブデザインではない場合、プラグインを利用してモバイルフレンドリーなサイトにするという選択肢もあります。
「wordpress レスポンシブ対応 プラグイン」で検索するとさまざまなプラグインが見つかります。
たとえばWPtouch Mobile Pluginは、モバイル訪問者向けのテーマを自動的に追加するプラグインです。
慎重にカスタマイズする
カスタムHTMLブロックの使用やテンプレートの編集などで独自のHTMLコードを記述する場合は、メディアクエリ、グリッド、フレックスボックス、相対単位などを使用して、レスポンシブデザインになるよう慎重にカスタマイズしましょう。
モバイルフレンドリーテスト
Googleのモバイルフレンドリーテストを利用すると、モバイルデバイスでのページの使いやすさをテストできます。
レスポンシブデザインについて学ぼう
Google検索セントラルのドキュメントにLearn Responsive Designへのリンクが貼られていました。
このコース内容の一部を要約します。
Introduction：歴史
Webデザインは、さまざまなデバイスや画面サイズに対応するため進化してきました。
当初は、640・800・1024ピクセルなどの特定の幅に合わせた固定幅デザイン（fixed-width design）が一般的でした。しかし、画面が広いと無駄なスペースが生じ、狭いと横スクロールが必要になる問題がありました。
そこで、固定幅に代わり、列幅をパーセンテージで指定するリキッドレイアウト（liquid layouts）が登場し、柔軟性が向上しました。しかし、画面が広いと引き伸ばされたように見え、狭いと潰れたように見える課題が残りました。
携帯電話の普及に伴い、デスクトップとモバイルの両方で見やすいデザインが求められるようになり、メディアクエリが導入されました。これは、特定の画面幅ごとにレイアウトを切り替える仕組みですが、すべてのユーザーに最適な表示を提供できるわけではありませんでした。
レスポンシブWebデザイン（responsive web design）という用語は、2010年にA List Apartの記事でEthan Marcotteによって造られました。現在では、ビューポートのサイズを超えた方法でレスポンシブなWebサイトを構築できます。メディア機能を使用すれば、ユーザーの設定に応じたカスタマイズが可能になり、コンテナクエリを使用すれば、コンポーネントは独自のレスポンシブ情報を持つことができます。さらに、picture要素を利用すれば、画面の比率に応じた適切な画像を選択することも可能です。
Media Queries：メディアクエリ
メディアクエリを利用すると、デバイスのフォームファクタに合わせてデザインを調整できます。
構文
メディアクエリの構文は、以下の通りです。
@media type and (feature)
指定したメディアタイプ（type）が一致し、メディア特性（feature）が真の場合にのみCSSが適用されます。タイプは省略可能で、省略するとすべてのメディアタイプが対象になります。
以下のように、link要素でもメディアクエリを使用できます。
<link rel="stylesheet" href="specific.css" media="type and (feature)">メディア特性（feature）
ビューポートのサイズに応じてスタイルを調整できます。
特定の幅以上で適用するスタイルや、特定の幅以下で適用するスタイルを設定でき、複数の条件を組み合わせることも可能です。
ビューポートの高さに基づくメディアクエリを使用すると、「スクロールせずに見える範囲」のインターフェイスを最適化できます。
@media (min-width: 400px) {
// 400ピクセルより広いビューポートのスタイル
}
@media (max-width: 400px) {
// 400ピクセルより狭いビューポートのスタイル
}
@media (min-width: 50em) and (max-width: 60em) {
// 50emより広く、60emより狭いビューポートのスタイル
}
@media (min-width: 50em) and (min-height: 60em) {
// 幅が50em以上、高さが60em以上のビューポートのスタイル
}ブレイクポイントの設定
メディアの特性が真になるポイントをブレイクポイントと呼びます。
デバイスサイズは技術のリリースサイクルごとに変化する可能性があるため、人気のデバイスサイズではなく、コンテンツに基づいてブレイクポイントを設定することを推奨します。
使用する単位
画像ベースのコンテンツの場合、ピクセルが最も適した単位です。
テキストベースのコンテンツの場合、テキストサイズに基づいた相対的な単位であるemやchなどがより適切です。
Typography：タイポグラフィ
快適に読むためには、テキストのサイズ、行の長さ、行間を考慮します。
テキストのサイズ
テキストのサイズは、小さな画面では小さく、大きな画面では大きくします。
メディアクエリを使用すると、画面サイズに合わせてfont-sizeプロパティを変更できます。
テキストのスケーリングにvw単位を使用すると、ブラウザーの幅に応じて自動的に拡大・縮小されます。clamp()関数を使ってテキストの最小値・推奨値・最大値を設定すると、適切なサイズを維持できます。
html {
font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);
}行間
行間（line height）の宣言には単位のない値を使用してください。
行の長さ
max-inline-sizeプロパティを使用して、テキストが過度に広がらないよう制御します。その際、remやchなどの相対単位を使用します。
Responsive images：レスポンシブ画像
デバイスに応じた最適な画像を表示します。
srcset属性
srcset属性を使用することで、ブラウザーはデバイスの特性や表示条件に応じて最適な画像を選択し、必要な画像のみをダウンロードすることができます。これには、ユーザーの帯域幅を節約するなどのメリットがあります。
srcset属性は、カンマ区切りの値のリストを受け取ります。各値は、「画像のURL」「空白」「画像の幅の内在的なピクセル数」で構成されます。画像の内在サイズは実際の寸法です。単位はpxではなくwを使用します。1wは1ピクセルです。
sizes属性
ブラウザーにさらなる情報を提供するためにsizes属性を使用します。さまざまな条件で表示する画像のサイズを示します。条件はメディアクエリで指定します。
sizes属性は、カンマ区切りの値のリストを受け取ります。各値は、「メディア条件」「空白」「表示幅」で構成されます。
WordPressの場合
WordPressでは、画像をアップロードするとさまざまなサイズの画像が自動的に生成されます。それらの画像は、rcset属性とsizes属性を使って、適切な画像が表示されるよう、活用されています。
例えば、この記事のアイキャッチ画像のHTMLは以下のように書かれています。
<img
width="1024"
height="682"
src="technology-device-gadget-5519649-1024x682.jpg"
class="attachment-large size-large wp-post-image"
alt="technology, device, gadget-5519649.jpg"
decoding="async"
loading="lazy"
itemprop="image"
srcset="technology-device-gadget-5519649-1024x682.jpg 1024w,
technology-device-gadget-5519649-300x200.jpg 300w,
technology-device-gadget-5519649-768x512.jpg 768w,
technology-device-gadget-5519649.jpg 1280w"
sizes="(max-width: 1024px) 100vw, 1024px"
>まとめ
レスポンシブデザインではないテーマがあるというのは盲点でした。気になる方は、Googleのモバイルフレンドリーテストを実施してみてください。ブレイクポイントは、人気のあるデバイスサイズではなく、コンテンツに基づいて決めるという考え方も参考になりました。web.devのLearn Responsive Designから学べることがたくさんあります。ぜひ目を通してみてください。
