---
title: ジャーニーカスタマイズ
description: ロゴ、色、背景、ボタンの形状など、ジャーニーのビジュアルアイデンティティをIDCloud Portal上で直接設定します。リアルタイムのプレビュー付きです。
canonical: https://developer.unico.io/ja/dual-api/product-guide/portal-idcloud/settings/journey-customization
locale: ja
generated_by: markdown-export
---

**Journey Customization** を使うと、サポートチケットを作成することもサポートチームに依存することもなく、ブランドのビジュアルアイデンティティをUnicoの
本人確認ジャーニーに適用でき、結果はすぐに確認できます。

ロゴ、背景色、ボタンの色と形状、コンテンツの色を設定します。公開すると、その設定はブランチ上で開始される次のジャーニーから即座に反映されます。

:::info
**対象者:** iFrame、Redirect、またはSDKのいずれかの連携モデルでWeb Journeyを利用しているお客様。

**エンドユーザーに変わること:** 本人確認中に表示される画面が、お客様のブランドの見た目になります。

**設定場所:** IDCloud Portal → サイドバー **Settings** → **Customization** タブ。
:::

## 始める前に

### アクセス権限

お客様のユーザーには、IDCloud Portalの **Settings** エリアへのアクセス権限が必要です。サイドバーにギアアイコンが表示されない場合は、
アカウント管理者にアクセス権限の付与を依頼してください。

### 設定の適用方法

| | |
| :- | :- |
| **スコープ** | カスタマイズは **ブランチ** 単位、かつ **連携モデル** 単位で適用されます。iFrameとRedirect/SDKは独立した設定を持ち、一方を公開してももう一方には影響しません。 |
| **反映タイミング** | 公開直後から、**その時点以降に開始された** ジャーニーに反映されます。すでに進行中のジャーニーは、以前の見た目のままです。 |
| **カスタマイズしない場合** | ジャーニーはUnicoのデフォルトテーマで読み込まれます。 |
| **ジャーニーのバージョン** | プレビューは **Web Journey v3.0** のデザインに基づいています。他のバージョンでは、プレビューが実際の結果を正確に反映しない場合があります。その場合は、バージョンの更新についてUnicoにお問い合わせください。 |

### あらかじめ用意しておくもの

- **PNG形式のロゴ**。できれば透過背景で、高さ **60 px**、サイズ **100 KB** 以内。
- ブランドカラーの **16進コード**(例: `#1B3FA0`)。

### 連携で設定可能な項目

連携モデルに加えて、画面に表示される項目はお使いの連携の **Web Journeyバージョン** によっても変わります。これは「この項目が見当たらない」という
問い合わせで最も多い原因です。

| 機能 | 1.0 iFrame | 2.0 iFrame | 3.0 iFrame | 1.0 redirect | 2.0 redirect | 3.0 redirect |
| :- | :-: | :-: | :-: | :-: | :-: | :-: |
| **ロゴ** | ✅ | 存在しない | 存在しない | ✅ | ✅ | ✅ |
| **背景色** | — | — | — | — | — | ✅ |
| **ボタン背景色** | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| **ボタン文字色** | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| **ボタンの角丸** | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |
| **コンテンツの色** | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ |

つまり、**背景色はWeb Journey v3.0のredirectでのみ設定可能** であり、iFrameでのロゴはWeb Journey v1.0のみ存在します。色とボタンの形状は、すべての組み合わせで
利用できます。

:::info
お使いのバージョンが分からない場合は、Onboarding担当者またはUnicoサポートに確認してください。
:::

## 手順

### ステップ1 — Customizationタブを開く

IDCloud Portalで、サイドバーの **ギアアイコン(Settings)** をクリックします。画面は直接 **Customization** タブで開きます。

Settings画面には3つのタブ — **Customization**、**Webhook**、**QR Code** — があります。このガイドでは最初のタブを扱います。

![サイドバーのギアアイコンがハイライトされたSettings画面](/img/product-guide/journey-customization/en/01-settings-tab.png)

*Customizationタブが選択されたSettings画面。*

### ステップ2 — 連携モデルを選ぶ

左側のカラムで **iFrame** または **Redirect or SDK** を選択します。モデルに応じてフォームの項目が変わります。

画面は3つの領域で構成されています。左側の **モデルセレクター**、中央の **フォーム**、そして右側の **ライブプレビュー** です。プレビューは公開前に、
すべての変更に反応します。

**両方のモデルを使用している場合は、両方を設定する必要があります。** これらは独立した設定なので、片方を調整・公開したら、もう片方についても同じ手順を
繰り返してください。

![Customization画面全体: モデルセレクター、フォーム、プレビュー](/img/product-guide/journey-customization/en/02-integration-model.png)

*iFrame / Redirect or SDKのセレクター、フォーム、プレビュー。*

### ステップ3 — ロゴをアップロードする

