kufu · yuw27b · Dec 21, 2023 · Dec 22, 2023 · Dec 22, 2023
diff --git a/content/articles/accessibility/status/payslips/202306.mdx b/content/articles/accessibility/status/payslips/202306.mdx
@@ -48,10 +48,10 @@ SmartHRのWeb給与明細機能で、給与明細の確認プロセスに含ま
 
 ※すべての事例を紹介するものではありません。
 
-<!-- textlint-disable -->
+{/* <!-- textlint-disable --> */}
 ### 1.３.1 情報及び関係性
 見出しがh1要素〜h6要素でマークアップされていない
 
-<!-- textlint-enable -->
+{/* <!-- textlint-enable --> */}
 #### 対応策
 見出しをh1要素〜h6要素でマークアップします
diff --git a/content/articles/accessibility/status/survey/202306.mdx b/content/articles/accessibility/status/survey/202306.mdx
@@ -53,7 +53,7 @@ SmartHRの従業員サーベイ機能で、従業員がサーベイに回答す
 ※すべての事例を紹介するものではありません。
 ### スクリーンリーダーユーザーがバリデーションエラーに気づきにくい
 
-<!-- textlint-disable -->
+{/* <!-- textlint-disable --> */}
 
 <DefinitionList items={[
   {
@@ -70,11 +70,11 @@ SmartHRの従業員サーベイ機能で、従業員がサーベイに回答す
   }
   ]} />
 
-<!-- textlint-enable -->
+{/* <!-- textlint-enable --> */}
 
 
 ### リンクの目的がわかりにくい
-<!-- textlint-disable -->
+{/* <!-- textlint-disable --> */}
 
 <DefinitionList items={[
   {
@@ -91,4 +91,4 @@ SmartHRの従業員サーベイ機能で、従業員がサーベイに回答す
   }
   ]} />
 
-<!-- textlint-enable -->
+{/* <!-- textlint-enable --> */}
diff --git a/content/articles/basics/colors/index.mdx b/content/articles/basics/colors/index.mdx
@@ -5,6 +5,7 @@ order: 2
 ---
 
 import { ColorPalette, ColorPalettesWrapper } from '@Components/ColorPalette'
+import { TableWrapper } from '@Components/contents/shared/TableWrapper'
 
 ポジティブで親しみやすい、SmartHRらしい印象に近づけることができる色を定義しました。
 
@@ -252,4 +253,4 @@ SmartHRのカラーパレットをKeynoteで利用する方法です。
 色に関する相談・フィードバック
 
 - 社内Slack `#design_comm_依頼`
-- SmartHR Design System 運営チーム  smarthr-design-system@smarthr.co.jp
+- SmartHR Design System 運営チーム  smarthr-design-system@smarthr.co.jp
diff --git a/content/articles/basics/colors/printguideline.mdx b/content/articles/basics/colors/printguideline.mdx
@@ -38,7 +38,7 @@ SmartHR Blueを一定に保つことで、ブランド品質の安定につな
 
  </ImgWithDesc>
 
-<span style="color: #d61b09">色合わせや色校確認の際は、実際に印刷する加工や用紙に関係なく、「①コート紙（加工なし）」のカラーチップを使ってください。</span>
+<span style={{color: '#d61b09'}}>色合わせや色校確認の際は、実際に印刷する加工や用紙に関係なく、「①コート紙（加工なし）」のカラーチップを使ってください。</span>
 
 #### 参考の紙
 

diff --git a/content/articles/basics/icons/index.mdx b/content/articles/basics/icons/index.mdx
@@ -4,6 +4,7 @@ description: ''
 order: 4
 ---
 
+import { TableWrapper } from '@Components/contents/shared/TableWrapper'
 import { AnchorButton } from 'smarthr-ui'
 
 SmartHRサービス全体で利用するアイコンです。
@@ -146,4 +147,4 @@ SVG・PNG形式のアイコンデータをダウンロードできます。
 アイコンに関する相談・フィードバック
 
 - SmartHR Design System 運営チーム smarthr-design-system@smarthr.co.jp
-- 社内Slack `#design_system_相談`
+- 社内Slack `#design_system_相談`
diff --git a/content/articles/basics/illustration/index.mdx b/content/articles/basics/illustration/index.mdx
@@ -5,9 +5,7 @@ order: 5
 ---
 import { Grid } from '@Components/shared/Grid/Grid'
 import { ImgWithDesc } from '@Components/article/ImgWithDesc/ImgWithDesc'
