最新版、レスポンシブ対応のレイアウト・グリッドデザイン徹底解説

Post on:2020年12月4日

はじめに

私は、グリッドを使った作業が便利だと感じています。グリッドはさまざまなレイアウト間の一貫性を維持し、デザイン上の意思決定を迅速化するのに役立つからです。グリッドを使用すると、さまざまなスクリーンサイズでの配置やレイアウトをより正確にコントロールすることができます。

この記事では、レスポンシブ対応のグリッドの最も重要な側面と、デザイナーがワークフローでグリッドをどのように適用させるかについて解説します。

グリッドとは

グリッドはカラム・溝・マージンの3つの主要なコンポーネントで構成されています。まずは、それらを理解しましょう。

カラム（columns）とは

カラムとは仮想的な垂直方向のブロックで、コンテンツを整列させるために使用されます。カラム幅は、パーセント（%）または固定値のいずれかで定義します。

レスポンシブ対応グリッドのカラム

溝（gutters）とは

溝とはカラムとカラムの間のスペースのことです。溝はコンテンツを分離するのに役立ちます。溝幅は固定値として定義します。

レスポンシブ対応グリッドの溝

マージン（margins）とは

マージンとはコンテンツとスクリーンの端の間のスペースのことです。

サイドマージン（Side Margin）幅を固定値として定義し、すべてのスクリーンサイズで最小のスペースを確保します。

フレキシブルマージン（Flexible Margin）は、カラム・溝・サイドマージンでグリッドを構成した後に、残ったスペースを占めます。フレキシブルマージンは、異なるスクリーンサイズに応じて変化します。

レスポンシブ対応グリッドのマージン

レスポンシブ対応グリッドを使用してUIをデザインするには？

コンテンツ（画像・テキスト・またはUI要素）は、可視または非可視の親コンテナの内部にラップされます。可視コンテナにはボーダーや塗りつぶしのブロックがあり、非可視コンテナには透明なブロックがあります。

可視の親コンテナには、カードやバナーなどのコンポーネントが含まれます。

カードなど、可視の親コンテナのコンテンツ

非可視の親コンテナには、テキストや機能ブロックなどのセクションが含まれます。

機能ブロックなど、非可視の親コンテナのコンテンツ

親コンテナは、カラムの端で開始および終了します。
親コンテナは、溝やサイドマージンの端で開始または終了することはできません。

親コンテナのカラムの配置

親コンテナ内のコンテンツは独立して配置されており、必ずしもカラムと整列するとは限りません。

カラム構造

グリッドを構成するために使用するカラムの数をカラム構造（column structure）と呼びます。

8, 12, 16, 20は、レスポンシブのレイアウトに最も一般的なカラム構造です。どのカラム構造を選択するかは、デザイン要件に依存します。

8, 12, 16, 20のカラム構造

中でも、12カラムの構造が最も使いやすいです。12は分解して、4-4-4または3-3-3-3にでき、親コンテナにコンテンツを整列させることができます。

ブレークポイント

ブレークポイントとは、可能な限り最良のレイアウト表示を実現するために、レイアウトが使用可能なスクリーンサイズに再調整される特定の範囲のことです。

カラム構造、カラム幅、溝幅、マージンは、ブレークポイントに依存します。親コンテナはさまざまなブレークポイントに応じてスケールまたはスタックし、可能な限り最良の表示になるように再調整します。

グリッドのスケール（ブルー）とスタック（レッド）

スケール（ブルー）は、コンテンツを収めるのに十分なスペースがある場合にはスケール（縮小）されます。スタック（レッド）は、コンテンツが収まらない場合には垂直方向にスタック（積み重ね）されます。

グリッドの振る舞い

グリッドは、異なるブレークポイントにわたって3つの異なる方法で機能することができます。

固定グリッド
流体または全幅グリッド
ハイブリッドグリッド

固定グリッド

