---
url: "/ja/pixelay/overview/quickstart.md"
description: "スマートなオーバーレイで、Figmaのデザインと実際のWebサイトのURLを比較し、見た目をQAできます。"
---

# Pixelayをはじめる

> スマートなオーバーレイで、Figmaのデザインと実際のWebサイトのURLを比較し、見た目をQAできます。

[![Pixelay Figmaプラグイン](https://www.hypermatic.com/pixelay.jpg)](https://www.figma.com/community/plugin/816424186244407164/pixelay-compare-design-to-web)

## Pixelayのインストールと有効化

- [Figmaプラグインのインストールと実行](/ja/pixelay/overview/install.md): Figma内でPixelayを実行する方法
- [Pixelay Proを有効にする](/ja/pixelay/overview/pro.md): Proライセンスキーの購入方法と使い方

## Pixelayを使う

  - [Pixelayのドキュメント](/ja/pixelay/upload-designs.md): 短い画面録画付きの詳しいドキュメント
  - [Pixelayの動画チュートリアル](/pixelay/tutorials.md): ステップごとに解説する動画チュートリアル

## よくある質問

- [Pixelayのトラブルシューティング](/ja/pixelay/faq/troubleshooting.md): よくある問題とその対処法
- [Pixelayのセキュリティ](/ja/pixelay/faq/security.md): Pixelayの仕組みの詳細
- [領収書](/ja/faq/receipts.md): メールの領収書とPDFの請求書を探す
- [請求・お支払い](/ja/faq/billing.md): Proサブスクリプションを管理する
- [ライセンスのシート管理](/ja/faq/seats.md): キーに紐づけるFigmaユーザーを管理する
- [Pixelayの無料版とPro](/ja/pixelay/faq/plans.md): 無料版とProの機能を比較する

[Video](https://www.hypermatic.com/assets/videos/pixelay/PIXELAY_DEMO.mp4)

## Pixelayの機能

- 複数のFigmaデザインとURLを同時に比較できます。
- FigmaのDesign ModeとDev Modeの両方で動作し、DevシートでのQAワークフローにも対応しています。
- 複数のページを一度に比較するには、軽量な[Chrome拡張機能](https://chrome.google.com/webstore/detail/pixelay-for-figma/gnbafbeabkbkecmbedfgebgboicpnkpp)が必要です。
- 見た目のQAで、Figmaのデザインと実装済みのWebサイトを比較できます。
- 複数の画面サイズ（たとえばデスクトップ・モバイル・タブレット）に対応しており、レスポンシブデザインをテストできます。
- 開発用、テスト用、本番用の複数のURLを切り替えられます。
- 透明度、分割画面、切り替え、ドラッグ、差分のオーバーレイを使えます。
- 必要に応じて、Figmaのフレームごとに異なるWebページのURLを指定できます。
- BrowserSyncやホットモジュールリロードを通じて、localhostにも対応しています。
- 比較時の余白の違いを測れる、ピクセル定規を内蔵しています。
- FigmaとWebサイトの見た目の違いを測定・確認できます。