---
url: "/ja/weblify/overview/quickstart.md"
description: "WeblifyでWebサイトを作成・プレビュー・インスペクト・エクスポートしたり、Weblify Chrome拡張機能で既存のページをFigmaにコピーしたりできます。"
---

# Weblifyをはじめる

> WeblifyでWebサイトを作成・プレビュー・インスペクト・エクスポートしたり、Weblify Chrome拡張機能で既存のページをFigmaにコピーしたりできます。

[![Weblify Figmaプラグイン](https://www.hypermatic.com/weblify.jpg)](https://www.figma.com/community/plugin/927336249307137996)

## Weblify Figmaプラグインのインストール {#installing-the-weblify-figma-plugin}

1. 任意のFigmaファイルを開きます。
2. Figma下部のツールバーにある**Actions**アイコンをクリックします。
3. **Plugins & Widgets**タブをクリックして、結果をFigmaプラグインに絞り込みます。
4. 検索バーで**Weblify**を検索します。
5. 検索結果の**Weblify**をクリックします。
6. **Save**ボタンをクリックして、Weblifyプラグインをインストールします。

> **Note:** **Figma Organization**に所属するFigmaユーザーは、承認済みのプラグインしかインストールできない場合があります。一部のFigmaプラグインをインストールできない場合は、社内のFigma Organizationの管理者に連絡して、[Weblifyプラグインを承認](https://help.figma.com/hc/en-us/articles/4404228724759-Manage-plugins-and-widgets-in-an-organization)してもらってください。

## Weblify Figmaプラグインの実行

**Weblify** Figmaプラグインを[インストール](#installing-the-weblify-figma-plugin)したら、次の手順でFigmaファイル内でプラグインを実行します。

  1. Figmaファイルのページキャンバス上の任意の場所を**右クリック**します
  2. **Plugins** ▶ メニュー項目にマウスカーソルを合わせます
  3. **Saved plugins** ▶ メニュー項目にマウスカーソルを合わせます
  4. **Weblify**プラグインのメニュー項目をクリックします

> **Tip:** Figmaファイルで**Weblify**プラグインを一度実行すると、次回からはFigma右側の列（**Plugin**の小見出しの下）にある**Weblify**アイコンをクリックして、すばやく再起動できます。

> **Warning:** Figmaファイルでプラグインを実行できるのは、そのファイルへの**Edit**権限を持つFigmaユーザーだけです。**View**権限しかない場合、そのファイルではFigmaプラグインを一切実行できません。

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

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

## Weblifyを使う

  - [Webサイトを作成](/ja/weblify/build/site-builder.md): テンプレート、セクション、要素から編集可能なWebページを作成します
  - [Webサイトをインポート](/ja/weblify/advanced/import-website.md): 無料のChrome拡張機能で、ページや選択した要素をコピーします
  - [監査とエクスポート](/ja/weblify/build/export.md): 静的なHTML・CSSのWebサイトを検証してダウンロードします
  - [Figmaレイヤーのインスペクト](/ja/weblify/inspect/layers.md): 選択したレイヤーからHTML、Tailwind、React、Vueのコードを生成します

## よくある質問

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

[Video](https://www.hypermatic.com/assets/videos/weblify/WEBLIFY_DEMO.mp4)

## Weblifyの機能

- テンプレート、セクション、要素、レスポンシブレイアウトから、編集可能なWebページを作成できます。
- 無料のChrome拡張機能で、公開サイトやログインが必要なサイトをFigmaにコピーできます。
- 生成したWebサイトの出力を、さまざまなビューポート幅でプレビューできます。
- Weblifyのページを監査し、静的なHTML・CSSのWebサイトとしてエクスポートできます。
- 選択したFigmaレイヤーを、HTML/CSS、Tailwind、React、Vueのコードとしてインスペクトできます。
- 生成したコードをコピーしたり、画像アセット付きのコンポーネントZIPをダウンロードしたりできます。
- FigmaのAuto Layout、折り返し、最小・最大のレイアウトプロパティに対応しています。
- FigmaのDev ModeからWeblifyのコードインスペクトツールを使えます。