Figmaレイアウトグリッド完全ガイド|3種類と5つの実務設定

Figmaのレイアウトグリッド（2025年5月より「レイアウトガイド」に名称変更）は、フレームに配置するだけで列・行・均等グリッドの3種類を即座に使えます。設定場所が変わった影響で「出ない」「見つからない」という声が増えているため、新UIでの追加手順から実務設定例まで5つのハックで解説します。

▶ 3日で初案件PR

この記事でわかること

Figmaレイアウトグリッドには3種類あり、用途を分けるだけで整列作業が大幅に効率化される。追加手順は4ステップで完了し、Shift+G1操作で表示・非表示を切り替えられる。「グリッドが表示されない」「セクションが見つからない」は3分以内に原因を特定して解決できる。

この記事の結論

レイアウトグリッドは「フレームを選択して右サイドバーから追加するだけ」で使えます。ただしオートレイアウト内のグリッドとは別機能であり、用途を混同すると整列がずれる原因になります。表示・非表示のショートカットはShift+Gで統一されているため、まずこの1操作を覚えることが最短の習得ルートです。

今日やるべき1つ

既存の任意のフレームを選択し、右サイドバーの「レイアウトガイド」欄にある「+」ボタンを押してグリッドを追加する（2分）。

状況別ショートカット

Figmaレイアウトグリッドは3種類で用途が異なる

グリッドを追加したのに思い通りに整列できない場合、3種類の違いを把握していないことが原因のほとんどです。種類と用途の対応を整理しておくことで、設定の試行錯誤を大幅に減らせます。

均等グリッドは基準線として全面に敷くもの

均等グリッドは、フレーム全体を縦横同じ間隔のマス目で覆う設定です。アイコンの整列やピクセル単位の位置合わせに適しており、8pxや16pxなどの基準値を設定することで「8の倍数ルール」を視覚的に担保できます。デザイン全体の基準線として機能するため、Webやアプリのあらゆる画面に1枚敷いておくだけで位置ズレを防げます。

列グリッドはWebページの横分割に使う

列グリッドは、フレームを縦に分割する設定です。Webデザインにおける「12カラムグリッド」がこれに該当し、コンテンツ幅・マージン・ガター（列間の間隔）を数値で管理します。1440pxのフレームに12列を設定してマージン80px・ガター24pxを指定するだけで、エンジニアとの共通言語となるグリッドが即座に完成します。複数クライアントのデザインを管理する場合も、列グリッドの設定値をスタイルとして保存しておくと流用が容易になります（Figmaヘルプ「レイアウトガイドを作成」）。

行グリッドはカード一覧や縦リズムに使う

行グリッドは、フレームを横に分割する設定です。カード一覧・記事リスト・メニュー項目など、縦方向に繰り返す要素の高さを統一する際に使います。行の高さを64pxに設定すれば、すべてのカードの上下余白が自動的にそろい、手作業での位置調整が不要になります。注意が必要な点として、行グリッドは「等間隔に並べる」のではなく「縦のリズムを揃える基準線」として使うものであり、オートレイアウトの間隔設定とは役割が異なります。なお、Canvaの初心者向け使い方でも示されているとおり、デザインツールでは用途に応じた機能の使い分けが効率化の核心です。

オートレイアウト内グリッドはどちらとも別の機能

2024年以降のFigmaには、オートレイアウト内でフロー方向に「グリッド」を選択できる機能が追加されました。これはWebのCSS Gridに近い概念で、要素を縦横2方向に流し込む際に使います。右サイドバーで「フロー」の切り替えボタンを押すと「グリッド」に変わり、列数・行数・間隔・パディングをそれぞれ独立して設定できます。レイアウトガイドが「フレームに重ねる補助線」であるのに対し、こちらは「要素の並び方を制御するコンテナ設定」です。2つは画面上の見た目が似ているため混同しやすいですが、用途が根本的に異なるため、設計の段階でどちらを使うかを決めておく必要があります。

Q: レイアウトガイドとレイアウトグリッドは別の機能ですか？

A： 同じ機能です。2025年5月にFigmaの公式ヘルプで名称が「レイアウトグリッド」から「レイアウトガイド」に変更されました。操作内容・設定項目に変更はありません。

Q： コンポーネントにもグリッドを設定できますか？

