【新エディタ対応】【HTMLガイドライン】1-全体ルールとページ構成

全体ルール

基本ルール

• ページタイトルは自動でh1となり、コンテンツには含まれない。
  • ページ内ではh1は使用しない。
• コンテンツ部分を、zd-html-blockタグで囲み、直下のdivに必ずid「new_article」を付ける。
• 記事の冒頭に必ず「ページの説明文」を入れる。
  説明文や、それに関連するリンク以外は基本的に目次より上には置かない。
  • Zendeskの使用上、この部分がディスクリプションとなるため。
• その下に目次を記載をする。
  • 目次の設定方法は、「目次」を参照。
• コンテンツごとにsectionで囲み、必ずh2の見出しを付け、h2にidを連番で振る。
  • 例：article01、article02、article03...
• section内のサブコンテンツは、必ずh3の見出しを付け、h3にidを連番で振る。
  • 例：article01-01、article01-02、article01-03...
• ページ全体にかかる注意事項や、ページ本文と関係のない補足事項などは、sectionに含めずに目次の下に入れる。

Zendeskの仕様上の注意事項

HTMLは必ずzd-html-blockタグで囲うこと

2025年5月以降、Zendeskのエディタ仕様が変更され、オリジナルのHTML要素はzd-html-blockタグで囲うことになった。

新しい記事エディターへの移行（Zendesk ヘルプ）

見出し要素（h2, h3...）にはidを付与すること

Zendeskの仕様により、idが付与されていない見出し要素には自動的に乱英数字のidが付与される。
最低限、h2, h3見出しにはidを付与すること。

• h4以降のid付与は任意。Box内の見出し（h4）のid付与は、基本的には不要。

alt属性には画像ファイルのNo.を入れること

例として、「arg_000000000_01」という画像をアップロードすると、ファイル名が任意の乱数に置き換わってしまう。このため、01番の画像であることがわかるよう、alt属性に01を入れる。「alt="01 Airレジ XX画面"」

ページ構成ルール

ページの内容に合わせて、section内を構成すること。

使い方や手順の説明（基本型）

基本ルール

• h2の見出しは「〜の設定方法」「〜の使いかた」など。
• ol（順序リスト）を使用し、手順ごとに青丸数字が付くようにすること。
  • ol（順序リスト）については、「ol：順序リスト」を参照。
• 設定画面までの画面遷移を入れる。
  • 画面遷移については、「画面遷移」参照。
• アプリでの説明の場合は、テキスト：画像＝4：6の横並びにする。
• ブラウザ画面での説明の場合は、画像をフルサイズにする。

• テキストや画像のレイアウトについては、「テキスト：画像のレイアウトルール」を参照。

表示＆ソースコード

• アプリ画面の説明の場合
• ブラウザ画面の説明の場合
• スマホ画面の説明の場合

アプリ画面の説明の場合

基本的な手順説明の構成。（４：６レイアウト）

1. テキストテキスト

   

2. テキストテキスト

   

ブラウザ画面の説明の場合

基本的な手順説明の構成。（フルサイズ画像のレイアウト）

1. テキストテキスト

   

2. テキストテキスト

   

スマホ画面の説明の場合

基本的な手順説明の構成。（５：５レイアウト）

1. テキストテキスト

   

2. テキストテキスト

   

使い方や手順の説明（STEP型）

複数の画面をまたぐ設定方法や、プリンターの設定方法など、手順をSTEP形式で分けた方がいいもの。

基本ルール

• h2の見出しは「〜の設定方法」「〜の使いかた」など。
• h3にSTEPの見出しを付ける。（例：STEP1. プリンターを設定する）
• STEPごとに設定画面が変わる場合は、それぞれのSTEPに画面遷移を入れる。
  • 画面遷移については、「画面遷移」参照。
• 各STEP内のコンテンツにはインデントが必要なため、div.indentでコンテンツを囲う。
• アプリ画面の場合や、ブラウザ画面の場合のルールは、「使い方や手順の説明（基本型）」と同様。

表示＆ソースコード

STEP1.プリンターを接続する

テキスト

STEP2.Airレジを設定する

Airレジ アプリ

• ホーム
• 設定

テキスト

ソースコード

コンテンツの見出し-1

STEP1.STEPの手順1

テキスト

STEP2.STEPの手順2

Airレジ アプリ

• ホーム
• 設定

テキスト

画面の見かた

特定の画面について、項目ごとに説明する場合に使用。

基本ルール

• h2の見出しは「〜画面の見かた」など。
• 画面（dt）と項目説明（dd）をセットにし、画面には該当箇所にオレンジ丸数字を振る。
• 項目説明の「項目名」前にspan.numを付け、連番で数字を振る。
• 登録画面などで「必須項目」がある場合には、small.note-textで「※必須」を入れる。

表示＆ソースコード

1項目名 ※必須

必須項目についての説明など

2項目名 ※必須

必須項目についての説明など

3項目名

項目についての説明など（複数パターン）

サブ項目1

サブ項目の説明など

• サブ項目の注釈文
• サブ項目の注釈文

サブ項目2

サブ項目の説明など

• サブ項目の注釈文

4項目名

項目についての説明など（補足説明あり）

補足説明

補足説明文など

5項目名

項目についての説明など

6項目名

項目についての説明など

項目についての説明

入力項目や設定項目などを説明する場合に使用。

基本ルール

• h2やh3の見出しは「〜の項目」「〜項目について」など。
• 項目名（dt）と項目説明（dd）をセットにする。
• 登録画面などで「必須項目」がある場合には、small.note-textで「※必須」を入れる。

表示＆ソースコード

項目名 ※必須

必須項目についての説明など

項目名 ※必須

必須項目についての説明など

項目名

項目についての説明など（複数パターン）

サブ項目1

サブ項目の説明など

• サブ項目の注釈文
• サブ項目の注釈文

サブ項目2

サブ項目の説明など

• サブ項目の注釈文

項目名

項目についての説明など（補足説明あり）

補足説明

補足説明文など

項目名

項目についての説明など

項目名

項目についての説明など

Q&A、ご質問

Q&Aページ（〜のよくあるご質問系）の場合に使用する。設問ごとに「はい／いいえ」のminiSurveyが取得でき、設問ごとのGood/Badが計測できる。

基本ルール

• ページタイトルは「〜についてのよくあるご質問」など。
• アコーディオンの小見出し（h4）に質問などを入れ、コンテンツには太字で回答を入れる。
• 回答が複数ある場合は、2つ目以降の回答の太字部分に.space-mを付けて余白を開ける。
• 回答部分のコンテンツには、何を入れても良い。
• Q&A内の関連リンクは、すべて左寄せにする。（pタグの.relationをclassごと削除）
• mini survey部分のidには自動で値（見出し）が入るため、設定不要。

表示＆ソースコード

困っていることや質問など

回答 回答 回答 回答 回答 回答 回答 回答 回答 回答 回答 回答 回答 回答 回答 回答

テキスト

お客様の疑問は解消されましたか？

はいいいえ

フィードバックありがとうございました。