---
url: "/ja/weblify/advanced/import-website.md"
description: "無料のWeblify Chrome拡張機能で、Webページや選択した要素を、デスクトップ、タブレット、モバイル、カスタムのサイズでFigmaにコピーします。"
---

# WebサイトをFigmaにインポートする

> 無料のWeblify Chrome拡張機能で、Webページや選択した要素を、デスクトップ、タブレット、モバイル、カスタムのサイズでFigmaにコピーします。

Weblify Figmaプラグインでは、Webサイトのインポートに無料の[Weblify Chrome拡張機能](https://chromewebstore.google.com/detail/weblify-copy-websites-to/dfdmkfjpaoomaiobpaggkkkbhcjccjbb?utm_source=weblify_docs&utm_medium=documentation&utm_campaign=weblify_chrome_extension)を使います。拡張機能はブラウザ内で直接動作し、現在のログインやブラウザのセッションを使うページにも対応しています。

## Webサイトをインポートする {#import-a-website}

1. [Weblify Chrome拡張機能](https://chromewebstore.google.com/detail/weblify-copy-websites-to/dfdmkfjpaoomaiobpaggkkkbhcjccjbb?utm_source=weblify_docs&utm_medium=documentation&utm_campaign=weblify_chrome_extension)をインストールします。
2. コピーしたいWebページをChromeで開きます。
3. Weblify拡張機能のアイコンを選択して、ページ上にツールバーを開きます。
4. **Current Window Size**のままにするか、サイズのコントロールを開いて1つ以上のキャプチャサイズを選びます。
5. ページ全体をコピーするには**Copy page**、1つの要素を選ぶには**Pick element**を選択します。
6. **Copied to clipboard**の確認が表示されるまで待ちます。ページをコピーするときは、Weblifyがスクロールとコンテンツの準備を終えるまで待ってください。
7. Figmaファイルに戻り、macOSではCommand + V、WindowsではCtrl + Vで貼り付けます。

> **Tip:** Weblify Figmaプラグインの **⋯** メニューから**Import website**を選び、**Download the Chrome Extension**を選択することもできます。

## キャプチャサイズを選ぶ {#choosing-capture-sizes}

Weblifyのロゴの横にあるサイズのコントロールを開くと、**Capture sizes**が表示されます。コントロールには選択したサイズが表示され、複数選択している場合は**2 sizes**のように数が表示されます。

| サイズ | ブラウザのビューポート |
| --- | --- |
| **Current Window Size** | 現在のブラウザウィンドウのコンテンツの幅と高さ。ウィンドウのサイズを変えると寸法も更新されます。 |
| **Desktop** | 1440 × 900ピクセル |
| **Tablet** | 768 × 1024ピクセル |
| **Mobile** | 390 × 844ピクセル |
| **Custom** | 幅を280〜2560ピクセル、高さを320〜2400ピクセルで入力します。 |

複数のチェックボックスを選択すると、名前付きの別々のフレームとして横に並べてFigmaにコピーできます。少なくとも1つのサイズは選択されたままになります。選択内容は、**Restart**を使っても、Webページを再読み込みするまで保持されます。

**Copy page**では、選択した各幅でページの高さ全体が含まれます。高さの設定はページのレイアウトに使うビューポートを決めるもので、結果をその高さで切り取るわけではありません。**Pick element**では、選択した要素を、選んだ各サイズでの表示どおりにコピーします。

> **Tip:** 現在のレイアウトのままライブのページをキャプチャするには、**Current Window Size**だけを使ってください。ほかのサイズではページのコピーをリフローするため、JavaScriptで制御されるコンテンツ、埋め込みコンテンツ、canvasのグラフィックは異なる場合があります。

## コピーの前にコンテンツを読み込む {#loading-content-before-copying}

**Copy page**は、キャプチャの前にページを自動でスクロールします。これにより、遅延読み込みの画像や、スクロール時に表示されるセクションが読み込まれます。その後、Weblifyは元のスクロール位置に戻し、準備したページを選択したサイズでキャプチャします。

無限に続くフィードのあるページが延々と読み込み続けないように、準備には時間とスクロールの上限があります。読み込みが非常に遅いコンテンツ、無限フィードの後半の項目、スクロール時にサイトが削除するコンテンツは、含まれない場合があります。**Pick element**では、事前にページが自動でスクロールされることはありません。

足りないものがある場合は、その場所まで自分でスクロールし、表示されるのを待ってから、**Current Window Size**だけを選択した状態で**Pick element**をお試しください。

## 要素を選ぶ {#choosing-an-element}

[Video](/assets/videos/weblify/inspect/chrome-element-inspect.mp4)

**Pick element**を選択し、ページ上にマウスを合わせて、コピーしたい要素をクリックします。上下のコントロールを使うと、コピーする前に親要素や子要素に移動できます。

選択した要素が選んだサイズのいずれかで非表示になっている場合、Weblifyは空のフレームをコピーせずにエラーを表示します。要素が表示されるサイズを選んで、もう一度お試しください。

コピーが成功したら、**Restart**を選択してサイズの選択を保ったままツールバーに戻るか、確認の通知を閉じます。

> **Warning:** ブラウザの内部ページやChrome Web Storeでは、拡張機能がページにコントロールを挿入できません。Weblify拡張機能のアイコンを選択する前に、通常のWebサイトのタブを開いてください。