-import { Cluster, LineUp, Stack } from 'smarthr-ui'
-import { DoAndDont } from '@Components/DoAndDont'
-import { AnchorButton } from 'smarthr-ui'
+import { TableWrapper } from '@Components/contents/shared/TableWrapper'
 
 SmartHRのサービス全体で利用するイラストレーションです。
 

diff --git a/content/articles/basics/illustration/item.mdx b/content/articles/basics/illustration/item.mdx
@@ -6,6 +6,7 @@ order: 9
 
 import { Grid } from '@Components/shared/Grid/Grid'
 import { ImgWithDesc } from '@Components/article/ImgWithDesc/ImgWithDesc'
+import { TableWrapper } from '@Components/contents/shared/TableWrapper'
 import { AnchorButton } from 'smarthr-ui'
 
 アイテムに関連するイラストレーションです。  

diff --git a/content/articles/basics/illustration/scene.mdx b/content/articles/basics/illustration/scene.mdx
@@ -6,6 +6,7 @@ order: 8
 
 import { Grid } from '@Components/shared/Grid/Grid'
 import { ImgWithDesc } from '@Components/article/ImgWithDesc/ImgWithDesc'
+import { TableWrapper } from '@Components/contents/shared/TableWrapper'
 import { AnchorButton } from 'smarthr-ui'
 
 特定のシーンを描いたイラストレーションです。  

diff --git a/content/articles/basics/illustration/smarthr-co.mdx b/content/articles/basics/illustration/smarthr-co.mdx
@@ -6,8 +6,7 @@ order: 1
 
 import { Grid } from '@Components/shared/Grid/Grid'
 import { ImgWithDesc } from '@Components/article/ImgWithDesc/ImgWithDesc'
-import { Cluster, LineUp, Stack } from 'smarthr-ui'
-import { DoAndDont } from '@Components/DoAndDont'
+import { TableWrapper } from '@Components/contents/shared/TableWrapper'
 import { AnchorButton } from 'smarthr-ui'
 
 SmartHR社の人物に関連するイラストレーションです。  
