Zendesk Guideコミュニティテンプレートの作成とカスタマイズ方法

適切に設計されたコミュニティフォーラムは、顧客がブランドとどのようにやり取りするかを変革することができます。サポートチケットを待つ代わりに、顧客同士が助け合い、解決策を共有し、関係を構築します。しかし、これを実現するには、適切な基盤が必要です。そこで、Zendesk Guideのコミュニティテンプレートが登場します。

このガイドでは、Zendesk Guideでコミュニティテンプレートを作成およびカスタマイズするために知っておく必要のあるすべてのことを説明します。ゼロから始める場合でも、既存の設定を改良する場合でも、実際にユーザーを引き込むコミュニティを構築するための技術的なスキルとベストプラクティスを学ぶことができます。

Zendesk Guideコミュニティテンプレートとは？

Zendesk Guideコミュニティテンプレートは、コミュニティフォーラムページの外観と機能を制御するレイアウトファイルです。コミュニティのユーザーインターフェースの設計図と考えてください。これらのテンプレートは、要素が表示される場所、投稿のフォーマット方法、およびユーザーがアクセスできる機能を決定します。

混同されやすい2つの関連する概念を区別することが重要です。

• 記事テンプレートは、ナレッジベース記事のコンテンツテンプレートです。標準化されたヘッダーやフォーマットなど、ヘルプセンターコンテンツの一貫した構造を提供します。

• テーマテンプレート（コミュニティテンプレートを含む）は、ページの視覚的な表示を制御するHTMLレイアウトファイルです。ZendeskのCurlybars（カーリーバーズ）テンプレート言語を使用して、コンテンツを動的に表示します。

Zendeskのコミュニティ機能は**Gather（ギャザー）**と呼ばれます。これは、年間請求の場合、月額55ドルからのSuite Teamプラン以上に含まれています。エージェントあたり月額115ドルのSuite Professionalプランでは、コミュニティモデレーター、コンテンツモデレーションキュー、およびAIスパム保護が追加されます。Gatherを使用すると、ヘルプセンター内で直接、ユーザーディスカッション、Q＆Aフォーラム、およびアイデア交換が可能になります。

なぜコミュニティテンプレートが重要なのでしょうか？デフォルトのレイアウトだけでは限界があるからです。カスタムテンプレートを使用すると、次のことができます。

• 重要なコミュニティコンテンツを強調表示する
• ユーザーを誘導する視覚的な階層を作成する
• 会社のアイデンティティに一致するブランディング要素を追加する
• 参加を促す機能を実装する

コミュニティを構築する際には、AIツールがどのようにあなたの取り組みを補完できるかを検討してください。コミュニティフォーラムとインテリジェントな自動化を組み合わせることで、チームは反復的な質問に対処し、人間が個人的な対応が必要な複雑な議論に集中できるようになることがわかりました。eesel AIのようなツールは、ディスカッションを監視し、一般的な質問への回答を提案し、人間の注意が必要な問題をエスカレートすることができます。

知っておくべきコミュニティテンプレートファイル

Zendesk Guideは、Handlebars（ハンドルバーズ）ベースのテンプレートファイルセットを使用して、コミュニティページをレンダリングします。各ファイルは、特定のページタイプまたはビューを制御します。作業する主要なテンプレートを以下に示します。

テンプレートファイル	目的
community_post_list_page.hbs	トピック全体のすべてのコミュニティ投稿を一覧表示します
community_post_page.hbs	コメント付きの個々の投稿を表示します
community_topic_list_page.hbs	利用可能なトピック/カテゴリを表示します
community_topic_page.hbs	特定のトピック内の投稿を表示します
new_community_post_page.hbs	新しい投稿を作成するためのフォーム
contributions_page.hbs	ユーザーのアクティビティと貢献を表示します
user_profile_page.hbs	コミュニティメンバーのプロフィールページ

これらのテンプレートは連携して、まとまりのあるコミュニティエクスペリエンスを作成します。ユーザーがトピックリストから特定の投稿に移動すると、community_topic_page.hbsからcommunity_post_page.hbsに移動し、各テンプレートが表示の一部を処理します。Zendeskのコミュニティテンプレートドキュメントで詳細を確認できます。

これらのテンプレートにアクセスして編集するには、Guideの管理者権限が必要です。Guideの管理者に移動し、[デザインをカスタマイズ]アイコンをクリックします。そこから、テーマのテンプレートファイルを直接編集できます。詳細なドキュメントについては、ヘルプセンターのテーマをカスタマイズするためのZendeskのガイドを参照してください。

テーマエディタは、サイドバーに利用可能なすべてのテンプレートを表示します。テンプレート名をクリックして、コードエディタで開きます。ページの構造を制御するCurlybars（カーリーバーズ）マークアップが表示されます。ここで行った変更は、コミュニティがエンドユーザーにどのように表示されるかに影響します。

