Zendesk Guideの記事でテーブルと画像をフォーマットする方法

適切にフォーマットされたヘルプセンターの記事は、顧客が自分で答えを見つけるか、サポートチケットを送信するかの違いを意味する可能性があります。テーブルは複雑な情報を整理します。画像は、言葉だけでは捉えられない手順を説明します。これらが組み合わさることで、テキストの壁がスキャン可能で役立つコンテンツに変わります。

ただし、注意点があります。Zendesk Guideのフォーマット機能には制限があります。ネイティブエディタは基本をカバーしていますが、多くのチームはより多くのものを必要としていることに気づきます。Zendesk Guideを使い始めたばかりの場合でも、記事のフォーマットをレベルアップしたい場合でも、このガイドでは、テーブルと画像について知っておく必要のあるすべてのことを説明します。

フォーマットされたヘルプコンテンツをより迅速に作成する方法をお探しの場合は、eesel AIのようなツールがスタイルを学習し、適切なフォーマットが組み込まれた記事を生成できます。ただし、最初に基本をマスターしましょう。

必要なもの

記事のフォーマットを開始する前に、次のものが必要になります。

• Guideが有効になっているZendeskアカウント（ProfessionalまたはEnterpriseプランでは、完全なフォーマット機能が利用可能になります）
• 知識管理者権限または記事管理権限
• 記事エディタへのアクセス（従来の（レガシー）エディタではありません）
• HTMLの基本的な知識（高度なフォーマットには役立ちますが、必須ではありません）

このガイドで言及されている一部の機能（コンテンツブロックや高度な権限など）には、Guide ProfessionalまたはEnterpriseが必要です。Teamプランのユーザーは、テーブルを作成して画像を追加できますが、カスタマイズオプションは少なくなります。

ステップ1：記事にテーブルを追加する

Zendesk Guideでテーブルを追加するには、記事エディタのツールバーから始めます。挿入方法は次のとおりです。

1. ヘルプセンターで新しい記事または既存の記事を開きます。
2. テーブルを表示する場所にカーソルを置きます。
3. エディタのツールバーにあるテーブルアイコン（グリッドのように見えます）をクリックします。
4. グリッドにカーソルを合わせて、必要な行と列の数を選択します。
5. クリックしてテーブルを挿入します。

テーブルが記事にすぐに表示されます。すぐにセルにコンテンツの入力を開始できます。任意のセルをクリックして、そこにカーソルを置きます。

**プロのヒント：**必要と思われるよりも多くの行と列から始めます。テーブルがコンテンツでいっぱいになったときに後で追加するよりも、余分なものを削除する方が簡単です。

ステップ2：テーブルをフォーマットする

テーブルを挿入したら、プロフェッショナルで見やすくする必要があります。Zendeskは、テーブルセル内をクリックしたときに表示されるコンテキストメニューから、いくつかのフォーマットオプションを提供します。

セルのプロパティ

セルのプロパティアイコンをクリックして、個々のセルをカスタマイズします。

• **罫線（ボーダー）：**セルの周りに罫線を追加または削除します。
• **背景（バックグラウンド）：**セルの背景色を設定します。
• **寸法（ディメンション）：**正確な幅と高さをピクセル単位で指定します。
• **パディング（Padding）：**セル内の間隔を制御します。
• **テキストの配置（テキストアラインメント）：**水平方向と垂直方向の配置を設定します。

テーブルのプロパティ

テーブル全体のスタイルを設定するには、テーブルのプロパティパネルにアクセスします。

• **罫線（ボーダー）：**テーブル全体の罫線を制御します。
• **背景（バックグラウンド）：**テーブル全体の背景色を設定します。
• **寸法（ディメンション）：**テーブルの幅と高さを定義します。
• **配置（アラインメント）：**テーブルの位置（左、中央、右）を設定します。

テーブルキャプション

アクセシビリティを忘れないでください。キャプションの切り替えアイコンをクリックして、テーブルの上部に説明的なキャプションを追加します。これは、スクリーンリーダーを支援し、すべてのユーザーのエクスペリエンスを向上させます。

ステップ3：テーブル構造を編集する

テーブルが静的な状態にとどまることはめったにありません。コンテンツの進化に合わせて、行を追加したり、列を削除したり、セルを結合したりする必要があります。テーブル構造を変更する方法は次のとおりです。

行と列の追加と削除

コンテキストメニューの[行（Row）]または[列（Column）]アイコンをクリックして、次の操作を行います。

• 現在の行の上または下に行を挿入します。
• 現在の行の左または右に列を挿入します。
• 現在の行または列を削除します。
• 一括フォーマットのために行または列全体を選択します。

ヘッダーの作成

