ガターとは？意味・役割から適切な設定方法まで解説

公開日：2026-08-04

Webデザインやグラフィックデザインを学び始めると、「ガター」という言葉に必ず出会います。ガターはカラム（列）とカラムの間に設ける余白のことで、レイアウトの読みやすさや情報の整理のしやすさを大きく左右する要素です。とはいえ、「マージンとの違いがわからない」「適切な数値がわからない」「レスポンシブ対応でどう調整すればいいのかわからない」と悩む学習者は少なくありません。本記事では、ガターの基本的な意味と役割から、カラムとの比率の考え方、レスポンシブデザインにおける調整方法、Figmaやグラフィック系ツールでの具体的な設定手順までを、実務に直結する形でわかりやすく解説します。

ガターとは？グリッドデザインを構成する基本要素

ガター（Gutter）とは、グリッドレイアウトにおいてカラム（column、列）とカラムの間に設けられる余白のことを指します。Webデザインやグラフィックデザインのレイアウトは、一般的に「カラム」「ガター」「マージン」という3つの要素を組み合わせたグリッドシステムを土台に設計されます。

カラムはコンテンツを配置する縦方向の列そのもの、ガターはそのカラム同士の間にある空間、マージンはページ全体の左右外側に確保される余白です。この3つが規則的に組み合わさることで、要素の大きさや配置がバラバラにならず、ページ全体に統一感のあるレイアウトが生まれます。

とくにガターは、複数のカラムを使う多段組みのレイアウトにおいて、コンテンツ同士が視覚的にぶつからないようにするための「呼吸するスペース」としての役割を果たします。ガターの取り方ひとつで、同じ情報量でも窮屈に見えたり、逆にすっきりと整理されて見えたりするため、グリッドシステムを学ぶうえで欠かせない基本概念です。

なお、「ガター」という語自体は印刷業界で使われていた用語がWebデザインにも転用されたもので、もともとは新聞や雑誌の紙面で、ページの綴じ側（見開きの中央）にできる余白を指す言葉として使われていました。この背景を知っておくと、後述する印刷物のレイアウトとWebレイアウトの共通点も理解しやすくなります。デジタルハリウッドの用語辞典でも、こうしたデザイン用語を随時解説しています。

ガターとマージン・パディングの違い

ガターとよく混同されやすい用語に「マージン」と「パディング」があります。3つとも「余白」を表す言葉ですが、余白が発生する位置と役割が異なります。

ガターは、グリッド内部のカラムとカラムの間に生まれる余白です。マージンは、コンテンツ全体とブラウザの端（ページの外枠）との間に確保される、レイアウトの外側の余白を指します。一方でパディングは、CSSにおいて要素の境界線（ボーダー）と内部のコンテンツとの間に設ける内側の余白であり、ガターやマージンとは異なるレベル（要素単体の内部）で使われる概念です。

ページ全体を額縁と考えると、額縁とコンテンツの間の余白がマージン、コンテンツ内部で列同士を区切る余白がガター、そしてボタンやカードなど個々のパーツの中で文字や画像の周囲に取る余白がパディング、というイメージを持つとわかりやすいでしょう。

Webデザインの現場では、モバイル表示ではマージンを20〜24px程度、ガターを16px程度に設定し、画面が大きくなるにつれてどちらも段階的に広げていくという調整が一般的です。ガター・マージン・パディングは独立して設計するものではなく、カラム幅とあわせてバランスを取りながら決めていく必要がある、と考えられます。

ガターの役割・重要性

ガターは単なる「隙間」ではなく、レイアウトの読みやすさや情報設計の質を左右する重要な要素です。主な役割は次の3つに整理できます。

1つ目は、コンテンツのグルーピングです。適切なガターがあることで、どの要素とどの要素が同じまとまりに属しているのかを視覚的に伝えることができます。ガターが狭すぎると要素同士が密着して見え、関係のない情報同士が一つの塊に見えてしまうことがあります。逆に、意図的にガターを狭くして「同じグループである」ことを強調する使い方も可能で、ガターの広さそのものが情報の階層構造を表現する手段になります。

2つ目は、視線誘導のコントロールです。ガターの幅を均一に保つことで、ユーザーの視線が上から下、左から右へと規則的に流れやすくなります。逆にガターの幅が不揃いだと、視線の流れが乱れ、情報が探しにくいページになってしまいます。