:::warning
**Redirect or SDK** で利用可能です。iFrameでは、Web Journey v1.0のみ利用可能です。
:::

**Add a logo** をクリックしてファイルを選択します。要件: **PNG**形式、最大高さ **60 px**、最大サイズ **100 KB**。

**透過背景のPNGを使用してください。** そうすることで、ロゴがどの背景色の上でも機能します。背景が白いPNGは、背景に色を付けた瞬間に目立つ長方形に
なってしまいます。また、ロゴの横長バージョンを使うことをお勧めします。利用可能なスペースは横長で高さが低いためです。

![フォーマット、高さ、サイズの要件が表示されたAdd a logoフィールド](/img/product-guide/journey-customization/en/03-customization-form.png)

*フォーマット、高さ、サイズの要件が表示された「Add a logo」フィールド。*

### ステップ4 — 色を設定する

フォーム上には、**Background**、**Buttons**、**Content** の3つのグループに分かれた、4つの色項目があります。

| フィールド | ジャーニー内での表示箇所 | デフォルト | 利用可否 |
| :- | :- | :- | :- |
| **背景色** | ジャーニー画面の背景 | `#F2F2F7` | **Web Journey v3.0のredirect** のみ |
| **Buttons → 背景色** | アクションボタンの塗り色(例: 「Take Selfie」) | — | すべてのバージョン |
| **Buttons → 文字色** | ボタン内のテキスト | — | すべてのバージョン |
| **コンテンツの色** | タイトルや説明文(例: 「Identity verification」) | `#000000` | すべてのバージョン |

いずれの項目も、**16進コードを直接入力する**(例: `#1B3FA0`)か、フィールド左側の **カラースウォッチをクリック** してビジュアルピッカーを開くことで
設定できます。背景色とコンテンツの色のフィールドは、空のままにしておくと、フィールド自体にプレースホルダーとして表示されているデフォルト値が
ジャーニーで使用されます。

**背景色はグラデーションとして適用され、単色ではありません。** 設定した色調は画面上部の色になり、画面下部に向かって徐々に暗くなっていきます。
非常に暗い色調にすると、ほぼ黒に近いベースになります。均一な結果を望む場合は、中間から明るめの色調を選んでください。

**ボタン背景色にはブランドのプライマリカラーを使用してください。** これはユーザーが最初に見つける必要がある要素であり、目立たなければジャーニーの
コンバージョンが下がります。

**4つの色は個別ではなく、まとめて決めてください。** これらは互いに影響し合います。暗い背景に黒いコンテンツの色を組み合わせるとジャーニーが読めなくなり、
白いカード上の明るいボタンは単に見えなくなってしまいます。4つすべてを設定してから、プレビューで結果を確認してください(ステップ6)。

![背景色、ボタンの色、コンテンツの色のフィールドと、プレビューでの結果](/img/product-guide/journey-customization/en/04-colors.png)

*背景色、ボタンのBackground/Text色、コンテンツの色のフィールドと、プレビューでの結果。*

### ステップ5 — ボタンを設定する

ジャーニーのアクションボタン(例: 「Take Selfie」)は、3つの項目で制御されます。

| フィールド | 動作内容 |
| :- | :- |
| **Background color** | ボタンの塗り色 |
| **Text color** | ボタン内のテキストの色 |
| **Border radius** | 角の丸み(ピクセル単位) |

**border radius**の参考値:

- 0 → 長方形のボタン、角が鋭い
- 8〜16 → やや丸みのある角
- 24以上 → ピル形状(完全に丸い)

ボタンの高さの半分を超える値は、それ以上結果が変わりません。ピル形状が上限です。

**ボタン背景色にはブランドのプライマリカラーを使用してください。** これはユーザーが最初に見つける必要がある要素であり、目立たなければジャーニーの
コンバージョンが下がります。また、border radiusはお客様のプロダクトの他の部分と一致させておくことで、ジャーニーがサードパーティの画面ではなく
自社アプリの続きのように感じられます。

![Border radiusフィールドと、プレビューに反映されたボタン](/img/product-guide/journey-customization/en/05-button-border-radius.png)

*Background color、Text color、Border radiusと、プレビューに反映されたボタン。*

### ステップ6 — モバイルとデスクトップでプレビューを確認する

右側のプレビューは、変更するたびに更新されます。上部の **Mobile / Desktop** セレクターを使って、両方の表示形式を確認してください。

無効な色の値(色名や不完全な16進コードなど)を入力すると、そのフィールドには **赤い枠** が表示され、値はプレビューに反映されません。続ける前に
修正してください。

**必ずMobileモードで確認してください。** 大半のエンドユーザーは携帯電話から本人確認を完了するため、これが最も重要な表示形式です。そして3つの
コントラストを確認してください。ボタンの文字色とボタン背景色、ボタンとジャーニーのカード、コンテンツの色と背景色です。白いカード上に白いボタンを
設定してしまい、見えなくなってしまうことはよくあります。プレビューはまさに、公開前にこれを発見するためのものです。