A： フレームであれば設定できます。コンポーネント自体がフレームで作られている場合はレイアウトガイドを追加でき、そのグリッド設定はインスタンスにも引き継がれます。

レイアウトガイドの追加は4ステップで完了

「どこから追加するのか見つからない」という声は、UIのアップデートで設定項目の場所が変わったことが主な原因です。現在の正しい手順を確認しておくと、以降の作業が一気にスムーズになります。

追加手順はフレーム選択から右サイドバーで行う

第1ステップとして、キャンバス上のフレームをクリックして選択します（1分）。コンポーネントの親フレームを選ぶ場合は、Escキーを押して選択対象を親に切り替えると確実です。第2ステップとして、右サイドバーの「デザイン」タブを選択した状態で「レイアウトガイド」というセクションを探します。セクションが見当たらない場合はスクロールで下に探すか、後述の診断フローを参照してください。第3ステップとして、セクション右端の「+」ボタンをクリックすると、デフォルトで均等グリッドが1つ追加されます。第4ステップとして、追加されたグリッドの左側にあるグリッドアイコンをクリックすると詳細設定パネルが開き、均等グリッド・列・行の切り替えと数値調整が行えます（Figmaヘルプ「レイアウトガイドを作成」）。

表示・非表示の切り替えはShift+Gで即座に行える

作業中にグリッドが邪魔に感じる場面では、Shift+Gのショートカット1操作で全グリッドの表示と非表示を切り替えられます（Figmaヘルプ「レイアウトガイドを作成」）。このショートカットはMac・Windowsで共通です。個別のグリッドを非表示にしたい場合は、右サイドバーのグリッド行にある目のアイコンをクリックします。Shift+Gは全グリッドの一括切り替えであり、個別制御とは異なる点を把握しておくと誤操作を防げます。なお、Macのショートカットキー活用と同じように、ツールごとのショートカットを事前に覚えておくことで作業効率が大幅に向上します。

グリッドスタイルに保存すると複数ファイルで即再利用できる

設定した列グリッドは「スタイル」として保存することで、プロジェクト内の他フレームや別ファイルでも即座に呼び出せます。詳細設定パネルの右上にある4つのドットアイコン（スタイル追加ボタン）をクリックし、名前を付けて保存します。次回以降は右サイドバーの「+」ボタン横にあるスタイル選択アイコンから呼び出せます。クライアントごとのグリッドスタイルを保存しておくことで、新規ファイル作成時の設定時間を1ファイルあたり数分短縮できます。

Q: 複数のグリッドを同一フレームに重ねることはできますか？

A： できます。たとえば均等グリッド（8px）と列グリッド（12列）を同一フレームに重ね、基準線と列の両方を同時に表示するワークフローは実務でよく使われます。「+」ボタンを繰り返し押すことで追加できます。

Q： グリッドの色を変えることはできますか？

A： 詳細設定パネル内のカラーチップをクリックすることで、グリッド線の色と不透明度を変更できます。背景が濃い場合は白系、背景が薄い場合は青系にすると視認性が上がります。

列・行・余白は5つの仕組みで実務設定

列数や余白の数値をどう決めればよいかわからず、感覚で設定しているという方も少なくありません。実務で通用する5つの仕組みを身につけることで、クライアントへの説明も含めて根拠のある設定ができるようになります。

ハック1: 12列グリッドで汎用Webレイアウトを30秒で構築

【対象】: 1440px幅のWebデザインフレームで列グリッドを設定したいデザイナー

【手順】: フレームを1440×900pxで作成し右サイドバーでレイアウトガイドを追加する（30秒）。詳細設定を開いて「列」に切り替え、列数を12に設定する。マージンを80・ガターを24に入力して設定を完了する。

【コツと理由】: 実務では「マージンとガターを固定してから列幅を逆算する」ほうが実装との整合が取れます。エンジニアがCSSで管理するのはコンテンツ幅・マージン・ガターであり、列幅は自動計算される値だからです。マージン80px・ガター24px・12列の場合、列幅は（1440−160−264）÷12＝84.67pxと端数が出ますが、Figmaは自動補正するため設定上は問題ありません。エンジニアに渡す際は「コンテンツ幅1280px・ガター24px・12列」と伝えるほうが実装しやすくなります。

