【UI/UXトレンド】グリッドレイアウトでUIデザインを改善

グリッドレイアウトは、見出し・本文・画像の位置を共通の基準に沿って整理する方法です。列数を先に決めるのではなく、載せる情報と読みやすい幅を決めてから、カラム・ガター・外側の余白を調整します。

画面で配置を試す際は、PixsoのUIデザイン機能で同じカードを並べ、文字量と幅を変えながら整列のルールを検討できます。

商品一覧のように同じ項目を比較する画面では、カードの開始位置や幅をそろえると情報を追いやすくなります。一方、長い本文には無理に多くの列を設けず、読み進めやすい一つの領域を確保します。

グリッドは配置を判断するための基準であり、情報の優先順位まで自動的に決めるものではありません。重要な要素を何列分にするか、狭い画面でどの順番に並べるかは、内容に合わせて設計します。

グリッドを使う際のコツとともに、グリッドレイアウトがどんなものなのか、重要性や種類も踏まえて見てみましょう。

1. グリッドレイアウトとは？

まず最初に、グリッドとは何なのか見ていきましょう。

グリッドとは、レイアウトの領域と配置の基準を定める仕組みです。カラムを使うものもあれば、一つの本文領域を中心に構成するものもあります。補助線自体を公開画面に表示する必要はありません。

1.1グリッドの要素

グリッドの構成要素は種類によって異なります。外側の余白、カラム、行、ガターを区別すると、どの間隔を変更すべきかを説明しやすくなります。

• フォーマット

フォーマットは、デザインを配置する画面や紙面の領域です。ウェブではブラウザーの表示領域、印刷物ではページの寸法が、レイアウトを考える際の基準になります。

• 余白

画面や紙面の端とコンテンツの間に確保する領域が、外側の余白です。左右の余白を広げると内容を置ける幅は狭くなるため、文字の折り返しやカード幅と合わせて調整します。

• フローライン

フローラインは、レイアウトを水平方向に区切る線です。見出しや画像の上端など、異なる列の要素を同じ高さに置く際の基準になります。

• モジュール

モジュールは、縦と横の区切りでできる一つの領域です。モジュールを組み合わせると、画像や文章の量に応じた大きさの領域を作れます。

• 空間

隣り合う複数のモジュールをまとめると、画像や本文を置く一つの領域を作れます。ここでいう空間は、そのように用途に合わせてまとめた領域を指します。

• カラム

カラムは、コンテンツを配置する縦方向の領域です。境界線そのものではなく、幅を持つ列を指します。

• 行

行は、コンテンツを横方向に区切った領域です。カラムと組み合わせることで、カードや画像を縦横の位置に沿って配置できます。

• ガター

ガターは、隣り合うカラムや行の間に設ける余白です。繰り返し並ぶカードでは間隔をそろえ、情報のまとまりを変える場合は、その違いが伝わる間隔に調整します。

• マーカー

マーカーは、ページ番号などの補助情報を繰り返し置く位置の目印です。本文の領域とは分けて位置を定めます。

2. なぜグリッドシステムがデザインに必要なのか？

以下のような理由が挙げられます。

• コンテンツの整理：見出し、本文、画像を置く領域を分けると、情報のまとまりを示しやすくなります。

• 作業の簡易化：配置の基準を共有しておくと、要素を追加するときも位置や幅を判断しやすくなります。

• 文字の整理：本文の幅や見出しの開始位置をそろえると、文字量の多い画面でも読む順序を追いやすくなります。

• 複数ページのまとまりを維持：ページをまたいで同じ配置基準を使うと、内容が変わってもサイトの一貫性を保ちやすくなります。

• ビジュアルヒエラルキーの改善：重要な情報に広い領域を割り当てるなど、優先順位に応じてグリッドを使い分けます。

• 散らかったレイアウトの防止：要素の端や間隔を共通の基準に合わせ、意図のない位置のずれを減らします。

3.グリッドの種類

グリッドには様々な種類がありますが、ここではおすすめの4つをご紹介します。

3.1原稿グリッド

原稿グリッドは最もシンプルかつ簡単なもので、フォーマットの中でも大部分を占める長方形の場所です。本や長文のエッセイなど、広く連続したテキストのかたまりによく使用されます。

1カラムグリッドやブロックグリッドとも呼ばれています。

3.2カラムグリッド

カラムグリッドは、フォーマット内を複数のカラムに分け、各カラムに沿って情報を配置する仕組みです。

3.3モジュールグリッド

モジュールグリッドは、カラムに横方向の区切りを加え、縦横のモジュールを作る構造です。画像と文章を複数のまとまりに分ける画面や、項目を縦横に比較する一覧などに使えます。

3.4階層グリッド

階層グリッドは、情報の重要度や内容に合わせて領域の大きさと位置を決める構造です。すべての領域を同じ大きさにせず、主役となる情報と補助情報の関係を示します。

4.グリッドを使用する際の5つのコツ

4.1グリッドの構造を理解すること

デザインの複雑さや大きさにかかわらず、グリッドはレイアウトを決める共通の構成要素から成り立っています。まずは上記で紹介したグリッドシステムの構造を理解しましょう。

4.2適切なグリッドレイアウトを選択すること

本文中心なら原稿グリッド、カードの比較ならカラムやモジュールグリッドなど、情報のまとまりに合う構造を選びます。先に決めた列数に文章や画像を無理に押し込まないことが重要です。

4.3黄金比率を意識すること

黄金比は構図を検討する際の参考になりますが、UIに必須の比率ではありません。本文の読みやすさ、操作に必要な幅、画面サイズへの対応を優先し、必要な場面で補助的に使います。

4.4三分割法に従う

三分割法は、画面を縦横に三分割した線や交点を、画像などの構図を考える目安にする方法です。UI全体に必ず適用する規則ではなく、読みやすさや操作のしやすさを優先して使います。

4.5余白を作る

余白は、内容のまとまりを分けたり、見出しと本文の関係を示したりするために使います。文字や画像を詰め込みすぎず、情報を追える間隔を確保しましょう。

商品カードでグリッド幅を決める

たとえば商品画像、2行の名前、価格、購入ボタンを持つカードを作ります。次の数値は設計例です。ガターは列の「間」にあるため、12列なら11か所として計算します。

画面が狭くなったときは、デスクトップのカードを縮小するだけではなく、列数やカードの並び方を変更します。商品名が3行になるケースでも価格とボタンが重ならないか、ボタンのラベルが切れないかを確かめます。

Pixsoでは幅の異なるフレームに同じカードを配置し、カード内部の余白と、カード同士の間隔を分けて調整します。オートレイアウトの設定を変える前に、どの幅を固定し、どの領域を内容に合わせて伸ばすかを決めておくと、修正の意図を共有できます。実装時の読み順は見た目の並びだけでなく、文書の順序も含めて開発者と確認します。

 まとめ

もうグリッドデザインシステムやその重要性がお分かりいただけたのではないでしょうか。ぜひ一連の流れを踏まえて、良いUIデザインを作成してみましょう。