メインコンテンツへ移動

Design Drift Auditor の基本的な使い方

調べたいページを開き、ツールバーのアイコンを押すだけで、そのページのデザインのばらつきを一覧にします。

色のばらつきを一覧表示した監査結果の画面

手順

  • 調べたいページを開く
  • ツールバーの Design Drift Auditor のアイコンを押す
  • サイドパネルに結果が表示される
  • 指摘をクリックすると、そのページ上の該当箇所がハイライトされる(DOM は変更しません)

結果の見かた

表示内容
指摘一覧検出したばらつきを種類ごとにまとめたもの
トークン実際に使われている色・フォント・余白の集計
要素の詳細指摘のもとになった要素と、その計算済みスタイル
余白と角丸のばらつきを示した画面

書き出し

結果は JSON / CSV / HTML で書き出せます。いずれも端末内で生成され、外部へ送信されません。

揃っているページではどう見えるか

デザインが揃っているページでは指摘がほとんど出ないことを示す画面
一貫性のあるページでは指摘がほとんど出ません

複数ページ監査の使い方へ進む