先日、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デザインは、さまざまなデバイスや画面サイズに対応できるよう、長年にわたって進化してきました。
当初は、固定幅デザイン（fixed-width design）が一般的でした。Webページは、640、800、1024 ピクセルなどの特定の幅に合わせてデザインされましたが、このアプローチには限界がありました。 画面が広いと無駄なスペースができてしまい、狭いとコンテンツが収まらず横スクロールが必要になってしまいます。
代替手段としてリキッドレイアウト（liquid layouts）が導入されました。固定幅の代わりに列幅のパーセンテージが使用され、レイアウトが柔軟になりました。 しかし、画面が広いと引き伸ばされたように見え、狭いと潰れたように見えてしまいます。
携帯電話の登場により、デスクトップとモバイルの両方の画面で見栄えのするデザインを作成するという課題に直面しました。
メディアクエリが導入され、複数の固定幅レイアウトを特定の幅で切り替えることが可能になりました。メディアクエリと固定幅レイアウトを組み合わせた手法をアダプティブデザイン（adaptive design）と呼ぶ人もいます。利用可能なレイアウトの数が限られているため、すべてのユーザーにとって完璧なデザインを提供することは難しい場合があります。固定幅レイアウトと比べれば問題は少ないですが、余分なスペースの問題はまだ残ります。
レスポンシブWebデザイン（responsive web design）という用語は、2010年にA List Apartの記事でEthan Marcotteによって造られました。Ethanは、リキッドグリッド、リキッドメディア、メディアクエリという３つの重要な基準を定義しました。 これにより、レスポンシブサイトのレイアウトと画像は、どのデバイスでも見栄えがよくなりました。しかし、問題が一つありました。レスポンシブデザインを使用している場合、モバイルブラウザーが広い画面向けに設計されたWebサイトを縮小しないよう指示する必要があります。
<meta name="viewport" content="width=device-width, initial-scale=1">このmeta要素を使用することで、ブラウザーに対して２つの指示を行います。width=device-widthは、Webサイトの幅をデバイスの幅と同じと見なすように指定します。initial-scale=1は、ブラウザーに対してスケーリングを行わないように指定します。
現在、ビューポートのサイズを超えた方法でレスポンシブなWebサイトを作成できるようになりました。メディア機能を使用すると、開発者はユーザーの設定にアクセスし、カスタマイズされたエクスペリエンスを提供できます。また、コンテナクエリを使用すると、コンポーネントは独自のレスポンシブ情報を持つことができます。picture要素を使用すると、デザイナーは画面の比率に基づいてアートディレクションを決定できます。
Media Queries：メディアクエリ
メディアクエリを利用すると、デバイスのフォームファクタに合わせてデザインを調整できます。
メディアクエリの構文は「@media type and (feature)」です。指定されたメディアのタイプ（type）が一致し、メディアの特性（feature）が真である場合にのみCSSが適用されます。タイプは省略可能です。省略した場合、すべてのメディアタイプが対象になります。
link要素でもメディアクエリを使用できます。
<link rel="stylesheet" href="specific.css" media="type and (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（viewport width）単位を使用すると、テキストはブラウザーの幅に比例して拡大または縮小されます。vw単位はcalc()関数を使用して、相対単位（em、rem、chなど）と組み合わせます。ただし、この方法では、狭い画面ではテキストが小さくなりすぎ、広い画面ではテキストが大きすぎる可能性があります。縮小や拡大を制御するために、clamp()関数を使用してテキストの最小値、推奨値、最大値の３つの値を設定します。
html {
font-size: clamp(1rem, 0.75rem + 1.5vw, 2rem);
}適切な行の長さ設定することで読みやすさを向上できます。max-inline-sizeプロパティを使用して、テキストが過度に広がらないよう制御します。その際、remやchなどの相対単位を使用します。
行間（line height）の宣言には単位のない値を使用してください。
Responsive images：レスポンシブ画像
srcset属性を使用することで、ブラウザーはデバイスの特性や表示条件に応じて最適な画像を選択し、必要な画像のみをダウンロードすることができます。これには、ユーザーの帯域幅を節約するなどのメリットがあります。
ブラウザーにさらなる情報を提供するためにsizes属性を使用します。さまざまな条件で表示する画像のサイズを示します。条件はメディアクエリで指定します。
WordPressでも使われています。このブログのアイキャッチ画像の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"
>srcset属性は、カンマ区切りの値のリストを受け取ります。各値は、「画像のURL」「空白」「画像の幅の内在的なピクセル数」で構成されます。画像の内在サイズは実際の寸法です。単位はpxではなくwを使用します。1wは1ピクセルです。WordPressで画像をアップロードすると、さまざまなサイズの画像が自動的に生成されます。それらの画像はこのように利用されていたんですね。
sizes属性は、カンマ区切りの値のリストを受け取ります。各値は、「メディア条件」「空白」「表示幅」で構成されます。この例では、ビューポートの幅が1024px以下の場合は、画像を全画面幅で表示します。それ以外の場合は、1024pxの幅で表示します。
まとめ
レスポンシブデザインではないテーマがあるというのは盲点でした。気になる方は、Googleのモバイルフレンドリーテストを実施してみてください。
独自のHTMLコードを追加したり、CSSを使って見た目を調整したりする際は、レスポンシブデザインを意識してカスタマイズしましょう。
ブレイクポイントは、人気のあるデバイスサイズではなく、コンテンツに基づいて決めるという考えも参考になりました。
web.devのLearn Responsive Designから学べることがたくさんあります。ぜひ目を通してみてください。