固定グリッドは、固定幅のカラムと柔軟なマージンを持っています。
固定グリッドでは特定のブレークポイント範囲では変化しない固定コンテンツ幅があり、柔軟なマージンが残りのスペースを占めます。

固定グリッド

流体または全幅グリッド

流体グリッドは、流体幅のカラムと固定された溝と固定されたサイドマージンを持っています。
流体グリッドではスクリーンサイズに応じて端から端までの柔軟なコンテンツ幅があります。

流体グリッドでは、使用可能なスペースに合わせてカラムが拡大または縮小します。

流体または全幅グリッド

ハイブリッドグリッド

ハイブリッドグリッドには、流体幅と固定幅の両方のコンポーネントがあります。

最近のレイアウトでは、いくつかの要素がグリッドから完全にブリードオフし、スクリーンの端から端へと整列しています。ヘッダ・フッタ・フルブリードの可視コンテナや画像などが一般的な例です。
参考: 記事は中央に固定幅、画像は幅いっぱいに、フルブリードレイアウトを実装するテクニック

ハイブリッドグリッド

コンテンツ幅が使用可能なスクリーンサイズよりも大きい場合、固定グリッドは流体グリッドに変わり、コンテンツ幅はスクリーンの使用可能なスペース全体にフィットします。

ツールでレイアウトのグリッドを設定するには？

私はレスポンシブのレイアウトをデザインする時は、12カラム構造を好みます。もちろん、要件に応じて任意のカラム構造を選択できます。どのカラム構造を選択しても、基礎は変わりません。

デスクトップでの表示

1440×900, 1600×900, 1920×1080のような大きな解像度でデザインすることは、意図的でない限り、絶対に避けた方がよいです。

デスクトップの場合、1280×800を最小解像度とします。1280×800で設計されたフルードレイアウトも固定幅レイアウトも大きなスクリーンに簡単に適応できますが、その逆は非常に複雑です。

ということで、まずは1280×800サイズのアートボードから始めましょう。

固定幅レイアウトのグリッドの設定

固定幅のグリッドを設定するには、溝とカラムに固定の数値を使用します。数値は、カラムは幅74px、溝は幅32px、サイドマージンは幅16pxをお勧めします。

固定幅のグリッド

幅74pxのカラムと幅32pxの溝にすると、コンテンツの幅は1240pxになります。これに幅16pxのサイドマージンを加えると、1272pxです。

さまざまなブレークポイントで、固定幅レイアウトのコンテンツ幅が現在のスクリーンサイズよりも大きい場合、固定幅グリッドは流体グリッドとして動作します。

流体レイアウトのグリッドの設定

流体幅のグリッドを設定するには、溝には固定値を、カラムには自動算出値（%）を使用します。

流体幅のグリッド

流体レイアウトのグリッドは、メインコンテンツの幅にスクリーン全体のサイズを使用し、両端に16pxのサイドマージンを設定します。

スマホでの表示

スマホの場合は、溝とサイドマージンの数値が固定されている流体グリッドを使用します。溝は16px幅、サイドマージンは16px幅をお勧めします。

スマホのインターフェイスは、360×640サイズのアートボードでデザインします。

スマホのスクリーンの解像度は小さいです。このような小さな解像度で12分割されたカラム・溝・サイドマージンを表示すると、大規模に設計するのが非常に面倒になります。

スマホは、流体幅のグリッド

そのため、3つのグループのカラムをマージして4つのカラムを作成し、レイアウトのグリッドを保ちながら、配置を決定するのに便利なグリッドを維持します。

タブレットでの表示

タブレット用のグリッドもスマホ用とほぼ似ています。溝は32px幅、サイドマージンは16px幅をお勧めします。

タブレットのインターフェイスは、768×1024サイズのアートボードでデザインします。

タブレットも、流体幅のグリッド

タブレットでは、2つのグループのカラムをマージして6つのカラムを作成します。これですっきりとしたグリッドを設定できます。

