2026年にZendesk Guideのテーマを更新およびカスタマイズする方法

ヘルプセンターは、お客様が答えを必要とするときに最初にアクセスする場所であることがよくあります。既製の汎用的なテーマは最初は機能するかもしれませんが、最終的にはブランドに合った、情報を見つけやすくするものが欲しくなるでしょう。

良いニュースは？ Zendesk Guideでは、簡単な設定の調整から完全なコードレベルの制御まで、テーマをカスタマイズするための多くのオプションが提供されていることです。課題は、どのアプローチを採用し、ライブサイトを壊さずにアップデートを管理する方法を知ることです。

このガイドでは、Zendesk Guideのテーマを更新およびカスタマイズするために知っておく必要のあるすべてのことを説明します。小さな調整を行う場合でも、完全にカスタムなものを作成する場合でも、安全かつ効率的に行う方法を学びます。

必要なもの

カスタマイズを開始する前に、適切な設定になっていることを確認してください。

必須：

• Zendesk Suite（Team、Growth、Professional、Enterprise、またはEnterprise Plus）またはコード編集用のGuide Professional/Enterprise
• Zendeskアカウントのナレッジ管理権限

オプションですが推奨：

• コードエディターを備えたローカル開発環境
• バージョン管理用のGit（ギット）
• テスト用のZendeskサンドボックス環境へのアクセス

簡単な説明：色を変更してロゴをアップロードするだけの場合は、どのプランでも可能です。ただし、HTML、CSS、またはJavaScriptを編集する必要がある場合は、Guide Professional以上が必要です。

ステップ1：テーマエディターにアクセスする

すべてはテーマエディターから始まります。アクセス方法は次のとおりです。

1. Zendesk管理パネルで、サイドバーのナレッジ管理に移動します。
2. デザインをカスタマイズをクリックします。
3. 現在のライブテーマが一番上に表示されたテーマページが表示されます。

テーマページには、利用可能なすべてのテーマが表示されます。一番上のテーマは、ライブテーマ（お客様に現在表示されているもの）です。下のテーマは、切り替えたり変更したりできるドラフトまたはバックアップです。

インターフェイスに慣れてください。各テーマには、プレビュー、複製、ダウンロード、または削除できるオプションメニュー（3つのドット）があります。さまざまなバージョンを管理する際に、これらのオプションを頻繁に使用します。

ステップ2：設定パネルを使用してカスタマイズする

多くのチームにとって、設定パネルは必要なものをすべて提供します。誤ってコードを壊すことがなく、変更によってテーマがアップデートを受信できなくなることもないため、最も安全なカスタマイズ方法です。

設定にアクセスするには：

1. テーマページで、編集するテーマのカスタマイズをクリックします。
2. 色、フォント、および画像のオプションが表示された設定パネルが表示されます。
3. 変更を加え、準備ができたら公開をクリックします。

設定パネルでは通常、次のものをカスタマイズできます。

• ブランドカラー：プライマリカラー、テキストカラー、リンクカラー、および背景色
• タイポグラフィ：見出しフォントと本文テキストフォント
• 画像：ロゴ、ファビコン、ホームページの背景、およびコミュニティ画像

これらの変数は、テーマのマニフェストファイルに保存され、$brand_colorのような構文を使用してCSSで参照できます。つまり、設定でブランドカラーを更新すると、その変数が使用されているすべての場所で自動的に更新されます。

コード編集の代わりに設定を使用するのはいつですか？カスタマイズのニーズが純粋に外観（色、フォント、ロゴ）である場合は、設定を使用してください。より速く、安全で、将来のテーマアップデートからロックアウトされることはありません。

ステップ3：高度なカスタマイズのためにテーマコードを編集する

設定だけでは不十分な場合があります。ホームページのレイアウトを再構築したり、カスタムJavaScript機能を追加したり、まったく新しいページテンプレートを作成したりする必要がある場合があります。その場合は、コードを直接編集する必要があります。

コードエディターにアクセスするには：

1. テーマページから、テーマのカスタマイズをクリックします。
2. 右上のコードを編集をクリックします。
3. テンプレート、CSS、JavaScript、およびアセットを含むファイル構造が表示されます。

表示されている内容は次のとおりです。

**テンプレート（.hbsファイル）：**これらはHandlebars（ハンドルバーズ）構文（ZendeskはCurlybars（カーリーバーズ）と呼んでいます）を使用して、ページレイアウトを定義します。主要なテンプレートは次のとおりです。

• home_page.hbs：ヘルプセンターのホームページ
• article_page.hbs：個々の記事ページ
• category_page.hbsおよびsection_page.hbs：ナビゲーションランディングページ
• header.hbsおよびfooter.hbs：すべてのページに表示される要素
• document_head.hbs：カスタムメタタグまたは外部スクリプトを追加する場所

