> 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/customize-microsite-layouts-and-pages.md).

# マイクロサイトのレイアウトとページをカスタマイズする

マイクロサイトは、紹介プログラムにおける参加者との主要な接点の1つです。この記事では、 *マイクロサイトエディター* を使用して、既存のマイクロサイトをブランドを反映し、エンドユーザーに魅力的な体験を提供する空間へとカスタマイズする方法を説明します。

まだ [設定していない](/brand/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/microsite-experiences/set-up-a-microsite.md) 場合は、まずマイクロサイトを設定する必要があります。

1. 左側のナビゲーションメニューから、次を選択します： ![](/files/7ddd72d8e69e7055d9408cf4847c5c54abf9f71d) **\[Engage] → コンテンツ**.
2. の *マイクロサイト* カードで、次を選択します： **コンテンツを編集**.
   * この操作によりマイクロサイトエディターが開き、 *マイクロサイト* スライドアウト
3. マイクロサイトエディターを使用して、ブランディングを更新したり、レイアウトやページなどの新しいコンテンツを追加したりできます。

   <div data-with-frame="true"><figure><img src="/files/45a9afbd4e4bbe3b16dd066313e0e557ec322313" alt="" width="563"><figcaption></figcaption></figure></div>

{% hint style="warning" %}
**警告:** マイクロサイトエディターは変更を自動保存しません。作業内容を失わないよう、こまめに保存してください。
{% endhint %}

{% stepper %}
{% step %}
**ステップ 1: マイクロサイトのブランディングを変更する（任意）**

{% tabs %}
{% tab title="色とフォント" %}
ベースレイアウトには、マイクロサイトのフォントとブランドカラーを制御するブランドコンテナコンポーネントが含まれています。ブランドカラーは、ハイライトカラーやボタンカラーを含むマイクロサイトのさまざまな部分に適用されます。

1. で *マイクロサイト* スライドアウトで、 **ベースレイアウト**.
2. 左側の *現在のレイアウト*、選択 **レイヤー**.
3. 次を選択します **ブランドコンテナ**.
4. 右側の *ブランドコンテナ* メニューで、次を編集します: **ブランドカラー** と **ブランドフォント**.

   <div data-with-frame="true"><figure><img src="/files/93ed5df5d29193f45331fe89203d8362e0e16ac4" alt="" width="223"><figcaption></figcaption></figure></div>
5. 選択します： **保存** 右上隅で。
   {% endtab %}

{% tab title="サイトヘッダー" %}
クリック可能なヘッダー画像を追加して、参加者を指定したページにリダイレクトできます。これはベースレイアウトで設定します。

1. で *マイクロサイト* スライドアウトで、 **ベースレイアウト**.
2. 左側の *現在のレイアウト* または *現在のページ*、選択 **レイヤー**.
3. 右側の *マイクロサイトフレームヘッダーコンテンツ* メニューで、画像を指定し、必要に応じて高さと幅を調整します。
4. リダイレクトパスを設定します。これは、参加者が画像をクリックした際にリダイレクトされる先です。
5. 選択します： **保存**.
   {% endtab %}
   {% endtabs %}
   {% endstep %}

{% step %}
**ステップ 2: レイアウトまたはページを作成する**

{% tabs %}
{% tab title="ページを追加" %}

1. で *マイクロサイト* スライドアウトで、次を選択します **マイクロサイト**.
   * この操作により、マイクロサイトの構造ビューが開き、すべてのレイアウトとページが表示されます。
2. 次を選択します **ページを追加** ボタン。
3. 必要に応じて、 **継承レイアウト** ドロップダウンリストを使用して、親レイアウトとして機能させたいレイアウトを選択します。

   <div data-gb-custom-block data-tag="hint" data-style="info" class="hint hint-info"><p><strong>例：</strong> ログイン済みの参加者かどうかに関係なく、誰でも閲覧できるランディングページをサイトに追加したい場合は、ベースレイアウト内に新しいページをネストできます。</p></div>
4. 次を入力します: **ページタイトル** またはレイアウト名。
5. 必要に応じて、 **ページキー** をページ用に調整します。ページキーはページタイトルに基づいて自動生成されますが、必要に応じて変更できます。
6. 次を入力します: **URL** をページ用に設定します。
   * 使用したい名前の前にスラッシュを追加し、複数単語のURLの場合はハイフンを使用します。例: `/company-info`.
7. 次の **許可されたユーザー** ドロップダウンリストで、そのページにアクセスできるユーザーグループを選択します。
   * **公開:** 誰でも閲覧可能。
   * **認証済み:** ログイン済みの参加者のみ。
   * **未認証:** メールアドレスを認証していないログイン済み参加者。
8. 次の **許可されていないユーザーのリダイレクト先** ドロップダウンリストで、許可されていない参加者の送信先となるページを選択します。
9. 選択します： **追加**.
10. ページ右上で、 **保存**.
    {% endtab %}

{% tab title="レイアウトを追加" %}