![プレビューパネルのMobile / Desktopセレクター](/img/product-guide/journey-customization/en/06-live-preview.png)

*Mobile / Desktopセレクターと、無効な値がハイライトされた色フィールド。*

### ステップ7 — 公開する

**Publish** ボタンは、保留中の変更がある時点で有効になります。

- **Publish** は設定を保存し、ジャーニーに適用します。
- **Cancel** は編集内容をすべて破棄し、フィールドを最後に公開された状態に戻します。
- **Unicoのデフォルトに戻す** には、色のフィールドをクリアして(プレースホルダーが再表示される状態にして)、ロゴを削除し、公開してください。

**バージョン履歴はありません。** 誤った設定を公開してしまった場合は、値を調整して再度公開するのが対処方法です。以前のバージョンをワンクリックで
復元する方法はありません。だからこそ、前のステップでプレビューを確認しておくことが重要です。まだ公開していない間は、Cancelで解決できます。

### ステップ8 — 許可するドメインを登録する

:::warning
**iFrame** モデルでのみ利用可能です。
:::

iFrameでは、ジャーニーはお客様自身のページに埋め込まれて実行されます。セキュリティのため、ここで登録されたドメインのみがそれを読み込めます。

1. 右上の **Configure domains** をクリックします。

   ![ハイライトされたConfigure domainsボタン](/img/product-guide/journey-customization/en/07-configure-domains-button.png)

2. サイドパネルには **Registered domains** の一覧が表示され、それぞれに **編集**(鉛筆)と **削除**(ゴミ箱)の操作があります。

   ![登録済みドメインの一覧が表示されたConfigure domainsパネル](/img/product-guide/journey-customization/en/08-domains-list.png)

3. ドメインを追加するには、**Create domain** をクリックし、ドメインを入力して **Save** をクリックします。

   ![Create domainフォーム](/img/product-guide/journey-customization/en/09-create-domain.png)

ドメインはプロトコル付きで入力してください(`https://yoursite.com`)。

**この一覧はセキュリティ設定であり、別枠で保存されます。** これはパネル自身の **Save** で適用され、メイン画面の **Publish** では適用されません。
テスト用・Staging用のドメインも登録し、使われなくなったものは削除してください。これは、お客様のジャーニーを埋め込めるドメインの一覧です。

## FAQ

**すでに実行中のジャーニーにも変更は適用されますか?** いいえ。公開された設定は、公開後に開始されたジャーニーに適用されます。

**LogoとBackgroundのフィールドが表示されないのはなぜですか?** 考えられる原因は2つです。1つ目: **iFrame** を選択している可能性があります。
iFrameでは、ジャーニーはお客様自身のページに埋め込まれるため、すでに背景とアイデンティティが提供されています。2つ目: お使いの **Web Journeyバージョン** が
そのフィールドを公開していない可能性があります。背景色はWeb Journey v3.0のredirectでのみ存在し、iFrameでのロゴはWeb Journey v1.0のみです。「始める前に」の表を
確認してください。

**アップロードしたロゴが拒否されました。なぜですか?** 3つの要件を確認してください。**PNG**形式、高さ **60 px** 以内、サイズ **100 KB** 以内です。

**画面下部の背景が暗すぎます。** これは想定どおりの動作です。背景は上から下にかけて暗くなるグラデーションとして表示されます。より明るいベースの
色調を選んでください。

**プレビューが実際のジャーニーと一致しません。** プレビューは **Web Journey v3.0** のデザインに基づいています。お客様の連携が別のバージョンの場合、
結果が異なることがあります。バージョン更新については、Unicoにお問い合わせください。

**誤った設定を公開してしまいました。どうすれば元に戻せますか?** 画面を再度開き、値を調整して(またはクリアしてデフォルトに戻し)、再度公開してください。
バージョン履歴はありません。まだ公開していない場合は、**Cancel** をクリックするだけで済みます。

**自分のアカウントのカスタマイズを誰が変更しましたか?** 画面にはこの履歴は表示されません。最後に変更したユーザーと日時を確認するには、
Unicoサポートにお問い合わせください。

## クイックリファレンス

```text
IDCloud Portal
 └─ Settings (サイドバーのギアアイコン)
     └─ Customization タブ
         ├─ iFrame ............... Buttons (背景色、文字色、角丸)
         │                         Content (コンテンツの色)
         │                         + Configure domains
         └─ Redirect or SDK ...... Logo (PNG、60 px、100 KB)
                                   Background (色、グラデーションとして適用)
                                   Buttons (背景色、文字色、角丸)
                                   Content (コンテンツの色)

ライブプレビュー · Mobile / Desktop · Cancel · Publish
```