Zendeskテーマの問題を解決する方法：完全なトラブルシューティングガイド

壊れたヘルプセンターのテーマは、誰にとってもイライラの種です。顧客は回答を見つけることができず、サポートチームは不必要なチケットに対応し、あなたは一体何が間違っているのかを突き止めようと苦労することになります。

朗報は、ほとんどのZendeskテーマの問題は予測可能なパターンに従うということです。いったん診断方法を理解すれば、通常、修正は簡単です。このガイドでは、一般的なテーマの問題を段階的に特定し、解決する方法を説明します。

Zendeskテーマの種類とその制限事項について

トラブルシューティングに入る前に、どの種類のテーマを使用しているかを理解する必要があります。Zendeskは3つのテーマカテゴリを提供しており、それぞれ更新とサポートの処理方法が異なります。

**標準テーマ（Copenhagen（コペンハーゲン））**は、ヘルプセンターにプリインストールされています。これらはZendeskによってメンテナンスされ、自動更新を受け、完全にサポートされています。トレードオフは、基盤となるコードを編集できないことです。設定パネルから色、フォント、ブランディングをカスタマイズできますが、Zendeskが許可するものに制限されます。

カスタムテーマは、より柔軟性があります。これらは、テンプレート、CSS、またはJavaScriptを編集して変更したテーマです。外観と機能は完全に制御できます。ただし、注意点があります。カスタマイズすると、すべて自己責任になります。Zendeskはカスタムコードをサポートせず、更新は自動的に適用されません。Zendeskがリリースする新機能は、テーマに手動で追加する必要があります。

マーケットプレイステーマは、その中間に位置します。これらは、Zendesk Marketplaceから購入または試用するサードパーティのテーマです。多くの場合、標準テーマよりも多くのデザインオプションが付属していますが、品質は大きく異なります。サポートはZendeskではなく、テーマ開発者から提供されます。優れたマーケットプレイステーマもあれば、コーディングが悪く、作成者に見捨てられたテーマもあります。

どのタイプを使用しているかを知ることで、トラブルシューティングのアプローチが決まります。標準テーマの問題は通常、プラットフォームのバグです。カスタムテーマの問題は通常、コードに関連しています。マーケットプレイステーマの問題は、どちらかである可能性があり、さらにサードパーティの開発者によって導入された潜在的な問題もあります。

ステップ1：セーフモードテストで問題を切り分ける

最初に答えるべき質問は、これがZendeskプラットフォームの問題なのか、それともカスタムコードの問題なのかということです。

Zendeskは、これを見つけるための簡単な方法を提供しています。ヘルプセンターのURLに?safe_mode=1を追加します。これにより、すべてのカスタムJavaScriptとCSSが無効になり、ベーステーマのみがロードされます。セーフモードで問題が消える場合は、カスタムコードが原因です。問題が解決しない場合は、Zendeskサポートが必要なプラットフォームの問題が発生しています。

より徹底的なテストを行うには、Copenhagen（コペンハーゲン）テーマの方法を試してください。

1. ナレッジ管理に移動し、デザインをカスタマイズをクリックします。
2. テーマを追加をクリックし、Copenhagen（コペンハーゲン）テーマを追加を選択します。
3. ライブラリで新しいCopenhagen（コペンハーゲン）テーマを見つけ、カスタマイズをクリックします。
4. プレビューをクリックし、問題が発生するかどうかを確認します。

デフォルトのCopenhagen（コペンハーゲン）テーマで問題が発生する場合は、Zendeskカスタマーサポートにお問い合わせください。カスタムテーマでのみ表示される場合は、コードに問題があります。

ステップ2：一般的な表示とレイアウトの問題を修正する

表示の問題は、最も一般的なテーマの問題です。整列しないボタン、コンテナからあふれるコンテンツ、またはモバイルデバイスでレイアウトが崩れるなどです。これらは通常、CSSの競合またはレスポンシブデザインのルールがないことに起因します。

