---
url: "/ja/weblify/build/site-builder.md"
description: "テンプレート、セクション、要素、レスポンシブなレイアウトの基本パーツから、Weblifyのページを作成します。"
---

# FigmaでWebサイトを作成する

> テンプレート、セクション、要素、レスポンシブなレイアウトの基本パーツから、Weblifyのページを作成します。

Weblifyの**Add**、**Navigator**、**Style**タブでは、Webサイトのページを編集可能なFigmaレイヤーとして作成・編集できます。生成されたレイヤーにはWeblifyのメタデータが保持されるため、プラグインでプレビュー、監査し、静的なWebサイトとしてエクスポートできます。

## ページを作成する {#start-a-page}

1. **Navigator**タブを開き、**New page name**に名前を入力して**Add page**を選択します。または、**Add**タブを開いて**Templates**を選び、テンプレートを選択すると、テンプレート名の付いた新しいページとして追加されます。
2. コンテンツを追加する前に、生成されたページをFigmaのキャンバス上か**Navigator**で選択します。

何も選択されていない場合、Weblifyは最初に見つかったWeblifyページを使うか、**Home**という名前のページを作成します。**Add**タブのフィルターの下の行に、新しいコンテンツが挿入される場所が表示されます。

## セクションと要素を追加する {#add-sections-and-elements}

**Add**タブは、検索できる1つのライブラリです。**Templates**、**Sections**、**Elements**、**Layouts**のフィルターを使うか、名前で検索します。ナビゲーション、ヒーロー、コンテンツ、料金、フォーム、フッターなど、ページの完全なエリアには**Sections**を使います。個々のコンポーネントには**Elements**を使います。項目を選択すると挿入されます。

項目を挿入する前に、Weblifyのページ、セクション、または列を選択してください。これによりWeblifyが親を予測どおりに判断でき、エクスポートされる構造が保たれます。

項目に星を付けると、**Favourites**に追加されます。自分で作ったセクションを再利用するには、**Navigator**でそのセクションの **⋯** メニューを開いて**Save to My sections**を選びます。すると、**Add**タブの**My sections**に表示されます。

## 構造を編集する {#edit-the-structure}

**Navigator**タブには、ページと、現在のページのセクションが一覧表示されます。次の操作ができます。

- ページを追加し、ページやセクションをドラッグして並べ替え、**⋯** メニューで名前の変更、複製、非表示、削除、ホームページの設定を行う。
- ページの横にある **⚙** ボタンを選択してURLと検索用のメタデータを編集し、**Save page**を選択する。
- セクションの **⋯** メニューを使って、ヘッダーまたはフッターとしてすべてのページに表示する。

ページのメタデータには、タイトル、説明、正規URL、SNS共有用のフィールド、ファビコン、Twitterカードの種類、検索エンジンの設定が含まれます。

選択したセクション、行、グリッド、列がタブレットやスマートフォンでどのように表示されるかを設定するには、**Style**タブを開いて**Responsive**を展開します。

## スタイルと画像を適用する {#apply-styles-and-images}

**Style**タブを開いて**Brand styles**を展開すると、生成されたコンテンツで使われるテーマ、色、タイポグラフィ、角丸を確認できます。**Images**を展開するとプレースホルダー画像が一覧表示されるので、エクスポートの前に実際の画像URLに置き換えられます。

**Preview**タブを開くと、プラグインから離れずに現在のWebサイトを確認できます。