最近Web制作をする中で「リキッドレイアウト・ソリッドレイアウト」というワードを目にしたのですが何それとなったので調べてみました🏃
前置き
調べてみる中で、リキッドやソリッド、レスポンシブにはいろいろな解説があるなとなりました。実際、Web制作に携わる方（ディレクター、デザイナー、コーダーなど）によって認識が色々のようですね👀
現場で使う場合には、それぞれの認識をすり合わせることが大事になりそうです。
レスポンシブデザインについて
レスポンシブデザインは、デバイスの画面サイズに依存しないサイトを構築する手法です。デバイスのウィンドウ幅に合わせて自動的に見やすく切り替えて表示させます。
参考にさせていただいたこちらのサイトでは、「レスポンシブWebデザイン」の枠組みの中に、「レスポンシブレイアウト」や「リキッドレイアウト」があるものという解説がされています。
レスポンシブレイアウト
レスポンシブレイアウトでは、ブレイクポイントを設定しデバイスの画面幅に応じてコンテンツや画像などの配置と表示/非表示を調整する手法です。
ブレイクポイント参考：
リキッドレイアウトとは？
リキッドレイアウトとは、Webデザインにおいてコンテンツの幅が画面サイズに応じて自動的に調整・表示される手法です。横幅をパーセンテージで指定するため、表示する端末に合わせてレイアウトを維持することができます。
どんな横幅でも100%で表示させるものです。
リキッドレイアウトで実装されているwebサイトとして、商品の一覧表示の必要があるECサイトやニュースサイトなどが挙げられます。
リキッドレイアウトのメリット
様々なデバイスやブラウザに適応しやすい
デバイスのディスプレイ幅に影響を受けず、画面サイズに合わせて相対的・可変的に調整されるのでデバイスに寄らずWebページを利用することができます。
リキッドレイアウトのデメリット
デザインに一貫性を持たせるのが難しい
デバイスの幅に合わせてコンテンツ幅が変化するので、大きい画面では情報が横に伸びてしまい、逆に小さな画面ではコンテンツが狭くなりすぎてしまうため読みづらくなってしまいます。これらに対応しようとすると、一貫性のあるデザインを制作するのは難しくなってきます。
ソリッドレイアウトとは？
コンテンツの幅や配置を固定したまま保つレイアウトです。表示するデバイスの画面サイズに関係なく、同じデザインでWebページを表示します。
ソリッドレイアウトのメリット
特定のデザインを保ちやすい
文字量が多かったり画像や文章の改行が少ない場合は、ソリッドレイアウトにしてしまったほうが見やすい場合があるようです。
ソリッドレイアウトのデメリット
小さい画面や異なるデバイスに対応しづらい
例えばPC画面を基準に作成した場合、モバイル画面では横にスクロールしないとコンテンツを閲覧できない、なんてことになりかねません。
まとめ
長々と書いてきましたが、実際にはセクションごとに組み合わせて実装することも多いようですね👀
ここはリキッドで、ここは固定幅にして……なんて感じで実装されているサイトを目にすることも多いような気がします。
恥ずかしながら、自分はなんとなくデザインしていたのですが、今後はそれぞれの長所短所を知り、ニーズや目的に合わせてより良い選択をしていきたいです。
参考サイト
