6

グリッドレイアウトでWebサイトを作るメリットと作成方法


皆さん、ウェブページをレイアウトする際、どのようにして作成をしていますか?
今回は、デザインがし易いのに対し、ページを見に来た人に
整理された綺麗なページと捉えてもらえるレイアウト方法を、ご紹介します。

グリッドレイアウトとは

グリッドレイアウト(グリッドシステムやグリッドデザイン、とも呼ばれます)は、ウェブページなどをデザインする際に使用する、手法の一つです。

新聞や雑誌など印刷物のレイアウトではよく用いられる手法で、文章や画像、余白(マージン)など
内部の構成要素の境界線が必ず格子状の線(グリッド線)に合うように配置することで
様々な大きさの画像などの要素を、複数配置したとしても、整理した見やすい構成にすることが出来
サイトを見に来た人へ、整理された綺麗なページと捉えてもらうことが出来るようになります。

ちなみに、格子線はレイアウトの決定時に仮想的に引かれる物なので、実際のデザイン上に実線が表示されるわけではありません。

引用: グリッドデザインとは|grid design|グリッドレイアウト – 意味/解説/説明/定義 : IT用語辞典
引用元ではグリッドレイアウトは”grid rayout” となっていますが、正しくは”grid layout”です

グリッドレイアウトを使用する際、自分で最適なグリッドに分割する、オリジナルグリッドを作成することは可能ですが
いちいちそのサイトに合わせたグリッドを作成していた場合、かなりの時間をロスしてしまうため
ウェブ上には様々なテンプレートも数多く存在しているので、そこからダウンロードをして、利用することをおすすめします。

その中でも有名なサイトを紹介します。

0299d8f5523cc0cf3a13e05501aab54c
960 GRID SYSTEM

960 GRID SYSTEM」という、ページの幅が960pxを基準とする、グリッドシステムのサービスがあります。

何故960pxなのか?

  • 最近主流な画面解像度は、1024×768以上であり、960pxを使用することにより、綺麗で、見やすい表示サイズとなる
  • 960という数字は、数多くの数字で区切ることが出来、柔軟にグリッドレイアウトの需要に答えることが出来る
    などがあります。

また、「960 GRID SYSTEM」のサイトで、画像の右上にある「SHOW GRID」をクリックすると、ページにグリッド線が被さり、ウェブページがグリッドレイアウトで作成されていることを表してくれます。

可変グリッドレイアウト

グリッド線に添って、要素毎に画像や文字を配置するグリッドデザインと、リキッドレイアウト(Liquid Layout)、レスポンシブデザインなどの可変要素を合わせたものが、「可変グリッドレイアウト」と言います。

また、一定のグリッドに添って要素となるブロックを並べ、画面の幅に応じてコンテンツの再配置される際に動きなどの、視覚効果を持たせることも、可能です。

ですが、この可変グリッドレイアウトはリキッドレイアウトと同じ環境対応型レイアウトとして、注目を浴びていますが、再配置によりコンテンチの位置などが変動してしまうのは、ユーザビリティに悪影響を及ぼすのではないか、という議論も発生しています。

カード型グリッドレイアウト

先ほど可変グリッドレイアウトを説明しましたが、その仲間として、カード型のグリッドレイアウトもご紹介します。

グリッドレイアウトの考え方を基本として、グリッドを使用した多様なレイアウト・デザインを行うことが、可能となります。
近年、コンテンツがカード型に整列される「カード型グリッドレイアウト」がスマートフォンや、ウェブサイトなどで、多く見られるようになっています。

その背景には、「レスポンシブデザイン」や、「フラットデザイン」、また現在Googleが推進している「マテリアルデザイン」の
流行の一因ともなっているスマートフォンや、タブレット、タブレットPCなどの普及があると言われています。

また、その中でも「マテリアルデザイン」はカード型グリッドレイアウトを多様するデザインとなります。

実はこのカード型グリッドレイアウトは、このサイトのトップページでも使用されています。

8dc06b714e534df94b85f39d9a83b647
NEST online Blog

このようにウェブデザインなどでも使用されるなど、非常に使いやすいなどの面があるのですが、メリット、デメリットがありますので、採用する際は十分に注意をして下さい。

メリット

  • 一度に多くの情報を画像付きでも見やすいため、一覧性が高く、ユーザが情報を発見しやすい
  • コンテンツが多くても、グリッドレイアウトなので形が揃っており、整理されたデザインと見せることが出来、全体の統一性が保たれる
  • コンテンツの変更が発生したとしても、配置などを気にせずに更新を行うことが出来、効率化を図ることが出来る

デメリット

  • デザインによってはページを見ているユーザが何を、どこから見るべきか戸惑う、考える可能性がある
  • 再度同じ情報を探す際、配置の頻度によっては見つけにくい可能性がある
  • 左上から右下へ配置するとしても、カード型で情報を表示しているため明確な順位付けをするのが難しい

ギャラリーなど、情報の順位差が少ないサイトでは、カード型グリッドレイアウトと相性が良いかもしれません。

コンテンツの順位付や、重要度の差を表したい場合、コンテンツのサイズや
サイズの変更が出来ない場合は背景色を変更して強調するなど、区別をする必要が出てきます。

まとめ

ウェブページでは、グリッド線に添って、コンテンツの配置・デザインをすることで、ユーザに見やすい、綺麗などの印象を持ってもらえるページを作成することが出来ます。

グリッドで規則性を持たせつつ、森永乳業さんの英語版サイトのように、部分的に遊びやの要素を取り入れるなど、アイデア次第でいくらでもデザインを変えることが出来ます。

グリッドレイアウトは、ここで紹介した情報だけではなく、日々進化しています。
海外サイトなどを巡って、様々なグリッドレイアウトのページなどを見ていると、新たなデザインのアイデアが思いつくかもしれません。

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


Next Article【Webデザイン基礎】idとclassの違いとCSSの書き方