まず、ブラウザの開発者ツール（ほとんどのブラウザではF12）を開きます。問題のある要素を調べて、計算されたスタイルを確認します。カスタムスタイルが他の何かによって上書きされていませんか？CSSカスケードを調べて、何が特異性の戦いに勝っているかを確認します。

一般的なCSSの修正には、次のものがあります。

• オーバーフローの問題：コンテンツを切り捨てているコンテナにoverflow: hiddenまたはoverflow: autoを追加します。
• 配置の問題：flexboxまたはグリッドのプロパティを確認します。display: flexがないか、justify-contentの値が正しくないことがよくあります。
• モバイルレスポンシブ：メディアクエリを使用していることを確認します。一般的なブレークポイント（タブレットの場合は768px、モバイルの場合は480px）でテストします。
• Z-indexのスタック：他の要素の後ろに表示される要素は、適切なポジショニング（相対、絶対、または固定）で明示的なz-index値を必要とすることがよくあります。

テーマエディタからカスタムCSSを追加した場合は、正しくロードされていることを確認します。CSSファイルが積極的にキャッシュされることがあります。CSS URLにバージョンパラメータを追加するか、ブラウザのキャッシュをクリアしてみてください。

JavaScript関連の表示の問題については、ブラウザコンソールでエラーを確認します。1つのJavaScriptエラーにより、後続のスクリプトが実行されなくなり、ドロップダウンメニューや検索候補などのインタラクティブな要素が壊れる可能性があります。

ステップ3：テンプレートとコードの編集の問題を解決する

テンプレートの問題は、ZendeskのCurlybars（カーリーバーズ）テンプレート言語が関係するため、より複雑です。コードの変更がプレビューまたはライブテーマに反映されない場合は、いくつかのことが起こっている可能性があります。

まず、正しいテンプレートファイルを編集していることを確認します。Zendeskテーマは、異なるページタイプに特定のファイル名を使用します。

• ヘルプセンターのホームページの場合はhome_page.hbs
• 個々の記事の場合はarticle_page.hbs
• ナビゲーションページの場合はcategory_page.hbsとsection_page.hbs
• グローバル要素の場合はheader.hbsとfooter.hbs

よくある間違いは、セクションリストのcategory_page.hbsを実際に変更する必要がある場合に、home_page.hbsを編集することです。

Curlybars（カーリーバーズ）の構文エラーも、テンプレートがサイレントに失敗する原因となる可能性があります。以下を確認してください。

