Zendesk Guideセクションページテンプレートの作成とカスタマイズ方法

何百もの記事でヘルプセンターを管理している場合、すべてに同じものが当てはまらないことに気づいているかもしれません。トラブルシューティングのセクションは、製品ドキュメントのセクションとは異なるレイアウトが必要です。そこで、Zendesk Guideのセクションページテンプレートが登場します。これにより、セクションページの見た目と機能をカスタマイズして、訪問者が見ているコンテンツのタイプに基づいて、より良いブラウジング体験を提供できます。

このガイドでは、セクションページテンプレートの作成とカスタマイズについて知っておく必要のあるすべてのことを説明します。テーマエディターを使用する場合でも、コードを直接操作する場合でも、今日実装できる実践的な例を使用して両方のアプローチを学習します。

セクションページテンプレートについて

デフォルトテンプレートとカスタムテンプレート

すべてのZendeskヘルプセンターは、デフォルトのセクションページテンプレートから始まります。このテンプレートには、セクション名、説明、および記事のリストが標準レイアウトで表示されます。これは基本的なニーズには適していますが、すべてのセクションを同じように扱います。

カスタムセクションページテンプレートを使用すると、次のことが可能になります。

• レイアウトと視覚的な階層を変更する
• プロモーション記事を異なる方法で強調表示する
• カスタムナビゲーション要素を追加する
• セクション固有のCTAを作成する
• コンテンツタイプに基づいて表示を調整する

カスタムセクションページテンプレートを使用するタイミング

次の場合に、カスタムテンプレートの作成を検討してください。

• さまざまなプレゼンテーションが必要なさまざまなコンテンツタイプがある場合（FAQ、チュートリアル、トラブルシューティングなど）
• 特定のセクションに固有のナビゲーションまたはクロスリンクが必要な場合
• 特定のセクションでプロモーション記事をより目立つように強調表示したい場合
• ブランド要件がヘルプセンターのさまざまな部分で異なる場合
• セクション固有のウィジェットまたはサードパーティコンテンツを統合する必要がある場合

セクションページが階層にどのように適合するか

Zendesk Guideは、コンテンツを3レベルの階層で整理します。

1. カテゴリー（Categories）　トップレベルのコンテナ（1つしかない場合は非表示）
2. セクション（Sections）　関連する記事を含む
3. 記事（Articles）　個々のコンテンツ

Enterpriseプランでは、セクションにサブセクションを含めることもでき、最大5レベルのネストが可能で、親ごとに最大200のセクションを設定できます。この柔軟性は、複雑なナレッジベースに役立ちますが、慎重なテンプレート設計が必要です。

---

方法1：テーマエディターでテンプレートを作成する

テーマエディターは、ファイルをダウンロードせずにテンプレートを作成するための視覚的なインターフェースを提供します。使用方法は次のとおりです。

ステップ1：ナレッジ管理者に移動する

Zendesk管理パネルで**ナレッジ管理者（Knowledge admin）に移動し、サイドバーのデザインをカスタマイズ（Customize design）**をクリックします。テーマがテーマページに表示されます。

ステップ2：テーマコードを編集する

カスタマイズするテーマを見つけて、**カスタマイズ（Customize）**をクリックします。次に、**コードを編集（Edit code）**をクリックして、テンプレートファイルにアクセスします。

ステップ3：新しいセクションテンプレートを追加する

ファイル領域で、**新規追加（Add new）をクリックし、ドロップダウンからセクションテンプレート（Section template）**を選択します。

ステップ4：テンプレートを構成する

以下を指定する必要があります。

• テンプレート名（Template name）　snake_case（小文字とアンダースコア）を使用し、最大25文字。例：video_sectionまたはfaq_layout
• 開始（Start from）　空白のテンプレートを選択するか、既存のテンプレートを開始点としてコピーします。

ステップ5：テンプレートコードを編集する

新しいテンプレートがコードエディターで開きます。ここにHTMLとCurlybarsコードを記述します。エディターには、構文の強調表示と自動保存機能が含まれています。

**プレビュー（Preview）をクリックして、ライブデータでテンプレートがどのように表示されるかを確認し、満足したら保存（Save）**をクリックします。

ステップ6：セクションにテンプレートを適用する

テンプレートが保存され、テーマが公開されたら、ヘルプセンターの任意のセクションに移動します。**セクションを編集（Edit section）をクリックし、サイドバーのテンプレート（Template）**ドロップダウンからカスタムテンプレートを選択します。