1. で *マイクロサイト* スライドアウトで、次を選択します **マイクロサイト**.
   * この操作により、マイクロサイトの構造ビューが開き、すべてのレイアウトとページが表示されます。
2. 選択します： **レイアウトを追加**.
3. 必要に応じて、 **継承レイアウト** ドロップダウンリストを使用して、親レイアウトとして機能させたいレイアウトを選択します。これは主にサイト整理の目的で役立ちます。
4. 次を入力します: **レイアウト名** をレイアウト用に設定します。
5. 必要に応じて、 **レイアウトキー** をレイアウト用に設定します。レイアウトキーはページタイトルに基づいて自動生成されますが、必要に応じて変更できます。
6. 選択します： **追加**.
7. ページ右上で、 **保存**.
   {% endtab %}
   {% endtabs %}
   {% endstep %}

{% step %}
**ステップ 3: テンプレートを適用する**

一から始めたくない場合は、新しいレイアウトまたはページにテンプレートを適用できます。

1. 次の *マイクロサイト* スライドアウトで、構造ビューを使用してテンプレートを使用したいレイアウトまたはページを選択します。
2. 左側の、以下の *現在のレイアウト* または *現在のページ*、選択 **テンプレート**.
3. 利用可能なテンプレートを参照し、次に **テンプレートを適用** を、使用したいテンプレートのカード上で選択します。

   <div data-with-frame="true"><figure><img src="/files/c8be2b3c976dc7f9cd8a5d79310f0007d54d4456" alt="" width="267"><figcaption></figcaption></figure></div>
4. ページ右上で、 **保存**.
   {% endstep %}

{% step %}
**ステップ 4: マイクロサイトのサイドバーを編集する**

これは、ログイン済みの参加者がマイクロサイトのサイドバーナビゲーションメニューからページに移動できるようにしたい場合に推奨されます。以下の手順ではその方法を示しますが、別のレイアウトにサイドバー項目を追加したい場合は適宜応用できます。

1. 次の *マイクロサイト* スライドアウトで、次を選択します **ログイン済みレイアウト** を構造ビューから選択します。
   * 選択します： ![](/files/633e20282dbacc6ff59ec16d3a26bb71f3ad6af0) **\[終了アイコン]** を選択してスライドアウトを閉じ、編集キャンバスにアクセスします。
2. 右側の *追加* メニュー内で、 *マイクロサイトのコンポーネント* カテゴリを展開し、次に **サイドバー項目**.

   <div data-with-frame="true"><figure><img src="/files/8fdb1f4652c707726898546966e79d9c8e48e019" alt=""><figcaption></figcaption></figure></div>
3. 編集キャンバス内で、有効な位置を選択して *サイドバー項目* コンポーネントを追加します。使用可能な位置には、 **サイドバーコンテンツに追加** というメッセージが表示されます。
   * 小さい画面では、 ![](/files/ef225a138867ea7d3ee5da21eb0dc27a873efd24) **\[ハンバーガーメニュー]** を選択して **サイドバーコンテンツに追加** ボタン。
4. 右側の *編集* メニューで、 **アイコン** と **ラベル** を選択してページを表します。
5. 次の **ナビゲーションパス** ドロップダウンリストで、ユーザーの移動先となるページのURLパスを選択します。
6. ページ右上で、 **保存**.
   {% endstep %}

{% step %}
**ステップ 5: プレビューして保存する**

{% tabs %}
{% tab title="マイクロサイトをプレビューする" %}
マイクロサイトが参加者にどのように表示されるかをプレビューできます。

1. 上部メニューバーで、 ![](/files/ffbda33c485c6ab0ab3610ee1bb01be19a2f1f38) **\[デスクトップ]**, ![](/files/619a26b60aa53cee685e7b8f64aa2596c8248af7) **\[タブレット]** または ![](/files/f3c012dc5e9587d1b5ed52d1ce6d93c9310c3d62) **\[モバイル]** を切り替えて、各デバイスでマイクロサイトがどのように表示されるかを確認します。
2. プレビューに入るには、 ![](/files/3424e56c9f78203a6405370d17bb4e345a0f5f57) **\[表示]** を上部メニューバーから選択します。
3. 編集インターフェースに戻るには、 ![](/files/20d1a387779aaf484f1decb3846cdda832728b7a) **\[編集]** を上部メニューバーから選択します。
   {% endtab %}

{% tab title="マイクロサイトを保存する" %}
マイクロサイトエディターは変更を自動保存しません。作業内容を失わないよう、こまめに保存してください。

1. 関連する変更をすべて加えた後、 **保存** を右上で選択します。
2. 保存すると、変更内容はすぐにマイクロサイトのライブ版に反映されます。
   {% endtab %}
   {% endtabs %}
   {% endstep %}
   {% endstepper %}

以下の記事をご覧ください: [ウィジェットとマイクロサイトのコンポーネントの説明](/brand/ja/what-would-you-like-to-learn-about/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-components-explained.md) マイクロサイトとウィジェットのコンポーネント面について詳しく知るには。


---

# 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/customize-microsite-layouts-and-pages.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.