【注意点】: 列数を24や48に増やす必要はありません。12列が業界標準であり、24列以上は視認性が落ちてかえって設定ミスが増えます。複雑に見せたい場合も12列の倍数で対応できます。

ハック2: 行グリッド64pxでカード高さを自動統一

【対象】: カード一覧や商品リストなど、縦方向に繰り返す要素を整えたいデザイナー

【手順】: フレームにレイアウトガイドを追加し、詳細設定で「行」に切り替える（30秒）。高さを64pxに設定し、オフセットを0のままにする。各カード要素の高さを64の倍数（128・192・256px）に合わせてフレームサイズを調整する。

【コツと理由】: 実務では「行グリッドに合わせて高さを64の倍数に制約する」ほうがレビュー指摘が減ります。64pxは8pxグリッドの8倍であり、テキストの行間・アイコンサイズ・ボタン高さのいずれとも整合する値です。この制約を設けることで、デザイン修正時にカード高さがバラけるという問題を構造的に防げます。

【注意点】: 行グリッドを表示したままプレゼンテーションすると、クライアントがグリッド線をデザイン要素と誤認することがあります。プレゼン前にShift+Gで非表示にしてください。行グリッドを削除する必要はありません。

ハック3: 均等グリッド8pxで位置ズレを設計段階でゼロにする

【対象】: ピクセルパーフェクトな実装を求めるクライアント案件を持つデザイナー

【手順】: フレームに均等グリッドを追加し、グリッドサイズを8pxに設定する（20秒）。不透明度を10〜15%に下げて視認性を確保しながら作業の邪魔にならない濃さにする。以降、すべての要素の位置・サイズを8の倍数に制約して配置する。

【コツと理由】: 「8pxの細かいグリッドを常時表示して全要素を8の倍数に固定する」ほうが実装誤差が発生しません。これはWebブラウザのサブピクセルレンダリングの仕組みと関係しており、8の倍数に揃えることで小数点以下の計算誤差が生じにくくなります。納品データに実装誤差を指摘された経験がある場合は、まずこの設定から始めてください。

【注意点】: 不透明度を50%以上にするとグリッド線がデザイン要素より目立ち、作業の邪魔になります。15%以下に設定し、確認時のみShift+Gで非表示を解除する使い方に留めてください。

ハック4: オートレイアウトのグリッドで動的カードを列数固定で管理

【対象】: カード数が変動するリスト表示をFigmaでプロトタイプしたいデザイナー

【手順】: カード要素をすべて選択してオートレイアウトを適用する（30秒）。右サイドバーのフロー切り替えボタンで「グリッド」を選択する。列数を3〜4に設定し、水平間隔と垂直間隔をそれぞれ入力する。カードを追加・削除することで自動的に折り返す挙動を確認する。

【コツと理由】: オートレイアウトのグリッドを使えば「カードを追加するだけで自動折り返し」が実現します。仕組みはCSS Gridと同じで、列数と間隔を固定することで親コンテナがカードの流し込みを自動管理するためです。カード追加のたびに位置をずらす作業が不要になり、修正対応のスピードが向上します。

【注意点】: オートレイアウトのグリッドとレイアウトガイドの列グリッドは別物です。オートレイアウトのグリッドを設定したコンテナにさらにレイアウトガイドを重ねることはできますが、用途を混同したまま使うと設定値が食い違い、エンジニアへの仕様説明が困難になります。

ハック5: グリッド色の不透明度でダーク背景でも視認性を確保

【対象】: ダークテーマやカラフルな背景色のフレームでグリッドを使いたいデザイナー

【手順】: 詳細設定パネルのカラーチップをクリックしてカラーピッカーを開く（20秒）。白（FFFFFF）を選択し、不透明度を20〜30%に設定する。背景が薄い場合は黒（000000）・不透明度10%を試す。

【コツと理由】: 背景色に応じた色と不透明度を調整することで、グリッドが視覚ノイズに化けるリスクを防げます。デフォルトのピンク系グリッドはライトグレー背景では見やすい一方、青や濃紺の背景では判別が困難になります。白・不透明度20%は多くの背景色に対応しやすい設定です。

【注意点】: グリッド色を派手な赤や黄色にする必要はありません。グリッドはあくまで作業補助であり、目立たないほうが作業効率が上がります。

Q: ガターとマージンはどう違いますか？