3つ目は、レイアウトの余白バランス、いわゆる「ホワイトスペース（余白）」の演出です。ガターを適切に取ることで、ページ全体に程よい抜け感が生まれ、デザインが洗練された印象になります。余白の取り方に悩む学習者は多いですが、まずはガター・マージン・パディングという基本要素から数値のルールを持つことが、余白設計を体系的に身につける近道です。

カラムとガターの比率、決め方の基本ルール

ガターの幅は感覚だけで決めるのではなく、一定のルールに沿って設計すると再現性の高いレイアウトになります。実務でよく使われる考え方の一つが「8の倍数ルール」です。これは、余白やサイズをすべて8px、16px、24px、32px、48px…といった8の倍数で統一する設計手法で、主要なディスプレイ解像度（1920px、1280pxなど）の多くが8の倍数で構成されているため、端数が出にくく、要素同士のサイズ感を揃えやすいという利点があります。

グリッドシステムのカラム数は12カラムを採用するケースが多く、PCデザインではガター幅を24px前後、カラム幅をコンテンツ幅に応じて可変させる設計がよく見られます。12カラムが好まれる理由は、2・3・4・6分割のいずれにも均等に割り切れるため、2カラム構成から4カラム構成まで同じグリッドの上で柔軟にレイアウトを組み替えられる点にあります。ただし数値はあくまで目安であり、扱うコンテンツの情報量や文字サイズ、ブランドのトーンに応じて調整するのが基本方針です。

一般的なガター幅の目安

デバイスやコンテキストによって最適なガター幅は変わりますが、実務でよく採用される目安は次のとおりです。

• スマートフォン：16px前後
• タブレット：20〜24px前後
• PC（デスクトップ）：24〜32px前後

この数値はあくまで一般的な傾向であり、デザインシステムやCMSの仕様によって異なります。案件ごとに、既存のデザインシステムがあればそのルールを優先し、ゼロから設計する場合は8の倍数を基準に試作しながら微調整していく進め方が現実的です。

ガターを広くする場合・狭くする場合の判断基準

ガターを広めに取ると、コンテンツにゆとりが生まれ高級感や上質さを演出しやすくなる一方、1画面に表示できる情報量は減ります。逆にガターを狭めると情報密度を上げられますが、要素同士が近づきすぎると窮屈な印象になり、誤操作（意図しないタップやクリック）のリスクも高まります。扱うコンテンツが写真や余白を活かしたブランディング要素であれば広めのガター、一覧性が求められる管理画面やニュースサイトのような情報密度重視のコンテンツであれば狭めのガターを選ぶ、という判断軸を持っておくとよいでしょう。

レスポンシブデザインにおけるガター設計とブレークポイント調整

レスポンシブデザインでは、画面幅が変わるたびにカラム数とガター幅を調整する必要があります。一般的なブレークポイントの目安は、スマートフォンを360〜767px、タブレットを768〜1023px、PCを1024px以上とする3段階構成です。ブレークポイントを増やしすぎると管理コストが上がるため、まずは2〜3段階でシンプルに設計し、必要に応じて中間サイズを追加していくのが実務的な進め方です。

ブレークポイント別のカラム数・ガター幅の目安

画面が狭くなるほどガター幅とカラム数を小さくするのが基本ですが、極端に狭めすぎるとコンテンツ同士が詰まって見えるため、最小でも12〜16px程度は確保したいところです。逆にPCの大画面では、ガターを広めに取ることでコンテンツにゆとりが生まれ、読みやすさが向上します。

なお、カラム数を変更するとレイアウトの見え方が大きく変わるため、ブレークポイントごとにワイヤーフレームを作成し、実際の見た目を確認しながら数値を調整することをおすすめします。

Figmaでガターを設定する方法

ここからは、実務でよく使われるデザインツール「Figma」を例に、ガターを含むレイアウトグリッドの設定方法を紹介します。なお、Figmaのレイアウトグリッド機能は2025年に「レイアウトガイド（Layout guide）」という名称に変更されていますが、カラム・ガター・マージンを設定する基本的な考え方は従来と変わりません。

レイアウトガイドの作成手順

よくある設定ミスと調整のコツ

初心者がつまずきやすいポイントの一つが、マージンとガターの数値を混同してしまうことです。Figmaの設定画面ではマージンとガターが別々の入力欄になっているため、どちらの余白を調整しているのかを都度確認しながら作業すると、意図しないレイアウト崩れを防げます。