Material Designでは、24px幅の溝とサイドマージンを明示的に推奨しています。この値をタブレットのデザインに使用することもできます。

レイアウトのバリエーション

グリッドレイアウトのバリエーションは、レイアウトの主要なコンテンツ構造を決定します。要件ごとに異なるグリッドレイアウトのバリエーションを使用します。

いくつかのページレベルのコンテナは、メインコンテンツの幅をラップします。メインコンテンツをラップするために使用されるページレベルのコンテナの数によって、レイアウトのバリエーションが決定します。

1カラムのレイアウト
2カラムのレイアウト
3カラムのレイアウト
固定幅サイドバーのレイアウト

1カラムのレイアウト

1カラムまたは全幅のレイアウトは、ランディングページやリードページによく使用されます。

1ページレベルのコンテナを使用した1カラムのレイアウト

グリッドは、12カラムをマージして1カラムの親コンテナを作成するか、12カラムを親コンテナのグループに分散させることもできます。
ただし、すべてが1ページレベルのコンテナ内にのみラップされています。

2カラムのレイアウト

2カラムのレイアウトは、2ページレベルのコンテナがあります。一般的には、1ページレベルのコンテナはもう1つのコンテナと比較して、より多くのカラムを占めます。

2ページレベルのコンテナを使用した2カラムのレイアウト

2カラムのグリッドは、9-3または8-4にカラムを分散させ、メインコンテンツの幅を作成します。1つのサイドバーを備えたページは、2カラムレイアウトの優れた例です。

3カラムのレイアウト

3カラムのレイアウトは、3ページレベルのコンテナがあります。1ページレベルのコンテナは、他の2つのコンテナと比較して、より多くのカラムを占めます。

3ページレベルのコンテナを使用した3カラムのレイアウト

3カラムのグリッドは、3-6-3または2-8-2にカラムを分散させ、メインコンテンツの幅を作成します。2つのサイドバーを備えたページは、3カラムレイアウトの簡単な例です。

固定幅サイドバーのレイアウト

固定幅サイドバーのレイアウトの機能は少し異なります。

固定幅サイドバーのレイアウト

サイドバーの幅は設定されたブレークポイントの範囲で固定されており、残りのスペースは固定または流体幅のコンテナによって占められます。サイドバーが固定されたダッシュボードは、このレイアウトの完璧な例です。

グリッド開発のハンドオフ

最初に、プロトタイピングツールでレイアウトを設計することと、コーディングをすることは大きな違いがあることを理解する必要があります。

コーディングの場合、カラムをマージするかスタックするかのどちらかになります。12カラムをマージして1カラムのレイアウトを作成することも、12カラムをスタックやパラレルグループのセットに分散させて、異なるレイアウトバリエーションの親コンテナを作成することもできます。

最新のプロトタイピングツールでレイアウトを設計する際には、デスクトップ、スマホ、タブレットに使用したカラム、溝、サイドマージンがどのようなものであるかをデベロッパーが常に認識していることを確認する必要があります。

デベロッパーは Bootstrap, Zurb Foundationなどのようなフレームワークを使用することもありますが、標準化されたアプローチではカラム、溝、サイドマージンの値がかなり異なっています。

Bootstrapはグリッドのカスタマイズが簡単

ただし、人気があるフレームワークでは、さまざまなスクリーンサイズに対応した最適なレイアウトを実現するための回避策として、グリッドに使用する値を簡単にカスタマイズができます。

終わりに

さまざまなカラム構造、カラム、溝、サイドマージンの値を試して、あなたに最適なものを見つけてください。

しかし、納期が厳しい時など、迅速な成果物に重点を置く場合は、ここで推奨した値をそのまま使用してプロ仕様のグリッドを採用してください。

ここまで読んでくれてありがとうございます

このガイドが堅固なグリッドとして、あなたのレスポンシブデザインのプロジェクトで役立つことを願っています👏👏👏

最新版、レスポンシブ対応のレイアウト・グリッドデザイン徹底解説

はじめに