**CSS（style.css）：**すべての視覚的なスタイルを制御します。設定で定義された変数（$brand_colorなど）を使用するか、カスタムCSSを記述できます。

**JavaScript（script.js）：**インタラクティブ機能と動的な動作を追加します。

**マニフェスト（manifest.json）：**テーマの設定変数とメタデータを定義します。

**重要な警告：**テーマのコードを編集すると、「カスタムテーマ」になります。カスタムテーマは、Zendeskまたはテーマ開発者から自動アップデートを受信しません。アップデートを手動で適用する必要があります。注意しないと、カスタマイズが上書きされる可能性があります。

Curlybarsを初めて使用する場合は、よく見られるいくつかの一般的な式を次に示します。

• {{breadcrumbs}}：パンくずリストナビゲーションを表示します
• {{search}}：検索バーをレンダリングします
• {{article.title}}：記事のタイトルを出力します
• {{settings.brand_color}}：設定変数を参照します

覚えておくべき重要なことは、Curlybarsを使用するとヘルプセンターデータにアクセスできるということです。動的なコンテンツを表示したり、記事をループしたり、ユーザーロールまたはページタイプに基づいて要素を条件付きで表示したりできます。

ステップ4：テーマのバージョンとアップデートを管理する

テーマの管理は、物事が複雑になる場所です。変更の追跡、アップデートのテスト、および問題が発生した場合のロールバックのためのシステムが必要です。

バックアップコピーの作成

大幅な変更を加える前に、必ずバックアップを作成してください。

1. テーマページで、ライブテーマを見つけます。
2. オプションメニュー（3つのドット）をクリックします。
3. 複製を選択します。
4. 「PROD-BACKUP-2026-02-25」のようなわかりやすい名前を付けます。

これで、問題が発生した場合に備えて、クリーンなロールバックオプションができました。

ローカル開発用にダウンロードする

本格的なカスタマイズを行うには、ローカルで作業する必要があります。

1. テーマのオプションメニューをクリックします。
2. ダウンロードを選択します。
3. すべてのテーマファイルを含むZIPファイルが取得されます。
4. 展開してコードエディターで開きます。

ローカルで作業すると、バージョン管理（Git）、お好みのエディター、およびアップロード前に変更をテストするためのZendesk Theme Preview（Zendeskテーマプレビュー）ツールを使用できます。

Templating API（テンプレートAPI）バージョンについて

これは混乱がよく起こる場所です。Zendesk Guideには、2種類の「バージョン」があります。

Templating API（テンプレートAPI）バージョンは、Zendeskによって制御されます。これらは、利用可能な機能とヘルパーを決定します。2014年以降、4つのバージョンがあります。

出典：テーマバージョン管理に関するeesel AIブログ

テーマバージョンは、実際のカスタムテーマです。ライブラリに複数のテーマを含めて、それらを切り替えることができます。

Templating API（テンプレートAPI）バージョンを確認するには、コードエディターでテーマ名の下を確認するか、manifest.jsonファイルのapi_versionフィールドを確認してください。

Templating API（テンプレートAPI）バージョンのアップグレードには注意が必要です。新しいバージョンでは、使用しているヘルパーが非推奨になる可能性があり、アップグレード後にテーマが壊れる可能性があります。常に最初にサンドボックスでテストしてください。

Marketplace（マーケットプレイス）テーマのアップデート

Zendesk Marketplaceからテーマを購入した場合、開発者が新しいバージョンをリリースすると、アップデート通知が表示されます。

**開発者ライセンスに関する重要な注意：**開発者ライセンスを購入してコードを編集した場合、カスタマイズを失うことなく自動的にアップデートすることはできません。標準的なワークフローは、カスタマイズする前にテーマを複製し、アップデートのために元のクリーンな状態を維持することです。

Marketplace（マーケットプレイス）テーマをアップデートするには：

1. ナレッジ管理>デザインをカスタマイズに移動します。
2. テーマの「アップデートあり」バッジを探します。
3. オプションメニューをクリックして、アップデートありを選択します。
4. リリースノートを確認します。
5. テーマをアップデートをクリックします。

テーマをカスタマイズした場合は、変更をアップデートされたバージョンと手動でマージする必要があります。

ステップ5：テーマをテストしてデプロイする

テストせずにテーマを本番環境にデプロイしないでください。適切なワークフローは次のとおりです。

テストにサンドボックスを使用する

Zendeskは、この目的のために特別にサンドボックス環境を提供しています。最初にサンドボックスでテーマを構築してテストし、自信がついたら本番環境にデプロイします。

公開前にプレビューする

テーマを編集するときは、プレビューをクリックして、テスト環境での変更を確認します。プレビューはすべてのインタラクティブ機能をサポートしているわけではないため、完全なテストにはサンドボックスを使用してください。

テーマをライブとして設定する

デプロイする準備ができたら：

