Chrome 拡張機能

ウェブデザイン分析、
どんなツールを使うべき?

PixelKitはCSS検査、カラー抽出、タイポグラフィ、間隔測定(px単位)、WCAG 2.1コントラスト検査(AA 4.5:1 / AAA 7:1)を含む8つのツールを提供します。

無料4つ + Pro 9つのツールで、デザイナーと開発者のウェブデザインワークフローを完成させましょう。

PixelKitをインストールせずに体験できますか?

はい、以下で拡張機能をインストールせずにPixelKitの主要機能をすぐに体験できます。

PixelKitにはどんな機能がありますか?

無料4つ + Pro専用5つ、合計8つのコアツール

Hoverify インスペクター

無料

要素にマウスを合わせるだけで、Box Model、6つのTypography属性(font-family, size, weight, line-height, letter-spacing, color)、Layout、Background、アクセシビリティ情報をリアルタイムで表示します。

カラーパレット抽出

Pro

ウェブページで使用されているすべてのカラーを自動収集し、クラスタリングアルゴリズムでカテゴリ別に分類します。

フォントインスペクター

Pro

テキスト要素の6つの属性(font-family, size, weight, line-height, letter-spacing, color)を即座に確認できます。

WCAG コントラスト検査

Pro

WCAG 2.1の公式に基づき、前景/背景のコントラスト比をリアルタイムで計算します。AA基準4.5:1、AAA基準7:1の等級を判定します。

間隔測定

Pro

2つの要素間の水平/垂直/対角線の距離をピクセル(px)単位で、Figmaスタイルの赤い点線とともに表示します。

CSS コピー

Pro

要素のComputed CSSをワンクリックでクリップボードにコピーします。範囲選択も可能です。

グリッドオーバーレイ

無料

12カラムのCSS Gridをオーバーレイして、レイアウトの整列を視覚的に確認します。

Style Strip

Pro

4段階でCSSを段階的に除去し、HTML構造を分析します。

PixelKitの料金はいくらですか?

無料($0)で始められます。Proは月額$1または永久$20。基本4つのツールは永久無料です。

Free

$0永久
  • Hoverify インスペクター
  • Color Picker(履歴5件)
  • Grid オーバーレイ
  • Screenshot(visibleのみ)
無料でインストール
一番人気

Pro Monthly

$1/ 月
  • すべてのFree機能を含む
  • Palette Extractor
  • Font Inspector
  • Spacing Measure
  • WCAG Contrast Checker
  • CSS Copy / Style Strip
  • Visual Editor / Layout Editor
  • Quick Theme / Presets
  • APIツール全体
Proを購入する

Pro Lifetime

$20一括払い
  • すべてのPro機能を含む
  • 永久アップデート
  • 優先サポート
Proを購入する

よくある質問

PixelKitとは何ですか?+

PixelKitはウェブページのビジュアルデザインを分析・編集するChrome拡張機能です。CSS検査、カラー抽出、タイポグラフィ分析、間隔測定、WCAGコントラスト検査など8つのツールを提供します。

PixelKitはどうやってインストールしますか?+

Chromeウェブストアで「PixelKit」を検索するか、ランディングページのインストールボタンをクリックしてください。インストール後すぐにご利用いただけます。

PixelKitは無料ですか?+

はい、基本4つのツール(Hoverifyインスペクター、Color Picker、Gridオーバーレイ、Screenshot)は永久無料です。Proプランは月額$1または永久$20です。

Proプランで追加される機能は?+

Proプランでは、Palette Extractor、Font Inspector、Spacing Measure、WCAG Contrast Checker、CSS Copy、Style Strip、Visual/Layout Editor、Quick Theme、Presetsなど9つの追加ツールをご利用いただけます。

WCAGコントラスト検査はどのように動作しますか?+

WCAG 2.1の公式に基づき、前景(テキスト)と背景色のコントラスト比をリアルタイムで計算します。AA等級(4.5:1以上)とAAA等級(7:1以上)を自動判定します。

Chrome以外のブラウザでも使用できますか?+

はい、Edge、Brave、ArcなどのChromiumベースのブラウザでも、Chromeウェブストアからインストール・使用可能です。

PixelKitはどうやってインストールしますか?

Chromeウェブストアで「PixelKit」を検索するか、下のボタンをクリックするとインストールページに移動します。
無料ではじめて、必要なときにProへアップグレードできます。

Chrome ウェブストアからインストール