ZendeskモバイルSDKのテーマをカスタマイズする方法：2026年完全ガイド

顧客がアプリを開いてヘルプが必要な場合、サポートエクスペリエンスはブランドの自然な延長のように感じるはずです。ZendeskモバイルSDKのテーマを使用すると、色、フォント、UI要素をカスタマイズして、サポートインターフェイスがアプリのルックアンドフィールと一致するようにできます。

ただし、SDKのテーマ設定には開発リソースと継続的なメンテナンスが必要です。ブランド化されたサポートエクスペリエンスをより簡単に提供する方法をお探しの場合は、eesel AIがZendeskと統合し、コードに触れることなくカスタマイズを処理します。詳細については後述します。

AndroidとiOSの両方でZendeskモバイルSDKをテーマ設定する方法を次に示します。

必要なもの

カスタマイズを開始する前に、次のものがあることを確認してください。

• モバイルSDKアクセス権を持つZendeskアカウント
• Android StudioまたはXcodeがインストールされていること
• Kotlin/Java（Androidの場合）またはSwift/Objective-C（iOSの場合）の基本的な知識
• アプリのテーマリソースとAndroidManifest.xml（Android）またはInfo.plist（iOS）へのアクセス

ステップ1：テーマ設定のアプローチを選択する

Zendeskは、モバイルSDKの外観をカスタマイズする3つの方法を提供しています。状況に合ったものを選択してください。

オプションA：UserColors API（新しいプロジェクトに推奨）

UserColors APIは、Web Widget SDKの最新のアプローチです。15以上のカラープロパティを細かく制御でき、ライトモードとダークモードをすぐにサポートします。最初から始める場合、または新しいSDKに移行できる場合は、これを使用してください。

オプションB：Material Designテーマ（従来のインプリメンテーションの場合）

従来のSupport SDKを使用している場合は、Material Designテーマを使用します。このアプローチはTheme.MaterialComponentsを拡張し、colorPrimaryやcolorAccentなどの属性を使用します。古いインプリメンテーションを維持している場合は、これを使用してください。

オプションC：管理センターの構成（コード不要のオプション）

コードに触れずに基本的な色を変更するには、Zendesk管理センターでプライマリ、メッセージ、およびアクションの色を設定できます。SDKは、プログラムでオーバーライドしない場合、これらをデフォルトとして使用します。これは単純なブランディングには役立ちますが、APIアプローチほどの柔軟性はありません。

ステップ2：AndroidでUserColors APIを実装する

UserColors APIを使用すると、特定のUIコンポーネントのカスタムカラーを定義できます。実装方法は次のとおりです。

まず、ライトモードとダークモードの両方に対してUserColorsオブジェクトを作成します。

val userLightColors = UserColors(
    primary = Color.parseColor("#1E88E5"),
    onPrimary = Color.WHITE,
    message = Color.parseColor("#E3F2FD"),
    onMessage = Color.parseColor("#1565C0"),
    businessMessage = Color.WHITE,
    onBusinessMessage = Color.parseColor("#424242"),
    action = Color.parseColor("#43A047"),
    onAction = Color.WHITE,
    background = Color.parseColor("#FAFAFA"),
    onBackground = Color.parseColor("#616161"),
    onSecondaryAction = Color.parseColor("#1E88E5"),
    error = Color.parseColor("#E53935"),
    notify = Color.parseColor("#FB8C00"),
    onError = Color.WHITE,
    onNotify = Color.WHITE
)

val userDarkColors = UserColors(
    primary = Color.parseColor("#90CAF9"),
    onPrimary = Color.BLACK,
    message = Color.parseColor("#1565C0"),
    onMessage = Color.WHITE,
    businessMessage = Color.parseColor("#424242"),
    onBusinessMessage = Color.WHITE,
    action = Color.parseColor("#66BB6A"),
    onAction = Color.BLACK,
    background = Color.parseColor("#212121"),
    onBackground = Color.parseColor("#BDBDBD"),
    onSecondaryAction = Color.parseColor("#90CAF9"),
    error = Color.parseColor("#EF5350"),
    notify = Color.parseColor("#FFA726"),
    onError = Color.BLACK,
    onNotify = Color.BLACK
)