A： マージンはフレームの端からコンテンツが始まるまでの余白、ガターは列と列の間の隙間です。マージンは左右に設定し、ガターは全列間で共通の値を使います。実務では「マージン80px・ガター24px」の組み合わせが1440pxのWebデザインで広く使われています。

Q： パディングとマージンは同じですか？

A： 異なります。マージンはレイアウトガイドの列設定で使う「フレーム外縁の余白」であり、パディングはオートレイアウトの「コンテナ内側の余白」です。Figmaの画面上で混在しやすいため、設定しているのがどちらの機能かを都度確認してください。

レイアウトグリッドの対応を3分で診断

「追加したのに表示されない」「右サイドバーにセクションがない」という状況は、いくつかの原因のいずれかに必ず該当します。3分以内に自分の状況を特定できます。なお、Figmaと同様にデジタルツールのトラブル対応では、まず原因を絞り込む診断が重要で、これは作業効率を上げる方法でも強調されている考え方と共通しています。

Q1: 右サイドバーに「レイアウトガイド」というセクションが表示されていますか？

表示されている → Q2へ

表示されていない → 選択しているオブジェクトがフレームか確認してください。グループやコンポーネントのインスタンスを選択している場合はレイアウトガイドのセクションが表示されません。フレームに変換するか（右クリック→フレームに変換）、または親フレームを選択し直してください。

Q2: レイアウトガイドを追加したが画面上に表示されませんか？

表示されている → Q3へ

表示されていない → Shift+Gを押して表示・非表示を切り替えてください（Figmaヘルプ「レイアウトガイドを作成」）。それでも表示されない場合、右サイドバーのグリッド行の目のアイコンがオフになっていないか確認してください。

Q3: グリッドは表示されているが位置がおかしいですか？

おかしくない → 設定完了です。

おかしい → 詳細設定パネルを開き、オフセット値・マージン値・センタリングの設定を確認してください。「中央揃え」を使いたい場合は、詳細設定内の「中央」オプションを選択することでフレームの中央にコンテンツ幅を配置できます。

Result A: セクションが見つからない場合の対処

選択オブジェクトをフレームに変換し（右クリック→フレームに変換、所要時間30秒）、再度右サイドバーを確認してください。

Result B: Shift+Gで表示できない場合の対処

Figmaのデスクトップアプリを再起動してください。ブラウザ版を使っている場合はShift+GがOSのショートカットと競合する場合があります。メニューからView→Layout Gridsを選択する方法に切り替えると確実に動作します。

Result C: 中央揃えがうまく設定できない場合の対処

列グリッドの詳細設定で「中央」を選択し、フレーム幅から「マージン×2＋ガター×（列数−1）＋列幅×列数」が総幅を超えていないことを確認してください。数値が合わない場合はマージン値を下げるか列数を減らすことで解消できます。

Q: フレームに変換するとデザインが崩れますか？

A： フレーム変換直後に要素の位置がずれることがあります。変換後すぐにCtrl+Z（Cmd+Z）でアンドゥすることで元に戻せます。変換前に対象の要素のX・Y座標を控えておくと、崩れた場合の復元が容易です。

Q： オートレイアウトのコンテナにレイアウトガイドを追加できますか？

A： 追加できます。オートレイアウトが適用されたフレームもフレームである点は変わらないため、右サイドバーからレイアウトガイドを追加できます。ただしオートレイアウトの配置制御とレイアウトガイドの補助線は独立して動作するため、両方の設定値が意図通りになっているかを都度確認してください。

実務用途は2パターンで比較

実務で繰り返し使われる2パターンを比較することで、自分のケースに当てはまるものをすぐに選べるようになります。

「今回から列グリッドを12列で設定するようにしたら、エンジニアとの仕様確認がかなりスムーズになった」という声もあります。Figmaのグリッド設定はデザイナーとエンジニアの共通言語になり得るツールであり、提案書の書き方と同じく「相手に伝わる形で情報を整理する」という考え方が根底にあります。

Webページデザインには列グリッド12列が標準

1280〜1440px幅のWebページを設計する場合、12列グリッドを使うことで「このコンテンツは何列分か」をチームで即座に共有できます。見出しを12列全幅、サイドバーを3列、メインコンテンツを9列のように指定することで、エンジニアのCSS実装との対応が明確になります。一方で、グリッドの設定値がHTMLの実装と食い違う場合は再設定の手間が発生します。初回のクライアント確認前にエンジニアへグリッド設定値を共有しておくことで、この問題は事前に防げます。

