グリッドデザインについて考える。

Date:

Share post:

デザイナーなら誰もが一度は耳にした事であろう用語”グリッドデザイン”。
DTPなど印刷物の分野で考案され、現在ではweb業界でも多用されているデザイン手法です。グリッドデザインを取り入れることで、統制のとれた見やすく美しいデザインを作ることができます。

では具体的には、どのような手法なのか。
今回はグリッドデザインのメリット、デメリットについて考えていきたいと思います。

そもそもグリッドデザインとは?

グリッドデザインは、各コンテンツををグリッド(格子)のように並べ配置していく画面設計手法のひとつです。
均等に敷き詰められたグリッドに沿って配置していくので、整列・反復表現がしやすく、均等に整った印象のデザインを作成することができます。

TOP画像引用:未来ガ驚喜研究所 様
http://miraiga-lab.com/

グリッドデザインのメリット

・情報を整理して見せることができる
それぞれの要素の区切りをわかりやすく伝えることができるので、多くの要素を並べた際にも見やすいレイアウトを作成しやすいです。

・更新性に優れている
それぞれの要素がグリッドで区切られて配置している為、新しい要素の追加を追加した際もグリッドのルールに沿って簡単に調整が可能です。例えば商品一覧ページなど、随時新商品が追加されていくコンテンツなど動的なwebサイトにも有効な手法と言えます。

・レスポンシブデザインとの相性がいい
グリッドデザインでは、ブロックごとの区切りがわかりやすい為、カラム落としやリキッドレイアウトと組み合わせることで、SPとPC間でのデザインの調整がしやすく、様々なデバイスに対応した最適なデザインを作りやすいです。

・整列したコンテンツを配置することでサイト全体の統一感が出やすい
コンテンツが整列していることで、各要素にまとまりが生まれ、サイトの統一感がアップします。
統一感のあるサイトは操作に迷うことが少ないので、ユーザビリティの向上につながります。また、まとまりのあるサイト表現はブランディングの維持にも役立ちます。

デメリット

・情報量を多く配置できる為、配置によってはどこから見ればよくわからないサイトになりやすい
グリッドデザインはたくさんの要素を均等に配置するのに向いています。その分、整列したコンテンツを立てつづけに
配置したりしてしまうと、コンテンツごとの強弱がわかりにくくどこから見れば良いのかわからないといった問題が発生してしまう可能性があります。

・統一感があることにより、コンテンツごとの重要度の強弱が薄れやすい
均等で整列されたデザインというのは、インパクトという面では、自由に配置されたデザイン(ノングリッドデザイン)に比べると欠けてしまいがちです。統一感があるということは、逆にいえばコンテンツごとの強弱が弱いとも言えます。
情報の優先度に差がないサイトには向いていますが、コンテンツごとに強弱をつけたいといった目的がある場合、グリッドの整合性取りつつ、所々でブロックの大きさやあしらいなどを工夫して、コンテンツごとの重要度を認識させる配慮が必要になってきます。

まとめると、

  • グリッドレイアウトは更新性が高く、統一感のあるサイトの制作や、情報量の多いサイトを整理するのに向いている。
  • コンテンツごとに強弱をつけたい、インパクトのあるWEBサイト(LPなど)には向かない。

上記のことを再認識することができました。
均等の取れたレイアウトは見やすいだけでなく、更新がしやすい点もWEBと相性が良いと言えます。
向き不向きを考えながら、効果的にデザインに生かしていきたいですね。

Related articles

EC-CUBE 4系のプラグイン開発について その...

前回、プラグインを一旦有効化させて管理...

EC-CUBE 4系のプラグイン開発について その...

以前から作成したいと考えていたのですが...

Laravel Filamentを使用した管理画面...

前回Breezeをインストールしたこと...

Laravel Filamentを使用した管理画面...

前回、filamentでのリソース作成...