レスポンシブデザインに必須のフルードグリッドとは

はじめまして、webディレクターの岡村です。
ディレクターという役回りを全うできるよう拙いながら、日々邁進しております。
今回は、私自身が以前から知見を深めたいことでもある、フルードグリッドというレイアウト手法について掘り下げてお伝えしてみようと思います。
フルードグリッドとは、レスポンシブwebデザインの基本の一つでありマルチスクリーンに対応したグリッドデザインのことです。

その前に、まずグリッドデザインとは？

ページを均等なマス目(カラム)に分割し、カラムに沿ってパーツを配置していくレイアウト手法です。
グリッド線に沿って部品を配置、領域のサイズを決定したりすることで、規則的で正確なレイアウトができ文字かぶりなどの破綻を防げます。

デバイスを選ばない対応が必要

グリッドデザインによって整然とレイアウトされていても、webブラウザーの横幅が変わればバランスは崩れます。
そこで考えられたのが、フルードデザインです。
リキッドデザインとも呼ばれ、可変的な横幅に対してバランスを一定に保ったままレイアウトを調整する手法です。
要素を%で指定しますが、PX単位で指定する固定幅レイアウトの方が直感的で扱いやすいためフルードデザインは難しいとも言われています。
しかしモバイルファーストが主流となった今、この可変的な手法はレスポンシブwebデザインにおいて必須となります。

そして生まれた、フルードグリッド

フルードグリッドは、個人的に上記2つのハイブリッドのような感覚で解釈しています。
グリッドデザインによってPX単位でレイアウトを整えた後で、そのレイアウトを維持したままデバイスの幅に左右されないようコンテンツの値を%に変換してフルードデザインに変更するという流れです。

まとめ

スマートなレスポンシブ対応、フルードグリッドでした。
ちなみにですがコンテンツ幅の設定(PCの場合)には、グリッドデザインでは960pxがよく採用されます。
960は約数が28もあり、要素の配置を決めるときに均等に割り付けられる可能性が高いので万能な数字です。
挙げ始めたらきりがありませんのでこれ以上の細かなことは置いておいて、ひとまず「グリッドに沿ってレイアウトを決めることでより規則的で美しいデザインができる」という点については理解していただけたかと思います。

webデザインにおいては日々様々な情報が更新されていくため、ついていくのは容易ではありませんが…
よりよい作り方で素敵なwebデザインができるよう知識の更新に努めたいと改めて思う、今日この頃です。
アドコミは、レスポンシブ対応にも力を入れています。
サイトはあるけど、デザインが古いような気がするのでリニューアルしたい！やスマホでは分かりづらいデザインをどうにかしたい！という会社様、ぜひアドコミにご用命ください。