**更新（Update）**をクリックしてテンプレートを適用します。変更は、ライブセクションページにすぐに反映されます。

---

方法2：ローカルでテンプレートを作成する

独自の環境で作業することを好む開発者の場合は、ローカルでテンプレートを作成してインポートできます。

ステップ1：テーマをダウンロードする

テーマページで、テーマのオプションメニューをクリックし、**ダウンロード（Download）**を選択します。これにより、すべてのテーマファイルを含むZIPファイルが提供されます。

ステップ2：section_pagesフォルダーを作成する

ZIPファイルを解凍し、templatesディレクトリに移動します。section_pagesという名前の新しいフォルダーが存在しない場合は作成します。

ステップ3：テンプレートファイルを追加する

section_pagesフォルダーに、.hbs拡張子を持つ新しいファイルを作成します。ファイル名は次の条件を満たす必要があります。

• snake_case（小文字とアンダースコア）を使用する
• 25文字以下である
• 文字、数字、およびアンダースコアのみを含む

ファイル名の例：video_gallery.hbs、faq_accordion.hbs、featured_top.hbs

ステップ4：テンプレートコードを記述する

開始するための基本的な構造を次に示します。

<nav class="sub-nav">
  {{breadcrumbs}}
  {{subscribe}}
</nav>

<h1>{{section.name}}</h1>
<p class="section-description">{{section.description}}</p>

