意味解説
1.端末ごとの見え方を設計するレイアウトの考え方
専門家向け解説
閲覧端末の画面幅に応じて、レイアウト・文字サイズ・要素の並びが柔軟に変化するよう設計する考え方。PC・タブレット・スマートフォンそれぞれで最適な見え方を、別々のサイトを作らず一つの設計で実現する。要点は、各画面幅での見え方をデザイン段階で具体的に検討すること。PC版だけ作って「スマホは縮むだけ」と考えると、スマホで操作しにくい・読みにくい状態になる。モバイルファーストで設計するのが定石で、最小画面のスタイルをベースにより広い画面向けのレイアウトに修正していく。落とし穴は、PC向けデザインを「スマホは縮むだけ」と考えてそのままモバイルに縮小しようとして構造が破綻し、スマホで操作しにくい・読みにくい状態になるケース。画像の読み込みサイズ最適化を怠ることによる表示速度の低下にも気をつける必要がある。
クライアント向け説明
スマートフォン・タブレット・パソコンなど、見る画面の大きさに合わせてレイアウトが自動で最適化される作り方です。端末ごとに別のサイトを作らずに対応できます。特にスマホでの見やすさ・操作しやすさを最初から意識して設計することが重要です。
2.画面幅で表示を切り替える実装上の仕組み
専門家向け解説
画面幅などの条件に応じてCSSの適用を切り替える仕組みであるメディアクエリ（@media）やブレークポイントを使うことによって、可変レイアウトを実装面で実現する技術。区切りとなる画面幅の設定や、画像の出し分け、表示要素の制御などを担う。現在はコンテナクエリ（container query）も登場し、画面幅だけでなく親要素の幅を基準にした設計も可能になった。 要点は、ブレークポイントを特定機種の幅に固定せず、コンテンツが崩れる地点で設定する考え方が有効なこと。落とし穴は、表示だけ整えて、各端末での読み込み速度や操作領域（タップしやすいボタンサイズ等）への配慮を欠くこと。見た目の可変だけでなく、各端末での実際の使用に耐える実装が伴って初めて機能する。
クライアント向け説明
画面の幅に応じて表示の仕方を自動で切り替える技術的な仕組みです。どの端末でもレイアウトが崩れず表示されます。見た目を整えるだけでなく、スマホでの読み込みの速さやボタンの押しやすさまで配慮することで、快適に使えるサイトになります。
監修
yoneco
庄司美雪