ライティング>UIテキスト>エラーメッセージの内容をFlashMessageからNotificationBarに変更

src/content/articles/products/contents/help-center/basic-rule.mdx

@@ -25,7 +25,7 @@ order: 2
 - 関連する情報は近くに配置する
 - 見出しや箇条書きを適切に使う
 
-ヘルプページの並び順や構成の考え方については、[ヘルプページの構成](https://smarthr.design/products/contents/help-center/help-page/)を参照してください。
+ヘルプページの並び順や構成の考え方については、[ヘルプページの構成](/products/contents/help-center/help-page/)を参照してください。
 
 ### 正確かつ簡潔明瞭に説明しましょう
 - ユーザーの状況やアプリケーションの状態を意識して、タイトルや見出しをつける
@@ -56,7 +56,7 @@ order: 2
 - スクリーンショットを使う場合は、ユーザーに注目させたい部分を囲みや矢印をつけて強調する
 - スクリーンショットを使う場合は、ユーザーの操作に必要ない部分を取り除く
 
-詳細は「ヘルプページ用の画像」の[スクリーンショット掲載の考え方](../image/#h2-0)を確認してください。
+詳細は「ヘルプページ用の画像」の[スクリーンショット掲載の考え方](/products/contents/help-center/image/#screenshot-posting-policy)を確認してください。
 
 ## 具体的な書き方のヒント
 
@@ -81,7 +81,7 @@ order: 2
 
 囲みには、必要な情報を目立たせる役割があります。一方、本文からは分断されるため、本筋とのつながりが伝わりづらくなることがあります。  
 
-[囲みのガイドライン](https://smarthr.design/products/contents/help-center/help-page/#h3-8)を参照して、本当に囲みが必要かどうかを精査しましょう。  
+[囲みのガイドライン](/products/contents/help-center/help-page/#frames)を参照して、本当に囲みが必要かどうかを精査しましょう。  
 
 特に、以下の点に注意してください。  
 - 読み飛ばしてもユーザーの操作に影響しない情報を「注意点」として記載しない
@@ -98,6 +98,7 @@ order: 2
 
 操作の前に知っておくべき注意事項は、操作手順の前に記載します。操作手順のあとに記載すると、ユーザーが注意事項に気づくのが遅れて、操作ミスにつながる可能性があります。
 
+{<a id="place-relevant-information-nearby" />}
 #### 関連する情報は近くに配置する
 関連する情報は、その関係が読み取りやすいよう近くに配置しましょう。  
 
@@ -112,6 +113,7 @@ order: 2
 
 見出しで情報を切り分けたり、箇条書きで整理したりして、情報のまとまりを把握しやすくしましょう。  
 
+{<a id="use-table-with-readable-and-maintainable-format" />}
 #### 表は見やすくメンテナンスしやすい形式で使う
 
 表の列の幅が狭く、縦に長くなりすぎて、見づらくならないように気をつけましょう。
@@ -184,7 +186,7 @@ Tipsや補足などは、できるだけ表外に記載しないようにしま
 
 特に「〇〇してしまった」「残念ながら」など、ネガティブな印象の言葉は避けてください。  
 
-例外として「よくある質問」の見出しには「〇〇してしまった」という表現を使えます。[よくある質問の書き方](https://smarthr.design/products/contents/help-center/faq/)には、「見出しは口語体で、ユーザーからの質問のように表現する」というルールがあります。ユーザーの発言として自然であれば、「〇〇してしまった」という表現を使っても構いません。  
+例外として「よくある質問」の見出しには「〇〇してしまった」という表現を使えます。[よくある質問の書き方](/products/contents/help-center/faq/)には、「見出しは口語体で、ユーザーからの質問のように表現する」というルールがあります。ユーザーの発言として自然であれば、「〇〇してしまった」という表現を使っても構いません。  
 
 **例**  
 
@@ -311,10 +313,10 @@ Tipsや補足などは、できるだけ表外に記載しないようにしま
 
 ## ヘルプページのタイプ別の考え方とパターン
 
-[ヘルプページのタイプ](../#h2-1)別に作成時の考え方とライティングパターンをまとめています。
+[ヘルプページのタイプ](/products/contents/help-center/#types-of-help-pages)別に作成時の考え方とライティングパターンをまとめています。
 
-* [「機能概要」のライティングパターン](../overview/)
-* [「操作手順」のライティングパターン](../step-by-step/)
-* [「仕様の一覧」のライティングパターン](../reference/)
-* [「エラーメッセージごとの対応方法」のライティングパターン](../error-handling/)
-* [「よくある質問」のライティングパターン](../faq/)
+* [概要の書き方](/products/contents/help-center/overview/)
+* [操作手順の書き方](/products/contents/help-center/step-by-step/)
+* [仕様の一覧の書き方](/products/contents/help-center/reference/)
+* [エラーメッセージごとの対応方法の書き方](/products/contents/help-center/error-handling/)
+* [よくある質問の書き方](/products/contents/help-center/faq/)

src/content/articles/products/contents/help-center/error-handling.mdx

@@ -4,82 +4,93 @@ description: 'SmartHRヘルプセンターに掲載するヘルプページの
 order: 6
 ---
 
+{<a id="types-of-error-response" />}
 ## エラーメッセージごとの対応方法の種類
-エラーメッセージごとの対応方法は、以下のパターンで作成します。
-* [単一のエラーの原因と対処方法を伝える](#h2-1)
-* [いくつかのエラーをまとめる](#h2-2)
+エラーメッセージごとの対応方法は、以下のパターンで作成します。  
+* [単一のエラーの原因と対処方法を伝える](#single-error-cause-solution)  
+* [いくつかのエラーをまとめる](#multiple-errors-in-one-article)
 
+{<a id="single-error-cause-solution" />}
 ## 単一のエラーの原因と対処方法を伝える記事の構成
 
-1. [質問（タイトル）](#h3-0)
-2. [リード](#h3-1)
-3. [原因（見出し）](#h3-2)
-4. [説明](#h3-3)
-5. [対処方法](#h3-4)
+1. [質問（タイトル）](#question-title)  
+2. [リード](#lead-section)  
+3. [原因（見出し）](#cause-heading)  
+4. [説明](#explanation)  
+5. [対処方法](#solution)
 
-### 1.質問（タイトル）
+{<a id="question-title" />}
+### 1. 質問（タイトル）
 文頭に `Q. ` をつけ、エラーの状態を書きます。読みづらい長文にならない限り、基本的にエラーメッセージをそのまま記載します。エラーメッセージは`「　」`で囲みます。
 
 プロダクトのHeadingルールに則り、句点は省略します。  
 例外的に口語体で表現しますが、`「　」`は使用しません。
 
-### 2.リード
+{<a id="lead-section" />}
+### 2. リード
 エラーがどの画面で、どういったときに起きるかなどを簡潔に書きます。タイトルでエラーメッセージを省略した場合には、必ずエラーメッセージを記載します。  
 
 本文のスタイルを適用します。
 
-### 3.原因（見出し）
+{<a id="cause-heading" />}
+### 3. 原因（見出し）
 文頭に`A. `をつけ、原因を簡潔に記載します。
 
 見出し1のスタイルを適用します。  
 例外的に口語体で表現しますが、`「　」`は使用しません。  
 [Headingの見出しの書き方](../../../../products/components/heading/#h2-3)に則り、句点は省略します。
 
-### 4.説明
+{<a id="explanation" />}
+### 4. 説明
 原因を詳細に説明します。どのような条件で操作をするとそのエラーが起こるのかを説明します。
 
 本文のスタイルを適用します。
 
-### 5.対処方法
+{<a id="solution" />}
+### 5. 対処方法
 対処方法を書きます。  
 手順が複数の工程に分かれる場合は、見出しで工程ごとに分割し、操作手順記事と同じルールで記載します。
 
 見出し2と本文のスタイルを適用します。
 
 #### 記載例
-* [Q. 「書類の作成に失敗しました。必須項目の内容を確認してください。」と表示される場合は？](https://support.smarthr.jp/ja/help/articles/360047119273)  
-* [Q. 評価シート画面で「編集内容の保存に失敗しました。更新権限があるフォームの下書きが存在しません。」というエラーが出ました](https://support.smarthr.jp/ja/help/articles/4411286053273)  
+- [Q. 「書類の作成に失敗しました。必須項目の内容を確認してください。」と表示される場合は？](https://support.smarthr.jp/ja/help/articles/360047119273)  
+- [Q. 評価シート画面で「編集内容の保存に失敗しました。更新権限があるフォームの下書きが存在しません。」というエラーが出ました](https://support.smarthr.jp/ja/help/articles/4411286053273)  
 
+{<a id="multiple-errors-in-one-article" />}
 ## いくつかのエラーをまとめた記事の構成
 1つの場面で表示される複数のエラーをまとめたいとき。
 
-1. [タイトル](#h3-5)
-2. [エラー](#h3-6)
-3. [回答](#h3-7)
-4. [説明](#h3-8)
+1. [タイトル](#title-for-multiple-errors)  
+2. [エラー](#error-heading)  
+3. [回答](#answer-heading)  
+4. [説明](#explanation-for-multiple-errors)
 
-### 1.タイトル
+{<a id="title-for-multiple-errors" />}
+### 1. タイトル
 
 エラーが表示される場面を明記し、「エラーメッセージ」をタイトルに含めます。
 
 - XXXX時のエラーメッセージ
 - XXXXで表示されるエラーメッセージ
 
-### 2.エラー
-
+{<a id="error-heading" />}
+### 2. エラー
 文頭に `エラー` をつけ、エラーメッセージを`「　」`で囲みます。エラーメッセージが複数の文で構成されている場合は、最初の文を抜粋しても構いません。
 
 見出し1のスタイルを適用します。
 
-### 3.回答
+{<a id="answer-heading" />}
+### 3. 回答
 単一のエラーの原因と対処方法を伝える場合の見出しと同様。
 
 見出し2のスタイルを適用します。
 
-### 4.説明
+{<a id="explanation-for-multiple-errors" />}
+### 4. 説明
 単一のエラーの原因と対処方法を伝える場合の説明と同様。
 
 本文のスタイルを適用します。
 
 #### 記載例
-* [評価シート入力時のエラーメッセージ](https://support.smarthr.jp/ja/help/articles/8689194643481)
+- [評価シート入力時のエラーメッセージ](https://support.smarthr.jp/ja/help/articles/8689194643481)

src/content/articles/products/contents/help-center/faq.mdx

@@ -3,58 +3,65 @@ title: 'よくある質問の書き方'
 description: 'SmartHRヘルプセンターに掲載するヘルプページのライティングの考え方とパターンをまとめています。'
 order: 7 
 ---
-
 ## よくある質問の種類
+{<a id="faq-types" />}
 よくある質問は、以下のパターンで作成します。
-* [単一の質問に答える](#h2-1)
-* [いくつかの質問をまとめる](#h2-2)
+* [単一の質問に答える](#answer-single-question)
+* [いくつかの質問をまとめる](#answer-multiple-questions)
 
+{<a id="answer-single-question" />}
 ## 単一の質問に答える記事の構成
 「よくある質問」の基本形。基本的にはこの形式で作成します。
 
-1. [質問（タイトル）](#h3-0)
-2. [回答（見出し）](#h3-1)
-3. [説明](#h3-2)
-4. [関連リンク](#h3-3)
-5. [操作手順](#h3-4)
+1. [質問（タイトル）](#question-title)  
+2. [回答（見出し）](#answer-heading)  
+3. [説明](#explanation)  
+4. [関連リンク](#related-links)  
+5. [操作手順](#operation-steps)
 
+{<a id="question-title" />}
 ### 1.質問（タイトル）
 文頭に `Q. ` をつけ、ユーザーからの質問のように **「XXできる？」「XXするには？」** という形（常体）で記載します。  
 文末が「？」で終わらない場合は、[Headingの見出しの書き方](../../../../products/components/heading/#h2-3)に則り、句点は省略します。  
 例外的に口語体で表現しますが、`「　」`は使用しません。  
 
+{<a id="answer-heading" />}
 ### 2.回答（見出し）
 文頭に`A. `をつけ、質問に対する回答を端的にまとめます。
 
 見出し1のスタイルを適用します。  
 例外的に口語体で表現しますが、`「　」`は使用しません。  
 [Headingの見出しの書き方](../../../../products/components/heading/#h2-3)に則り、句点は省略します。
 
+{<a id="explanation" />}
 ### 3.説明
 質問に対して、回答を詳細に説明します。
 
 本文のスタイルを適用します。
 
+{<a id="related-links" />}
 ### 4.関連リンク
 ヘルプセンターの中に操作手順などの詳細ページがある場合（同内容のページがヘルプセンター内に複数あると、管理が煩雑になり、最新の情報に保ちにくいため）や、他のWebサイトに参照記事がある場合はリンクを設置します。
 
 関連コンテンツのスタイルを適用します。
 
+{<a id="operation-steps" />}
 ### 5.操作手順
 参照先のヘルプページがないときは、記事中に手順を書きます。  
 手順が複数の工程に分かれる場合は、見出しで工程ごとに分割し、操作手順記事と同じルールで記載します。
 
 見出し2と本文のスタイルを適用します。
 
+{<a id="writing-pattern-faq" />}
 ### ライティングパターン
 質問と回答のライティングパターンをまとめました。  
 内容に応じて、文末の表現などをアレンジしても構いません。
 
-| コンテキスト | 1.質問（タイトル） | 2.回答（見出し1） |
-| :--- | :--- | :--- |
-| こういうことはできるのか？ | Q. XXXできる？ | A. はい、XXXXできます／A. いいえ、XXXXXはできません |
-| メイン操作ではないイレギュラーな操作 | Q. XXXするには？ |A. XXXXXを設定します |
-| 仕様の背景の説明 | Q. XXXはなぜ？ | A. XXXXXためです |
+| コンテキスト                 | 1.質問（タイトル）     | 2.回答（見出し1）                    |
+| :-------------------------- | :--------------------- | :------------------------------------ |
+| こういうことはできるのか？ | Q. XXXできる？         | A. はい、XXXXできます／A. いいえ、XXXXXはできません |
+| メイン操作ではないイレギュラーな操作 | Q. XXXするには？    | A. XXXXXを設定します                  |
+| 仕様の背景の説明            | Q. XXXはなぜ？         | A. XXXXXためです                      |
 
 #### 記載例
 
@@ -68,35 +75,40 @@ order: 7
 
 * [Q. 給与・勤怠関連のレポートに含まれる「推移を示すグラフ」は、いつ時点の従業員情報を参照していますか？<br />A.［グループ化 行］に設定された時点（［対象期間（from）］、［対象期間（to）］、［支給日］）の従業員情報を参照しています](https://support.smarthr.jp/ja/help/articles/4412871737753)
 
+{<a id="answer-multiple-questions" />}
 ## いくつかの質問をまとめた記事の構成
 1つの機能やテーマについて、よくある質問をまとめたいとき。（質問が増えてきたら個別の記事に分割することを検討しましょう。）
 一問一答形式など、質問と回答の情報量が少ない場合にも使用して構いません。
 
-1. [タイトル](#h3-6)
-2. [質問](#h3-7)
-3. [回答](#h3-8)
-4. [説明](#h3-9)
+1. [タイトル](#title-for-faq-list)  
+2. [質問](#question-for-faq-list)  
+3. [回答](#answer-for-faq-list)  
+4. [説明](#explanation-for-faq-list)
 
+{<a id="title-for-faq-list" />}
 ### 1.タイトル
 質問の共通テーマを明記のうえ、「よくある質問」をタイトルに含めます。
 
 - XXXXに関するよくある質問
 - XXXX向けよくある質問
 
+{<a id="question-for-faq-list" />}
 ### 2.質問
 単一の質問と対処方法を伝える場合のタイトルと同様。
 
 見出し1のスタイルを適用します。
 
+{<a id="answer-for-faq-list" />}
 ### 3.回答
 単一の質問と対処方法を伝える場合の見出しと同様。
 
 見出し2のスタイルを適用します。
 
+{<a id="explanation-for-faq-list" />}
 ### 4.説明
 単一の質問、またはエラーの原因と対処方法を伝える場合の説明と同様。
 
 本文のスタイルを適用します。
 
 #### 記載例
-* [組織図・名簿に関するよくある質問](https://support.smarthr.jp/ja/help/articles/1500002013322)
+* [組織図・名簿に関するよくある質問](https://support.smarthr.jp/ja/help/articles/1500002013322)