Curlybars（カーリーバーズ）テンプレートの概要

Curlybars（カーリーバーズ）は、Handlebars.js上に構築されたZendeskのテンプレート言語です。二重中括弧を使用して、動的なコンテンツをテンプレートに挿入します。他のテンプレートシステムを使用したことがある場合、構文はなじみ深く感じるでしょう。完全なドキュメントについては、ZendeskのCurlybars（カーリーバーズ）リファレンスを参照してください。

知っておく必要のある基本的な構文を以下に示します。

• 変数： {{property}}は値を挿入します
• 条件： {{#if condition}}...{{/if}}は、条件がtrueの場合にのみコンテンツを表示します
• ループ： {{#each items}}...{{/each}}は、リスト内の各アイテムに対してコンテンツを繰り返します
• コメント： {{! This is a comment }}は、レンダリングされないメモを追加します

コミュニティテンプレートは、投稿、トピック、およびユーザーデータを含む特定のプロパティにアクセスできます。最も一般的に使用されるものを以下に示します。

プロパティ	含まれるもの
post.title	投稿の見出し
post.body	投稿コンテンツ
post.author.name	投稿を作成した人のユーザー名
post.author.avatar_url	作成者のプロフィール画像のURL
topic.name	トピック/カテゴリ名
topic.description	トピックの説明テキスト
user.name	現在のユーザーの名前
user.avatar_url	現在のユーザーのアバター

Curlybars（カーリーバーズ）は、一般的なタスクのためのヘルパーも提供します。

• {{excerpt post.body length=100}}は、コンテンツを指定された長さに切り捨てます
• {{date post.created_at format='short'}}は、日付を一貫してフォーマットします
• {{link 'new_post' role='button'}}は、特定のページへのURLを生成します

実用的な例を次に示します。このコードは、最近のコミュニティ投稿のリストを抜粋とともに表示します。

{{#each posts}}
  <div class="post-preview">
    <h3><a href="{{url}}">{{title}}</a></h3>
    <p class="meta">By {{author.name}} on {{date created_at}}</p>
    <p>{{excerpt body length=150}}</p>
  </div>
{{/each}}

{{#each posts}}ループは、利用可能な投稿を反復処理します。それぞれについて、タイトルをリンクとして、作成者の名前、作成日、およびコンテンツの150文字の抜粋を出力します。

これらの基本を理解することで、コミュニティテンプレートをカスタマイズするための基盤が得られます。重要なのは、各テンプレートタイプで使用できるプロパティと、それらを効果的に表示するためのロジックを構築する方法を知ることです。

コミュニティトピックページテンプレートのカスタマイズ

トピックページは、ユーザーが最初に目にするコミュニティビューであることがよくあります。特定のカテゴリ内のすべての投稿を表示し、エンゲージメントにとって重要なタッチポイントになります。community_topic_page.hbsを段階的にカスタマイズする方法を見ていきましょう。

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

Guideの管理者で、[デザインをカスタマイズ]アイコンをクリックし、編集するテーマを選択します。これにより、すべてのテーマファイルを変更できるテンプレートエディタが開きます。

ステップ2：community_topic_page.hbsを見つけて開く

エディタの左側にあるテンプレートリストでファイルを見つけます。クリックしてコードビューを開きます。トピックヘッダー、投稿リスト、およびページネーションのセクションを含む、デフォルトのテンプレート構造が表示されます。

ステップ3：デフォルトの構造を理解する

デフォルトのテンプレートには通常、次のものが含まれています。

• トピック名と説明を含むヘッダーセクション
• [新しい投稿]ボタン
• タイトル、作成者、およびメタデータを含む投稿のリスト
• ページ間を移動するためのページネーションコントロール

変更を加える前に、既存のコードを読んでください。すでにそこにあるものを理解することで、機能を壊すのではなく、変更することができます。

ステップ4：カスタム要素を追加する

これで、ページを強化できます。一般的な追加には、次のものがあります。

• **トピックバナー：**トピックの説明を含む視覚的なヘッダーを追加します
• **注目の投稿：**重要または人気のあるディスカッションを強調表示します
• **サブスクリプションプロンプト：**ユーザーにトピックのフォローを促します

スタイル付きのトピックヘッダーを追加する例を次に示します。

<div class="topic-header">
  <h1>{{topic.name}}</h1>
  {{#if topic.description}}
    <p class="topic-description">{{topic.description}}</p>
  {{/if}}
</div>

ステップ5：CSS変数でスタイルを設定する

Zendeskテーマは、一貫したスタイリングのためにCSSカスタムプロパティ（変数）をサポートしています。テーマのCSSで色、間隔、およびタイポグラフィを定義し、テンプレートでそれらを参照します。

.topic-header {
  background: var(--brand-color);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius);
}

ステップ6：変更をプレビューして公開する

公開する前に、プレビュー機能を使用して、変更が実際のデータでどのように表示されるかを確認します。プレビューモードでは、実際の投稿とトピックを含むコミュニティが表示されるため、すべてが正しくレンダリングされることを確認できます。満足したら、[公開]をクリックして変更をライブにします。

検討すべきその他のカスタマイズ：

• **ユーザーの評判バッジ：**トップ貢献者または検証済みの専門家を表示します
• **カスタム投稿レイアウト：**投稿メタデータの表示方法を変更します
• **トピック固有のスタイリング：**異なるコミュニティセクションに異なるデザインを適用します

カスタムコミュニティ投稿ページの構築

個々の投稿ページ（community_post_page.hbs）は、実際の会話が行われる場所です。このテンプレートは、投稿コンテンツ、コメント、投票、およびユーザーインタラクションを処理する必要があります。効果的にカスタマイズする方法を見ていきましょう。

デフォルトのテンプレート構造には、次のものが含まれています。

• タイトルと作成者情報を含む投稿ヘッダー
• 投稿本文コンテンツ
• 投票コントロール（賛成/反対）
• コメントスレッド
• 返信フォーム

コメントの表示をカスタマイズするには、作成者情報の表示方法を変更したり、コメントレベル間に視覚的な区別を追加したりすることができます。スタイル付きのコメントの例を次に示します。

<div class="comment {{#if official}}comment-official{{/if}}">
  <div class="comment-author">
    <img src="{{author.avatar_url}}" alt="" class="avatar">
    <span class="author-name">{{author.name}}</span>
    {{#if author.badges}}
      <span class="badges">
        {{#each author.badges}}
          <span class="badge">{{name}}</span>
        {{/each}}
      </span>
    {{/if}}
  </div>
  <div class="comment-body">
    {{body}}
  </div>
  <div class="comment-actions">
    {{vote 'up' role='button'}}
    {{vote 'down' role='button'}}
    {{subscribe role='button'}}
  </div>
</div>

これにより、作成者バッジが追加され、コメントが明確なセクションに整理されます。{{#if official}}条件は、チームからの公式の回答に特別なスタイルを適用します。

投票および評価機能については、Zendeskは組み込みのヘルパーを提供します。{{vote}}ヘルパーは、インタラクションを自動的に処理する賛成/反対ボタンを作成します。CSSでこれらをスタイルして、デザインに合わせることができます。

@メンションとユーザータグを実装する場合は、テンプレートに加えてJavaScript（ジャバスクリプト）を使用する必要があります。テンプレートレイヤーは表示を処理しますが、インタラクションロジックはテーマのJavaScript（ジャバスクリプト）ファイルに存在します。

モバイルレスポンシブは、コミュニティページにとって非常に重要です。多くのユーザーが携帯電話からフォーラムにアクセスするため、テンプレートは画面サイズに適応する柔軟なレイアウトを使用する必要があります。CSS Grid（CSSグリッド）またはFlexbox（フレックスボックス）を投稿リストに使用し、タッチターゲット（ボタン、リンク）がモバイルインタラクションに十分な大きさであることを確認します。

レスポンシブな投稿レイアウトの例を次に示します。

<article class="post">
  <header class="post-header">
    <h1>{{post.title}}</h1>
    <div class="post-meta">
      <img src="{{post.author.avatar_url}}" alt="" class="avatar">
      <span>{{post.author.name}}</span>
      <time datetime="{{post.created_at}}">{{date post.created_at}}</time>
    </div>
  </header>
  <div class="post-content">
    {{post.body}}
  </div>
</article>

適切なCSSを使用すると、これはモバイルでは垂直方向に積み重ねられ、大きな画面ではより複雑なレイアウトに拡張されます。

コミュニティテンプレート設計のベストプラクティス

効果的なコミュニティテンプレートを作成するには、技術的な知識だけでは不十分です。ユーザーエンゲージメント、アクセシビリティ、およびパフォーマンスを考慮して設計する必要があります。最も価値があることがわかったプラクティスを以下に示します。

モバイルファーストのデザイン原則

モバイルレイアウトからデザインを開始し、大きな画面用に拡張します。これにより、コアエクスペリエンスがどこでも機能することが保証されます。コミュニティユーザーは携帯電話でディスカッションを確認することが多いため、モバイル最適化はオプションではありません。

• 固定ピクセルではなく、相対単位（rem、em）を使用します
• 実際のデバイスでタッチインタラクションをテストします
• テキストが小さなサイズでも読みやすいことを確認します
• 親指でナビゲーションにアクセスできるようにします

アクセシビリティに関する考慮事項

コミュニティはすべての人にとって機能するはずです。WCAGガイドラインに従って、障害のあるユーザーが完全にコミュニティに参加できるようにします。

• セマンティックHTML要素（article、nav、button）を使用します
• すべての画像に代替テキストを追加します
• 色のコントラストがAA標準を満たしていることを確認します
• キーボードナビゲーションをサポートします
• スクリーンリーダーでテストします

パフォーマンスの最適化

ページの読み込みが遅いと、エンゲージメントが低下します。テンプレートの速度を最適化します。

• CSSとJavaScript（ジャバスクリプト）を最小限に抑えます
• 効率的なCurlybars（カーリーバーズ）クエリを使用します
• スクロールせずに見える範囲の下にある画像を遅延ロードします
• ページあたりに表示される投稿の数を制限します

一貫したブランディング

コミュニティは、後付けではなく、製品の一部であるように感じるはずです。ブランドの色、タイポグラフィ、およびボイスをテンプレート全体に適用します。これにより、信頼が構築され、アイデンティティが強化されます。

ユーザーエンゲージメント機能

参加を促すテンプレートを設計します。

• [新しい投稿]ボタンを目立つようにします
• ユーザーが閲覧を続けるように、関連する投稿を表示します
• 未回答の質問を強調表示します
• 貢献を促すためにユーザーの評判を表示します

モデレーションツールの統合

コミュニティの健全性を維持するには、モデレーションが必要です。テンプレートが以下をサポートしていることを確認します。

• 不適切なコンテンツのフラグ付け
• レビュー待ちの投稿の非表示
• モデレーターバッジの表示
• コミュニティガイドラインの表示

コミュニティが成長するにつれて、管理がより複雑になります。チームがルーチンモデレーションタスクを処理するためにAI搭載の支援を追加することで恩恵を受けているのを見てきました。eesel AIは、コミュニティフォーラムと連携して、ルーチンの質問に答え、複雑な問題を適切な人にルーティングすることができます。これにより、チームはスパムを追いかけるのではなく、関係の構築に集中できます。

コミュニティ向けのサードパーティテーマオプション

カスタムテンプレートをゼロから構築することが常に最良のアプローチであるとは限りません。特に、プロフェッショナルな結果を迅速に必要とする場合は、既製のテーマを購入する方が理にかなっている場合があります。

主要なプロバイダーの比較を次に示します。

プロバイダー	開始価格	主な強み
Lotus Themes	299ドル	5,800人以上の顧客との実績
Zenplates	489ドル	コーディングなしで広範なカスタマイズ
Diziana	299ドル	手頃な価格のオプション

プレミアムテーマを検討する場合：

• 開発時間なしで迅速に結果が必要な場合
• チームにフロントエンド開発の専門知識がない場合
• デザイナーを雇わずにプロフェッショナルなデザインが必要な場合
• 自分で構築するのに数週間かかる機能が必要な場合

購入したテーマの利点：

• 即座にプロフェッショナルな外観
• テスト済みのバグのないコード
• 定期的な更新とサポート
• コミュニティ固有の機能が含まれていることが多い

購入したテーマの短所：

• カスタムビルドよりも柔軟性が低い
• 固有のニーズに対応するために回避策が必要になる場合があります
• 更新またはサポートのための継続的なコスト
• 同じテーマを使用している他のサイトと似たように見えるリスク

移行に関する考慮事項：

テーマを切り替えるには計画が必要です。移行する前に、現在のカスタマイズを文書化します。既存のコンテンツが新しいテーマで正しく表示されるかどうかを確認します。ほとんどのプロバイダーは、移行支援または移行を支援するドキュメントを提供しています。

今すぐZendeskコミュニティの構築を開始しましょう

Zendesk Guideコミュニティテンプレートを作成およびカスタマイズするための知識が身につきました。主な手順をまとめましょう。

1. 記事テンプレートとテーマテンプレートの違いを理解する
2. 7つのコアコミュニティテンプレートファイルに慣れる
3. 動的コンテンツのCurlybars（カーリーバーズ）構文を学ぶ
4. ニーズに合わせてトピックページと投稿ページをカスタマイズする
5. モバイル、アクセシビリティ、およびパフォーマンスに関するベストプラクティスを適用する
6. カスタム開発が実現可能でない場合は、サードパーティのテーマを検討する

最高のコミュニティは時間の経過とともに進化します。基本から始めて、ユーザーからのフィードバックを収集し、デザインを反復処理します。どのトピックが最もエンゲージメントを生み出しているかに注意し、そのコンテンツを強調表示するようにテンプレートを調整します。

コミュニティを構築する際には、自動化がどのように目標をサポートできるかを検討してください。eesel AIは、コミュニティフォーラムと連携して、ルーチンの質問に答え、複雑な問題を適切な人にルーティングします。チームを拡大せずにコミュニティサポートを拡大したい場合は、eesel AIを無料で試して、Zendeskの設定をどのように補完するかを確認してください。