{{#if promoted_articles}}
  <div class="promoted-articles">
    <h2>注目の記事（Featured Articles）</h2>
    <ul>
      {{#each promoted_articles}}
        <li><a href="{{url}}">{{title}}</a></li>
      {{/each}}
    </ul>
  </div>
{{/if}}

{{#if section.articles}}
  <ul class="article-list">
    {{#each section.articles}}
      <li class="article">
        <a href="{{url}}">{{title}}</a>
      </li>
    {{/each}}
  </ul>
{{else}}
  <p>このセクションにはまだ記事がありません。（No articles in this section yet.）</p>
{{/if}}

{{pagination}}

ステップ5：テーマをインポートする

変更したテーマフォルダーをZIP圧縮し、Zendeskに戻ります。テーマを追加（Add theme）> **インポート（Import）**をクリックし、ZIPファイルをアップロードします。テーマをプレビューして、テンプレートが正しく機能することを確認し、公開してライブにします。

---

セクションページテンプレートコードのリファレンス

使用可能なプロパティとヘルパーを理解すると、より洗練されたテンプレートを構築できます。

使用可能なプロパティ

プロパティ（Property）	タイプ（Type）	説明（Description）
section	オブジェクト（object）	名前（name）、説明（description）、記事（articles）配列、およびURLを含む
promoted_articles	配列（array）	セクションでプロモーションとしてマークされた記事
ticket_forms	配列（array）	セクションで使用可能なチケットフォーム
help_center	オブジェクト（object）	ヘルプセンターの設定と構成
settings	オブジェクト（object）	manifest.jsonで定義されたカスタムテーマ設定
signed_in	ブール値（boolean）	現在のユーザーが認証されているかどうか
featured_posts	配列（array）	注目のコミュニティ投稿（有効な場合）
brand	オブジェクト（object）	現在のブランド情報
user	オブジェクト（object）	現在のユーザーオブジェクト（サインインしている場合）

ソース：Zendesk開発者ドキュメント（Zendesk Developer Docs）

使用可能なヘルパー

ヘルパー（Helper）	機能（Function）
{{breadcrumbs}}	現在のページへのパスを示すナビゲーションパンくずリストをレンダリングします
{{pagination}}	記事がページごとの制限を超えた場合にページネーションリンクを表示します
{{subscribe}}	ユーザーがセクションの更新をフォロー/フォロー解除するためのリンクをレンダリングします

一般的なパターン

メタデータを含む記事をループする：

{{#each section.articles}}
  <article class="article-item">
    <h3><a href="{{url}}">{{title}}</a></h3>
    <p class="meta">
      更新日（Updated） {{date updated_at timeago=true}}
      {{#if author}}
        作成者（by） {{author.name}}
      {{/if}}
    </p>
  </article>
{{/each}}

ユーザーの状態に基づく条件付きコンテンツ：

{{#if signed_in}}
  <p>おかえりなさい！（Welcome back!） {{user.name}}</p>
{{else}}
  <p><a href="{{signin_url}}">サインイン（Sign in）</a>してパーソナライズされたヘルプを入手してください。（for personalized help.）</p>
{{/if}}

---

セクションページデザインのベストプラクティス

直感的なナビゲーションを維持する

ユーザーがヘルプセンターの階層のどこにいるかを理解できるように、常にパンくずリストを含めます。{{breadcrumbs}}ヘルパーはこれを自動的に処理しますが、ブランドと一貫性のある方法で表示およびスタイル設定されていることを確認してください。

プロモーション記事を戦略的に使用する

プロモーション記事は、セクションページの上部に表示されます。それらを使用して、以下を強調表示します。

• 最も頻繁にアクセスされるコンテンツ
• 入門ガイド
• 重要なトラブルシューティングの手順
• 最近更新された重要な記事

モバイルレスポンシブを検討する

モバイルデバイスでテンプレートをテストします。記事数の多いセクションページは、小さな画面では扱いにくくなる可能性があります。長い記事リストには、折りたたみ可能なセクションまたはアコーディオンレイアウトを検討してください。

一貫したブランディングを維持する

カスタムテンプレートを使用するとレイアウトを変更できますが、色、フォント、および間隔を全体的なテーマと一貫性のある状態に保ちます。セクションのレイアウトが異なっていても、ユーザーは同じヘルプセンターにいると感じるはずです。

さまざまな記事ボリュームでテストする

5つの記事で見栄えの良いテンプレートは、50の記事では壊れる可能性があります。さまざまなコンテンツボリュームでテンプレートをテストして、適切にスケーリングされることを確認してください。

---

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

テンプレートがドロップダウンに表示されない

最も一般的な原因：テーマが公開されていません。カスタムテンプレートは、それらを含むテーマがアクティブなライブテーマである場合にのみ、テンプレートセレクターに表示されます。Suite GrowthおよびProfessionalでは、ライブではないテーマで複数のテンプレートを作成してテストできますが、テーマがライブになるまで適用することはできません。

変更がすぐに反映されない

Zendeskは、パフォーマンスのためにヘルプセンターページをキャッシュします。テンプレートの変更が表示されない場合は：

• ブラウザのキャッシュをクリアする
• シークレット/プライベートウィンドウを試す
• CDNキャッシュが更新されるまで数分待つ

権限エラー

ナレッジ管理者のみがテンプレートを作成し、セクションに適用できます。エージェントは、編集する権限を持つ個々の記事のテンプレートを変更できますが、セクションおよびカテゴリのテンプレートの変更には管理者アクセスが必要です。

テンプレートの名前付けエラー

テンプレートが保存されない場合は、以下を確認してください。

• 名前は小文字の文字、数字、およびアンダースコアのみを使用しています
• 名前は25文字以下です
• スペースまたは特殊文字はありません

---

AIを使用してナレッジベースを最適化する

カスタムテンプレートの作成は、効果的なヘルプセンターを構築するためのほんの一部です。本当の課題は、コンテンツを整理し、最新の状態に保ち、見つけやすくすることです。そこで、AIチームメイトが役立ちます。

eesel AIでは、ナレッジ管理に異なるアプローチを取っています。AIを構成するツールとして扱うのではなく、採用するチームメイトとして考えています。当社のAIは、既存のコンテンツ（過去のチケット、ヘルプセンターの記事、マクロ、およびConfluenceやNotionなどの接続されたドキュメント）からビジネスを学習し、ナレッジベースのギャップを特定するのに役立ちます。

仕組みは次のとおりです。eesel AIをヘルプデスクに接続すると、コンテンツがすぐに分析されます。どの記事が機能しているか、どの記事を更新する必要があるか、何が完全に欠落しているかを特定します。過去のチケットでシミュレーションを実行して、ナレッジベースが一般的な質問にどれだけうまく対応できるかを確認し、顧客が遭遇する前にギャップを埋めることができます。

チームメイトモデルは、ガイダンス（eeselはレビュー用の返信を下書きします）から開始し、実際のパフォーマンスに基づいて自律的な運用（eeselは最前線のサポートを直接処理します）にレベルアップすることを意味します。何が機能しているかに基づいてペースを制御します。

ユーザーエクスペリエンスを向上させるためにカスタムセクションページテンプレートに時間を投資している場合は、AIチームメイトがその中に入るコンテンツに何ができるかを検討してください。適切に構造化されたテンプレートと継続的に最適化されたコンテンツの組み合わせにより、実際に役立つヘルプセンターが作成されます。