@@ -342,4 +341,4 @@ SmartHRスクールで、SmartHRの情報を教えてくれる人物。女性。
 
 ## ライセンス情報
 - 本ページ内のコンテンツについては、[イラストレーションのライセンス情報](/basics/illustration/#h2-1)を参照のうえご利用ください。
-- イラストレーションの著作権などを譲渡、放棄したものではありませんのでご注意ください。
+- イラストレーションの著作権などを譲渡、放棄したものではありませんのでご注意ください。
diff --git a/content/articles/basics/illustration/user-co-main.mdx b/content/articles/basics/illustration/user-co-main.mdx
@@ -4,8 +4,8 @@ description: 'ユーザー社の人物に関連するイラストレーション
 order: 6
 ---
 
-import { Cluster } from 'smarthr-ui'
 import { Grid } from '@Components/shared/Grid/Grid'
+import { TableWrapper } from '@Components/contents/shared/TableWrapper'
 import { AnchorButton } from 'smarthr-ui'
 
 ユーザー社の人物に関連するイラストレーションです。  
@@ -247,4 +247,4 @@ import { AnchorButton } from 'smarthr-ui'
 
 ## ライセンス情報
 - 本ページ内のコンテンツについては、[イラストレーションのライセンス情報](/basics/illustration/#h2-1)を参照のうえご利用ください。
-- イラストレーションの著作権などを譲渡、放棄したものではありませんのでご注意ください。
+- イラストレーションの著作権などを譲渡、放棄したものではありませんのでご注意ください。
diff --git a/content/articles/basics/illustration/user-co-other.mdx b/content/articles/basics/illustration/user-co-other.mdx
@@ -6,6 +6,7 @@ order: 7
 
 import { Grid } from '@Components/shared/Grid/Grid'
 import { ImgWithDesc } from '@Components/article/ImgWithDesc/ImgWithDesc'
+import { TableWrapper } from '@Components/contents/shared/TableWrapper'
 import { AnchorButton } from 'smarthr-ui'
 
 ユーザー社の人物に関連するイラストレーションです。  
@@ -319,4 +320,4 @@ import { AnchorButton } from 'smarthr-ui'
 
 ## ライセンス情報
 - 本ページ内のコンテンツについては、[イラストレーションのライセンス情報](/basics/illustration/#h2-1)を参照のうえご利用ください。
-- イラストレーションの著作権などを譲渡、放棄したものではありませんのでご注意ください。
+- イラストレーションの著作権などを譲渡、放棄したものではありませんのでご注意ください。
diff --git a/content/articles/basics/logos/index.mdx b/content/articles/basics/logos/index.mdx
@@ -6,6 +6,7 @@ order: 1
 
 import { Grid } from '@Components/shared/Grid/Grid'
 import { ImgWithDesc } from '@Components/article/ImgWithDesc/ImgWithDesc'
+import { TableWrapper } from '@Components/contents/shared/TableWrapper'
 
 SmartHRロゴは、正しく使用されてはじめて本来の機能を発揮できます。
 
@@ -220,4 +221,4 @@ SmartHRロゴの、デザインやレイアウト、ロゴマーク、商標な
 
 ロゴの利用方法に関する相談・問い合わせ
 - SmartHR Design System 運営チーム smarthr-design-system@smarthr.co.jp
-- 社内Slack `#design_comm_依頼`
+- 社内Slack `#design_comm_依頼`
diff --git a/content/articles/basics/logos/motion.mdx b/content/articles/basics/logos/motion.mdx
@@ -6,6 +6,7 @@ order: 1
 
 import { Grid } from '@Components/shared/Grid/Grid'
 import { ImgWithDesc } from '@Components/article/ImgWithDesc/ImgWithDesc'
+import { TableWrapper } from '@Components/contents/shared/TableWrapper'
 import { VideoEmbed } from '@Components/article/VideoEmbed/VideoEmbed'
 
 映像領域におけるSmartHRロゴです。  

diff --git a/content/articles/basics/logos/sound.mdx b/content/articles/basics/logos/sound.mdx
@@ -6,6 +6,7 @@ order: 2
 
 import { Grid } from '@Components/shared/Grid/Grid'
 import { ImgWithDesc } from '@Components/article/ImgWithDesc/ImgWithDesc'
+import { TableWrapper } from '@Components/contents/shared/TableWrapper'
 
 
 音声領域におけるSmartHRロゴです。

diff --git a/content/articles/basics/meta/index.mdx b/content/articles/basics/meta/index.mdx
@@ -4,6 +4,8 @@ description: 'ウェブサイトのメタ情報についてまとめています
 order: 6
 ---
 
+import { TableWrapper } from '@Components/contents/shared/TableWrapper'
+
 サービスSmartHRのウェブサイトの基本情報であるメタ情報についてまとめています。そのなかで下記の項目のメタ情報をまとめた実装例を紹介します。それぞれの詳細についてリンク先のページを参照してください。
 
 またサービスではなくコーポレート（株式会社SmartHR）のウェブサイトのメタ情報に関しては、[SmartHR Design System コーポレート版 | DocBase](https://smarthr-inc.docbase.io/posts/2775925#%E3%83%A1%E3%82%BF%E6%83%85%E5%A0%B1)を参照してください。

diff --git a/content/articles/basics/text/index.mdx b/content/articles/basics/text/index.mdx
@@ -68,34 +68,34 @@ order: 7
 ### 適切な言葉を選んで書く
 
 読者が受け取る印象を意識して、言葉を注意深く選んで書きましょう。
-<!-- textlint-disable -->
+{/* <!-- textlint-disable --> */}
 #### 実例1：ユーザビリティテストの手引き
-<!-- textlint-enable -->
+{/* <!-- textlint-enable --> */}
 
 ##### 読者に与えたい印象
-<!-- textlint-disable -->
+{/* <!-- textlint-disable --> */}
 ユーザビリティテストに取り組む被験者の方の不安を取り除き、安心感を与えたい。
-<!-- textlint-enable -->
+{/* <!-- textlint-enable --> */}
 
 ##### Before
 
 <blockquote>
 テストされるのは、プロダクトです！被験者ご自身がテストされるわけではありませんので、操作に慣れていなくてもご安心ください！
 </blockquote>
 
-<!-- textlint-disable -->
+{/* <!-- textlint-disable --> */}
 「！」の使用で内容が強調され、ユーザビリティテストへ取り組むことへのプレッシャーを与える印象を受けます。
-<!-- textlint-enable -->
+{/* <!-- textlint-enable --> */}
 
 ##### After
 
 <blockquote>
 テストの対象はプロダクトであり、被験者ご自身ではありません。操作に慣れていなくてもご安心ください。
 </blockquote>
 
-<!-- textlint-disable -->
+{/* <!-- textlint-disable --> */}
 過度な強調をやめ、落ち着いた表現に変更することで、ユーザビリティテストへの不安や緊張をやわらげる印象にしています。
-<!-- textlint-enable -->
+{/* <!-- textlint-enable --> */}
 
 #### 実例2：プロダクトエンジニア組織について紹介したインタビュー記事
 
@@ -368,10 +368,10 @@ SmartHRに登録されている従業員情報と、CSVファイルに記載の
 * 過度にネガティブな印象を与える表現になっていないか
 
 ### 短文で書けているか
-<!-- textlint-disable -->
+{/* <!-- textlint-disable --> */}
 * 一文が長くなっていないか（一文の目安は50文字程度）
   * 「〇〇できる」を「〇〇することができる」としているなど、冗長な表現がないか
-<!-- textlint-enable -->
+{/* <!-- textlint-enable --> */}
 * 複数の意味が一文に含まれていないか
 * なくても意味の通じる補足を入れていないか
   * 補足することで主語と述語が離れたり、係り受けが曖昧になっていないか

diff --git a/content/articles/communication/capture/capture-others.mdx b/content/articles/communication/capture/capture-others.mdx
@@ -6,6 +6,7 @@ order: 3
 
 import { Grid } from '@Components/shared/Grid/Grid'
 import { CaptureImageWithDesc } from '@Components/contents/ServiceCapture/CaptureImageWithDesc'
+import { TableWrapper } from '@Components/contents/shared/TableWrapper'
 
 
 利用頻度が高いプロダクト以外の画面キャプチャを選定して掲載しています。  

diff --git a/content/articles/communication/capture/capture-product.mdx b/content/articles/communication/capture/capture-product.mdx
@@ -6,6 +6,7 @@ order: 2
 
 import { Grid } from '@Components/shared/Grid/Grid'
 import { CaptureImageWithDesc } from '@Components/contents/ServiceCapture/CaptureImageWithDesc'
+import { TableWrapper } from '@Components/contents/shared/TableWrapper'
 
 
 利用頻度が高いプロダクトの画面キャプチャを掲載しています。  

diff --git a/content/articles/communication/capture/kit.mdx b/content/articles/communication/capture/kit.mdx
@@ -5,9 +5,7 @@ description: '画面キャプチャの編集キットです。  '
 order: 4
 ---
 import { ColorPalette, ColorPalettesWrapper } from '@Components/ColorPalette'
-
-import { Grid } from '@Components/shared/Grid/Grid'
-import { ImgWithDesc } from '@Components/article/ImgWithDesc/ImgWithDesc'
+import { TableWrapper } from '@Components/contents/shared/TableWrapper'
 
 画面キャプチャを編集するときに利用できるアイテム群です。  
 サイトにアクセスするすべての人が参照できますが、利用に関しては[利用者・利用範囲](#h2-3)を確認してください。

diff --git a/content/articles/communication/capture/service-capture-in-mock.mdx b/content/articles/communication/capture/service-capture-in-mock.mdx
@@ -4,6 +4,8 @@ description: 'マーケティング・セールス・広報全般の用途を想
 order: 1
 ---
 
+import { TableWrapper } from '@Components/contents/shared/TableWrapper'
+
 端末モック入りの画面キャプチャは、マーケティング・セールス・広報全般の用途に最適化した画面キャプチャを端末モックに合成したものです。  
 これはSmartHRというサービスを端的にあらわしたものであり、「サービスの顔」です。  
 

diff --git a/content/articles/communication/eye-catching-images.mdx b/content/articles/communication/eye-catching-images.mdx
@@ -4,6 +4,8 @@ description: 'SmartHRのアイキャッチ(ウェブページやブログ、動
 order: 2
 ---
 
+import { TableWrapper } from '@Components/contents/shared/TableWrapper'
+
 アイキャッチとは、ウェブページやブログ、動画などで用いられる、見出し画像のことです。検索エンジンの検索結果サムネイル、SNSのOGP等としても展開されます。  
 SmartHRでは、コンテンツの魅力を最大限に伝えるため、アイキャッチの設定を推奨します。
 
@@ -112,4 +114,4 @@ Figmaのアカウントの発行方法などは[Figmaの利用方法](https://sm
   </table>
 </TableWrapper>
 
-ほかのコンテンツの利用範囲は[利用者のかたへ](/introduction/user/)を参照してください。
+ほかのコンテンツの利用範囲は[利用者のかたへ](/introduction/user/)を参照してください。
diff --git a/content/articles/communication/mock.mdx b/content/articles/communication/mock.mdx
@@ -4,10 +4,10 @@ description: 'SmartHRの端末モックです。'
 
 order: 6
 ---
-import { ColorPalette, ColorPalettesWrapper } from '@Components/ColorPalette'
 
 import { Grid } from '@Components/shared/Grid/Grid'
 import { ImgWithDesc } from '@Components/article/ImgWithDesc/ImgWithDesc'
+import { TableWrapper } from '@Components/contents/shared/TableWrapper'
 
 
 ![端末モックが中央に配置されている](./images/mock/sample-mock.png)
@@ -146,4 +146,4 @@ KeynoteやGoogleスライドなどのスライド資料の場合、画面キャ
 ## フィードバック先
 端末モックに関する相談やフィードバック  
 - 社内Slack　`#design_comm_依頼`
-- SmartHR Design System 運営　smarthr-design-system@smarthr.co.jp  
+- SmartHR Design System 運営　smarthr-design-system@smarthr.co.jp  
diff --git a/content/articles/communication/photography/jingle-movie.mdx b/content/articles/communication/photography/jingle-movie.mdx
@@ -6,6 +6,7 @@ order: 2
 
 import { Grid } from '@Components/shared/Grid/Grid'
 import { ImgWithDesc } from '@Components/article/ImgWithDesc/ImgWithDesc'
+import { TableWrapper } from '@Components/contents/shared/TableWrapper'
 import { VideoEmbed } from '@Components/article/VideoEmbed/VideoEmbed'
 
 <VideoEmbed

diff --git a/content/articles/communication/slides.mdx b/content/articles/communication/slides.mdx
@@ -4,6 +4,8 @@ description: 'SmartHRのスライド・資料テンプレートです。'
 order: 3
 ---
 
+import { TableWrapper } from '@Components/contents/shared/TableWrapper'
+
 SmartHRのスライド・資料のKeynoteテンプレートです。
 
 サイトにアクセスするすべての人が参照できますが、利用に関しては[利用者・利用範囲](#h2-3)を確認してください。

diff --git a/content/articles/operational-guideline/figma-operation.mdx b/content/articles/operational-guideline/figma-operation.mdx
@@ -63,11 +63,11 @@ order: 5
 
 Figmaについて相談やお困りごとがある場合は、社内Slack`#design_products`チャンネルで聞いてみてください。
 
-<!-- textlint-disable -->
+{/* <!-- textlint-disable --> */}
 
 以下のSlackチャンネルにFigmaを使い始めたユーザーが集まっていますので、興味のある方はお気軽にご参加ください。
 
-<!-- textlint-enable -->
+{/* <!-- textlint-enable --> */}
 
 - `#勉強会_figma`
 - `#pj_エンジニアデザイナー化計画`

diff --git a/content/articles/operational-guideline/page-template/design-patterns-template.mdx b/content/articles/operational-guideline/page-template/design-patterns-template.mdx
@@ -23,7 +23,7 @@ order: 3
 主題を構成する要素の全体像と、それぞれの要素を説明します。テンプレは以下です。
 
 ```
-{主題}は以下の要素で構成されています。
+\{主題\}は以下の要素で構成されています。
 
 1. [要素名1](#ページ内リンク)
 2. [要素名2](#ページ内リンク)
@@ -32,7 +32,7 @@ order: 3
 
 *要素の全体を俯瞰する画像や`ComponentPreview`があればここに埋め込みます。*
 
-### {要素名}
+### \{要素名\}
 要素の役割や、要素のみに関する余白、種類、文言のルールや制約を、よしなに子セクションを分けて定義します。  
 
 1つ要素の説明が長大になる場合は、それ自体を別のページにわけることを考えましょう。  
@@ -54,7 +54,7 @@ order: 3
 主題全体のUIバリエーションを説明します。  
 種類やパターンごとに子セクションを分け、その種類になる条件や役割を定義します。
 
-### {バリエーション名}
+### \{バリエーション名\}
 どんなときのバリエーションか、などを書きます。  
 バリエーションごとのライティングルールがあれば、`<blockquote>`やスプレッドシートなどを含めてここで書きます。
 
@@ -68,7 +68,7 @@ order: 3
 *ライティングガイドラインから抜き出した`<blockquote>`やスプレッドシートなどがあればここに埋め込みます。*
 
 
-## {その他のルール}
+## \{その他のルール\}
 基本的に上記の項目に当てはめることを推奨しますが、主題がルールのみの場合など、これらに当てはまらない内容を説明する場合に使用する自由項目です。  
 よしなに子セクションを分けて書きます。
 

diff --git a/content/articles/operational-guideline/page-template/index.mdx b/content/articles/operational-guideline/page-template/index.mdx
@@ -4,7 +4,7 @@ description: ''
 order: 3
 ---
 
-import { PageIndex } from '@Components/article/PageIndex'
+import { PageIndex, Description } from '@Components/article/PageIndex'
 
 <PageIndex path="/operational-guideline/page-template/" excludes={[]} heading="h2">
   <Description name="style-template">