---
title: "ビルダーのインターフェースを理解する"
slug: "understanding-the-builder-s-interface"
abstract: "ページビルダーの使い方や、さまざまな機能の入手先を理解しましょう。"
---
# ビルダーのインターフェースを理解する

ページビルダーエディターモードは主に3つのエリアで構成されています:中央のコンテンツエリアと、両側にそれぞれ1つずつ折りたたみ式ペインがあります。また、ナビゲーションやその他の重要な機能のコントロールを備えた上部ツールバーもあります。

![Screenshot of the Page builder front page.](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/builderUI.png)

## 一番上のツールバー { .notintoc }

![The top toolbar](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/toptoolbar.png)

*上部のツールバー*で、以下ができます:

-   どのプロジェクト、環境、ウェブサイト、言語バージョンに取り組むかを選びましょう。
-   **共有レイアウト**モードをオンにすると、ページのレイアウト変更がすべてのバージョンに適用されます。
-   **Editor**、**Templates**、**Personalize**、**Analyze**の各モードを切り替えましょう。
-   **[Agentic Studio](https://doc.sitecore.com/sai/ja/users/sitecoreai/working-with-agentic-studio.html "Working with Agentic studio")**[のチャットインターフェース](https://doc.sitecore.com/sai/ja/users/sitecoreai/working-with-agentic-studio/understanding-chat.html "Understanding chat")にアクセスし、現在キャンバスで開いているサイトコレクション、サイト、またはページの文脈内でコンテキスト[エージェント](https://doc.sitecore.com/sai/ja/users/sitecoreai/working-with-agentic-studio/understanding-agents.html "Understanding agents")を実行できます。
-   ブラウザの新しいタブで:mdiEye:でページのプレビューを開きます。
-   [ページを](https://doc.sitecore.com/sai/ja/users/sitecoreai/build-pages/publishing-pages-and-referenced-items/publish-a-page.html "Publish a page")公開し、オプションでサブページや他の言語版も公開してください。

## 左側のパネル { .notintoc }

![The different tabks of the left-hand panel](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/lhp.png)

左側の *パネル* は上部のツールバーで選択されたオプションに応じて変わります。 **エディター** モードでは、左側のパネルが2つのタブに分割されます:

-   **ページ**タブには**Sitemap**が表示され、現在のサイトのページ、つまりサイトの構造を示します。
-   **レイヤー**タブは、プレースホルダー、コンポーネント、フィールドなど、ページに含まれるすべての要素の階層を表示し、ページ構造を分かりやすくし、一度に一つずつ要素を選択できるようにします。
-   **コンポーネント**タブには、現在のサイトで利用可能なさまざまなコンポーネントが一覧化されています。

## エディタービューまたはキャンバス { .notintoc }

![The page top toolbar and the canvas](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/canvas.png)

サイトツリーの左側ペインでページを選択すると、画面中央の *エディタービュー* で開きます。 *ページ上部のツールバー*では、以下を操作できます:

-   作業中のページのバージョンを選ぶか、新しいバージョンを作成してください。
-   デフォルトの編集ホストかローカルホストで作業するかを選びましょう。
-   デバイスアイコンを使って、異なるデバイスでページの見た目を確認できます。
-   ページビルダーアプリケーション全体を再起動せずにページを再開できます。この方が速く、元に戻しややり直し履歴や他のUI設定(例えばサイトマップの拡張)を保持できます。
-   最近の変更を元に戻すかやり直してください。

ページキャンバスでは、ページを構成するコンポーネントを追加、並べ替え、削除したり、リッチテキストフィールドに含まれるコンテンツの一部を編集したりできます。

## 右側のパネル { .notintoc }

![Example of right-hand panel configuration options](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/rhs.png)

ページキャンバスで要素を選択すると、*右側パネル* にエディタービューで選択したアイテムの情報や設定可能範囲が表示されます。コンポーネントとプレースホルダーの両方が対象です。右側のペインでは [コンポーネントの設定やスタイル](https://doc.sitecore.com/sai/ja/users/sitecoreai/build-pages/adding-components-to-a-page/configure-a-component.html "Configure a component")付け、[コンポーネントへの割り当て](https://doc.sitecore.com/sai/ja/users/sitecoreai/build-pages/adding-content-to-a-page.html "Adding content to a page") 、リッチテキストフィールド内の書名に書かれて書かれることが可能です。ここで[A/B/nテスト](https://doc.sitecore.com/sai/ja/users/sitecoreai/a-b-n-testing.html "A/B/n testing")を設定することもできます。

## コンテキストパネル { .notintoc }

![The context panel for Page settings and Page content](https://doc.sitecore.com/api/markdown-image/sai/ja/users/sitecoreai/images/contexttoolbar.png)

ページのコンテンツや設定を編集する必要がある場合、キャンバスの左側にある [「ページコンテンツ](https://doc.sitecore.com/sai/ja/users/sitecoreai/build-pages/creating-webpages/edit-a-page-s-content.html "Edit a page's content") 」または [「ページ設定](https://doc.sitecore.com/sai/ja/users/sitecoreai/build-pages/creating-webpages/edit-the-page-settings.html "Edit the page settings") 」のコンテキストパネルですべての設定オプションが開きます。