1. テーマページで、アクティブ化するテーマを見つけます。
2. オプションメニューをクリックします。
3. ライブテーマとして設定を選択します。
4. 変更を確認します。

新しいテーマがすぐに公開されます。ステージング期間はないため、十分にテストされていることを確認してください。

デバイスとブラウザ全体でテストする

デプロイする前に、テーマが次の環境で動作することを確認してください。

• デスクトップ（Chrome、Safari、Firefox、Edge）
• モバイルデバイス（iOSおよびAndroid）
• さまざまな画面サイズ

ラップトップでは見栄えの良いテーマでも、モバイルでは壊れている可能性があります。ヘルプセンターのトラフィックのかなりの部分がモバイルデバイスから来るため、レスポンシブデザインは不可欠です。

ロールバック戦略

常にロールバック計画を立ててください。問題が発生した場合にアクティブ化できる既知の正常なバックアップテーマを準備しておきます。インシデント中にそれを把握しないように、元に戻すための正確な手順を文書化します。

一般的なカスタマイズシナリオ

チームが通常カスタマイズするものの実用的な例を次に示します。

ブランディング用のカスタムCSSの追加：

/* カスタムボタンのスタイル */
.btn-custom {
  background-color: $brand_color;
  border-radius: 4px;
  padding: 12px 24px;
}

記事レイアウトの変更： article_page.hbsを編集して、記事コンテンツの表示方法を再構築します。サイドバーを追加したり、パンくずリストの位置を変更したり、関連する記事を含めたりすることができます。

**カスタムJavaScriptの追加：**アコーディオン、タブ、または動的なコンテンツの読み込みなどのインタラクティブな要素にscript.jsを使用します。

カスタムページの作成： Enterpriseプランでは、カスタムページ（連絡先ページやFAQなど）を作成し、ヘルプセンターの任意の場所からリンクできます。

モバイルレスポンシブ： CSSメディアクエリを使用して、テーマがすべての画面サイズで適切に動作するようにします。タッチターゲット（ボタンとリンク）をテストして、モバイルユーザーにとって十分に大きいことを確認します。

テーマ管理のベストプラクティス

数十のヘルプセンターを扱ってきた経験から、頭痛を防ぐためのプラクティスを次に示します。

• わかりやすい命名規則を使用します。 「Theme v2」の代わりに、「Copenhagen-Custom-Q1-2026」または「Theme-Holiday-2026」を使用します。バージョン番号とコンテキストを含めます。

• **変更履歴を保持します。**各バージョンの変更内容、変更者、および理由を文書化します。これは、複数の人がヘルプセンターで作業する場合に非常に役立ちます。

• **常に最初にサンドボックスでテストします。**プレビュー機能は便利ですが、サンドボックスではエンドツーエンドのテストのための完全な環境が提供されます。

• **本番環境のバックアップを保持します。**大幅な変更を加える前に、日付スタンプ付きの名前でライブテーマを複製します。

• **トラフィックの少ない時間帯にデプロイします。**徹底的なテストを行っても、本番環境の動作は異なる場合があります。影響を受ける顧客が少ない場合にデプロイします。

• **カスタムコードを文書化します。**特定の変更を加えた理由を説明するコメントを追加します。将来のあなた（またはあなたのチームメイト）はあなたに感謝するでしょう。

• **バージョン管理を使用します。**コードレベルのカスタマイズを行っている場合は、Gitで変更を追跡します。これにより、コラボレーションが容易になり、完全な履歴が得られます。

eesel AIでヘルプセンターを合理化する

テーマの外観を完璧にするだけでなく、その中のコンテンツも忘れないでください。美しいヘルプセンターは、顧客が必要な答えを見つけることができる場合にのみ機能します。

そこで私たちがお手伝いできます。AIチャットボットは、Zendeskヘルプセンターと直接統合して、顧客の質問に即座に正確な回答を提供します。

仕組みは次のとおりです。

• ヘルプセンターに接続し、既存の記事から学習します。
• 顧客はエージェントを待つことなく、すぐに回答を得られます。
• AIは情報源を引用するため、顧客は情報の出所を知ることができます。
• ブランドの声に合わせて応答をカスタマイズできます。
• どのZendesk Guideテーマバージョンでも動作します。

組み合わせは強力です。ブランドを代表する美しくカスタムなテーマと、適切なコンテンツを適切なタイミングで提供するAIが組み合わされています。デザインはあなたが担当し、インテリジェントなコンテンツ配信は私たちが担当します。

ヘルプセンターのエクスペリエンスに投資する場合は、AIがテーマのカスタマイズの取り組みをどのように補完できるかを検討してください。見た目の良いヘルプセンターは、顧客がすぐに回答を得られるとさらに優れています。Zendesk Guideテーマとシームレスに連携するAIエージェントをお探しであれば、Zendesk向けeesel AIエージェントをご覧ください。