カードUI・Bento UIにはオートレイアウトのグリッドが適切

Bento UI（大小のカードを不規則に並べたダッシュボード型レイアウト）を作成する場合は、レイアウトガイドだけでなくオートレイアウトのグリッドを組み合わせる設計が有効です。親コンテナをオートレイアウトのグリッドに設定し、列数3・水平間隔16px・垂直間隔16pxを基準にすることで、カードの追加・削除が自動で折り返す動的なレイアウトが完成します。注意が必要な点として、カードの個別サイズをオートレイアウトの制約内で設定しないと、はみ出しや重なりが発生します。カードの最小幅を設定してから列数と間隔を決める順序を守ることで対処できます。

複数クライアントの案件を掛け持ちする場合は、列グリッドをスタイルとして3〜4種類保存しておく方法が最も効率的です。毎回ゼロから設定する手間をなくすだけで、新規案件の立ち上げ時間を削減できます。

Q: BentoUIのカード比率はどう決めればよいですか？

A： 親コンテナの列数と間隔を先に決め、カード1枚が何列分の幅を占めるかを整数で決めると設定が安定します。たとえば親が3列・間隔16pxの場合、大カードは2列分・小カードは1列分の幅を指定するとシンプルに管理できます。

Q： レイアウトガイドをすべてのフレームに一括適用できますか？

A： 個別フレームへの一括適用は現時点のFigmaではできません。ただし、グリッドスタイルを1つ保存しておけば、各フレームへの適用は右サイドバーから2クリックで完了するため、実務上の手間は最小限です。

まとめ: Figmaレイアウトグリッドは3種類で用途を分けて使う

Figmaのレイアウトグリッドは列・行・均等グリッドの3種類があり、用途を分けて使うことで整列作業の効率が大きく変わります。列グリッド12列はWebのカラム設計、行グリッドは縦リズムの統一、均等グリッドは8pxルールの徹底、オートレイアウトのグリッドは動的カードの折り返しと、それぞれ役割が異なります。表示・非表示のShift+Gとグリッドスタイルへの保存を日常的に使うことで、作業スピードと納品品質を同時に高められます。

迷ったときは「何を揃えたいか」から逆算してグリッドの種類を選んでください。列を揃えたいなら列グリッド、高さを揃えたいなら行グリッド、全体の基準を揃えたいなら均等グリッド。この3点を起点にすれば設定に迷うことはなくなります。

Figmaレイアウトグリッドに関するよくある質問

Q: レイアウトグリッドはFigmaの無料プランでも使えますか？

A： 使えます。レイアウトガイド（旧レイアウトグリッド）の追加・編集・スタイル保存はすべての料金プランで利用可能です。グリッドスタイルの共有については、チームライブラリ機能の利用条件がプランによって異なる場合があるため、Figma公式の料金ページで確認してください。

Q： スナップ機能とグリッドは連動していますか？

A： 連動しています。レイアウトガイドを表示した状態で要素をドラッグすると、グリッド線にスナップします。スナップが効かない場合はFigmaの設定（Preferences）でスナップが有効になっているかを確認してください。グリッドを非表示にしてもスナップは機能し続けるため、作業効率に影響しません。

Q： レイアウトガイドへの名称変更でできることは変わりましたか？

A： 変わっていません。2025年5月の変更は名称のみで、機能・設定項目・ショートカットは従来のレイアウトグリッドと同一です（Figmaヘルプ「レイアウトガイドを作成」）。古い記事や動画で「レイアウトグリッド」という用語が使われていても、操作手順は現在も同じです。

【出典・参照元】

Figmaヘルプ「レイアウトガイドを作成」 – Figma公式ヘルプ（レイアウトガイドの作成・設定方法）

基本設定と余白調整の解説 – 列数・ガター・グリッド色の設定解説

オートレイアウトとgridの実践解説 – オートレイアウトのグリッド機能と実務応用

使い方解説を含む実践寄りの体験・手順紹介 – グリッドレイアウトの実践体験談

新機能を試した体験ベースの紹介 – オートレイアウトのグリッド新機能の紹介

レイアウトガイドが出ない事例 – 表示トラブルの対処事例