FigmaでWebやアプリのデザインを行う際にグリッド設定は重要な役割を果たします。

この記事では、初心者へも分かりやすいようにFigmaでのグリッド設定の基本から、デザインスタイルに合わせた最適な活用方法までを詳しく解説していきます。

グリッドを設定する方法

初歩的なフレームのサイズ設定からグリッドのカスタマイズ、他のデザインツールとの違いまでを分かりやすく解説していきます。

フレームのサイズ設定

フレームのサイズは、使用するデバイスに合わせて決める必要があります。例えば、PCサイトの場合に1440×1024など、よく使われるサイズを設定するのが一般的です。

フレームサイズを設定するには、「フレーム」ボタンをクリックしてメニューを表示し、適切なサイズを選びます。またFigmaでは、デフォルトで用意されたサイズから選択する他、カスタムサイズを入力できます。

レイアウトグリッドの追加方法

グリッドを追加するには、右側のレイアウトグリッドセクションで「＋」ボタンをクリックします。この操作で、初期設定の方眼グリッドがフレームに適用されます。

グリッドの種類を変更して「列」を選択することで、縦の線が規則的に配置されるグリットへ変更できます。

列、余白、ガターの調整

Figmaのグリッド設定では、以下の項目を調整できます。

列数	縦や横へ数カラムの構成が可能。
余白（マージン）	フレームの左右に均等なスペースを確保できる。
ガター	各列間の間隔を調整します。

例として列数の設定を紹介します。
12カラムの設定では、余白やガターを26pxとすることで視覚的なバランスが取れたデザインが可能になります。

 

グリッド数と設定の推奨値

一般的に使用されるカラム数には、以下のような推奨値があります。

12カラム	Webデザインの標準。レスポンシブデザインにも対応しやすい。
16カラム	より詳細なレイアウトが必要な場合に使用。
6~8カラム	モバイルデザインに最適。

プロジェクトに応じてこれらを使い分けての活用が可能です。

グリッドの便利な活用テクニック

複数のデバイスサイズに合わせる方法

デバイスごとの異なるサイズにグリッドを最適化することで、一貫したデザインを保つことができます。

右・左余白（マージン）の詳細設定

グリッドの余白（マージン）は、デザインの見栄えやバランスに大きく影響します。Figmaでは、「右揃え」や「左揃え」を利用して簡単に余白を設定できます。


右余白を設定する場合は、レイアウトグリッドの「数」を1に設定し、「右揃え」を選択します。ガター（間隔）を適宜調整し、視覚的にわかりやすい色を設定することで、余白が明確になります。同様に、左余白も「左揃え」を選び、同じ手順で設定します。

これにより、デザインの余白部分が一目で理解できます。

ガター調整で数値を微調整する

ガターとはカラム間の間隔を指します。Figmaでは、レイアウトグリッドの設定画面でガターの数値を直接入力することで調整が可能です。


例えばガターを26pxに設定する場合、「カラム数」や「余白」とのバランスを考慮して微調整します。具体的には、デザインが混雑して見える場合はガターを広げます。反対に、要素が離れすぎている場合はガターを狭めます。

このように細かな調整を行うことでグリッドの制度を上げることが可能です。

グリッドの色を変える

わかりやすいグリッド設定は、デザイン作業を効率化します。Figmaでは、グリッドの色や透過率を自由にカスタマイズできます。


例えば、背景が明るい場合にはグリッドの色を濃い青や緑に設定し、透過率を50%程度にすることで、デザインとのコントラストを高めることができます。逆に、背景が暗い場合は背景より明るい色に設定することで視認性を向上させます。

Layout Grid（レイアウトグリッド）を活用する方法

こちらの記事では、レイアウトグリットの主な設定方法を紹介しました。 後半の記事では、「Figmaのグリッドでよく使うデザインスタイル」「レスポンシブデザイン」といったより実践的な設定方法や活用法を紹介しています👇