01
見た目の、その先へ。
要素のCSS、サイズ、フォントをすぐに確認。
Proを1か月無料で体験Web デザインを検査。
デザイナーと開発者のための Chrome 拡張
Web デザインを検査。
Chrome の中で。
Web サイトの CSS、色、フォント、間隔を確認。レイアウト検査、ページ QA、スクリーンショットをひとつの Chrome 拡張で。
その後は月額$0.99。体験終了前にキャンセル可能。
デザインをもっと近くにデモを体験する
CSS InspectorColor PickerTypographySpacingScreenshotsPage QA
細部のためのツール
良いデザインは、細部から。
基本の4ツールはずっと無料。すべてのProツールを1か月無料でお試しください。
02
お気に入りの色を集める。
パレットを抽出し、フォントとコントラストを確認。
03
ピクセルを、あるべき場所に。
余白を測り、グリッドを確認し、画面をキャプチャ。
01
Hoverify インスペクター
無料要素にマウスを合わせるだけで、Box Model、6つのTypography属性（font-family, size, weight, line-height, letter-spacing, color）、Layout、Background、アクセシビリティ情報をリアルタイムで表示します。
02
カラーパレット抽出
Proウェブページで使用されているすべてのカラーを自動収集し、クラスタリングアルゴリズムでカテゴリ別に分類します。
03
フォントインスペクター
Proテキスト要素の6つの属性（font-family, size, weight, line-height, letter-spacing, color）を即座に確認できます。
04
WCAG コントラスト検査
ProWCAG 2.1の公式に基づき、前景/背景のコントラスト比をリアルタイムで計算します。AA基準4.5:1、AAA基準7:1の等級を判定します。
05
間隔測定
Pro2つの要素間の水平/垂直/対角線の距離をピクセル（px）単位で、Figmaスタイルの赤い点線とともに表示します。
06
CSS コピー
Pro要素のComputed CSSをワンクリックでクリップボードにコピーします。範囲選択も可能です。
07
グリッドオーバーレイ
無料12カラムのCSS Gridをオーバーレイして、レイアウトの整列を視覚的に確認します。
08
Style Strip
Pro4段階でCSSを段階的に除去し、HTML構造を分析します。
09
ページ QA
Proはみ出し、画像説明、名前、見出しの順序を確認。要素の位置表示とレポート出力に対応。
10
パレットを CSS に
Pro抽出した色を再利用できる CSS 変数に。コピーやダウンロードが可能。
PixelKitをインストールせずに体験できますか？
はい、以下で拡張機能をインストールせずにPixelKitの主要機能をすぐに体験できます。
小さな価格。頼れるツール。
基本は無料。Proのすべてを1か月無料で。
Free
$0永久
無料でインストール
- Hoverify インスペクター
- Color Picker（履歴5件）
- Grid オーバーレイ
- Screenshot（visibleのみ）
Pro Monthly
Proを1か月無料で体験$0最初の1か月
その後は月額$0.99。体験終了前にキャンセル可能。
1か月無料で始める- すべてのFree機能を含む
- Palette Extractor
- Font Inspector
- Spacing Measure
- WCAG Contrast Checker
- CSS Copy / Style Strip
- Visual Editor / Layout Editor
- Quick Theme / Presets
- APIツール全体
- ページ QA・見出し構造・JSON レポート
Pro Lifetime
$19.99一括払い
Proを購入する
- すべてのPro機能を含む
- 永久アップデート
- 優先サポート
無料体験はPro月額プランが対象です。申込時に決済情報が必要です。体験終了前にキャンセルしない場合、月額$0.99で自動更新されます。買い切りプランは別売りの$19.99です。
1
PolarでPro月額プランの無料体験を開始。
2
Polarアカウントまたはメールでライセンスキーを確認。
3
拡張機能にキーを入力してProを有効化。
よくある質問
PixelKitとは何ですか？+
PixelKitはウェブページのビジュアルデザインを分析・編集するChrome拡張機能です。CSS検査、カラー抽出、タイポグラフィ分析、間隔測定、WCAGコントラスト検査など8つのツールを提供します。
PixelKitはどうやってインストールしますか？+
Chromeウェブストアで「PixelKit」を検索するか、ランディングページのインストールボタンをクリックしてください。インストール後すぐにご利用いただけます。
PixelKitは無料ですか？+
基本の4ツールはずっと無料です。Pro月額プランは1か月無料、その後は月額$0.99。買い切りは$19.99です。
無料体験はどのように利用できますか？+
PolarでPro月額プランを選び、発行されたキーを拡張機能に入力してください。決済情報の登録が必要です。体験終了前にPolarでキャンセルしない場合、月額$0.99で更新されます。買い切りは別売りの$19.99です。
Web サイトの CSS やフォントを確認するには？+
Chrome ウェブストアから PixelKit をインストールしてサイトを開きます。ツールバーのインスペクターで要素にカーソルを合わせると CSS と文字情報を確認できます。Pro ではフォントの詳細検査と CSS コピーも利用できます。
公開前にページのデザインを検査できますか？+
Pro のページ QA は、横のはみ出し、画像説明の欠落、読み込み失敗、名前のない入力欄・ボタン・リンク、見出しレベルの飛ばしを検査します。要素の位置確認と JSON 出力に対応。iframe と Shadow DOM は対象外で、完全なアクセシビリティ監査ではありません。
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ウェブストアからインストール・使用可能です。