ヘッダー行と列を使用すると、テーブルがよりスキャンしやすくなります。

1. 変換する行または列を選択します。
2. [行（Row）]または[列（Column）]ドロップダウンをクリックします。
3. 「ヘッダー行を作成（Create header row）」または「ヘッダー列を作成（Create header column）」を選択します。

ヘッダーは通常、太字のテキストで表示され、背景色を変えることができます。

セルの結合と分割

複雑なテーブルの場合、複数の行または列にまたがるセルが必要になる場合があります。

1. 隣接する複数のセルを選択します。
2. セルの結合アイコンをクリックします。
3. 結合されたセルを分割するには、ドロップダウン矢印を使用して追加の分割オプションを表示します。

正確なサイズ変更

正確な寸法の場合：

1. サイズを変更する行または列を選択します。
2. セルのプロパティアイコンをクリックします。
3. [幅（Width）]または[高さ（Height）]フィールドに特定のピクセル値を入力します。
4. [保存（Save）]をクリックします。

テーブルの移動または削除

テーブルにカーソルを合わせると、テーブルセレクターアイコンが表示されます。その後、次のことができます。

• テーブルをドラッグして、記事内の位置を変更します。
• [削除（Delete）]を押して、テーブル全体を削除します。
• 矢印アイコンをクリックして、上下に空白行を追加します。

ステップ4：画像の挿入とフォーマット

画像はテキストを区切り、複雑な手順を明確にします。Zendesk Guideの記事に画像を追加する方法は次のとおりです。

画像の挿入

1. 画像を表示する場所にカーソルを置きます。
2. ツールバーの画像アイコンをクリックします。
3. 新しい画像をアップロードするか、既存の添付ファイルから選択します。
4. 画像のプロパティ（サイズ、配置、代替テキスト）を調整します。

画像のベストプラクティス

• **ファイルサイズの制限：**Zendeskでは、最大20MBの添付ファイルが許可されています。
• **代替テキスト：**アクセシビリティのために、常に説明的な代替テキストを追加します。
• **配置：**左、右、または中央の配置を使用して、画像の周りにテキストを流し込みます。
• **寸法：**ページの読み込みを高速化するために、アップロードする前に画像のサイズを変更します。

再利用可能な画像にコンテンツブロックを使用する

複数の記事で同じ画像を使用する場合は、コンテンツブロックを検討してください。

1. 画像を含むコンテンツブロックを作成します。
2. コンテンツブロックを任意の記事に挿入します。
3. コンテンツブロックを1回更新すると、変更がすべての場所に表示されます。

これは、複数のヘルプ記事に表示される標準的なスクリーンショット、ロゴ、または図に特に役立ちます。

一般的なフォーマットの問題と解決策

適切なツールを使用しても、フォーマットの課題に直面する可能性があります。最も一般的な問題とその解決方法を次に示します。

「安全でないHTML」の問題

Zendesk Guideで最もイライラする問題の1つは、注意深く作成したテーブルのフォーマットが保存後に消えることです。これは、Zendeskがセキュリティ上の理由から、デフォルトで特定のHTMLタグを削除するために発生します。

**解決策：**Guideの設定で「安全でないコンテンツを表示（Display unsafe content）」を有効にします。

1. [Guide管理（Guide Admin）] > [設定（Settings）]に移動します。
2. [セキュリティ（Security）]セクションに移動します。
3. 「安全でないコンテンツを表示（Display unsafe content）」をオンにします。
4. 変更を保存します。

この設定を有効にしないと、カスタムHTML（一部のテーブルスタイルを含む）は公開時に削除されます。

HTMLとビジュアルエディタの使い分け

ビジュアルエディタはほとんどのフォーマットニーズに対応しますが、HTMLが必要になる場合があります。

• 次の場合はビジュアルエディタを使用します：基本的なテーブル、標準的な画像、簡単なフォーマット
• 次の場合はHTMLに切り替えます：カスタムCSSクラス、高度なテーブル構造、埋め込みコンテンツ

ツールバーの最後にある[HTML]ボタンをクリックして、ソースコードを直接編集します。

Markdownのサポート

Zendeskは、記事でMarkdownフォーマットもサポートしています。これは、簡単なフォーマットの場合に高速になる可能性があります。