次に、カスタムカラーでSDKを初期化します。

val factory = DefaultMessagingFactory(
    userLightColors = userLightColors,
    userDarkColors = userDarkColors
)

Zendesk.initialize(
    context = this,
    channelKey = "your_channel_key",
    messagingFactory = factory
)

Java開発者の場合、パターンは似ています。

UserColors userLightColors = new UserColors(
    Color.parseColor("#1E88E5"),  // primary
    Color.WHITE,                   // onPrimary
    Color.parseColor("#E3F2FD"),  // message
    // ... remaining colors
);

DefaultMessagingFactory factory = new DefaultMessagingFactory(
    userLightColors,
    userDarkColors
);

Zendesk.initialize(this, "your_channel_key", factory);

理解すべき重要なプロパティ：

• primary：（プライマリ）会話画面と会話リスト画面のヘッダーの背景色
• onPrimary：（オンプライマリ）プライマリ背景のテキストとアイコンの色
• message：（メッセージ）エンドユーザーメッセージの背景
• businessMessage：（ビジネスメッセージ）エージェント/ビジネスメッセージの背景
• action：（アクション）「新しい会話」やフォームボタンなどのボタンの背景
• background：（背景）会話画面の背景色
• onBackground：（オン背景）タイムスタンプ、名前、およびメッセージステータスの色（65％の不透明度）

ステップ3：iOS SDKの外観をカスタマイズする

iOSのテーマ設定はAndroidよりも簡単です。主にCommonThemeオブジェクトを使用して、プライマリブランドカラーを設定します。詳細については、iOS SDKドキュメントを参照してください。

Swiftの場合：

import CommonUISDK

// プライマリブランドカラーを設定
CommonTheme.currentTheme.primaryColor = UIColor(red: 0.12, green: 0.53, blue: 0.90, alpha: 1.0)

Objective-Cの場合：

#import <CommonUISDK/CommonUISDK.h>

// プライマリブランドカラーを設定
[ZDKCommonTheme currentTheme].primaryColor = [UIColor colorWithRed:0.12 green:0.53 blue:0.90 alpha:1.0];

この単一の色の変更は、SDK UI全体に色合いとして適用され、ナビゲーションバー、ボタン、およびインタラクティブな要素に影響します。

ヘルプセンターの記事のスタイルを設定するには、help_center_article_style.cssという名前のファイルをプロジェクトのルートに作成し、Xcodeプロジェクトに追加します。SDKは、デフォルトのスタイルではなく、カスタムCSSを自動的に使用します。

ステップ4：ヘルプセンターの記事をスタイルする

AndroidとiOSの両方が、ヘルプセンターの記事のCSSカスタマイズをサポートしています。これにより、コンテンツをアプリの一部のように感じさせることができます。

help_center_article_style.cssという名前のファイルを作成し、カスタムスタイルを追加します。開始するためのテンプレートを次に示します。

/* 基本スタイル */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    color: #333;
    margin: 20px;
    background-color: #fff;
}

/* 見出し */
h1, h2, h3, h4, h5, h6 {
    color: #1a1a1a;
    font-weight: 600;
    margin-bottom: 16px;
}

h1 { font-size: 28px; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }

