レスポンシブデザインとは？Webデザイナーが知っておくべき仕組みと2026年の実務

2026/06/10Webデザインの基礎知識

「レスポンシブデザイン」という言葉は、Webデザインを学び始めると必ず出てきます。スクールのカリキュラムにも、求人票の必須スキルにも。ただ、「なんとなくわかるけど、実際の現場でどう使うかはよくわからない」という状態の人も多いです。

この記事では、レスポンシブデザインの基本的な仕組みから、2026年現在の実務での扱い方、Figmaを使ったデザインの実践、採用担当として見てきたポートフォリオ評価の実態まで、順番に整理します。

レスポンシブデザインとは——「1つのサイトで全画面サイズに対応する」仕組み

スマホ・タブレット・PCで表示が自動的に変わる

レスポンシブデザイン（Responsive Web Design）とは、一言で言うと「1つのHTMLファイルで、スマートフォン・タブレット・PCなど異なる画面サイズに自動で対応するWebデザインの手法」です。

画面幅に応じてレイアウトや文字サイズが変わり、ユーザーがどのデバイスからアクセスしても読みやすい状態を保てます。

レスポンシブ以前は、PC用サイトとスマホ用サイトを別々に作る「別URL方式（m.example.com 等）」が主流でした。この方式だと更新の手間が倍になり、SEO的にも不利。そこで登場したのがレスポンシブで、今では事実上の業界標準になっています。

なぜ今、レスポンシブが「当たり前」になったのか

総務省の調査によると、インターネットの利用端末はスマートフォンがPCを上回り、モバイルからのアクセスが主流になっています。Webサイトへの流入の過半数がスマートフォンからというケースは、今や珍しくありません。

さらに2024年、Googleはモバイルファーストインデックスへの完全移行を完了しました。これはGoogleがサイトの評価をPC版ではなくモバイル版を基準に行うことを意味します。スマホ対応していないサイトは検索順位で不利になるため、レスポンシブ対応はSEOの観点からも必須です。

技術的な仕組み——メディアクエリ・Flexbox・CSS Grid

メディアクエリの基本的な考え方

レスポンシブデザインの核心技術がメディアクエリです。CSSに「画面幅が○○px以下のときは、このスタイルを適用する」という条件を書くことで、デバイスに応じた表示を切り替えます。

