> For the complete documentation index, see [llms.txt](https://help.impact.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.impact.com/brand/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/microsite-experiences/microsite-editor-explained.md).

# マイクロサイトエディターの解説

マイクロサイトエディターを使用すると、レイアウト、ページ、コンテンツ、そしてフォントや色などのブランディング要素をカスタマイズでき、Advocate プログラムの参加者に表示される内容を制御できます。

この記事では、エディターのインターフェースについて説明し、レイアウト、ページ、コンポーネントを含むマイクロサイトの構成に関する一般情報を提供します。詳しくは、 [マイクロサイトのセットアップ](/brand/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/microsite-experiences/set-up-a-microsite.md) および [ブランディングとコンテンツのカスタマイズ](/brand/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/microsite-experiences/customize-microsite-layouts-and-pages.md) についてご覧ください。

## マイクロサイトエディターを開く

1. 左側のナビゲーションメニューで、 ![](https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage] → コンテンツ**.
2. で、 *Microsite* カードを選択し、 **コンテンツを編集**.

## エディターのインターフェース

マイクロサイトエディターは、上部メニューバー、編集キャンバス、マイクロサイトのスライドアウト、コンポーネントメニューで構成されています。

<div data-with-frame="true"><figure><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2F6kHBNQwam7HkEsoPhH3u%2FCanvas%20(1).png?alt=media&#x26;token=96041e31-6e5e-449a-b018-f94859825093" alt=""><figcaption></figcaption></figure></div>

{% tabs %}
{% tab title="上部メニューバー" %}
ページ上部のメニューバーでは、操作の取り消し、HTMLコードの表示、完成したマイクロサイトのプレビューができます。デスクトップ、タブレット、モバイルの各アイコンを使って、さまざまな画面サイズのデバイスでマイクロサイトがどのように表示されるかを確認できます。
{% endtab %}

{% tab title="キャンバス" %}
キャンバスには、マイクロサイトの現在のコンテンツが表示されます。個々のコンポーネントを選択して編集したり、新しいコンポーネントを追加して、参加者にどのように表示されるかを一目で確認できます。コンポーネントをキャンバス上の新しい位置にドラッグすると、順序を並べ替えられます。これらのコンポーネントは、マイクロサイトのスライドアウトセクション内の左側に一覧表示されます。

* 選択 **レイヤー** を選択すると、ページまたはレイアウト上のすべてのコンポーネントの詳細ビューを確認できます
* 選択 **テンプレート** を選択すると、マイクロサイトのページで利用可能なテンプレートを表示できます。
* 選択したページ、レイアウト、ウィジェット、またはメールに応じて、コンテキストに応じた3番目のメニューが表示されます

  <div data-with-frame="true"><figure><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-3de3488148e89adc893ddbf2940d67dedea36a75%2F6564954dd5c2ac36c28fe92e6602750c13ebe01d18f84f6781593d1ec66448f5.jpg?alt=media" alt="" width="122"><figcaption></figcaption></figure></div>

{% endtab %}

{% tab title="マイクロサイトのスライドアウト" %}
マイクロサイトのスライドアウトは、キャンバス左側にある折りたたみ可能なパネルです。レイアウトとページの継承構造をツリーとして視覚化します。個々のレイアウトやページを選択して内容を表示し、調整できます。ここでは、ページやレイアウトを追加することもできます。

ブランディングレベルでさらにスタイル設定するには、Microsite Styleオプションを選択します。 [コンテンツエディターを使用してウィジェットとマイクロサイトをカスタマイズする](/brand/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/customize-widgets-and-microsites-with-the-content-editor.md) 利用可能なスタイル設定オプションの詳細については、こちらをご覧ください。
{% endtab %}

{% tab title="コンポーネントメニュー" %}
コンポーネントメニューは、キャンバス右側のパネルです。 *追加* タブを使ってキャンバスに新しいコンポーネントを挿入し、 *編集* タブを使って、すでにある内容を調整します。
{% endtab %}
{% endtabs %}

## マイクロサイトの構造

マイクロサイトをカスタマイズする際に理解しておくべき重要な構成要素がいくつかあります。レイアウト、ページ、コンポーネントです。

<details>

<summary>レイアウト</summary>

レイアウトはマイクロサイトの「フレーム」として機能します。ヘッダーやバナー画像のように、マイクロサイト全体に表示させたいコンポーネントを配置できます。

レイアウトとページは、継承構造を通じてリンクされています。ページとレイアウトの両方がレイアウトを継承できます。継承されたレイアウトを持つページやレイアウトでは、そのコンテンツが継承元レイアウトのコンテンツで囲まれます。

{% hint style="info" %}
**例:** ベースレイアウトにヘッダー画像が含まれている場合、ベースレイアウトを継承するすべてのページに、同じ場所で同じヘッダー画像が表示されます。
{% endhint %}

自動セットアップを使ってマイクロサイトを作成した場合、サイトには既定で3つのレイアウトがあります。

**ベースレイアウト**

ベースレイアウトは、参加者がどのページにいるか、またサイトに認証済みかどうかに関係なく表示したいコンテンツを配置する場所です。サイト全体に表示したいヘッダーやフッターを追加できます。ベースレイアウトにはブランドコンテナも含まれており、サイト全体の色とフォントを管理します。

両方の *ログイン済みレイアウト* と *ログアウト済みレイアウト* は *ベースレイアウト*.

<div data-with-frame="true"><figure><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2F3NHdmPGgjMudnsCGd1Yy%2Fimage.png?alt=media&#x26;token=54feac69-8c46-48be-9f14-32209f3c2539" alt="" width="312"><figcaption></figcaption></figure></div>

**ログイン済みレイアウト**

は *ログイン済みレイアウト* 、どのページにいてもログイン済みの参加者全員に表示したいコンポーネントを追加する場所です。たとえば、マイクロサイトのサイドバーナビゲーションメニューは、レイアウト内のコンポーネントを通じて作成されます。レイアウトに追加されているため、そのレイアウトを継承するすべてのページにそのサイドバーが含まれます。

<div data-with-frame="true"><figure><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2FRFRn1J9JxD4iYpmKIAv0%2Flogged-in-layout.jpg?alt=media&#x26;token=4815b054-264d-46e5-bcc8-88ed3ea5a624" alt="" width="310"><figcaption></figcaption></figure></div>

**ログアウト済みレイアウト**

は *ログアウト済みレイアウト* は、現在認証されていない参加者に表示する内容をカスタマイズする場所です。

<div data-with-frame="true"><figure><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fzmg9mkIeow7cpu0katqi%2Flogged-out-layout.jpg?alt=media&#x26;token=9bbd561b-237e-43f1-833b-d1076bf9e857" alt="" width="291"><figcaption></figcaption></figure></div>

</details>

<details>

<summary>ページ</summary>

ページでは、プログラムの説明、紹介や共有に関する情報、テキスト/画像など、サイトのコンテンツを作成します。レイアウトの中から個別のページを選択すると、そのコンテンツを開いて編集できます。

<div data-with-frame="true"><figure><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-0a6c026b6fbf6429ea9a8ff3ee2db4f6acfc84fd%2F87f7c50502733db94119262cc22612ef67923c5fc190d8c29938be0f4fd5a34f.jpg?alt=media" alt="" width="318"><figcaption></figcaption></figure></div>

表示設定はページ単位でも設定でき、ページアクセスを次のいずれかに制限できます:

* <mark style="color:$success;">**確認済み**</mark>: ログイン済み参加者のみ。
* <mark style="color:$danger;">**未確認**</mark>: メールアドレスを確認していないログイン済み参加者。
* **公開**: 誰でも閲覧可能。

自動セットアップを使ってマイクロサイトを作成した場合、サイトには次の *ログイン済みレイアウト* と *ログイン済みレイアウト*.

**ログイン済みレイアウトのページがいくつか含まれています:**

* アクティビティ
* ダッシュボード
* プロフィールを編集
* リード送信
* 税金と現金

**ログアウト済みレイアウトのページ:**

* メール認証
* パスワードをお忘れの場合
* ログイン
* ログアウト
* ページが見つかりません
* 登録
* パスワードをリセット
* メールを確認

</details>

<details>

<summary>コンポーネント</summary>

コンポーネントは、ヒーロー画像や紹介フィードのように、ページやレイアウトに追加して参加者のマイクロサイト体験をさらにパーソナライズできる個別の要素です。

コンポーネントは、コンポーネントメニュー内でグループ化されています。 [ウィジェットとマイクロサイトのコンポーネントの説明](/brand/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-components-explained.md) を参照して、コンポーネントのグループ分けと個々のコンポーネントの完全な一覧をご確認ください。

<div data-with-frame="true"><figure><img src="https://4048883401-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-75004e7777739ce86600fd0a716eedbd7aa6c52d%2Ff413cd8a60e0c449e8d8a0e0ea0821173134ae92203976190fe299ac2ac079c6.jpg?alt=media" alt="" width="229"><figcaption></figcaption></figure></div>

</details>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://help.impact.com/brand/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/microsite-experiences/microsite-editor-explained.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
