Webデザイン

【2025年版】リキッドデザインとレスポンシブデザインの違いとは？CSS実装例と選び方を図解で解説

  /
リキッドデザインとレスポンシブデザインの違いとは

Webサイトを複数のデバイス(PC、タブレット、スマホ)に対応させる手法として、リキッドデザイン(Liquid Design) と レスポンシブデザイン(Responsive Design) があります。

「どちらも画面幅に応じてレイアウトが変わるなら同じでは?」と思われがちですが、実は 仕組みと適用シーンが大きく異なります。

本記事では、2025年最新のCSS技術(Container Queries、clamp()関数)を含めて、リキッドデザインとレスポンシブデザインの違いを初心者向けに解説します。

リキッドデザインとは?

リキッドデザイン(Liquid Design / Liquid Layout) とは、Webページの幅を パーセント(%) で指定することで、ブラウザの幅に応じて 連続的に レイアウトが伸縮するデザイン手法です。

リキッドデザインの仕組み

リキッドデザインでは、コンテナや要素の幅を px(ピクセル)ではなく %(パーセント)で指定します。

/* リキッドデザインの基本例 */
.container {
  width: 90%; /* ブラウザ幅の90% */
  max-width: 1200px; /* 最大幅を制限 */
  margin: 0 auto;
}

.sidebar {
  width: 30%; /* コンテナの30% */
  float: left;
}

.main-content {
  width: 70%; /* コンテナの70% */
  float: left;
}

ブラウザの幅が1600pxなら、コンテナは1200px(max-widthで制限)、サイドバーは360px(30%)、メインコンテンツは840px(70%)になります。

ブラウザの幅が800pxなら、コンテナは720px(90%)、サイドバーは216px(30%)、メインコンテンツは504px(70%)になります。

ポイント: ブラウザの幅が変わるたびに、レイアウトが 連続的に 伸縮します。

図解1: リキッドデザインの仕組み(画面幅に応じて連続的に伸縮)

ブラウザ幅: 1600px
コンテナ: 1200px(max-width制限)
サイドバー
width: 30%
実際の幅: 360px
メインコンテンツ
width: 70%
実際の幅: 840px
ブラウザ幅: 800px
コンテナ: 720px(90%)
サイドバー
width: 30%
実際の幅: 216px
メインコンテンツ
width: 70%
実際の幅: 504px
✓ ポイント
画面幅が変わると、サイドバーとメインコンテンツの比率(30% : 70%)を保ったまま、連続的に伸縮します。ブレークポイントはありません。

レスポンシブデザインとは?

レスポンシブデザイン(Responsive Design / Responsive Web Design) とは、メディアクエリ(Media Queries) を使って、デバイスの画面幅に応じて レイアウトを切り替える デザイン手法です。

レスポンシブデザインの仕組み

レスポンシブデザインでは、ブレークポイント(Breakpoint) と呼ばれる特定の画面幅で、CSSを切り替えます。

/* レスポンシブデザインの基本例 */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* PC用(デフォルト) */
.sidebar {
  width: 300px;
  float: left;
}

.main-content {
  width: 900px;
  float: left;
}

/* タブレット用(768px以下) */
@media (max-width: 768px) {
  .sidebar {
    width: 100%;
    float: none;
  }

  .main-content {
    width: 100%;
    float: none;
  }
}

/* スマホ用(480px以下) */
@media (max-width: 480px) {
  .container {
    padding: 10px;
  }
}

ポイント: 画面幅が768px以下になると、サイドバーとメインコンテンツが 縦並び に切り替わります。

図解2: レスポンシブデザインの仕組み(ブレークポイントで構造を変更)

PC画面(769px以上)
レイアウト: 2カラム(横並び)
サイドバー
width: 300px(固定)
float: left;
メインコンテンツ
width: calc(100% – 316px)
float: left;
↓ ブレークポイント(768px以下)
タブレット・スマホ画面(768px以下)
レイアウト: 1カラム(縦並び)
サイドバー
width: 100%
float: none;
メインコンテンツ
width: 100%
float: none;
✓ ポイント
768px以下になると、横並び → 縦並び にレイアウトが切り替わります。メディアクエリ(@media)で構造を変更します。

リキッドデザインとレスポンシブデザインの違い

両者の違いを表にまとめます。