/* 画面幅768px以下のとき（タブレット・スマホ）に適用 */
@media screen and (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

この「切り替えが起きる幅の境界線」をブレークポイントと呼びます。どこで切り替えるかは、デザインの内容とターゲットユーザーのデバイスによって決めます（詳しくは後述）。

FlexboxとCSS Gridがレスポンシブを変えた

かつてのレスポンシブ実装はfloatプロパティを駆使する複雑なものでしたが、FlexboxとCSS Gridの普及で実装が大幅に楽になりました。

Flexbox は1次元（横または縦一方向）のレイアウトが得意で、ナビゲーションメニューやカード一覧など「横並びにして画面幅が狭くなったら縦積み」という処理に向いています。

CSS Grid は2次元（縦横両方向）のレイアウトが得意で、ページ全体の大枠やトップページのグリッドレイアウトなど、複雑なレイアウトをすっきり書けます。どちらもIE対応の心配がほぼなくなった現在（IEのサポートは2022年に終了）、実務での採用率が高まっています。

2026年から広まりつつあるContainer Queries

近年注目されているのが Container Queries（コンテナクエリ）です。

従来のメディアクエリは「画面幅（ビューポート）」を基準にCSSを切り替えていました。Container Queriesは「親要素のサイズ」を基準にスタイルを切り替えられる新しい仕様で、コンポーネント単位でのレスポンシブ対応が可能になります。

主要ブラウザのサポートが2023年以降に揃い、2026年現在は実務でも使われ始めています。Webデザイナー志望者として今すぐ深く理解する必要はありませんが、「メディアクエリの次の段階として、こういう技術が出てきている」という認識はあって損がないです。

📌 関連記事：Webデザイン学習の正しい順番 — HTML・CSS・JavaScriptをどの順番で学ぶべきか整理しています。レスポンシブCSSの学習タイミングも含めて確認できます。

モバイルファーストとブレークポイントの設計

モバイルファーストとは何か・なぜ重要か

「モバイルファースト」とは、Webサイトをデザイン・コーディングする際にスマートフォン向けのレイアウトを先に設計し、そこから画面が大きくなるに従って追加・拡張していく考え方です。

かつては「PCデザインを作って、スマホ向けに崩す（デスクトップファースト）」が主流でしたが、スマホでの閲覧が過半数を超えた現在は、モバイルファーストが推奨されています。

なぜモバイルファーストが良いか：

• スマートフォンの小さい画面で「何を優先して見せるか」の情報設計を先に考えることになり、コンテンツの優先順位が明確になる
• GoogleのSEO評価基準がモバイルファーストに完全移行済み（2024年）
• CSSの記述量が減りやすく、パフォーマンスが向上しやすい

ブレークポイントの選び方

ブレークポイントに「絶対の正解」はありませんが、よく使われる基準値があります。

ただし、現在のデバイスは画面サイズが多様化しているため、「特定の数値で区切る」より「コンテンツが崩れる手前で切り替える」という考え方で設計する方が実態に合っています。Figmaでデザインするときも、デバイス幅に縛られすぎず、実際にコンテンツが見やすい幅で区切ることがポイントです。

Figmaでレスポンシブデザインを実践する

Auto Layoutを使ったレスポンシブ対応

Figmaでレスポンシブデザインを実践するうえで最も重要な機能が Auto Layout です。

Auto Layoutを使うと、中のコンテンツ量に応じてコンポーネントの大きさが自動で変わる「伸縮するフレーム」を作れます。たとえばボタンのテキストが長くなっても幅が自動で広がる、カード一覧が横並びから縦並びに切り替わる……といった動きをデザインの段階から表現できます。

Auto Layoutで設定できる主な項目：

• Direction（方向）：横並び（Horizontal）か縦並び（Vertical）か
• Gap（間隔）：アイテム間のスペース
• Padding（余白）：コンテナ内の内側余白
• Fill Container / Hug Contents：幅の決め方（親に合わせるか、中身に合わせるか）

Auto Layoutを活用したコンポーネントは、そのままコーダーへの仕様伝達ツールにもなります。Dev Modeで実装時の余白・サイズが読み取りやすくなるため、デザインとコーディングの連携がスムーズになります。

フレームサイズ別にデザインを分けて作る

Auto Layoutだけでは表現しきれない、大きなレイアウトの変化（2カラムから1カラムへの切り替え等）は、画面サイズ別に複数のフレームを作って対応します。

一般的な進め方：

• Mobile（375px 幅が基準になることが多い）のフレームを先に作る（モバイルファースト）
• Tablet（768px）のフレームで中間レイアウトを設計する
• Desktop（1280px 等）のフレームでPC向けレイアウトを作る

3つのフレームを並べることで、クライアントやエンジニアへの仕様説明が視覚的に伝わりやすくなります。また、3サイズで確認することで、中間の画面幅でデザインが崩れる箇所を事前に発見しやすくなります。

採用担当として見てきた経験から言うと、「スマホ版のデザインもきちんと作ってある」ポートフォリオは、それだけで丁寧さと現場感が伝わります。

採用担当として見た「レスポンシブ」の評価基準

ポートフォリオはスマホでも確認している

採用担当として、応募者のポートフォリオサイトを確認するとき、スマートフォンでも開きます。これは意外と知られていないことですが、採用担当が電車の移動中にポートフォリオを見る、ということは普通にあります。

そのときにスマホで崩れているポートフォリオを見ると、「この人はレスポンシブ対応ができていない」という印象が残ります。制作物の内容がよくても、そこで評価が下がることがある。

一方で、スマホで見ても綺麗に表示されているポートフォリオは、それだけで「実務に近い意識がある」と伝わります。ポートフォリオサイト自体のレスポンシブ対応は、今後の案件・転職活動に向けて優先的に整えておくことをお勧めします。

📌 関連記事：Webデザイナーに必要なポートフォリオとは？採用担当が正直に語る — 採用担当として、ポートフォリオで実際に何を見ているかを整理しています。レスポンシブ対応の評価ポイントも含みます。

デザイン担当とコーディング担当で求められる深さが違う

「レスポンシブデザイン」と一口に言っても、デザイン担当とコーディング担当では求められる理解の深さが違います。

デザイン担当（Figmaでデザインを作る側）に必要なこと：

• モバイルファーストの発想でレイアウトを設計できる
• ブレークポイントを意識したFigmaフレームを複数サイズで作れる
• Auto Layoutを使って伸縮するコンポーネントを作れる
• スマホ・PCでコンテンツの表示順や優先度が変わることを考慮している

コーディング担当（HTMLとCSSを実装する側）に必要なこと：

• メディアクエリの書き方と適切なブレークポイントの設定
• FlexboxやCSS Gridを使ったレスポンシブレイアウトの実装
• 画像・フォントのレスポンシブ対応（max-width: 100%・相対単位の使い方）
• ブラウザ間の表示差異の確認（Chrome DevToolsのデバイスエミュレーター活用）

Webデザイナーとして転職・就職する場合、どちらの役割を求められているかによって、学ぶ深さを調整するのが現実的です。

よくある質問

まとめ

レスポンシブは「知識として知っている」と「実際に設計・実装できる」の間に差がある技術です。Figmaでモバイル版のフレームを作ってみる、自分のポートフォリオをスマホで開いて確認してみる——小さい一歩でいいので、実際に手を動かすところから始めてみてください。

関連記事

• Webデザイン学習の正しい順番（デザインとコーディング、どちらから？）
• Webデザイナーとは何をする仕事？仕事内容・ツール・1日の流れを現役10年が解説
• Webデザイナーに必要なポートフォリオとは？採用担当が正直に語る
• WebデザイナーにJavaScriptは必要？どこまで学べばいいか採用担当が正直に答える
• スキマ時間のWebデザイン勉強法