仕事でデザイン確認やUIチェックをしていると、
「スクリーンショットを撮って → 色を調べて → 手で書く」
という作業、かなり発生しませんか？
- Text色
- Background色
- Border色
これを毎回調べて書くのは地味に時間がかかります。
そこで、実行するだけでサイトのカラーコード埋め込み資料を自動作成するChrome拡張 を作りました。
同じ作業をしている方の時短に少しでも役立てば嬉しいです。
※下の画像は上の方は削っています。縦の長さが2万px程度あるので、全体を載せることができません。
できること
現在のページを対象に
- ページ全体のスクリーンショットを取得
- 各要素のカラー情報を抽出
- 画像上に分かりやすく配置して保存
さらに：
- 同じCSSは1つの番号にまとめる
- 出現回数が多い場合は代表箇所だけ表示
- 見やすく分散して配置
- 重なりが多い場合は自動で画像分割
といった工夫を入れています。
出力モード
① 番号 + 下部凡例モード
画像上には番号だけ表示して、
画像の下に詳細をまとめます。
例：
画像上：
① ② ③
画像下：
① Text: #489274
② Background: #533394 ↘ #604933
③ Border: #5634F2
特徴：
- 視認性が高い
- ごちゃつかない
- 大量の要素でも整理しやすい
② 詳細その場表示モード
各要素の近くに直接ラベルを表示します。
例：
Text: #489274
Background: #533394 ↘ #604933
Border: #5634F2
特徴：
- その場で確認できる
- デザイン確認向き
工夫した仕様
同じCSSは同じ番号
同じ見た目の要素は：
- 同じ番号を割り当て
- 凡例も1回だけ表示
同じCSSが多い場合
同じCSSが5箇所以上ある場合：
- 離れている代表5箇所だけ表示
- それ以外は非表示
→ ノイズを大幅削減
配置の最適化
- ラベルや番号が重ならないように配置
- 重なりが多い場合は自動分割
- 短い線で対象を示す
フルページ対応
- 横幅1920px固定で統一
- 縦はページ全体を取得
- スクロール不要
仕組み（ざっくり）
- Chrome Debugger APIでページ全体をスクショ取得
- DOM全体を走査して
- computed style を取得
- Text / Background / Border を抽出
- 同一CSSをまとめる
- 位置を計算して配置（重なり回避）
- Canvasで描画して保存
※ 完全に網羅できていない場合があります
その際は手動で補完してください
インストール方法
-
下記リポジトリをダウンロード
https://github.com/uni928/chrome-color-audit-extension -
Chromeで
chrome://extensions/を開く -
「デベロッパーモード」をON
-
「パッケージ化されていない拡張機能を読み込む」
-
ダウンロードしたフォルダを選択
使い方
- 対象のページを開く
- 拡張アイコンをクリック
- モードを選択
- 番号 + 凡例
- 詳細表示
- 「ページ全体を保存」を押す
→ 自動で画像が保存されます
想定している用途
- デザイン確認
- UIレビュー
- 実装チェック
- カラーパレット抽出
- クライアントへの共有資料作成
最後に
かなり実用寄りに作っていますが、
すべてのCSSを完全に拾えるわけではありません。
そのため：
- 足りない部分は手動で補完
- 気になるところだけ重点チェック
という使い方が現実的です。
それでも、
「スクショ → 色書き」
の作業時間はかなり削減できます。
同じ作業をしている方の時短に少しでも役立てば嬉しいです。