項目 リキッドデザイン レスポンシブデザイン
レイアウトの変化 連続的に伸縮(%指定) ブレークポイントで切り替え(メディアクエリ)
実装方法 width: % で指定 @media でCSSを切り替え
画面幅への追従 すべての幅で比率を保つ 特定の幅で構造を変更
デザインの自由度 低い(比率固定) 高い(デバイスごとに最適化)
コーディング工数 低い(CSSがシンプル) 高い(複数のCSSが必要)
スマホ対応 不向き(小画面で崩れやすい) 向いている(縦並びに変更可能)
適用サイト例 管理画面、ダッシュボード コーポレートサイト、ECサイト、ブログ

重要な違い:

  • リキッドデザイン = 画面幅に応じて 伸縮 する(比率は固定)
  • レスポンシブデザイン = 画面幅に応じて 構造を変更 する(横並び→縦並びなど)

リキッドデザインのメリット・デメリット

メリット

  1. 実装がシンプル
    width: % で指定するだけなので、CSSの記述量が少ない。
  2. すべての画面幅に対応
    1024px、1366px、1920pxなど、あらゆる画面幅で比率を保ったまま表示される。
  3. ブラウザの拡大縮小に強い
    ユーザーがブラウザの幅を変えても、レイアウトが崩れにくい。

デメリット

  1. スマホ対応が難しい
    画面幅が320pxの場合、30%のサイドバーは96pxになり、非常に狭くて読みにくい。
  2. デザインの自由度が低い
    比率が固定されるため、デバイスごとに最適なレイアウトを作りにくい。
  3. 画像やテキストの調整が必要
    画面幅が広すぎると画像が引き伸ばされ、狭すぎるとテキストが詰まる。

レスポンシブデザインのメリット・デメリット

メリット

  1. デバイスごとに最適なレイアウト
    PC、タブレット、スマホで 異なる構造 を適用できる(横並び→縦並びなど)。
  2. Googleが推奨
    Googleは「レスポンシブ ウェブ デザイン」を推奨しており、SEO的に有利。
  3. ユーザビリティが高い
    スマホでは縦並び、PCでは横並びなど、デバイスに最適な表示が可能。

デメリット

  1. コーディング工数が高い
    PC用、タブレット用、スマホ用と、複数のCSSを記述する必要がある。
  2. メンテナンスが大変
    ブレークポイントごとにCSSを管理する必要があり、修正時に漏れが発生しやすい。
  3. テスト工数が増える
    複数のデバイス(iPhone、Android、iPad、PC)でレイアウト確認が必要。

CSS実装例(コード付き)

1. リキッドデザインの基本実装

/* リキッドデザインの基本 */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.column {
  width: 48%;
  margin-right: 2%;
  float: left;
}

.column:last-child {
  margin-right: 0;
}

説明: コンテナの幅を90%に指定し、最大幅を1200pxに制限。カラムは48%ずつ、間に2%のマージンを設定。

2. レスポンシブデザインの基本実装

/* レスポンシブデザインの基本 */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.column {
  width: 48%;
  margin-right: 2%;
  float: left;
}

@media (max-width: 768px) {
  .column {
    width: 100%;
    margin-right: 0;
    float: none;
  }
}

説明: 768px以下でカラムを100%幅にし、縦並びに変更。

3. Flexboxを使ったレスポンシブデザイン

/* Flexboxを使ったレスポンシブデザイン */
.container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.column {
  flex: 1 1 calc(50% - 20px);
}

@media (max-width: 768px) {
  .column {
    flex: 1 1 100%;
  }
}

説明: Flexboxで2カラムレイアウトを作成。768px以下で1カラムに変更。

4. CSS Gridを使ったレスポンシブデザイン

/* CSS Gridを使ったレスポンシブデザイン */
.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
}

.column {
  background: #f5f5f5;
  padding: 20px;
}

説明: auto-fit と minmax() で、画面幅に応じてカラム数が自動調整される。

5. Container Queries(2025年最新)

/* Container Queries(2023年正式採用) */
.container {
  container-type: inline-size;
}

.card {
  padding: 10px;
}

@container (min-width: 400px) {
  .card {
    display: flex;
    gap: 20px;
  }
}

説明: 親要素の幅 に応じてスタイルを変更。メディアクエリはビューポート幅に依存するが、Container Queriesはコンテナ幅に依存。

6. clamp()関数(フルイド・タイポグラフィ)