また、ブレークポイントごとに別のフレームを用意し、レイアウトガイドの設定を都度作り直す運用も一般的です。同じデザインシステム内で数値がバラバラにならないよう、コンポーネントやスタイルとしてグリッド設定を保存し、チーム内で使い回せる状態にしておくと、実務での作業効率が大きく向上します。デジタルハリウッドのWebデザイナー専攻では、こうしたFigmaでの実践的なレイアウト設計を、講師のフィードバックを受けながら学ぶことができます。

グラフィックデザイン・印刷物（DTP）におけるガターの考え方

ガターはWebデザイン特有の概念ではなく、もともとは雑誌や書籍、パンフレットといった印刷物（DTP）のレイアウトで使われてきた考え方です。印刷物の場合、ガターの取り方によってページ全体の情報密度や読みやすさが大きく変わるため、Webデザイン以上に緻密な数値設計が求められる場面もあります。

Illustratorで複数カラムのレイアウトを作成する場合は、ドキュメント設定やガイド機能を使ってカラム数とガター幅を指定し、テキストや画像をガイドに沿って配置していく方法が一般的です。InDesignのようなDTP専用ソフトでは、「マージンと段組」の設定画面でカラム数・ガター幅・マージンをまとめて指定でき、ページ全体に一括でグリッドを適用できます。冊子や雑誌のように見開きで使う媒体では、綴じ側（ノド）の余白を通常より広めに取る必要がある点も、Webデザインにはない印刷物特有の配慮です。

紙媒体のガター幅は、A4サイズの雑誌レイアウトであれば5〜10mm程度が目安とされることが多く、扱う書体のサイズや行間、写真点数に応じて調整します。Webのpx単位とは尺度が異なるため、同じ「ガター」という言葉でも、媒体によって適切な数値がまったく異なる点は覚えておきたいポイントです。グラフィックデザインとWebデザインの両方でグリッドシステムの考え方を学んでおくと、媒体をまたいだレイアウト設計にも応用が利きやすくなります。

コーディングでのガター実装（CSS Grid・Bootstrap）

デザインで決めたガターの数値は、実装段階でも正確に再現する必要があります。ここではCSS Gridと、フロントエンド開発でよく使われるCSSフレームワーク「Bootstrap」を例に、ガターの実装方法を紹介します。

CSS Gridでの実装例

CSS Gridでは、gapプロパティを使うことでカラム間・行間の余白（ガター）を指定できます。

.layout {
  display: grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap: 24px;
}

上記のようにgapに数値を指定するだけで、すべてのカラム間に均一なガターを適用できます。列方向と行方向で異なる余白を設定したい場合は、column-gapとrow-gapを個別に指定します。

Bootstrapのgutterクラス

Bootstrapのグリッドシステムでは、標準のガター幅として1.5rem（24px）が設定されており、gx-やgy-といったクラスを使うことでガターの幅を自由に調整できます。gx-は水平方向、gy-は垂直方向のガターを個別に制御するクラスで、レスポンシブなブレークポイント別の指定にも対応しています。

デザインカンプ上のガター数値と、実装で使うフレームワークの初期値が異なるケースは珍しくありません。コーディングに入る前に、使用するフレームワークのデフォルトガター幅を確認し、デザイン側の数値と揃えておくと、デザインと実装のズレを防ぐことができます。

ガター設計でよくある失敗と改善のポイント

最後に、初心者がガター設計でつまずきやすい失敗例と、その改善のポイントを紹介します。

1つ目は、ガターの数値をページ内で統一していないケースです。セクションごとにガターの幅がバラバラだと、同じサイト内でも情報の粒度が揃って見えず、雑然とした印象を与えてしまいます。

2つ目は、モバイル表示でガターを詰めすぎてしまうケースです。タップ操作のしやすさや誤操作の防止という観点からも、最低限の余白は確保する必要があります。

3つ目は、ガター・マージン・パディングの数値を混同したまま作業を進めてしまうケースです。それぞれ余白ができる位置と役割が異なるため、設定画面でどれを触っているのかを常に確認する習慣をつけることが、レイアウト崩れを防ぐ第一歩になります。

4つ目は、デザインカンプと実装後の見た目が一致しないケースです。デザイン・実装の両方で使う数値のルールをドキュメント化し、チーム内で共有しておくことが再発防止につながります。

よくある質問（FAQ）

※説明会無料・全国36校舎およびオンライン参加可・個別相談OK