お役立ち情報

なぜグリッドはウェブデザインに重要なのか

ウェブデザインにおけるグリッドの活用方法を紹介します。グリッドは、ページ内の各要素を列と行で順番に並べていくシステムです。この構造化されたフレームワークがあれば、テキストや画像など、あらゆるデザイン要素をインターフェイス内で一貫性のある整然とした方法で配置することができます。ウェブやモバイルデザインにおいて、ページやインターフェイスをデザインする目的は、さまざまなユーザーフローを作り出すことです。ユーザーフローでは、複数の画面やウィンドウが同じようなデザインスキームやレイアウトを繰り返すことが多いため、グリッドはワイヤーフレームやテンプレート、あるいは同じようなページの標準的なレイアウトを開発しやすくなります。

また、行と列を使用してページを水平方向と垂直方向に分割するのにも重宝するでしょう。グリッドシステムは、デザイナーが要素を整理してレイアウトできる体系的なアプローチとして機能し、複数のページやレイアウトのコンポーネントを設計するためのモジュール方式を提供します。さらに、一貫した固定単位を定義し、各デザイン要素が遵守すべきサイズ、スペーシング、アライメントを決定するものです。グリッドレイアウトの概念は、印刷デザインにおいて、特に書籍や新聞などの紙面に手書き文字を配置する目的でタイポグラフィの文脈で使用されていたことに端を発しています。

現代のデザインでは、ウェブデザインやインタラクションデザイン、レスポンシブデザインが繁栄している傾向です。

グリッド作成における6つの重要なルール

1.グリッドを理解する
ウェブデザインにおけるすべてのグリッドは、大小や単純・複雑を問わず、グリッドレイアウトとして定義される共通の構成要素を持っています。

カラム
カラムは、コンテンツエリアの高さにまたがる縦長のセクションで、グリッドの「構成要素」と考えられています。グリッドのカラム数が多いほど、柔軟性が高まることが特徴です。カラムの幅の標準的な使用方法としては、デスクトップで12カラム、タブレットで8カラム、モバイルで4カラムが一般的といわれています。多くのグリッドは、カラム幅が60～80pxです。カラム幅は、実際のコンテンツの幅に影響を与える重要な要素となっています。

行数
行は、グリッドの水平方向のセクションです。興味深いことに、ウェブデザインではグリッドにおける行の役割が無視されることがよくあります。しかし、これはベストプラクティスと呼べるものではありません。行については、のちほど詳しく説明します。

モジュール
モジュールとは、行と列の交点から生まれる空間の単位です。モジュール、またはコンテンツモジュールと呼ばれることもあります。グリッドの矩形パターンが作るモジュールに各デザイン要素（テキスト、画像、ボタンなど）が収まるため、ページの構成要素と考えられている傾向です。

ガッター
ガッターは、各ユニットを区切る列と行の間の線です。一般的なガッターのサイズは20pxになります。ガッターの役割は、カラムとロウの間にネガティブスペース（大小を問わず）を形成することです。つまり、柱と柱の間の空間や、行と行の間の空間を指します。特に、石組みのレイアウトでは、ガッターの幅がレイアウトの最も重要なディテールの一つです。

マージン
マージンとは、フォーマットとコンテンツの外縁の間にある余白のことです。「外溝」と考えることもできるでしょう。一般的に、モバイルの場合のサイドマージンは、20～30pxの大きさで、デスクトップとモバイルで大きく異なります。「マージン」という言葉は、HTMLとCSSの専門用語です。デザイン要素や、コンテナの周りにスペースを作るプロパティとして使用されています。マージンのサイズは、その隣のコンテンツのサイズに影響しないため、注意しましょう。レイアウトグリッドの文脈では、特にフォーマットとコンテンツ外側のエッジ間のスペースを指します。

2.適切なグリッドレイアウトを選択する
グリッドというと、正方形に近い構造をイメージするかもしれませんが、さまざまな種類があります。ここでは、グリッドの種類を解説します。

