シンプルだから使いやすい！ レスポンシブ対応のグリッドをオーバーレイ表示できるChromeの拡張機能 -Grid Overlay Pro
Post on:2026年2月16日
sponsorsr
ブラウザに表示したあらゆるWebページにレスポンシブに対応したFigmaみたいなグリッドをオーバーレイー表示できるChromeの機能拡張を紹介します。
グリッドのオーバーレイはブラウザ内で完全にローカルで実行されるため、オンラインのWebページだけでなく、ステージングやローカル環境でもグリッドを表示できます。
Grid Overlay Proとは
Grid Overlay Proは、無料で利用できるChromeの拡張機能で、表示しているWebページにレスポンシブ用のブレイクポイントを備えたグリッドをオーバーレイで表示します。簡単に言うと、FigmaのようなグリッドをあらゆるWebページに導入できます。
デベロッパーやデザイナーが実際にブラウザ上でレイアウトや配置を確認し、ピクセル単位で完璧なレスポンシブデザインを実現するのに役立ちます。
ブラウザに表示できればグリッドを表示できるので、オンラインのWebサイトをはじめ、ステージングサーバー、ローカル環境でもグリッドを表示できます。デザインシステムの実装、レイアウトのデバッグ、レスポンシブ用のブレイクポイントの確認など、視覚的に瞬時にフィードバックが可能です。
Grid Overlay Proの特徴
Grid Overlay Proの主な特徴は、下記の通り。
- カスタマイズ可能なグリッドをオーバーレイ表示 -デザインの仕様に合わせて列・ガター・マージンなどを設定できます。
- レスポンシブ用のブレイクポイント -ブレイクポイントは複数定義が可能（スマホ・タブレット・デスクトップなど）で、自動切り替え機能でテストもできます。
- クイックプリセット -さまざまなプロジェクトに合わせて、異なるグリッド設定を保存し、切り替えることができます。
- キーボードショートカット -キーボードから手を離すことなく、グリッドのオン・オフを切り替えることができます。
- カラーのカスタマイズ -ライトやダークの両方のモードに適したグリッドカラーを設定できます。
- 邪魔にならない -オーバーレイはページの上部に表示されますが、レイアウトや機能には影響を与えません。
Grid Overlay Proは、ブラウザ内で完全にローカルで実行されます。そのため、データの収集・保存・送信は一切行われていません。グリッドなどをカスタマイズした設定データはローカルに保存されます。
この拡張機能は非常に軽量なため、ページのパフォーマンスや機能に影響を与えません。
Grid Overlay Proのインストール
Chromeウェブストアから拡張機能をインストールできます。
Chromeでアクセスし、「追加」ボタンをクリックするだけです。
Grid Overlay Pro -Chromeウェブストア
2月にリリースされたばかりなので、ユーザー数はまだ少ないですね。「Pro」がついているから有料かなと思ったのですが、完全に無料でした。
Grid Overlay Proの使い方
使い方は、簡単です。
さっそく当ブログを表示して、Grid Overlay Proを使用してみました。
拡張機能のアイコンをクリックし、「Enable Grid」をクリックします。
「Enable Grid」をクリック
まずは、「Default」をクリックして、プリセットで用意されているブレイクポイントでグリッドを表示します。
「Default」をクリック
Defaultには、3つのブレイクポイントが用意されていました。
- Mobile 0-767px 4col
- Table 768-1023px 8col
- Desktop 1024px+ 12col
デフォルトのブレイクポイントは、3種類
現在ビューポートがいくつなのかは上部に表示されています。これらのパネルは表示・非表示を切り替えることができます。
各パネルの表示・非表示
ブレイクポイントはカスタマイズが可能で、それぞれの編集ボタンをクリックすると、カスタマイズパネルが表示されます。
ブレイクポイントのカスタマイズ
グリッドやパディングのカラーもカスタマイズ可能で、下部「Colors」からカスタマイズできます。
グリッドやパディングのカラーもカスタマイズ可能
ブレイクポイントを増やすことも可能です。
ブレイクポイントの追加
sponsors
