レスポンシブデザインとリキッドデザインは、その違いがあいまいで今ひとつピンとこないという人も多いようです。そこで今回は、Web制作に欠かせないレスポンシブデザインとリキッドデザインの２つの違いと、それぞれのメリット・デメリットについて詳しくご紹介します。
基本のWeb手法
WEBデザインを行う上での基本的な手法は、レスポンシブデザイン以外にも存在しています。
フィックスデザイン
デザイン時に最適と思われるブラウザのサイズに合わせて、サイトの横幅を固定し、レイアウトやデザインが崩れるのを防ぎます。コンテンツの幅が変わらないので、ブラウザサイズが小さくなった場合には横スクロールを使用してページを閲覧します。
フルードデザイン
ブラウザサイズを変えるとそのサイズに合わせてサイトの幅全体が表示されるようになります。後述するリキッドデザインとも呼ばれるものです。
アダプティブデザイン
アダプティブデザインでは、条件に合わせて、あらかじめ用意したレイアウトなどを選ぶ考え方を取ります。レスポンシブと合わせて説明されることもあるため、依頼するときは方式の名前だけでなく、どの画面幅で何が変わるかを確認しましょう。
どの方式でも、読む人の使いやすさを考える必要があります。ここではレスポンシブを画面幅に応じて柔軟に調整する設計、アダプティブを条件に合うレイアウトを選ぶ考え方として区別します。画面サイズを考慮しなくてよい、という意味ではありません。
レスポンシブデザイン
CSSを使用してデバイスごとに対応するWebサイトを構築できるWeb手法です。詳細は後述にて記載しています。
レスポンシブデザインとは？
スマートフォンやタブレットなどのさまざまなデバイスが使われるようになった昨今。モバイルユーザーの増加に伴い、PCとスマートフォン、スマホとタブレットなど、複数のデバイスから同じWebサイトを見ることも当然のように行われるようになりました。実はこのように、画面サイズの異なるマルチデバイスに対応するために導入されているのが「レスポンシブデザイン」です。
レスポンシブデザインは、デバイスの画面サイズに依存することなくWebサイトを構築することができる手法です。レスポンシブデザインを導入するとPC、タブレット、スマートフォンなどの画面サイズの幅を基準に、Webサイトのレイアウトを柔軟に見やすく調整してくれるので、現在は多くのWebサイトが導入しているWebデザインの手法の一つです。
レスポンシブデザインのメリット
レスポンシブデザインを導入した場合のメリットはどのようなものがあるのでしょうか。
メリットをまとめてみました。
管理のしやすさ
レスポンシブデザインを導入すれば、あらゆるデバイスで1つのhtmlファイルでWebページを管理することができるため、更新・運用などがしやすいという点では、大きなメリットと言えるでしょう。
同じURLを共有しやすい
同じURLでPCでもスマートフォンでも読めるように整えると、案内するリンクをそろえやすくなります。端末別のURLを共有する手間を減らせますが、それだけでシェアされた回数が増えるとは限りません。
Googleの推奨と検索での扱い
Googleは、実装と維持のしやすさからレスポンシブデザインをおすすめしています。また、現在は主にスマートフォンで取得する内容がインデックス登録やランキングに使われます。モバイル画面でも必要な本文や画像を読めることが大切で、方式を採用しただけで上位表示が決まるわけではありません。
レスポンシブデザインのデメリット
一見便利なように見えるレスポンシブデザインですが、デメリットもあります。
それぞれデメリットについても確認していきましょう。
画像や読み込む量の確認が必要
画像や読み込むファイルが多いと、表示に時間がかかることがあります。レスポンシブという方式だけで速さが決まるわけではありません。端末に合う画像や読み込み方を選び、実際のページで表示を確認します。
制作時の工程が複雑になる
広い画面と狭い画面で、見出し・写真・表・メニューなどをどう見せるかを決め、確認する作業が必要です。端末の機種ごとに完全に別のデザインを作るという意味ではなく、内容が読みやすくなる画面幅を目安に調整します。
リキッドデザインとは？
リキッドデザインは、Webページを表示するディスプレイの幅に合わせてWebページの幅を調整する手法のことを言います（サイズ可変デザイン）。リキッドデザインでは、ボックスを並べてレイアウトされた複数列の幅を％（パーセント）で管理します。それにより、表示される端末によってページ幅も可変的にレイアウトが維持されることになります。
幅をpxで固定する方法では、一定の幅で要素を配置できます。一方、狭い画面では横スクロールや縮小表示につながることがあるため、表示領域や設定を確認します。固定幅を選べば、内容の大きさや画面の制限を受けなくなるわけではありません。
リキッドデザインのメリット
リキッドデザインについてのメリットについてまとめてみました。
まずはメリットから確認していきましょう。
画面幅に合わせて領域を使える
幅を割合などで指定すると、利用者の画面幅に合わせて使う領域を調整できます。ただし、文字や画像、表まで常に読みやすく収まるとは限らないため、広い画面と狭い画面の両方で確かめます。
横にはみ出しにくくする
割合で幅を指定することは、横にはみ出しにくくする工夫の一つです。ただし、固定幅の画像や表、長い文字列などが残ると、横スクロールが発生することがあります。実際に使う内容を入れて確認しましょう。
リキッドデザインのデメリット
通常は便利なリキッドデザインですが、デメリットもあります。
デメリットの部分についても確認していきましょう。
見づらくなることもある
小さな画面で列を横並びのまま縮めると、本文が細い列になり、読みにくくなることがあります。列を縦に並べるなど、画面幅に応じた切り替えも組み合わせます。
レイアウトが崩れることもある
端末によってどのように表示されるかが不安定な面があるため、ボックスが縦長になってしまったり、横に伸びてしまったりと、全体のレイアウトが崩れてしまう可能性もあります。
リキッドデザインの作り方
ウインドウの幅に合わせてコンテンツが可変するリキッドデザインは以下のように作られています。
以下の例は、2カラムで構成されているコンテンツのうち、メインのみが可変される設定になっています。
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="./style.css" type="text/css" />
<title>リキッドデザイン</title>
</head>
<body>
<header class="header">
<p>ヘッダ-</p>
</header><!-- header class="header" -->
<div class="wrapper">
<div class="content">
<p>コンテンツです</p>
<p>幅</p>
<p>ウインドウの幅に合わせて可変されます。</p>
</div><!-- div class="content" -->
</div><!-- div class="wrapper" -->
<div class="sidebar">
<p>サイドバー</p>
<p>幅300px</p>
<p>ここは固定</p>
</div><!-- div class="sidebar" -->
<footer class="footer">
<p>フッター</p>
</footer><!-- footer class="footer" -->
</body>
</html>
Style.css
.header {
border: 2px solid #000;
}
.wrapper {
float: right;
margin: 0;
width: 100%;
margin-left: -300px;
}
.content {
border: 2px solid #000;
margin-left: 300px;
}
.sidebar {
border: 2px solid #000;
width: 300px;
height: auto;
}
.footer {
clear: both;
border: 2px solid #000;
}
レスポンシブデザインの作り方
ここでは、幅を変える例へメディアクエリを加えます。「@media (max-width: 1000px)」は、表示領域の幅が1000px以下のときに中のスタイルを適用する指定です。以下では、幅と余白の指定を解除して縦に並べます。1000pxはこの説明用の値で、すべてのサイトに共通の切り替え位置ではありません。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="./style.css" type="text/css" />
<title>リキッドデザイン</title>
</head>
<body>
<header class="header">
<p>ヘッダ-</p>
</header><!-- header class="header" -->
<div class="wrapper">
<div class="content">
<p>コンテンツです</p>
<p>幅</p>
<p>ウインドウの幅に合わせて可変されます。</p>
</div><!-- div class="content" -->
</div><!-- div class="wrapper" -->
<div class="sidebar">
<p>サイドバー</p>
<p>幅300px</p>
<p>ここは固定</p>
</div><!-- div class="sidebar" -->
<footer class="footer">
<p>フッター</p>
</footer><!-- footer class="footer" -->
</body>
</html>
Style.css
.header {
border: 2px solid #000;
}
.wrapper {
float: right;
margin: 0;
width: 100%;
margin-left: -300px;
}
.content {
border: 2px solid #000;
margin-left: 300px;
}
.sidebar {
border: 2px solid #000;
width: 300px;
height: auto;
}
.footer {
clear: both;
border: 2px solid #000;
}
@media (max-width: 1000px) {
.wrapper, .content, .sidebar {
float: none;
margin: 0;
width: auto;
}
}
実際の制作では、利用者の端末と対象ブラウザを決め、現在の機能対応を確認します。上のコードは幅を変える仕組みの例です。画像・表・メニュー・フォームも含めて、使う内容が読めるか、操作できるかを担当者と確認しましょう。
マルチデバイス対応の進め方を比べる
対応方法を選ぶときは、既存サイトの作りと、読者に使ってほしい内容・操作を確認します。以下では、設計を整える、配信する方法を変える、外部サービスを利用するという案を、比較の材料として整理します。
レスポンシブデザイン・リキッドデザイン
同じ内容を同じURLで管理しながら画面幅へ対応したい場合に、レスポンシブデザインは候補になります。必要な工程や費用は、ページの内容、機能、既存サイトの作りによって変わります。方式の名前だけで工数を決めないようにします。
リキッドによる可変幅と、画面幅に応じた並べ方の切り替えは、組み合わせて使えます。PCだけを基準にせず、スマートフォンでも必要な情報を読めるかを確認します。
デバイスごとにサイトを構築する
同じURLで端末に応じたHTMLを配信する方法や、別のURLで配信する方法もあります。Googleは、これらもモバイルサイトの構成方法として説明しています。更新する情報や検索向けの設定が食い違わないよう管理が必要ですが、別URLという理由だけでSEOの効果がないとは言えません。
自動変換サービスを利用する
既存ページの見せ方を変換するサービスを検討する場合は、必要な機能と、更新後も内容をそろえられるかを確認します。導入費だけでなく、保守や障害時の対応も依頼範囲に含めて比べましょう。
提供元の現在の案内で、提供状況、対象ページ、フォームなどの対応範囲、初期費用と継続費用、更新方法を確かめます。変換後も、利用者が必要な情報を読めるか、Googleがモバイル側の内容へアクセスできるかを、導入前後に確認しましょう。
レスポンシブデザインとリキッドデザインが向いているサイト
同じ本文を複数の画面幅で読みやすく見せたいサイトでは、レスポンシブとリキッドを組み合わせる方法を検討できます。ECサイトだけでなく、会社案内やサービス紹介でも、内容と操作に合わせて設計します。
ページの種類だけでなく、どんな情報を読み、何を操作するかを基準にしましょう。
リキッドは幅を柔軟に変える方法であり、スマートフォン用に別サイトを作ることと同じではありません。文字を含む画像、検索機能、地図などがある場合も、実際の画面幅で文字が読めるか、操作できるかを見て、必要な切り替えや説明を用意します。
写真や図だけでは説明しきれない内容は、読み取れる本文や案内も合わせて整えます。
ここまで、レスポンシブデザインとリキッドデザインについて、その違いとメリットやデメリットをご紹介してきました。
レスポンシブでは、同じURLと内容で複数の画面幅へ対応し、情報の管理や共有をそろえやすくします。検索順位や共有回数が、方式だけで決まるものではありません。
リキッドでは幅を柔軟に変えられますが、横スクロールや読みにくさがないかは、内容を入れた画面で確認します。画面幅による切り替えと組み合わせることもできます。
レスポンシブデザインとリキッドデザインは運用するサイトの目的によっても、異なりますので、制作するWebサイトの目的ごとに、どのようなデザインにするかを検討すると良いでしょう。
参考資料（2026年10月28日確認）：
Google：モバイルファーストのおすすめの方法／
MDN：レスポンシブWebデザイン／
MDN：メディアクエリの使い方。
