レスポンシブデザインとリキッドレイアウトの違いって何？の違いとリキッドレイアウトに類するレイアウトの説明をしています。この記事を見るとリキッドレイアウトソリッドレイアウトの違い、それらのデザインのメリット、デメリット。
レスポンシブデザインとは何かが詳しくわかります。
目次
リキッドレイアウトとは？レスポンシブデザインとの違い
レスポンシブデザインとは複数のデバイスから同じWebサイトをスマートフォン、PCに合わせて指定されたCSSをレスポンシブ（応答）してくれるのがレスポンシブデザインです。
レスポンシブデザインはデバイスごとに画面サイズを用意しておいてそのデバイスに合った画面サイズを提供するので一番表示させたい画面サイズで表示させやすいレイアウトです。
それに対しリキッドレイアウトは画面に合わせてリキッド（液体）のように柔軟にボックスを満たすかのような形でWebサイトのサイズが可変するレイアウトです。
％で画面幅を調整するためブラウザでの表示は崩れにくいものになっています。
リキッドレイアウトのメリットデメリット
リキッドレイアウトのメリット
- リキッドレイアウトは画面に合わせてレイアウトが変化し画面幅ぴったり表示される。
- スマートフォンから見たときはPCのレイアウトに近い状態で見れる。
- リキッドレイアウトなら表示領域が変動してもレイアウトが崩れにくい。
- リキッドレイアウトはどのデバイスでも画面ぴったりになるのでまだでていないデバイスの規格変動に強い。
リキッドレイアウトのデメリット
- PCで見るときに横幅を広くしていると要素がすごく伸びてしまって締まりのないデザインに見えてしまいやすい。
- リキッドレイアウトは要素が画面に収まりきる仕様で横スクロールをおこなえないためデザインの引き出しは少ない。
- リキッドレイアウトはどのデバイスでも要素を見やすくするレイアウトなのでそれ以外の形にする際カスタマイズの手間がかかる。
レスポンシブデザインのメリットデメリット
レスポンシブデザインのメリット
- レスポンシブ（応答）の名前からもわかるようにデバイスの画面サイズに応じてCSSでデバイスに合った画面幅にしてくれるため非常に見やすい。
- メンテナンスなどの工程が一つのCSSファイルで複数のデバイスに対応しているので複数ファイルが不要で管理、修正しやすい。
- デバイスでデザインの違いが出ないPC、スマートフォンで見られても安心。
- 人気Webサイトでよく採用されている手法。
レスポンシブデザインのデメリット
- 複数のデバイスの画面サイズに調整したCSSのデザイン設定が複雑になる。
- PCとスマートフォンを違うレイアウトにした場合、読み込みが重くなる可能性がある。
- 新作のスマートフォンが出た時にそれに合わせたサイズも作らないといけない。
他のレイアウト
ソリッドレイアウト（固定型）のメリットデメリット
ソリッドレイアウトのメリット
ソリッドレイアウトはpx単位で固定してデザインするのでどのデバイスで見ても同じレイアウトで表現できます、画面サイズが合っていればこちらが見せたいレイアウトで見てもらうことができるのでそこがソリッドレイアウトのいい所です。
ソリッドレイアウトのデメリット
要素が大きすぎるまたは逆に要素が小さすぎるなどで適切なpx幅でデザインできなかった場合、デバイスごとの表示方法を見られることを考慮するとソリッドレイアウトでポートフォリオを提出したり、仕事の案件で提出する完成度に仕上げるのは難しいです。
フレキシブルレイアウト（一部固定可変型）のメリットデメリット
メリット
フレキシブルレイアウトはリキッドレイアウトの便利版で画面の幅で要素の幅が可変される状態と最小幅、最大幅を指定できることにより中央寄せのように表示できまとまって見える良さがあります。
最近はスマートフォンによるWebサイトの視聴が多いのでスマートフォンユーザーのユーザビリティに適しているデザインなのもよい所だと思います。
デメリット
リキッドレイアウトに追加でCSSに外枠要素の記述が必要です。
レイアウトのまとめ＆サイト別個人的おすすめのレイアウト紹介
紹介した四つ手法を画像で比較しているので自分が作りたいWebサイトはどのレイアウトが適しているか見比べてみてください。
リキッドレイアウト
リキッドレイアウトは要素が画面ぴったりに表示されてしまうがそれを意図したデザインなら要素が大きいためUIとしてもボタンが押し易く見やすいデザインではある。
少しやぼったいデザインになりやすいためデザイン性が問われるサイトには向かないがボタンの押し易さ要素の大きさから見やすくボタンを押し易いバリアフリーなサイトやショッピングサイトニュースサイトなどにリキッドレイアウトは向いています。
フレキシブルレイアウト
決めたられた幅の範囲でフレキシブル（柔軟）に可変させられる中央にまとまって要素が表示されるため視線が散漫になりにくく見やすい。
解説系サイトや商品の注文を促すLP（ランディングページ）にも向いています。
ソリッドレイアウト
ソリッドレイアウトはスマートフォンでもPCサイトの見た目で表示されるため文字やUIが小さくなりがちな代わりにpx単位で制作者が見せたいデザインで見せれるためLPに向いています。
レスポンシブデザイン
レスポンシブデザインは人気Webサイトで一番使われているレイアウトです。
デバイスごとの設計は手間ですがWebサイトのUIや記事が見やすいので常連客がつきやすいです。
CSSの調整が手間ですが融通が利く分すべてのWebサイトに向いていると思います。
コンテンツ配置別レイアウトシングルカラムマルチカラムなど
コンテンツの配置のレイアウトも全体のレイアウトにかかわるので紹介します。
シングルカラム
シングルカラムレイアウトとは
要素を縦に積みスクロールして見れるサイトです。
PCのWebサイトではあまり採用されていませんがスマートフォンとの相性は抜群で多くのサイトで採用されています。
リンクをクリックして移動してまたスクロールよりも全要素を縦のスクロールで見れるよう集約することで余すことなく情報を伝えることが出来ます。
スマートフォンでレスポンシブデザインを組む際はぜひ意識して取り入れてみてください。
メリット
- 訴求したい場所を画面全体を使ってアピールしやすい。
- 多くのシェアを持っているスマートフォンで強い。
デメリット
- 縦長なのでファーストビューなどで最初に興味を引けないと下層ページにたどり着くまでに離脱されてしまう。
マルチカラムレイアウト
マルチカラムレイアウトとは
ECサイトやネットショップなど情報量が多いサイトに向いています。
コンテンツを横並びにできる性質上ジャンルを並べたり、似たような商品を見比べたりコンテンツ量をアピールしたいときにぜひ使ってみてください。
メリット
- サイドメニューあたりやメイン記事の随所にバナーやリンク設置がしやすいのでユーザーの回遊性を上げやすい性質をしています。
- ニュースサイトやショッピングサイトにおすすめのレイアウトです。
デメリット
- いくつかのコンテンツを横並びで表示できる代わりにメインコンテンツの表示領域がその分減ってしまうのでユーザーに与えるインパクトはそこまで強くないことと情報量が多い分一つのコンテンツを集中して見辛いです。
グリッドレイアウト
グリッドレイアウトとは
グリッドを表示した状態で要素の大きさを決めるレイアウトです。
制作段階で要素ごとの大きさをグリッドに沿って決めるので統一感が出しやすいです。
メリット
- ユーザーに1度に多くの情報をアピールできる。
- グリッドをもとに作られているため整った配置で見やすい。
デメリット
- きれいに配置されている代わりにメインコンテンツのインパクトを出し辛い。
- 情報量の多さでユーザーが迷ってしまう可能性がある。
フルスクリーンレイアウト
フルスクリーンレイアウトとは
動画や画像をスクリーンいっぱいに表示して訴求力を追求したレイアウトとなっています。
デザイン重視のLPなどでよく使われたりしています。
メリット
- 動画や画像を大きく配置しているので売り出したいものがわかりやすい。
- 動画などで動きがあることにより、より映えるアピールもできる。
デメリット
- 初心者が作る際ユーザビリティを軽視した自己満足なデザインになってしまいがち。
おわりに
参考になるレイアウトは見つかりましたか？
Web制作でレイアウトで迷ったときはぜひまたご来訪ください。
最後まで見てくれてありがとうございました。
