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 コントラスト検査
ProWCAG 2.1の公式に基づき、前景/背景のコントラスト比をリアルタイムで計算します。AA基準4.5:1、AAA基準7:1の等級を判定します。
間隔測定
Pro2つの要素間の水平/垂直/対角線の距離をピクセル(px)単位で、Figmaスタイルの赤い点線とともに表示します。
CSS コピー
Pro要素のComputed CSSをワンクリックでクリップボードにコピーします。範囲選択も可能です。
グリッドオーバーレイ
無料12カラムのCSS Gridをオーバーレイして、レイアウトの整列を視覚的に確認します。
Style Strip
Pro4段階でCSSを段階的に除去し、HTML構造を分析します。
PixelKitの料金はいくらですか?
無料($0)で始められます。Proは月額$1または永久$20。基本4つのツールは永久無料です。
Pro Monthly
- ✓すべてのFree機能を含む
- ✓Palette Extractor
- ✓Font Inspector
- ✓Spacing Measure
- ✓WCAG Contrast Checker
- ✓CSS Copy / Style Strip
- ✓Visual Editor / Layout Editor
- ✓Quick Theme / Presets
- ✓APIツール全体
よくある質問
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へアップグレードできます。