---
url: "/ja/pixelay/compare-designs.md"
description: "Pixelay Webアプリで、オーバーレイ、各種モード、ツールを使ってFigmaのデザインと公開中のURLを比較するためのガイドです。"
---

# ブラウザでFigmaのデザインを実際のWebサイトのURLと比較する

> Pixelay Webアプリで、オーバーレイ、各種モード、ツールを使ってFigmaのデザインと公開中のURLを比較するためのガイドです。

Pixelay FigmaプラグインでURLを生成したら、そのURLをWebブラウザで開いてPixelay Webアプリを使い始めます。Webアプリでは、Figmaプラグインでアップロードしたデザインを、Webサイトの開発ビルドのURLと比較できます。

Webアプリは、比較する各URLを[iFrame](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe)として読み込み、その上にFigmaのデザインを重ねて表示します。アップロードした各画像のサイズが各iFrameの幅と高さに使われるため、Webサイトのビルドの「レスポンシブ性」を、Figmaで意図したデザインと照らし合わせて確認できます。

> **Note:** **Pixelay Chrome拡張機能をインストールしてください**。PixelayでデザインとURLを比較できるようにするには、[Pixelay Chromeプラグイン](https://chrome.google.com/webstore/detail/pixelay-for-figma/gnbafbeabkbkecmbedfgebgboicpnkpp)をインストールしてください。バックグラウンドで動作し、ブラウザでプラグインのURLを検出するとPixelayを読み込みます。

## ページをスクロールしてすべてのフレームを表示する {#scrolling-the-page-to-view-all-of-your-frames}

[Video](/assets/videos/pixelay/compare/web-overview.mp4)

ページ内は、縦と横のスクロール（マウスホイール、またはスクロールバーのクリックとドラッグ）だけで移動できます。左右にスクロールするとアップロードしたすべてのフレームを、上下にスクロールすると各フレームのコンテンツ全体を確認できます。

> **Tip:** Pixelayのプロジェクトに20個を超えるFigmaフレームがある場合、すべてのURLを一度に読み込んでページが重くなるのを避けるため、Chrome拡張機能は自動的に1度に1つのフレームだけを表示して比較する方式に切り替わります。画面右下のコントロールパネルでFigmaフレームを選ぶと、フレームを切り替えられます。

## FigmaのデザインとWebサイトのビルドのモードを切り替える {#toggling-between-the-figma-design-and-website-build-modes}

[Video](/assets/videos/pixelay/compare/toggler.mp4)

元のFigmaデザインとWebサイトのビルドをすばやく切り替えるには、Pixelayのコントロールパネルにある**Original Figma Design**と**Live Website Build**のアイコンボタンをクリックします。

それぞれをクリックすると選択したモードに切り替わり、もう一方のモードから切り離して、それぞれを単独で確認できます。

> **Tip:** **公開中のWebサイトのプレビューを操作する**。オーバーレイのモードを**Live Website Build**に切り替えると、ページを操作できます。フォームの入力欄を使ったり、何かをクリックしたりして、公開中のWebサイトの見た目を比較対象の元のFigmaデザインに近づけたいときに便利です。

## 透明オーバーレイモードを使う {#using-the-transparent-overlay-mode}

[Video](/assets/videos/pixelay/compare/opacity-slide.mp4)

不透明度を変えながらFigmaのデザインとWebサイトのビルドを比較するには、**Transparent Overlay**アイコンボタンをクリックしてこの比較モードを有効にします。透明オーバーレイモードが有効になります。

**Overlay Opacity**スライダーをクリック（長押し）してドラッグすると、元のデザインと公開中のURLの間の透明度を指定できます。

## 分割画面オーバーレイモードを使う {#using-the-split-screen-overlay-mode}

[Video](/assets/videos/pixelay/compare/swiper.mp4)

画面を分割してFigmaのデザインとWebサイトのビルドを比較するには、**Split Screen Overlay**アイコンボタンをクリックしてこの比較モードを有効にします。分割画面オーバーレイモードが有効になります。

各デザインの中央にある青い**Split Line**をクリック（長押し）してドラッグすると、元のデザインと公開中のURLをそれぞれどれだけ同時に表示するかを指定できます。

## 差分オーバーレイモードを使う {#using-the-blend-diff-overlay-mode}

[Video](/assets/videos/pixelay/compare/diff.mp4)

差分の描画モードでFigmaのデザインとWebサイトのビルドを比較するには、**Blend-Diff Overlay**アイコンボタンをクリックしてこの比較モードを有効にします。差分オーバーレイモードが有効になります。

**Overlay Opacity**スライダーをクリック（長押し）してドラッグすると、元のデザインと公開中のURLの間の透明度を指定できます。

## ドラッグ可能なオーバーレイモードを使う {#using-the-draggable-overlay-mode}

[Video](/assets/videos/pixelay/compare/draggable.mp4)

すべてのデザインでオーバーレイの位置を手動で調整するには、**Draggable Overlay**アイコンボタンをクリックしてこの比較モードを有効にします。ドラッグ可能なオーバーレイモードが有効になります。

**Overlay Opacity**スライダーをクリック（長押し）してドラッグすると、元のデザインと公開中のURLの間の透明度を指定できます。

## ピクセル定規を使う {#using-the-measure-pixels-ruler}

[Video](/assets/videos/pixelay/compare/measure.mp4)

ページ上の要素間の距離をピクセル定規で測るには、**Measure Pixels**アイコンボタンをクリックしてこの計測モードを有効にします。ピクセル計測モードが有効になります。

このモードが有効な間は、ページ上の任意の2点の間をマウスカーソルでクリック（長押し）してドラッグすると、ピクセル単位の距離を測れます。

**Overlay Opacity**スライダーをクリック（長押し）してドラッグすると、元のデザインと公開中のURLの間の透明度を指定できます。

## 環境のURLを切り替える {#toggling-between-environment-urls}

[Video](/assets/videos/pixelay/compare/select-environment-url.mp4)

比較するデザインをアップロードする前に、Pixelay Figmaプラグインで[追加の環境URLを設定](/ja/pixelay/upload-designs#adding-multiple-environment-website-urls-optional)していれば、Pixelay Webアプリのコントロールパネルにある**Change Environment Base URL**ドロップダウンで、それらを切り替えられます。

Pixelayのプレビュー内のすべてのフレームで、ベースURLが自動的に切り替わります。たとえば`https://dev.yoursite.com`を選ぶと、ページごとのURLも含めて、すべての`https://www.yoursite.com`のURLのベースURLが`dev.yoursite.com`に変わります（たとえば、ページURLを`https://www.yoursite.com/about`に設定したFigmaフレームでは、代わりに`https://dev.yoursite.com/about`が読み込まれます）。

## ホットリロードが有効な開発環境で使う {#using-with-a-hot-reload-enabled-development-environment}

[Video](/assets/videos/pixelay/compare/hot-reload.mp4)

ローカルの開発用URLで[Hot Module Replacement（HMR）](https://webpack.js.org/concepts/hot-module-replacement/)の仕組みを使っている場合、Pixelay Webアプリ内のフレームは（iFrameで開発用URLを参照しているため）、Pixelay WebアプリのURL自体を再読み込みしなくても、リアルタイムで自動的に更新されます。

コードエディターでローカルに加えた変更は、ファイルを保存してHMRがその変更をURLに反映すると、Pixelay Webアプリにも反映されます。