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

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

まだ [設定していない](https://help.impact.com/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/microsite-experiences/set-up-a-microsite) マイクロサイトをまだ設定していない場合は、まず設定する必要があります。

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. の *マイクロサイト* カードで、選択します **コンテンツを編集**.
   * この操作によりマイクロサイトエディタが開き、 *マイクロサイト* スライドアウトが表示されます。
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-b86511b064633eb26a6b404d647528e31dcb5a12%2Fb13e0c9a76f7d38a693d8072ff7115433720c38466813323241c794fda4856ca.png?alt=media" alt=""><figcaption></figcaption></figure></div>

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

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

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

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

   <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-f58dfdd168765b914fd22b232cabd8030450c27f%2F6f54642b7524983137442de4c4ecc2a20984c511b5e26423a5edadc0060f9a45.png?alt=media" alt="" width="223"><figcaption></figcaption></figure></div>
5. を選択します **オプションで支払いリマインダーメールをカスタマイズしてください。** 右上隅で編集します。
   {% endtab %}

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

1. の中の *マイクロサイト* スライドアウトで、 **Baseレイアウト**.
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> ログインしている参加者かどうかに関係なく誰でも見られるランディングページをサイトに追加したい場合は、新しいページをBaseレイアウトの中にネストできます。</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="https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-a0bfe48f82a572dff145227f203272771f6b739a%2F259af004a6a8f554bcfff90975d56b1ec1ec45ce65356cd232fdd4a091cf8c48.jpg?alt=media" alt="" width="310"><figcaption></figcaption></figure></div>
4. ページの右上隅で、を選択します **オプションで支払いリマインダーメールをカスタマイズしてください。**.
   {% endstep %}

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

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

1. から、 *マイクロサイト* スライドアウトで、を選択します **ログイン済みレイアウト** 構造ビューから。
   * を選択します ![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-90673bb8db696bdefe7b207cfc07c46caf1d43f1%2Fce7a994978f06dd84cc6a31b890071502b4831990afd8fdd73f73c6d2e203660.png?alt=media) **\[終了アイコン]** スライドアウトを閉じて編集キャンバスにアクセスするには。
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%2Fgit-blob-87da46ebfa6e69752ed1c574a17d0036746d311d%2F125bfdb46d75238f2772523663950b1311a17055d85a39bca25033bc56a45d5e.jpg?alt=media" alt=""><figcaption></figcaption></figure></div>
3. 編集キャンバス内で、サイドバー項目を追加する有効な位置を選択します。 *サイドバー項目* コンポーネント。利用可能な位置はによって指定されます **サイドバーに追加コンテンツ** メッセージ。
   * 小さい画面では、を選択します ![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-71ccc0ed9e3023e12691656e4a063341060fe3bd%2F69bc484dc36b22c013f4fde7e0360a7ae9b8d39164beff2b6fabc9ea6d0efb1d.svg?alt=media) **\[ハンバーガーメニュー]** にアクセスするには、 **サイドバーに追加するコンテンツ** ボタン。
4. 右側で、 *編集* メニューで、ページを表す **アイコン** および **ラベル** を選択します。
5. から、 **ナビゲーションパス** ドロップダウンリストで、ユーザーを誘導するページのURLパスを選択します。
6. ページの右上隅で、を選択します **オプションで支払いリマインダーメールをカスタマイズしてください。**.
   {% endstep %}

{% step %}
**ステップ5: プレビューと保存**

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

1. 上部メニューバーで、次の間を切り替えます ![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-9a50309ee9d0e10094bf68c9b9ae1999dbec4f48%2F7cf9c6c1f6544aa358de22e77201e216647a70ab22c854c02334f51f45892424.svg?alt=media) **\[デスクトップ]**, ![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-02123f07d293035e9e37f19e086187c0e90e7dd0%2F1b889798dd233ebb71c2adcc44be0e2887772538ce7c6357d7ef1ea246c0e564.svg?alt=media) **\[タブレット]** または ![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-04b329f4eb244c77b35e32d9988afc78f428a88f%2Fe05ee6fbf869c562df0a7fbc8a38b177082975c06ddf6adcda9d4c00bd0e43ac.svg?alt=media) **\[モバイル]** 各デバイスでマイクロサイトがどのように表示されるかを確認できます。
2. プレビューに入るには、を選択します ![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-190c6a03e6a68d67509d00452b10fd803bee5c87%2F57c7cba09bd1b97dd75b7c245e517c8d1ca0469d7c57bdc13ee6e427b75a860a.svg?alt=media) **\[表示]** 上部メニューバーから。
3. 編集インターフェースに戻るには、を選択します ![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-60e9ace573178da411cb3be9c6f3b0f4b7e5b524%2F4094fadf599e544cfc618c18eb22087defdb9be38a580cd0041a242a88294e1e.svg?alt=media) **\[編集]** 上部メニューバーから。
   {% endtab %}

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

1. 関連するすべての変更を行った後、を選択します **オプションで支払いリマインダーメールをカスタマイズしてください。** 右上で。
2. 保存されると、変更はマイクロサイトのライブバージョンに即座に反映されます。
   {% endtab %}
   {% endtabs %}
   {% endstep %}
   {% endstepper %}

関連記事： [ウィジェットとマイクロサイトコンポーネントの説明](https://help.impact.com/brand/ja/nitsuitebitaidesuka/advocate-program/manage-advocate-participant-experiences/widget-and-microsite-components-explained) マイクロサイトとウィジェットのコンポーネントに関する詳細については。