レスポンシブデザインとリキッドデザインは、その違いがあいまいで今ひとつピンとこないという人も多いようです。そこで今回は、Web制作に欠かせないレスポンシブデザインとリキッドデザインの２つの違いと、それぞれのメリット・デメリットについて詳しくご紹介します。
基本のWeb手法
WEBデザインを行う上での基本的な手法は、レスポンシブデザイン以外にも存在しています。
フィックスデザイン
デザイン時に最適と思われるブラウザのサイズに合わせて、サイトの横幅を固定し、レイアウトやデザインが崩れるのを防ぎます。コンテンツの幅が変わらないので、ブラウザサイズが小さくなった場合には横スクロールを使用してページを閲覧します。
フルードデザイン
ブラウザサイズを変えるとそのサイズに合わせてサイトの幅全体が表示されるようになります。後述するリキッドデザインとも呼ばれるものです。
アダプティブデザイン
スマートフォンやタブレットなど、さまざまな端末があふれている中でレスポンシブデザインはWebにたずさわる人や、その業界では必ず押さえておくべき基本の手法となっています。そんなレスポンシブデザインとよく似た手法なのが、アダプティブデザインです。
レスポンシブデザインがCSSを利用してレイアウトや表示方法を変更する端末の表示方法を重視しているのに対し、アダプティブデザインは、画面サイズに関係なく、同じコンテンツを同じように使いやすくしてくれる、ユーザーの視点を重視した手法といえます。
レスポンシブデザイン
CSSを使用してデバイスごとに対応するWebサイトを構築できるWeb手法です。詳細は後述にて記載しています。
レスポンシブデザインとは？
スマートフォンやタブレットなどのさまざまなデバイスが使われるようになった昨今。モバイルユーザーの増加に伴い、PCとスマートフォン、スマホとタブレットなど、複数のデバイスから同じWebサイトを見ることも当然のように行われるようになりました。実はこのように、画面サイズの異なるマルチデバイスに対応するために導入されているのが「レスポンシブデザイン」です。
レスポンシブデザインは、デバイスの画面サイズに依存することなくWebサイトを構築することができる手法です。レスポンシブデザインを導入するとPC、タブレット、スマートフォンなどの画面サイズの幅を基準に、Webサイトのレイアウトを柔軟に見やすく調整してくれるので、現在は多くのWebサイトが導入しているWebデザインの手法の一つです。
レスポンシブデザインのメリット
レスポンシブデザインを導入した場合のメリットはどのようなものがあるのでしょうか。
メリットをまとめてみました。
管理のしやすさ
レスポンシブデザインを導入すれば、あらゆるデバイスで1つのhtmlファイルでWebページを管理することができるため、更新・運用などがしやすいという点では、大きなメリットと言えるでしょう。
シェア数が上がりやすい
一つのサイトを違和感なくスマートフォンやPCで見ることができるのはとても便利です。会社で見ていたWebサイトをシェアして、スマートフォンやタブレットで移動中に閲覧するといったようなことができれば、urlを一つに統一できるので、シェア数が上がりやすいというメリットがあります。
SEO観点からも効果的
Googleではレスポンシブデザインを推奨しています。それは、レスポンシブデザインがスマーフォンやタブレットなどのモバイル端末表示に最適化されるスマホ対応であること（モバイルフレンドリー）が理由です。モバイルフレンドリーとは、スマートフォンやタブレットなどPC以外の端末でもWebページの閲覧が見やすくなるという点から、Googleが2015年に実装したアルゴリズムで、検索結果の上位に表示されやすくなるというメリットがあります。
レスポンシブデザインのデメリット
一見便利なように見えるレスポンシブデザインですが、デメリットもあります。
それぞれデメリットについても確認していきましょう。
表示速度が遅くなる
PCように作成したWebページをスマートフォンやタブレット端末などで表示する際、不要なファイルの読み込みなどに時間がかかり、同じベージを表示する 場合でもPCとモバイル端末では表示速度が異なることがあります。
制作時の工程が複雑になる
レスポンジブデザインを導入してのWebサイト管理は楽になるというメリットはあるものの、そのデバイスごとにデザインを制作することになるので、作業工程にもその分手間がかかります。
リキッドデザインとは？
リキッドデザインは、Webページを表示するディスプレイの幅に合わせてWebページの幅を調整する手法のことを言います（サイズ可変デザイン）。リキッドデザインでは、ボックスを並べてレイアウトされた複数列の幅を％（パーセント）で管理します。それにより、表示される端末によってページ幅も可変的にレイアウトが維持されることになります。
また、リキッドデザインに対し「ソリッドデザイン」という手法があります。ソリッドデザインでは、端末を問わず、Webページの幅をpx（ピクセル）で固定するというものです。ソリッドデザインでは、コンテンツの大きさやデザインの制限を受けることがないため、自由なレイアウトやデザインが可能です。しかし、スマートフォンなどの小さな端末ではページ全体が強制的に縮小されてしまう場合もあります。
リキッドデザインのメリット
リキッドデザインについてのメリットについてまとめてみました。
まずはメリットから確認していきましょう。
端末のディスプレイに影響を受けない
PCのディスプレイサイズやデバイスのディスプレイのサイズなど多様化する端末に対し、リキッドデザインでは、ウインドウ幅にとらわれることなく、いろいろな端末でWebページを利用してもらうことが可能です。
横スクロールを表示させない
ディスプレイの大きさに合わせてWebページを表示してくれるので、横スクロールが表示されません。わずらわしい操作を必要としないので、快適にブラウザを操作することができます。
リキッドデザインのデメリット
通常は便利なリキッドデザインですが、デメリットもあります。
デメリットの部分についても確認していきましょう。
見づらくなることもある
スマートフォンなどの端末のディスプレイが極端に小さい場合は、ページが縮小されてしまい、見づらくなってしまうことがあります。
レイアウトが崩れることもある
端末によってどのように表示されるかが不安定な面があるため、ボックスが縦長になってしまったり、横に伸びてしまったりと、全体のレイアウトが崩れてしまう可能性もあります。
リキッドデザインの作り方
ウインドウの幅に合わせてコンテンツが可変するリキッドデザインは以下のように作られています。
以下の例は、2カラムで構成されているコンテンツのうち、メインのみが可変される設定になっています。
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<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 {
border: 2px solid #000;
}
レスポンシブデザインの作り方
ここでは、上記のコードをレスポンシブデザインに変更してみましょう。リキッドデザインをレスポンシブデザインに変更するにはメディアクエリというスタイルを使用します。「@media(max-width: 1000px){}」と記述することで、幅が1200px以下の場合に適用するスタイルを記述し、1000pxになったら横幅指定が解除されるという仕組みになっています。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesh
eet" 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 {
border: 2px solid #000;
}
@media (max-width: 1000px) {
.wrapper, .content, .sidebar {
float: none;
margin: 0;
width: auto;
}
}
仕組みさえ理解できれば、すぐにでも導入できるレスポンシブデザインとリキッドデザインではありますが、レスポンシブデザインで必要となるメディアクエリは、IE8以前のブラウザでは対応していません。現在はXPのサポートも終了しており、ほとんどIE8以下のブラウザを利用している人はいないと思われますが、googleがこれに対応するjava scriptを提供しているので、利用してみるのもオススメです。
マルチデバイスに対応させる３つの方法
PCやスマートフォン、タブレットなどさまざまな画面サイズに対応できるWebサイトの作成は、今では当然のように行われています。マルチデバイスに対応するWebサイトを構築するには、大きく３つの方法があり、サイトの規模によって使い分けることになります。
レスポンシブデザイン・リキッドデザイン
レスポンシブデザインは、コンテンツの一元管理が可能でSEO対策にも効果的であることから、あらゆるWebサイトで導入されています。しかし、構築までにかなりの費用と期間を必要とすることから、敬遠しているサイトがあるのも事実です。
リキッドデザインでは、デバイスの画面サイズに依存するところが大きいため、極端なサイズ変更がなされないようにすることが大切です。基本的にはPCサイトを重要視するのがおすすめです。
デバイスごとにサイトを構築する
マルチデバイスに対応するWebサイトを制作する上で、レイアウトやデザインを崩すことなく操作性の高いサイトを作るには、そのデバイスごとにサイトを構築するのが一番確実な方法です。しかし、制作費用や制作にかかる日数、デバイスごとに更新やメンテナンスが必要となるため、運営や管理がしづらいというデメリットもあります。さらにデバイスごとにurlも異なるため、SEO対策としても効果は期待できません。
自動変換サービスを利用する
Webサイトをスマートフォン画面に合わせて変換してくれるサービスが「自動変換サービス」です。構築や導入に関わる手間が少なく済むだけでなく、コストも予算に合わせて選べるようになっています。
自動変換サービスも増えており、「ADPLAN SG（オプト）」や、「Mobify（ドーモ）」、「shutto（イーエージェンシー）」、「SPコンバート（ポクシーズ）」、「WEBトラン（ネクシム コミュニケーションズ）」、「エリクサー・ユニバーサル（ノイアンドコンピューティング）」などがあります。それぞれに初期費用や月額料金、サービス内容も異なります。利用する際には事前にしっかり確認しておきましょう。
レスポンシブデザインとリキッドデザインが向いているサイト
レスポンシブデザインとリキッドデザインについて記載してきましたが、何でもかんでもレスポンシブデザインやリキッドデザインを導入すればよいというわけではありません。レスポンシブデザインなどのWeb手法が向いているのは、ECサイトなどの写真や商品説明など仕様が限られている情報サイトです。
言うならば、シンプルなサイトと考えてよいでしょう。
一方、リキッドデザインに向いているサイトとしては、スマホ用に別サイトを作るイメージとなるため、スマホに特化したデザインができるため、文字が入っている画像を多く使うサイトや、見出しを画像で作っているサイト、細かな検索機能や地図機能を用意しているサイトでは、レスポンシブでは画像が小さくなるため、リキッドデザインの方が向いていると言えるでしょう。
言うならば、細かい画像を多く使っているサイトに向いていると言えます。
ここまで、レスポンシブデザインとリキッドデザインについて、その違いとメリットやデメリットをご紹介してきました。
レスポンシブデザインの利点としては、管理がしやすかったり、シェア数が上がりやすかったり、SEOの観点あから効果的であるとお伝えしてきました。
一方、リキッドデザインのメリットとしては、端末のディスプレイに影響を受けないことや、横スクロールを表示させないことなどが挙げられました。
レスポンシブデザインとリキッドデザインは運用するサイトの目的によっても、異なりますので、制作するWebサイトの目的ごとに、どのようなデザインにするかを検討すると良いでしょう。