• {{#if}}または{{#each}}のようなヘルパーの終了タグがない
• 正しくない変数名（大文字と小文字が区別されます）
• エスケープされていないHTML。{{content}}の代わりにトリプルブレース{{{content}}}を使用する必要があります。

プレビューに変更が表示されない場合は、ハードリフレッシュ（Ctrl + F5またはCmd + Shift + R）を試してください。Zendeskのプレビューは、キャッシュを積極的に使用する可能性があります。また、選択した正しいユーザーロールでプレビューしていることを確認してください。一部のコンテンツは、サインインしたユーザーまたは特定の組織にのみ表示されます。

永続的なプレビューの問題については、テンプレートの編集が機能しないに関するコミュニティ投稿を確認してください。場合によっては、テーマの新しいコピーを作成して変更を移行するしかありません。

ステップ4：テーマの更新とバージョンの競合を処理する

テーマの更新は、特にマーケットプレイステーマでは、予期しない問題の原因となる可能性があります。開発者がアップデートをリリースすると、[テーマ]ページに通知が表示される場合があります。ただし、更新は必ずしも簡単ではありません。

マーケットプレイステーマをカスタマイズした場合、更新によって変更が上書きされます。これは、作業の損失から保護するために、意図的に設計されています。ただし、これは更新を処理するための戦略が必要であることを意味します。

推奨されるアプローチ：

1. マーケットプレイステーマをカスタマイズする前に、コピーを作成します。
2. 元のテーマではなく、コピーに変更を適用します。
3. 元のテーマを未変更のままにして、更新を受信できるようにします。
4. 更新が利用可能な場合は、リリースノートを確認します。
5. 元のテーマを更新し、変更を手動でカスタマイズされたコピーにマージします。

標準のCopenhagen（コペンハーゲン）テーマの場合、コードをカスタマイズしない限り、更新は自動的に行われます。テンプレート、CSS、またはJavaScriptを編集すると、それらの変更を維持する責任を負うことになります。テーマの更新が必要な新しいZendesk機能は、手動で追加するまでカスタムテーマには表示されません。

予防：安定したテーマのためのベストプラクティス

テーマの問題を修正する最良の方法は、それらを防止することです。いくつかの習慣は、トラブルシューティングの時間を節約できます。

最初にサンドボックスでテストします。 Zendeskは、理由があってサンドボックス環境を提供しています。主要なテーマの変更は、本番環境に直接移行しないでください。サンドボックスで構築およびテストし、自信がある場合にデプロイします。

バージョン管理を使用します。 テーマを定期的にダウンロードし、Gitまたは別のバージョン管理システムに保存します。何かが壊れた場合、何が変更されたかをすばやく特定し、必要に応じてロールバックできます。

関係者の承認を得ます。 テーマの変更をデプロイする前に、重要な人々の賛同を得てください。サポートマネージャー、マーケティングチーム、およびカスタマーサクセスリーダーはすべて、ヘルプセンターが何をするべきかについての視点を持っています。事前に承認を得ることで、後で緊急ロールバックを防ぐことができます。

ロールバック計画を立てます。 何かがうまくいかない場合に、以前のテーマに戻す方法を正確に把握してください。古いテーマをライブラリに保持し、アクティブ化する準備をしてください。問題のレベルに応じて、すぐにロールバックするか、修正優先アプローチを取るかを事前に決定します。

カスタマイズを文書化します。 テーマを変更するときは、コードに変更した内容とその理由を説明するコメントを残してください。将来のあなた（または後継者）は、トラブルシューティングを行うときに感謝するでしょう。

カスタムテーマの代替手段を検討する場合

カスタムテーマのメンテナンスの負担がメリットを上回る場合があります。テーマコードと絶えず格闘している場合、またはヘルプセンターがまだ必要な顧客体験を提供していない場合は、アプローチを再考する時期かもしれません。

カスタムテーマは強力ですが、セルフサービスを改善する唯一の方法ではありません。最新のAIツールは、顧客の質問に直接対応できるため、すべての作業を行うためのヘルプセンターのデザインへのプレッシャーを軽減できます。

eesel AIでは、異なるアプローチを採用しています。テーマのカスタマイズとコードのトラブルシューティングに何週間も費やす代わりに、数分でビジネスを学習するAIチームメイトを招待できます。AIエージェントは、Zendeskと直接統合し、最前線のサポートチケットを自律的に処理します。過去のチケット、ヘルプセンターの記事、およびマクロから学習して、正確でブランドに合った応答を提供します。

違いは何ですか？ツールを構成しているのではなく、チームメイトを雇用しています。AIがエージェントレビューのために返信を下書きすることから始め、AIがその能力を証明するにつれて、完全な自律性までレベルアップします。テーマのカスタマイズは不要です。

テーマの頭痛の種なしで顧客向けのサポートを行うには、AIチャットボットをWebサイトに埋め込み、既存のコンテンツでトレーニングされた質問に即座に回答します。ヘルプセンターに依存するのではなく、ヘルプセンターと連携して動作します。

Zendeskテーマの問題との格闘にうんざりしていて、AIが複雑なカスタマイズへの依存をどのように減らすことができるかを知りたい場合は、eeselの動作をご覧ください。