どんなサイトにも向いてる汎用性の高さ!グリッドデザインまとめ

スマホを操作する男性

更新日:2017年10月07日 | 公開日:2015年10月19日

サイト制作を始める前に、取り扱っている商品やサービスによって、どんなデザインが向いているのかを考える必要があります。
デザインのしやすさやサイト公開後の更新やコンテンツが増えることを考慮したサイトレイアウトは重要です。
ここでは汎用性の高さではどんなサイトにも向いている「グリッドデザイン」についてまとめてみました。

(1)グリッドデザインとは?

メニューやコンテンツがキレイに格子状に並んだサイトを見たことがありませんか?
簡単に言えば、格子状・方眼状で構成されたサイトデザインを「グリッドデザイン」と呼びます。
余白の大きさやブロックの最小単位が揃っているために、とてもすっきりしたイメージのサイトになります。

もともとは新聞や雑誌の紙面レイアウト手法であり、グリッドに沿ってブロックを組み合わせ、コンテンツの優先度によって大小を変えたりしながらページを構成していきます。

デザイン段階からグリッドラインを用いるため、個人的には作業が比較的簡単なので、お気に入りの手法の一つです。
もちろんグリッドラインは実線として表示されるわけではなく、あくまでデザイン状のガイドの役目のみです。

(2)グリッドデザインのメリットとは?

グリッドデザインは、ファーストビューである程度たくさんの量の情報を見せることができるため、どちらかというとコンテンツや情報量の多いサイト、商品数の多いページに適しています。
とはいえ情報量が少なくても、すっきり洗練されたイメージを見せることができる利点もあり、サイト公開後にコンテンツが容易に追加できるのもグリッドデザインのメリットの一つです。
テンプレートとして汎用性が高いデザインのため、WordPressなどのCMSに多く用いられています。

(3)グリッドデザインのデメリットとは?

メリットがあれば、その逆グリッドデザインを用いる際のデメリットもあります。
コンテンツを一度にたくさん見せられるというのはつまり、サイト閲覧者にとって有益な情報が見つけにくくなる恐れや、同じ形のブロックであるがゆえ、どこから見始めたのか・どこに戻るべきかなどが分かりにくくなり、サイト閲覧者が迷子になる恐れがあります。
これらはプランニングやサイト構成をしっかり企画すること、コンテンツの優先度を十分に理解しながら制作することで十分回避できます。
CMSを用いる場合は、一番見せたい情報は固定ページで制作し、常時TOPページに表示するなどで対応しましょう。

また、レスポンシブ・ウェブデザインの概念がなければ、おそらくPC向けのサイトデザインを進めてしまい、いざアクセスしてみるとレイアウト崩れを起こす、といったことが起こる恐れがあります。
ではグリッドデザインを採用してしまえばスマホ対応はできないのでしょうか?

(4)グリッドデザインでスマホ対応するには?

答えは簡単です。「モバイルファースト」で解決できます。
モバイルファーストとは、PCではなくスマホやタブレットなどのデザインから着手し、それらが固まってからPCのデザインに着手する、といったデザイン方針を指します。
こうすれば、ブロックの最小単位や、メディアクエリのブレイクポイント(閲覧環境の解像度や画面サイズによってCSSを設定すること。レスポンシブ・ウェブデザインのコーディング手法)を考えながらデザインが進められるので、レイアウト崩れを起こす恐れがなくなるのです。
レスポンシブ・ウェブデザインのデメリットは、レイアウトやデザインの自由度に制限がかかる点にあります。
最大限モバイルで見せられる情報を整理してからPCのデザインに着手するということは、一番小さい画面であるスマホのデザインをブロックの最小単位にすれば、PCのデザインの段階では、それらを整然と組み合わせていけばいいのです。

(5)秀逸なグリッドデザインサイトとは?

グリッドデザインサイトの一例を挙げておきます。

画面サイズが変わってもレイアウトが崩れることなく、また、どのデバイスで閲覧しても情報の優先度も変わりません。
閲覧者にどの情報が最優先して見られるかもきちんと整理されているため、乱雑な印象はありません。

コンテンツが増えるというこちらのサイトに最適なデザインです。
新しいコンテンツは大きく、少し古くなったコンテンツはやや小さいブロックに移動、とさせることで更新感も出ていて見やすく見飽きないサイトです。

上記に比べてブレイクポイントが少ないのが気になりますが、アーティスト写真などの取り扱いが難しい素材(トリミングやサイズ変更に制限がある)なのでさほど気になりことはありません。
情報がとても見やすく整理されています。

PCでもスマホでもメイン事業をファーストビューにすえ、新着情報(HEADLINE)以下を同一ブロックに統一しています。
デバイスが異なっても文字の大きさを変更することなく読みやすくされています。

グリッドデザインまとめ

いかがでしたか?
デザインのしやすさや情報の整理がしやすいグリッドデザイン、更新やコンテンツの追加も比較的容易なグリッドデザインは、ウィークポイントを理解していればレスポンシブ・ウェブデザインにも対応できます。
デザイン作業に入る前の情報の整理や、サイト公開後の更新頻度や方向性の方が重要なポイントとなりますので、制作前のプランニングをしっかりおこなうようにしましょう。

いま知りたいこと
コンシェルジュが解決します!

コンシェルジュサービスは
3万社以上が利用している無料の相談サービスです。

コンシェルジュ