> 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://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[Engage] → コンテンツ**.
2. 上の *マイクロサイト* カードを選択し **コンテンツを編集**.

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

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

<div data-with-frame="true"><figure><img src="https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2F6kHBNQwam7HkEsoPhH3u%2FCanvas%20(1).png?alt=media&amp;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://1458456015-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="マイクロサイトのスライドアウト" %}
マイクロサイトのスライドアウトは、キャンバスの左側にある折りたたみ可能なパネルです。レイアウトとページの継承構造をツリー形式で視覚化します。個々のレイアウトやページを選択すると、コンテンツの表示や調整ができます。ここでは、ページやレイアウトをさらに追加することもできます。

ブランディングレベルでもさらにスタイルを調整するには、［マイクロサイトのスタイル］オプションを選択します。詳細は [コンテンツエディターでウィジェットとマイクロサイトをカスタマイズする](/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://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2F3NHdmPGgjMudnsCGd1Yy%2Fimage.png?alt=media&amp;token=54feac69-8c46-48be-9f14-32209f3c2539" alt="" width="312"><figcaption></figcaption></figure></div>

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

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

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

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

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

<div data-with-frame="true"><figure><img src="https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fzmg9mkIeow7cpu0katqi%2Flogged-out-layout.jpg?alt=media&amp;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://1458456015-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.md) コンポーネントのグループ分けと個々のコンポーネントの完全な一覧については

<div data-with-frame="true"><figure><img src="https://1458456015-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 dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
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=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.