ブロックグリッド
ブロックグリッドは、シングルカラムグリッドや原稿グリッドとも呼ばれ、最もシンプルなグリッド構造と考えられています。ブロックグリッドは、1列で構成され、1つの要素を含んだり、余白で囲まれて縦に並んだ複数の要素を含んだりすることが可能です。ブロックグリッドは、本質的にフォーマット内のスペースの大部分を占める大きな矩形領域となります。また、ブロックグリッドは広範囲のテキストや連続したテキストのブロックによく使われ、ブログのページや投稿によく見られる傾向です。さらに、カバー画像やヒーロー画像など、大きな全幅の画像もブロックグリッドの対象となります。

ブロックグリッドの最も一般的な使用例は、主に記事やブログの単一記事ページなどです。複数の幅や、フォント、ヒーロー画像、形の仕切りなどの視覚的要素を適用すると、多様で興味深いページを作成できます。ブロックグリッドが記事ページや一般的なシングル記事に最適な理由は、ストーリーを読む際の直線性を取り入れることができるからです。ページを訪問者に楽しんでもらうことを目的とする場合、縦に集中して読んでもらえるようにすればするほど、訪問者はコンテンツを受け入れやすくなるでしょう。

カラムグリッド
カラムグリッドは、複数の列で構成され、主に複数の要素を列単位で整理するために使用されます。カラムグリッドのカラム数は2つまでで、それ以上の制限はありません。ウェブデザインにおける標準的なグリッドレイアウトは、6列、9列、12列で構成されていますが、いくつのカラムが必要かはデザイナーの判断に委ねられます。カラムグリッド内に配置されたテキストや画像は、カラムの縦線と横線の配列に従うことが必要です。デザイン要素は、1つのカラム内に配置したり、2つ以上のカラムにまたがって配置したりすることもでき、さまざまなビジュアルレイアウトの作成ができます。

カラムとカラムの間隔（ガッター）は、ページ全体を通して均整がとれていることが必要です。対称的なカラムグリッドは、すべてのカラムの幅が同じで、非対称的なグリッドは一部のカラムが他のカラムよりも比例して細くまたは広くなります。

モジュールグリッド
モジュラーグリッドは、列と行で構成されています。よく市松模様に例えられ、多くの情報を一度に表示し、アクセスしやすくするのに効果的です。一般的に、モジュールグリッドはウェブデザインで整理すべき要素が複数あり、縦方向の配列・整理にのみ焦点を当てたカラムグリッドのでは不十分な場合に使用されます。携帯電話のホーム画面にアプリの全容を表示したり、eコマースサイトのカテゴリページに在庫の集合を表示したりするのが、モジュールグリッドの一般的な使用例です。ギャラリータイプは、「ジャスティファイドグリッド（完全なモジュール式）」「メイソングリッド」、または以下で説明する「階層的グリッド」のいずれかを選択できます。

階層型グリッド
階層型グリッドは、「フリースタイル」とも表現され、グリッド内の列や行に「自発的」に要素が配置されるグリッドです。つまり、列の幅と行の高さはグリッド全体で変化します。例えば、ポートフォリオサイトなどでは、作品を紹介する方法として、あらゆる高さの画像を受け入れるフリースタイルグリッドが最適です。この方法であれば、画像の高さが一定になるように妥協してトリミングする必要がありません。また、ギャラリーをスクロールする際にも、さまざまな形がダイナミックな雰囲気とユーザーフローを生み出し、興味深いものになります。

3.レスポンシブデザインを尊重する
レスポンシブデザインとは、さまざまなデバイスやブラウザの幅に対応したページレイアウトやコンテンツのことを指します。ページやサイトがレスポンシブデザインということは、ページのレイアウトやコンテンツが、異なるデバイスやブラウザの幅に適応していることを意味するのです。グリッドレイアウトでいえば、画面サイズが変われば列の数も変わり、もちろんその幅も変わります。しかし、通常のデザイングリッドとレスポンシブグリッドの間には、本質的な違いがあるのも特徴です。