/* リンク */
a {
    color: #1E88E5;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

/* リスト */
ul, ol {
    margin-bottom: 16px;
    padding-left: 24px;
}

li {
    margin-bottom: 8px;
}

/* 記事のフッター（作成者と日付）を非表示にする */
footer {
    display: none;
}

Androidの場合は、このファイルをassetsディレクトリに配置します。iOSの場合は、プロジェクトバンドルに追加します。SDKはカスタムCSSを自動的に検出し、適用します。

ステップ5：テーマをテストして検証する

本番環境に出荷する前に、テーマを徹底的にテストしてください。

• デバイスの種類：さまざまな画面サイズ（電話、タブレット、折りたたみ式）でテストします
• ライトモードとダークモード：両方のテーマで色が機能することを確認します
• アクセシビリティ：コントラスト比がWCAGガイドラインを満たしていることを確認します（通常のテキストの場合は4.5：1、大きなテキストの場合は3：1）
• エッジケース：長い記事のタイトル、複数の添付ファイル、およびエラー状態でテストします

注意すべき一般的な問題：

• 色が適用されない：SDKを初期化する前に色を設定していることを確認してください
• ダークモードが機能しない：ライトカラーオブジェクトとダークカラーオブジェクトの両方が定義されていることを確認してください
• CSSがロードされない：CSSファイルが正しい場所にあり、ビルドに含まれていることを確認してください

代替案：サードパーティのZendeskテーマ

カスタムSDKのテーマ設定が過剰に感じられる場合は、Premium Plus、Diziana、またはGrow-Shineなどのマーケットプレイスからの既製のテーマが別の方法を提供します。これらは30ドルから389ドルの範囲で、開発作業なしでプロフェッショナルなデザインを提供します。

注意点は？サードパーティのテーマは、主にWebベースのヘルプセンターをカスタマイズするものであり、モバイルSDK UIはカスタマイズしません。アプリ内サポートエクスペリエンスには、SDKのテーマ設定が依然として必要です。これらは、カスタムテーマを最初から構築せずに、洗練されたヘルプセンターを必要とするチームに最適です。

eesel AIによるより簡単なサポートのカスタマイズ

現実を言えば、SDKのテーマ設定には時間がかかり、継続的なメンテナンスが必要であり、ブランドの更新ごとに開発者の関与が必要です。複雑さを伴わずにブランド化されたサポートが必要な場合は、eesel AIが別のアプローチを提供します。

SDKをテーマ設定する代わりに、eesel AIは既存のヘルプデスク（Zendeskを含む）と連携して、AIを活用したサポートを提供します。過去のチケットやヘルプセンターの記事からブランドボイスを学習するため、応答は自然にトーンに一致します。コードは不要、テーマ設定するSDKは不要、リブランド時のメンテナンスは不要です。

価格設定も簡単です。シートではなくインタラクションに対して支払い、AIが自律的に会話を処理する前に、AIが返信を下書きすることから始めることができます。開発のオーバーヘッドなしで優れたサポートエクスペリエンスを必要とするチームにとって、従来のSDKのテーマ設定とともに検討する価値があります。

一般的なテーマ設定の問題のトラブルシューティング

明確なドキュメントがあっても、期待どおりに機能しない場合があります。最も一般的な問題の修正を次に示します。

色が適用されない：Zendesk.initialize()を呼び出す前に色を構成していることを確認してください。SDKは初期化時にテーマ設定を読み取ります。

ダークモードが正しく表示されない：userLightColorsとuserDarkColorsの両方を定義していることを確認してください。1つしか設定しない場合、SDKはもう一方にデフォルトを使用します。

CSSの変更が表示されない：iOSでは、CSSファイルがアプリバンドルターゲットに含まれていることを確認してください。Androidでは、resではなくassetsフォルダーにあることを確認してください。

テーマの継承の問題：SDKテーマを拡張する場合は、正確な親テーマ名を使用します：ZendeskSdkTheme.Light、ZendeskSdkTheme.Dark、またはZendeskSdkTheme.Light.DarkActionBar。

リビルドと再起動のタイミング：コードの変更（色、テーマ）にはリビルドが必要です。CSSファイルの変更は、多くの場合、アプリの再起動のみが必要です。不明な場合は、リビルドしてください。