Design Drift Auditor｜開いているページのデザインのばらつきを一覧にする Chrome 拡張機能
デザイン一貫性チェックツール
Design Drift Auditor
開いているウェブページの色・文字・余白・コンポーネントのばらつきを一覧にします。解析はすべてブラウザの中で完結し、ページの内容や URL を外部へ送信しません。
こんな方に：ページ数が増えるにつれて、どこから見た目がずれ始めたのか分からなくなっているサイト運営者・制作者様
このページの要点
- 開いているページのデザインのばらつきを機械的に数え上げる Chrome 拡張機能
- 解析はブラウザ内で完結。監査結果・URL・ページ内容・CSS を外部へ送らない
- 無料で現在ページの監査・結果表示・書き出しが使える
- Chrome ウェブストアへはまだ公開していない（公開準備中）
Chrome ウェブストアでの公開準備中です
公開でき次第、このページでご案内します。現時点では購入いただけません。
何をする拡張機能か
近い色が何種類も混ざっていないか。フォントが増えていないか。余白や角丸がばらついていないか。同じ役割のボタンや入力欄の見た目が揃っているか。こうした「少しずつずれていく」種類の問題を、開いているページから読み取って一覧にします。
調べられること
| 種類 | 内容 |
|---|---|
| 色 | 近い色の重複、使用箇所の数え上げ |
| タイポグラフィ | フォントファミリー・サイズ・行間の種類数 |
| 余白 | margin / padding のばらつき |
| 角丸 | border-radius のばらつき |
| コンポーネント | 同じ役割のボタン・入力欄の見た目の差 |
| コントラスト | 文字色と背景色のコントラスト比 |
無料で使えること
- 開いているページの色・文字・余白・コンポーネントのばらつきを一覧にする
- 使われている色・フォント・余白を種類ごとに数え上げる
- 指摘した箇所をページ上でハイライトする（DOM は変更しない）
- コントラスト比を確認する
- 結果を JSON / CSV / HTML で書き出す
- 保存データをすべて削除する
Pro で使えること
- 複数ページをまとめて監査し、ページ間のばらつきを比べる
- ページをまたいだデザインのずれを検出する
- 基準（baseline）を保存し、あとから差分を確認する
- 代表的な画面幅で表示を確認する
- 共有できる HTML レポートを出力する
- Claude Code へ渡せる修正指示を生成する
- プロジェクトとして結果をまとめて管理する
価格は 4,980 円（税込・買い切り）を初期価格案として掲載しています。販売開始前のため確定価格ではありません。最終価格は公開時に確定します。
| 項目 | 内容 |
|---|---|
| 課金方式 | 買い切り（一度きり）。サブスクリプションではありません |
| 有効化できる端末数 | 3 台 |
| オフライン猶予 | 72 時間（ライセンス確認ができない間も Pro を利用できます） |
| 対応言語 | 日本語 / English |
データの取り扱い
外部へ送らないもの
- 監査結果
- 閲覧している URL
- ページの内容（DOM）
- CSS
- スクリーンショット
- プロジェクトデータ
- 閲覧履歴
- フォーム入力値
ライセンスの購入・有効化・確認・解除のときだけ、最小限の情報を送信します。詳しくは データの取り扱い をご覧ください。
できないこと
- ページやコードを自動で書き換えることはしない。出すのは指摘と修正指示だけ。
- 検出は規則に基づく。すべてのデザイン上の問題を見つけることは保証しない。
- 画面幅を変えられない状況ではレスポンシブの判定を行わない。「問題なし」とは報告しない。
- 複数ページ監査は、ユーザーが許可した1つの origin に限って動く。
- Chrome Web Store へはまだ公開していない。
決済と販売者について
| 項目 | 内容 |
|---|---|
| 決済処理 | Stripe（hosted Checkout）。カード情報は拡張機能にも当社サーバーにも渡りません |
| merchant of record | Link |
| 明細表示 | LINK.COM* DESIGNDRIFT |
| Google の立場 | Google は本製品の販売者ではありません。Chrome ウェブストアは配布プラットフォームです |
本製品はまだ Chrome ウェブストアで公開していません。販売開始前のため、購入はできません。
関連ページ
この拡張機能が解決すること
「どこからズレ始めたのか」が分からなくなる前に
デザインのばらつきは、一度に壊れるのではなく少しずつ増えます。増えたあとに人の目で数えるのは現実的ではありません。
導入前
- ページを追加するたびに、微妙に違う青が増えていく
- フォントサイズが何種類あるのか誰も把握していない
- 余白や角丸がページごとに違うが、指摘するには根拠が足りない
- コントラスト不足に気づくのが、公開後の指摘を受けてから
- 「なんとなく崩れている」を、直す作業に落とし込めない
導入後
- 実際に使われている色・フォント・余白・角丸が種類ごとに数え上げられる
- 近い色の重複が、使用箇所の件数つきで一覧になる
- 指摘した箇所をページ上でハイライトして確認できる（DOMは変更しません）
- コントラスト比を数値で確認できる
- 結果をJSON／CSV／HTMLで書き出し、修正指示として渡せる
使い方
開いているページを、その場で監査する
WordPressプラグインと違い、インストール先はブラウザです。対象サイトに何かを入れる必要はありません。
-
監査したいページを開く
自分のサイトでも、参考にしたい他社サイトでも、ブラウザで開けるページであれば対象にできます。WordPress以外のサイトでも動作します。
-
拡張機能を実行する
解析はすべてブラウザの中で完結します。ページの内容も閲覧しているURLも外部へ送信しません。
-
検出されたばらつきを確認する
色・タイポグラフィ・余白・角丸・コンポーネント・コントラストの6種類で結果が並びます。該当箇所はページ上でハイライトできます。
-
直す対象を決めて書き出す
JSON／CSV／HTMLで書き出せます。Pro版ではClaude Codeへ渡せる修正指示も生成できます。
-
修正はご自身で行う
この拡張機能はページやコードを自動で書き換えません。出すのは指摘と修正指示だけです。
よくある質問
よくある質問
WordPress以外のサイトでも使えますか？
はい。ブラウザ上で動作するため、WordPressかどうかに関係なく、Chromeで開けるページであれば監査できます。対象サイトに何かをインストールする必要もありません。
監査したページの内容が外部に送信されませんか？
送信しません。監査結果・閲覧しているURL・ページの内容（DOM）・CSS・スクリーンショット・プロジェクトデータ・閲覧履歴・フォーム入力値は、いずれも外部へ送信しない設計です。送信するのはライセンスの購入・有効化・確認・解除のときの最小限の情報だけです。詳しくはデータの取り扱いをご覧ください。
ページやCSSを自動で直してくれますか？
直しません。出すのは指摘と修正指示だけです。何をどう直すかの判断と、実際の修正はご自身で行っていただく設計にしています。
すべてのデザイン上の問題を見つけられますか？
保証していません。検出は規則に基づくため、規則に当てはまらない問題は検出されません。また画面幅を変えられない状況では、レスポンシブの判定を行わず「問題なし」とも報告しません。
無料版とProの違いは何ですか？
無料版では、開いている1ページの監査・トークンの数え上げ・ハイライト表示・コントラスト確認・JSON/CSV/HTMLでの書き出しが使えます。Proでは複数ページをまとめた監査、ページ間比較、ベースライン保存と差分確認、代表的な画面幅での確認、共有できるHTMLレポート、Claude Code向けの修正指示生成、プロジェクト単位の管理が追加されます。詳しくは無料版とProの違いをご覧ください。
いつ購入できるようになりますか？
Chromeウェブストアへの公開を準備中です。公開でき次第、このページとChrome拡張機能ページでご案内します。現時点ではご購入いただけません。