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

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

まだ [セットアップしていない](/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/microsite-experiences/set-up-a-microsite.md) 場合は、まずそれを行う必要があります。

1. 左側のナビゲーションメニューから、 ![](/files/7ddd72d8e69e7055d9408cf4847c5c54abf9f71d) **\[Engage] → Content**.
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. 左側の *現在のレイアウト* または *現在のページ*の下にある **Templates**.
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) **\[Desktop]**, ![](/files/619a26b60aa53cee685e7b8f64aa2596c8248af7) **\[Tablet]** または ![](/files/f3c012dc5e9587d1b5ed52d1ce6d93c9310c3d62) **\[Mobile]** の間を切り替えて、各デバイスでの表示を確認します。
2. プレビューに入るには、 ![](/files/3424e56c9f78203a6405370d17bb4e345a0f5f57) **\[表示]** を選択して、参加者に表示されるウィジェットの見え方をプレビューします。
3. 編集画面に戻るには、 ![](/files/20d1a387779aaf484f1decb3846cdda832728b7a) **\[Edit]** を選択して、参加者に表示されるウィジェットの見え方をプレビューします。
   {% endtab %}

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

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

こちらの記事もご覧ください： [ウィジェットとマイクロサイトのコンポーネントの説明](/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-components-explained.md) マイクロサイトとウィジェットのコンポーネントの側面について詳しく説明しています。


---

# Agent Instructions: 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:

```
GET https://help.impact.com/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/microsite-experiences/customize-microsite-layouts-and-pages.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.