こんにちは、Webディレクターのたかりょーです。
こんな人に向けて記事を用意しました。
リキッドデザインはWebサイトのレイアウトを考えるときに出てくる重要なキーワード。
なぜならWebサイトを作るときに、ブラウザ幅に応じてレイアウトを「固定にする」か「可変にするか」を決めてその指定によって、見え方が異なってくるからです。
リキッドデザインはその見え方を指定する文脈で出てくる用語です。
Webディレクターの僕が、自分なりにリキッドデザインについてまとめましたのでぜひ参考にしてください。
リキッドデザインとは？
リキッドデザインとは、Webページを表示するディスプレイ幅に応じて、レイアウトが相対的に可変するデザインのことです。
具体的には表示をディスプレイ幅に対する割合（＝％）で指定します。
絶対値で指定せずに表示端末によってページの横幅を可変させる設定するので、テキストや画像だけでなく、ボックス要素に対しても常に幅を維持できます。
リキッドデザインのここがいい
では具体的にリキッドデザインのどこがいいかを説明しますね。
コンテンツ全部を見せられる
リキッドデザインはブラウザ幅に合わせてコンテンツのサイズが可変して、コンテンツ全部を表示させることができます。
例えばブラウザ幅を縮めていくと、カラムの幅が変更したり、右側の要素を下に流したり。
デバイス毎に幅がレイアウトが柔軟に変わっていくため、画像要素や文字情報が見切れたりすることがなくなります。
リキッドデザインのここが不便
デバイスによって見え方が異なる
デバイスによってレイアウトが異なって見え方が違ってしまうケースが出てきます。
例えばある一定の幅に合わせて改行を調整していたのが、ブラウザ幅が小さいデバイスで見ると変なところ改行が入ったり、改行が多すぎて
またブラウザ幅を広げていくと、要素毎が離れていき、ちょっと間延びした印象になるなど
縦長のコンテンツになることも
可変するということは、ある意味でコンテンツを全て見せるのがリキッドデザイン。
だからブラウザの横幅が狭いと、テキストなど表示要素がどんどん下に流されていきます。
するとめちゃくちゃ縦長になって表示されることもあります。
無駄な工数がかかるケースも
上記のデメリットを補うために、端末毎にCSSで見やすいように調整すると無駄な工数がかかることにもつながります。
リキッドデザインどのように処理するか
リキッドデザインを指定するのはCSS。
横幅を％やvwで指定します。
例えば2カラム構成のとき、サイドメニューは固定幅にして、メインコンテンツ部分をリキッドにするケースもあります。
ソリッドデザインとは？
リキッドデザインとは異なり、px指定で表示幅を固定するのがソリッドデザイン。
絶対的にレイアウトを指定するソリッドデザインは、だから端末によってデザインの制限を受けません。
だからディスプレイ幅が1366pxだろうが、1920だろうが同じ見え方をします。
しかし、スマートフォンなどの小さな端末ではページ全体が強制的に縮小されてしまう場合もあります。
ソリッドデザインは、シンプルというよりも、複雑で凝ったデザインの時に使われる傾向があります。
ソリッドデザインのここがいい
デバイスで同じレイアウトを表示
ソリッドデザインはつまり固定レイアウトということ。なので閲覧デバイス毎によって見え方が異なることはありません。
そのため誰がどのデバイスで見ても、Webページを同じレイアウトで表示させられます。
制作陣が自由にデザインができる
ソリッドデザインは常に同じ表示をさせることができます。
だから凝ったデザインで作ったとしても、制作側が意図した通りに表示させることができます。
デザイナー的には自由にレイアウトができるわけなのでメリットです。
ソリッドデザインのここがいまいち
見切れなどが発生する
見え方は異なりませんが、指定したサイズ以下のデバイスで見ると両端が見切れていたり、あるいは余白が以上に出たりします。
レスポンシデザインとは？
レスポンシデザインとは、ブレイクポイントと呼ばれるものを設けて、CSSでウインドウの幅ごとに独自のレイアウトの指定を行います。
よくあるのは３段階で、PC、タブレット、スマホの３段階で作られることがあります。
なおレスポンシブデザインにすると、ブラウザ幅ごとにCSSで表示変更ができるため、例えばPCで表示していた要素を、スマホでは非表示にしたり、タブレットでは表示させたい要素を加えたりと柔軟にデザインができます。
