Dian8Dian Tools
PerfectPixel by WellDoneCode (pixel perfect)

PerfectPixel by WellDoneCode (pixel perfect)

モックアップをライブページに投稿して、コードとピクセル単位で完璧に比較してください。

開発者ツールデザインツールChromeEdgeFirefox
PerfectPixel by WellDoneCode (pixel perfect)

スクリーンショット

1 / 5
PerfectPixel by WellDoneCode (pixel perfect) — 公式Chromeウェブストア製品スクリーンショット1
PerfectPixel by WellDoneCode (pixel perfect) — 公式Chromeウェブストア製品スクリーンショット1

PerfectPixel by WellDoneCode (pixel perfect)は何をしているのか

PerfectPixel by WellDoneCode (pixel perfect)はIlya Stepanovが発行し、Chrome向けにリストされています。開発者はその目的を「モックアップをライブページにアップロードし、ピクセル単位でコードと完璧に比較する」と説明しています。このガイドは、ドキュメント化された機能、設置の入口、互換性の詳細をまとめ、あなたのタスクに合うかどうか判断できるようにします。

記録された特徴

公式リストには以下の機能が記載されています。インストール前に、必要な機能を利用可能なプラットフォームや有料機能情報と比較してください。これらは開発者の説明であり、独立したパフォーマンスやセキュリティテストの結果ではありません。

  • 「オーバーレイの位置とスケールを決めて、不透明度を調整して比較する。」

  • 「任意のウェブページにPNG、JPG、またはSVGをオーバーレイ」

  • 「リアルタイム視覚比較のための調整不透明度」

  • 「4つのブレンドモード(差分、逆転、乗算、オーバーレイ)とノーマルモード――それぞれが異なる種類のミスマッチを検出するのに役立ちます」

  • 「DevToolsデバイスモードでのモバイルデザイン:PerfectPixelをブラウザのサイドパネルに移動し、ビューポートがクリアに保つ」

  • 「ドメインごとの永続性:レイヤーは各サイトごとに保存され、ブラウザセッション間で自動的に復元される」

  • 「ドメインごとに複数層」

  • 「スケーリング、再配置、センタリングコントロール」

設置と開封PerfectPixel by WellDoneCode (pixel perfect)

Chromeウェブストアのリンクを開き、PerfectPixel by WellDoneCode (pixel perfect)とパブリッシャーのIlya Stepanovを確認し、「Chromeに追加」を選択してください。確認する前にリクエストされた権限を必ず読みましょう。インストール後、Chromeの拡張機能メニューから拡張機能へのアクセスが可能になります。ツールバーのアイコンをピン留めすることは任意です。後で無効化または削除するには、Chromeの拡張機能管理ページをご利用ください。

マニフェストはツールバーアクションを宣言します。ツールバーのエントリを使って拡張機能のアクションを開いてください。オプションページが宣言されます。拡張機能の詳細を「拡張機能管理」で開いて設定にアクセスしてください。

ドキュメント化されたワークフローの利用

まずは自分のタスクに合った操作から始めましょう。以下の行動が公式リストに記載されています。これらは別々の使用オプションであり、すべてのユーザーが必ず完了しなければならないシーケンスではありません。ここに記載されていないコントロールについては、特定のボタンやメニューが存在すると決めつけるのではなく、必ずhttps://www.welldonecode.com/perfectpixel参照してください。

  • 「オーバーレイをロックしてクリックして下のページ要素とやり取りする」

  • 「仕組みはこうです:拡張機能をインストールし、任意のページを開き、画像をドロップします。ドラッグ&ドロップ、URLを貼り付ける、クリップボードから貼り付ける、またはファイルピッカーを使うことです。」

プラットフォーム、バージョンおよびインターフェース言語

認証済みストア版:Chrome、Microsoft Edge、Firefox。キャプチャされたChromeバージョンは3.2.0.2で、2026年9月28日に更新されました。バージョン番号や機能の利用可能性は店舗によって異なる場合があります。対応する公式ストアボタンをご利用ください。ブラウザがChromiumを共有したことは、公式ストア版の別個の証拠にはなりません。

公式ストアには3つのインターフェース言語が掲載されています。このページの対応言語タグは、その製品のメタデータから来ています。これらは本ガイドで提供されている8言語とは別に存在します。現在のストアで特定の言語がワークフローに不可欠かどうかを確認してください。

価格と有料の機能

開発者は無料版、トライアル版、無料版と有料機能の両方を説明しています。お住まいの地域の現在の機能制限や価格については公式ウェブサイトでご確認ください。ブラウザパッケージのインストールと接続されたサービスの購読は別々の操作であり、ブラウザストアのボタンだけでは、どの有料機能が含まれているかは決定できません。

権限、プライバシー、実務上の制限

公開された拡張機能のマニフェストには、activeTab、scripting、sidePanel、storage、unlimitedStorageのAPI権限が一覧化されています。これらは宣言された能力であり、開発者が実際に収集したデータの証拠ではありません。アクセス許可を許可する前に、Chromeのインストールプロンプトと開発者のプライバシーポリシー(https://www.welldonecode.com/privacy/)を確認してください。

Chromeの拡張機能の詳細では、サイトアクセスの確認や拡張機能の無効化が可能です。期待されたコントロールが表示されない場合は、拡張機能が有効で、現在のサイトが説明でサポートされているものかを確認してください。単一のウェブサイトのトラブルシューティングのためにすべてのサイトへのアクセスを拡大しないでください。

PerfectPixel by WellDoneCode (pixel perfect)に関する質問

公式ダウンロードはどこにありますか?このガイドで言及されている正確な出品情報は、Chromeウェブストアボタンを使ってください。https://chromewebstore.google.com/detail/dkaagdgjmgdmbnecmcefdhjekcoceebi?hl=en.他の認証済みプラットフォームについては、それぞれのストアボタンをご利用ください。このページはインストールパッケージや修正コピーを配布していません。

機能が変わった場合、どこを探せばいいですか?現在のストアバージョンと3.2.0.2を比較し、https://www.welldonecode.com/perfectpixel.を確認してください。ストアのスクリーンショットは提供された商品画像を示していますが、後のリリースやデバイスのレイアウトは異なる場合があります。アカウント、請求、製品固有の問題は公式サポートチャネルを利用してください。