リキッドレイアウト(Liquid Layout)
リキッドレイアウトとは
リキッドレイアウト(リキッドデザインとも)とは、サイズ可変デザインとも呼称され、その名の通り、ユーザーの閲覧しているブラウザのサイズによってデザインの伸縮を行うことで変わらないデザインによる直感的な操作を可能とする手法です。メジャーなものとしてはAmazon.comのサイトなどが挙げられます。
画面サイズ等に関わらず常に100％幅で表示できるため、WEBページの基本形とも言われます。
参考：Amazon.com
しかし、そのままでは画面サイズが大きすぎたり狭すぎたりすると可読性に欠ける表示になってしまうため、単体では使用せずレスポンシブデザインにかけ合わせるなどの手法を使います。
また、リキッドレイアウトの弱い部分をカバーしたフレキシブルレイアウトと呼ばれる手法もあります。
関連：レスポンシブデザイン
リキッドレイアウトの特徴
ブラウザの横幅を100％とし、各ブラウザのサイズによって表示幅を相対的・可変的にするので多様な環境でユーザビリティが損なわれないWEBページの作成ができるようになります。
タブレットやスマートフォン等のような小さな画面に対しては100％表示され、大きな画面の場合は、ボックス要素が相対的、もしくは可変的に調整が行われて表示されると言う特徴が有ります。
無制限に可変的なリキッドレイアウトにしてしまうと、非常に大きく高解像度のディスプレイ上では横に伸びすぎた表示となったり、あるいは幅を狭くしすぎた場合にコンテンツが縦長になりすぎて可読性が失われる場合があるため、幅の上限や下限を指定することで、ある程度は見易さの維持を図る必要があります。
イメージとしてはWEBページが液状(Liquid)であるため、ブラウザという容器幅いっぱいに広がるイメージです。しかし、表示するものには限りがありますので、広がりすぎると可読性に欠けることになってしまうと想像いただければわかりやすいかと思います。
WEBページのリキッドレイアウト化は以前はwidth(幅の指定)をpx指定ではなく％指定とする・もしくは一切指定しないといった手法がとられていましたが、現在ではCSSを使用するのが一般的となっています。
主に商品の一覧表示の必要があるショッピングサイトやニュースサイト、コラムページなどで採用されていることが多いです。
【以前の記述(HTMLに％で指定)】
<img src="rei.jpg" alt="以前の形式" width="30%" height="50%">
【現在の主流】
- HTML
<img src="rei2.jpg" alt="現在の主流">
- CSS
img{
width:30%;
height:50%;
}
対をなすソリッドデザイン
一般的なWEBページでは、各列の幅をピクセル数などで指定し、固定的なデザインで表示しています。
このようなWEBデザインをソリッドデザイン(サイズ固定デザイン)と呼び、
表示するディスプレイの大きさやブラウザのサイズに関係なくどのような表示環境でも同じデザインでWEBページを表示することが可能なので、
制作側の思い通りにレイアウトできますが、ディスプレイの解像度が低い場合やブラウザの幅がWEBページよりも狭い場合、意図しない表示になってしまいます。
たとえばブラウザが狭いためにWEBページの表示幅に収まらず、横スクロールするためのスライドバーが表示されてしまうといった状況になります。
この状態は非常に閲覧しづらく、ページからの離脱を早めてしまう要因となります。
しかし、文字量が多かったり画像や文章の改行が少ない場合は固定デザインにしてしまったほうがスッキリと纏まったサイト構成になります。
もしもこれがリキッドで作成されてしまうと、画面いっぱいにつらつらと文字や画像が並び、逆に可読性に欠けることになってしまいます。
リキッドレイアウトのメリット
上記のようにソリッドレイアウト(サイズ固定デザイン)にも利点がありますが、ECサイトなどWEBのみで完結する場合はリキッドレイアウトが有効です。
たとえば以下のようにメリットが挙げられます。
- 閲覧環境に影響を受けずに表示が可能である
- 横スクロールがいらない
1については繰り返しご紹介しているように、無制限に広がることができるため、大きめの画面の人と小さめの画面の人で同じような画面を見ることができます。
2は1の副産物です。可変サイズですので可読性の悪い横スクロールを防止してくれます。
以上の点から、閲覧から次の行動(サイト内の別コンテンツへ移動したり、購入画面へ移動したり、詳細画面の確認など)が起こる場合、ページ表示の度に画面が伸縮していては纏まりを感じづらくなってしまいます。
そのため、リキッドデザインはWEBのみでワンストップしている場合に向いているとも言えます。
リキッドレイアウトは単体では弱い
非常に有効な手法に感じるリキッドレイアウトですが、そのままでは少々困ったことが出てきます。
それは表示されるレイアウトがユーザー側の環境に依存することになり、制作側の表現方法にかなり制約がかかってしまうということです。
具体的にはスマートフォンのようにPCと比べると極端に小さい画面の場合、そのままページが縮小されてしまい、見辛くなってしまうことがあります。
また、閲覧環境によってはページの表示が縦長になり、スクロール頻度が高くなってしまうことにより可読性が落ちる場合もあります。
原因として、今も発展しつづけている手法であるためデバイスやブラウザによって対応が追い付いていないなどの理由があります。
上限と下限の設定方法(フレキシブルレイアウト)
前述の通り、リキッドレイアウトはブラウザのサイズに100％の可変サイズで表示となります。しかし、大きすぎたり狭すぎたりすると伸縮が過剰で可読性の悪い表示になってしまいます。
その対策としてwidth(表示幅）の指定やheight(高さ)の指定などの制限を設けることでデザインの破綻を防ぎます。(フレキシブルレイアウトと呼称されます)
では設定はどのようにするかというと、以下のように記述していきます。
- HTMLの表示
<div id="wrapper">
<div class="main">メイン</div>
</div>
以上のようにHTMLが記述されたとします。
これに対応してCSSにて以下のように記載した場合、閲覧環境が巨大であっても変わらずブラウザサイズに合わせて伸縮させて表示させようとしてしまいます。
- CSS
#wrapper{
width:90%;
margin:0 auto;
}
.main{
width:80%;
float:left;
background:#ccc;
}
これでは、ブラウザサイズにより表示が破綻しかねませんので、表示部分の幅に上限と下限値を設定します。
- CSSに上限と下限値の設定
#wrapper{
width:90%;
margin:0 auto;
max-width:1260px;
min-width:780px;
}
これで通常はブラウザサイズに対し90％のサイズで表示し続けますが、最大で1260px以上・最小で780px以下になると伸縮をしなくなりますので、デザインの破綻を抑えることができるようになります。
この拡張性を持たせたレイアウトをフレキシブルデザインと呼称しますが、実質的にはリキッドデザインの特徴的な部分に制限を加えてデザイン崩れを防止しているだけです。
現代ではマルチデバイス対応が必須
以前はPCが中心でしたので、平均的な画面サイズに合わせてソリッドデザインで表現するのが一般的でした。
しかし、いまやPC・タブレット・スマートフォン・テレビ・ゲーム機などなど、あらゆるデバイスでインターネットが可能になり、情報を得るにも買い物をするにもインターネットからという時代となりましたが、同時に画面サイズも実に様々となり、従来の表示では対応が難しくなりました。
そこでマルチデバイス対応としてデバイスごとに別サイトを作成するという手法もありますが、制作工数や運用コストなど、運営管理の不便さがデメリットとしてあります。
さらにデバイスごとにURLも変わってしまうため、検索エンジンは別サイトと認識してしまいSEO対策としても効果の期待ができません。
なので、ページの運用方向的に問題が無ければ、出来る限りリキッドレイアウトやレスポンシブデザインを取り入れていくことをお勧めします。
まとめ
リキッドレイアウトとは、液体のようにサイズを可変的に変化させるため、多様化した現代の表示サイズに寄り添うWEBサイトの主流となった手法ですが、大きなメリットと同時に多少のデメリットというものも存在します。
リキッドデザイン自体はWEBページの基本形とも言うべき形式ですが、そのままではユーザビリティに優れた構成とは言えず、高さや幅を制限することでようやくマルチデバイスへの対応ができていると言えます。
しかし、表示されるレイアウトがユーザー側に依存するだけに、本来の意図した構成から大きく崩れてしまい重要な情報がユーザーに見落とされてしまうことも想定する必要があるので、さらにレスポンシブレイアウトなどと組み合わせて対応していく必要があります。
