こんにちは、デザイナーの中道です。本日はWebデザインを作成するにあたって必ず考える必要があるレスポンシブWebデザインのレイアウトについてをご紹介します。
Webデザインはデバイスごとの見え方を意識して作成する必要があるため、スマホ、タブレット、ラップトップ、デスクトップなど、それぞれの画面で最適なデザインが必要になります。
以前にレスポンシブデザインの基礎やWebデザインの最適な画面サイズについての記事を掲載しましたが、これらの内容を踏まえたうえで今回はさらに深いレスポンシブWebデザインについての考えてみました。
自分もデザインする時に、「このサイトにはどのようなレイアウトが最適だろうか」と考えながら、レイアウトについてよく分からなくなることがあるので、自分の脳内を整理するためにもレスポンシブのWebデザインのレイアウトについて改めてまとめてみました。
レスポンシブWebデザインの代表的なレイアウトには以下のような種類があります。
（今回は自分がよく使用するレイアウトのみのご紹介となります、、）
ブレイクポイントを設定したレイアウト
画面幅に対して百分率等の相対単位を指定したレイアウト
リキッドレイアウトに最小幅と最大幅を指定するレイアウト
これらのレイアウトにはそれぞれ特徴と、メリット・デメリットがあります。
主観にはなりますが、これらの特徴やメリット・デメリットを自分の知る限りご紹介します！
レスポンシブレイアウトとは、デザインが切り替わるブレイクポイントを指定するレイアウトです。
（ブレイクポイントは、デザインが切り替わるタイミングの画面サイズのことです。）
例えば、横長デザインが最適なPC画面サイズから、縦長サイズが最適なタブレット画面サイズに切り替わるタイミングでブレイクポイントを設定することで、それぞれの画面比率に合ったレイアウトでサイトを表示することが可能です。
リキッドレイアウトとは、画面幅に対して百分率等の相対単位で指定することで、マルチデバイスに対応できるレイアウトです。
例えば、画面幅に対して100％と指定した場合に、どの形やサイズで閲覧した場合でも同じデザインで表示されます。
フレキブルレイアウトとは、画面幅に対して百分率等の相対単位を指定したリキッドレイアウトに最小幅と最大幅を指定するレイアウトです。
例えば、1300px以下は画面幅に対して100％と指定し、さらに768px以下よりレイアウトを変更することで、それぞれの画面比率に合ったレイアウトで同じデザインで表示することが可能です。
フレキブルレイアウトは、組み合わせ方を変えることで、制作するサイトに適したデザインを作成することが可能なため、様々なパターンのレイアウトを作成することが可能です。
画像サイズ、テキストサイズにも見え方が異なるため、注意が必要になります。
テキストサイズも画面幅に合わせて可変することで見え方に一貫性を持たすことが可能です。
このようなことにも注意しながらデザインを作成することで、よりユーザビリティーの高いWebサイトになるのかなと思います。
今回はレスポンシブWebデザインのレイアウトについて自分なりの見解でご紹介しましたが、おそらくまだまだ考える必要があることや、注意する点が多くあると思います。
また、フレキシブルレイアウトの最善なデザインももっと考えられると思うので、今後も試行錯誤しながらレスポンシブWebデザインのレイアウト向き合っていきます。
今後も、どのようなデザインが一番良いかということを模索ながら、より良いWeb制作を考えていきたいです！
