コラム

ついこの間、スマホをiphoneからandroidに機種変したんですが、最近はスマホもタブレットもサイズがありすぎてデザインする側も大変な時代になってきたなと思う今日この頃です。
ってことで、今更ながらレスポンシブデザインとリキッドデザインについて一悶着あったので私なりにまとめてみようかと思います。

そもそもレスポンシブデザインって何だ？

最近のサイトは、大体がこの手法で制作されているのではと思います。
そもそもレスポンシブとは、googleではこのように定義されていました。

ユーザーのデバイス（パソコン、タブレット、モバイル、非視覚的ブラウザ）に関係なく、同じ URL で同じ HTML コードを配信しますが、画面サイズに応じて（つまり「レスポンシブ」に）レンダリングを変えることができます。

引用：https://developers.google.com/webmasters/mobile-sites/mobile-seo/?hl=ja#select-config

つまり、同じHTMLを使用したサイトを閲覧者のデバイスに合わせて適切な大きさで表示させるデザインのことをレスポンシブと定義しているようです。
大抵のサイトはメディアクエリのブレークポイントをスマホ(750px)、タブレット(1,024px)、PCの3つで指定していることが多いのではないでしょうか。
しかし、この場合だとデバイスの規格変動でレイアウトが崩れる可能性も出てきてしまいます。

じゃあリキッドデザインって？

リキッドデザインは、ブラウザの横幅に合わせてコンテンツの表示サイズも変更されるデザインのことを指すので、多少表示領域が変動してもレイアウトが崩れないという強みがあります。

最近では、タブレットやスマホのデバイス幅の種類が格段に増加してきていて、スマホとタブレットの大きさが対して変わらなかったり、パソコンサイズ並のタブレットだったりとデバイスの境界線がわからなくなりつつあるように思います。

でも、リキッドデザインだとデバイスの規格変動が起きても、多少なら対応できるように作ることが可能ですね。

■双方のメリット・デメリット

共通メリット
・HTMLが1つの為、制作・更新・運用の手間が1回
・表示領域、画像を自動的に適切な幅に変更できる

共通デメリット
・PC用のHTML・CSSを読む込む為、スマホ時の表示速度が遅くなり、ユーザーが待ちきれなくなる

レスポンシブデザインのメリット
・各デバイスに応じて、不必要な要素を非表示に出来る
・レイアウトの最適化

レスポンシブデザインのデメリット
・構築に工数と時間がかかる

リキッドデザインのメリット
・コンテンツを画面サイズに合わせて、相対・可変出来る
・多少の規格変動になら対応出来る

リキッドデザインのデメリット
・デザインに幅が出ない
・コンテンツが長くなり可読性に欠ける

まとめ

今現在、販売されているスマホの最大サイズは6.8インチ。
iphone7plusで5.5インチなので1廻り以上に大きいよう…

これからも、デバイスの規格変動は続いていくでしょうし、レスポンシブデザインもリキッドデザインもまだまだ改善されていくのではないでしょうか。