/* clamp()関数でフォントサイズを可変に */
.title {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

説明:

  • 最小: 1.5rem(24px)
  • 理想: 5vw(画面幅の5%)
  • 最大: 3rem(48px)

画面幅に応じて、フォントサイズが 連続的に 変化。

7. Tailwind CSSの例

<!-- Tailwind CSSでレスポンシブデザイン -->
<div class="w-full md:w-1/2 lg:w-1/3">
  <p class="text-base md:text-lg lg:text-xl">レスポンシブテキスト</p>
</div>

説明: Tailwind CSSのユーティリティクラスで、ブレークポイントごとに幅とフォントサイズを指定。

8. Bootstrap 5.3の例

<!-- Bootstrap 5.3でレスポンシブグリッド -->
<div class="container">
  <div class="row">
    <div class="col-12 col-md-6 col-lg-4">カラム1</div>
    <div class="col-12 col-md-6 col-lg-4">カラム2</div>
    <div class="col-12 col-md-6 col-lg-4">カラム3</div>
  </div>
</div>

説明: スマホ(col-12)、タブレット(col-md-6)、PC(col-lg-4)で異なるカラム数を指定。

どちらを選ぶべきか?使い分け基準

リキッドデザインが向いているサイト

  • 管理画面・ダッシュボード: 複数のウィンドウで並べて作業する場合
  • データテーブル: 画面幅に応じてテーブル幅を調整したい場合
  • PC専用サイト: スマホ対応が不要な場合

レスポンシブデザインが向いているサイト

  • コーポレートサイト: スマホ、タブレット、PC対応が必須
  • ECサイト: デバイスごとに最適な商品表示が必要
  • ブログ・メディアサイト: スマホからのアクセスが多い
  • ランディングページ: モバイルファーストが重要

判断基準(チェックリスト)

質問 Yes → レスポンシブ No → リキッド
スマホからのアクセスが30%以上ある? ✅ –
デバイスごとに異なるレイアウトが必要? ✅ –
画像・動画コンテンツが多い? ✅ –
SEO対策が重要? ✅ –
PC専用の管理画面? – ✅
データテーブルが中心? – ✅

迷ったらレスポンシブデザイン を選ぶのが2025年の標準です。

WordPressテーマの選び方

レスポンシブ対応テーマ(推奨)

  1. JIN:R
    • レスポンシブ対応(モバイルファースト設計)
    • ブロックエディタ完全対応
  2. SWELL
    • レスポンシブデザイン標準装備
    • 高速表示(PageSpeed Insights 90点以上)
  3. Cocoon(無料)
    • 完全レスポンシブ対応
    • 初心者向け

リキッドレイアウトを使いたい場合

WordPressのカスタムCSSで実装可能:

/* 外観 → カスタマイズ → 追加CSS */
.site-content {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

.entry-content {
  width: 70%;
  float: left;
}

.sidebar {
  width: 30%;
  float: right;
}

@media (max-width: 768px) {
  .entry-content,
  .sidebar {
    width: 100%;
    float: none;
  }
}

注意: 完全なリキッドデザインだとスマホで崩れるため、レスポンシブと組み合わせるのが一般的。

よくある失敗5つ + 解決策

失敗1: リキッドデザインでスマホ対応を忘れる

症状: PC画面では問題ないが、スマホで文字が小さすぎて読めない。

解決策: メディアクエリを追加して、768px以下で width: 100% に切り替える。

@media (max-width: 768px) {
  .container {
    width: 100%;
    padding: 10px;
  }
}

失敗2: ブレークポイントが多すぎる

症状: 320px、375px、414px、768px、1024px、1366px、1920px…とブレークポイントが10個以上あり、メンテナンスが困難。

解決策: ブレークポイントを3-4個に絞る。

/* 推奨ブレークポイント */
@media (max-width: 480px) { /* スマホ */ }
@media (max-width: 768px) { /* タブレット */ }
@media (max-width: 1024px) { /* ノートPC */ }
/* デフォルト: デスクトップ */

失敗3: 画像が固定幅のままで崩れる

症状: リキッドデザインで画像が width: 500px; 固定のため、コンテナからはみ出る。

解決策: 画像を max-width: 100%; に設定。

img {
  max-width: 100%;
  height: auto;
}

失敗4: フォントサイズが固定で読みにくい

症状: PC画面では font-size: 16px; が適切だが、スマホでは小さすぎる。

解決策: clamp() 関数で可変フォントサイズを設定。

body {
  font-size: clamp(14px, 2.5vw, 16px);
}

失敗5: テストが不十分

症状: iPhone 13 Proでしかテストせず、Android(Galaxy S23)で崩れていた。

解決策: Chrome DevToolsのデバイスモードで複数デバイスをテスト。

# Chrome DevToolsを開く
Cmd + Option + I (Mac)
Ctrl + Shift + I (Windows)

# デバイスツールバーを開く
Cmd + Shift + M (Mac)
Ctrl + Shift + M (Windows)

テストすべきデバイス:

  • iPhone 13 Pro (390×844)
  • iPhone SE (375×667)
  • Galaxy S23 (360×800)
  • iPad (768×1024)
  • Desktop (1920×1080)

よくある質問(Q&A)

Q1. リキッドデザインとレスポンシブデザインは併用できる?

A. はい、併用が一般的です。

ベースをリキッドデザイン(width: %)にして、特定のブレークポイントでメディアクエリを使ってレイアウトを変更する方法が主流です。

/* 併用例 */
.container {
  width: 90%; /* リキッド */
  max-width: 1200px;
}

@media (max-width: 768px) { /* レスポンシブ */
  .container {
    width: 100%;
  }
}

Q2. Flexboxとレスポンシブデザインの違いは?

A. Flexboxは実装技術、レスポンシブデザインは設計手法です。

  • Flexbox: CSSのレイアウトモジュール(display: flex;)
  • レスポンシブデザイン: デバイスごとに最適なレイアウトを提供する設計思想

Flexboxを使ってレスポンシブデザインを実装するのが一般的です。

Q3. Container Queriesとメディアクエリの違いは?

A. 基準が「コンテナの幅」か「ビューポートの幅」かです。

項目 メディアクエリ Container Queries
基準 ビューポート幅(画面全体) コンテナ幅(親要素)
用途 ページ全体のレイアウト変更 コンポーネント単位の変更
ブラウザ対応 すべてのブラウザ Chrome 105+, Safari 16+

Container Queriesの例:

.sidebar {
  container-type: inline-size;
}

.widget {
  padding: 10px;
}

@container (min-width: 300px) {
  .widget {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

サイドバーの幅が300px以上なら、ウィジェットを2カラムに変更(ビューポート幅は無関係)。

Q4. 2025年現在、リキッドデザインは使われている?

A. 管理画面やダッシュボードで使われています。

一般のWebサイトではレスポンシブデザインが主流ですが、以下の用途でリキッドデザインが使われています:

  • 管理画面: WordPress管理画面、Google Analytics
  • ダッシュボード: Stripe、GitHub
  • データテーブル: スプレッドシート、CRM

スマホ対応が不要で、PC画面での操作性を重視する場合に有効です。

Q5. モバイルファーストとは?

A. スマホ用CSSを先に書き、メディアクエリでPC用を追加する設計手法です。

/* モバイルファースト */
.container {
  width: 100%; /* スマホ(デフォルト) */
}

@media (min-width: 768px) { /* タブレット */
  .container {
    width: 750px;
  }
}

@media (min-width: 1200px) { /* PC */
  .container {
    width: 1140px;
  }
}

メリット:

  • スマホからのアクセスが多い現代に最適
  • CSSの記述量が減る
  • Googleが推奨

まとめ

リキッドデザイン と レスポンシブデザイン の違いをまとめます。

リキッドデザイン

  • 画面幅に応じて 連続的に伸縮(width: %)
  • 実装がシンプル
  • スマホ対応が難しい
  • 管理画面・ダッシュボード に向いている

レスポンシブデザイン

  • ブレークポイントで レイアウトを切り替え(メディアクエリ)
  • デバイスごとに最適な表示
  • Googleが推奨(SEO有利)
  • コーポレートサイト・ECサイト・ブログ に向いている

2025年の選択基準

サイトタイプ 推奨手法 理由
コーポレートサイト レスポンシブ スマホ対応必須
ECサイト レスポンシブ デバイス最適化が重要
ブログ・メディア レスポンシブ モバイルファースト
管理画面 リキッド PC専用、シンプル実装
ダッシュボード リキッド データテーブル中心

迷ったらレスポンシブデザインを選ぶのが2025年の標準です。

最新技術を活用

  • Container Queries: コンポーネント単位のレスポンシブ対応(Chrome 105+, Safari 16+)
  • clamp()関数: フルイド・タイポグラフィ(可変フォントサイズ)
  • CSS Grid: 複雑なレイアウトを少ないコードで実装
  • Tailwind CSS / Bootstrap 5.3: レスポンシブデザインを高速実装

本記事が、リキッドデザインとレスポンシブデザインの違いを理解し、最適な手法を選択する助けになれば幸いです。

Container Queries CSS実装 Webデザイン モバイルファースト リキッドデザイン レスポンシブWebデザイン レスポンシブデザイン
RELATED POST