ジャーニーカスタマイズ

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

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

情報

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

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

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

始める前に

アクセス権限

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

設定の適用方法

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

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

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

連携で設定可能な項目

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

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

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

情報

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

手順

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

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

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

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

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

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

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

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

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

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

警告

Redirect or SDK で利用可能です。iFrameでは、CbU 1.0のみ利用可能です。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

border radiusの参考値:

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

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

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

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

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

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

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

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

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

ステップ7 — 公開する

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

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

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

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

警告

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

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

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

   

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

   

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

   

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

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

FAQ

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

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

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

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

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

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

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

クイックリファレンス

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