デザイングリッドは、ベースライングリッドに固定されています。しかし、レスポンシブグリッドは流動的でユーザーのビューポートに応じてグリッドの列を拡大縮小したり、向きを変えたりすることが可能です。固定グリッドの場合、画面サイズを縮小すると次のブレークポイントに到達し、サイドマージンも次のブレークポイントまで自動的に縮小されます。レスポンシブグリッド（フルイドグリッドとも呼ばれる）は、ブラウザやスクリーンの縮小に応じて動的に変化する要素を見るためのものです。また、コンテンツの情報階層を論理的に表現する方法で、体系的に整列・配置します。つまり、ビューポートが縮小すると、タイルやグリッドのコンテンツもそれに応じて拡大縮小するのです。

4.ホワイトスペースの確保
ウェブ制作者は、可読性や情報階層、スケーラビリティ、デザイン要素間のスペースなど、デザインの細部においてホワイトスペースがいかに重要な役割を担っているかをご存じでしょう。レイアウトデザインにおけるホワイトスペースの重要性を考えると、ウェブサイトやレイアウトのグリッドにホワイトスペースが不可欠なことは理にかなっています。基本的に、グリッドレイアウトは列と行のサイズだけでなく、その間にあるホワイトスペースの幅と高さ（スペーシングと呼ばれる）によっても定義される傾向です。例えば、Webデザイナーがよく使うグリッドベースのデザイン手法の一つに「8ptグリッドシステム」というものがあります。これは、Googleのガイドライン「Material Design」で導入されたコンセプトです。

マテリアルデザインでは、8×8ptの正方形で構成されたグリッドを使用します。実際には、ページ上の各要素は8の倍数/割り切れる数です。面白いのは、画像やボタンやテキストなどグリッド上の要素だけでなく、ホワイトスペースの単位も8の倍数でなければならないこと。つまり、列や行をどのように配置するかを考えるとき、ホワイトスペースの量も8の倍数で測り、定義する必要があるのです。このように、グリッドデザインにおいてホワイトスペースは、カラムやロウと同じくらい重要な要素となります。ホームページでプラットフォームの価値提案が強調されることで、訪問者にとって、これから出会う付加価値が何であるかが明確になるのです。

5.黄金比の尊重
多くのデザイナーは、グリッドデザインのサイズ、バランス、レイアウトを改善しようとするとき、黄金比と呼ばれる概念を使用します。黄金比とは、1.6180に等しい比率のことです。この黄金比に基づき、長さが幅の1.6180倍の長方形を「ゴールデンレクタングル」と呼びます。つまり、横幅が100pxの場合の縦幅は161.80pxです。これは、画像やオブジェクト、シェイプを横に並べたときの幅と長さ、1つのシェイプや要素そのものの形成に当てはまります。

デザイナーは、黄金比を活用してページ上で利用可能な水平方向のスペースをどのように分割し、各要素やその周囲にどれだけのスペースを割り当てるかなどの評価が可能です。黄金長方形と黄金比は、レイアウトグリッド全体から見ると、それぞれにウェブデザイナーが選択する際の指針となります。

6.「3分の1の法則」を守る
3分の1の法則とは、視覚的にバランスのとれたグリッドレイアウトや画像配置を実現するためのウェブデザイン手法の一つです。このテクニックは、デザイン空間を水平方向と垂直方向の3分の1に分割するグリッドオーバーレイを配置します。これにより、画像やページのセクション/スペースは、線の交点で形成される9つの等しい部分になります。3分の1の法則とは、画像の3分の1の部分に「注目すべきもの」を配置することで、よりインパクトのある、視覚的に魅力的な方法でユーザーの注意を引くことができるというものです。

グリッドの重要性を理解しておこう

ウェブデザインでは、グリッドが「なぜ重要なのか」「どのように構築すればよいのか」について深く理解しておくことが大切です。ウィジェットや、コンポーネントを水平・垂直に並べたり、テキスト要素をベースラインに合わせたり、あらゆる要素をページ全体の中央に配置したりするなど、あらゆるデザイン要素に適用されることを覚えておきましょう。デザインワークフローとデザイン結果は、努力に報いるものです。