• **太字のテキスト**：太字の場合
• *斜体のテキスト*：斜体の場合
• [記事へのリンク](https://support.zendesk.com/hc/en-us/articles)：リンクの場合
• ![設定のスクリーンショット](https://example.com/image.png)：画像の場合

大規模なヘルプコンテンツを作成するチームの場合、AI搭載ツールは、スタイルガイドに準拠した適切にフォーマットされた記事を自動的に生成するのに役立ちます。

サードパーティオプションによる記事の強化

Zendeskがネイティブに提供する以上のフォーマットが必要な場合は、サードパーティソリューションが役立ちます。

Lotus Themesフォーマットコンポーネント

Lotus Themesは、次のものを追加するフォーマットコンポーネントパッケージ（249ドルの1回払い）を提供しています。

• **吹き出しブロック（Callout blocks）：**アイコン付きの情報、成功、警告、および危険アラート
• **タブとアコーディオン（Tabs and accordions）：**コンテンツを折りたたみ可能なセクションに整理します。
• **Font Awesomeアイコン：**1,600以上のアイコンへのアクセス
• **画像スタイル：**罫線、影、およびポップアップビューア
• **コードフォーマット：**技術記事の構文の強調表示

これらのコンポーネントを使用するには、Zendeskテーマにコードを追加する必要がありますが、Lotus Themesには無料のインストールが含まれています。

Zenplates CSSフレームワーク

Zenplatesは、Zendesk専用のCSSフレームワークを提供しており、テーブルスタイリングクラスが含まれています。

• .table：標準テーブルの場合
• .table-bordered：すべての辺に罫線がある場合
• .table-borderless：クリーンで罫線のないテーブルの場合
• .table-sm：パディングが削減されたコンパクトなテーブルの場合
• .scroll-x：レスポンシブな水平スクロール用のラッパー

このアプローチでは、HTMLとCSSに慣れている必要がありますが、スタイリングを正確に制御できます。

フォーマットされた記事のベストプラクティス

フォーマットされた記事を作成することは1つのことです。効果的なフォーマットされた記事を作成することは別のことです。ヘルプセンターのコンテンツを有用に保つためのガイドラインを次に示します。

テーブルのベストプラクティス

• **シンプルに保つ：**過剰なフォーマットは避けてください。クリーンで読みやすいテーブルは、派手なテーブルよりも優れています。
• **ヘッダーを一貫して使用する：**すべてのテーブルには、明確なヘッダー行が必要です。
• **列幅を制限する：**水平スクロールが必要なテーブルは、モバイルユーザーをイライラさせます。
• **数値を右揃えにする：**数値データは、右揃えにするとスキャンしやすくなります。
• **モバイルでテストする：**多くのユーザーは携帯電話からヘルプセンターにアクセスします。テーブルが小さな画面で動作することを確認してください。

画像のベストプラクティス

• **説明するだけでなく、見せる：**複数ステップのプロセスにはスクリーンショットを使用します。
• **必要に応じて注釈を付ける：**矢印またはハイライトを追加して注意を引きます。
• **ファイルサイズを合理的に保つ：**アップロードする前に画像を圧縮します。
• **スクリーンショットを更新する：**古くなったUIスクリーンショットは、画像がないよりもユーザーを混乱させます。

全体的な記事構造

• **重要な情報を最初にロードする：**テーブルと画像の前にキーポイントを配置します。
• **意図的にフォーマットを使用する：**すべてのテーブルまたは画像は、目的を果たす必要があります。
• **一貫性を維持する：**記事全体で同じフォーマットパターンを使用します。
• **公開前にプレビューする：**記事がエンドユーザーにどのように表示されるかを常に確認してください。

大規模なヘルプセンターを管理するチームの場合、数百の記事全体で一貫したフォーマットを維持することは困難です。これは、AI搭載ヘルプデスクソリューションが、フォーマットパターンを学習し、新しいコンテンツに自動的に適用することで支援できる場所です。

eesel AIでより優れたヘルプセンターコンテンツを作成する

テーブルと画像を手動でフォーマットすることは、時折の記事には問題ありません。ただし、成長するヘルプセンターを管理している場合、手動によるアプローチは拡張できません。

eesel AIは、別のアプローチを提供します。エディタやHTMLと格闘する代わりに、次のことができます。

• **既存の記事でeeselをトレーニングする：**フォーマットスタイル、トーン、および構造を学習します。
• **フォーマットされたコンテンツを自動的に生成する：**記事は、適切なテーブル、画像、およびスタイルがすでに適用された状態で作成されます。
• **コンテンツを継続的に更新する：**Slackでポリシーの変更についてeeselにメッセージを送信すると、関連する記事が更新されます。
• **一貫性を維持する：**すべての記事は、手動で確認しなくても、確立されたパターンに従います。

eeselはZendeskやその他のヘルプデスクと直接統合されているため、フォーマットされたコンテンツはナレッジベースに直接流れ込みます。

ヘルプ記事のフォーマットに毎週何時間も費やしているチームの場合、eesel AIの価格は、最大1,000回のAIインタラクションで月額299ドルから始まります。これには、記事の生成、フォーマット、およびヘルプセンター全体の継続的な更新が含まれます。