@intlayer/docs 8.11.2 → 8.12.0-canary.0

package/docs/ja/intlayer_with_vite+preact.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-05-06
-title: Vite + Preact i18n - Preactアプリの翻訳方法 2026
-description: Vite と Preact のウェブサイトを多言語対応にする方法を紹介します。国際化（i18n）と翻訳のためのドキュメントに従ってください。
+updatedAt: 2026-05-31
+title: "Vite + Preact i18n - あなたのアプリを翻訳する完全ガイド"
+description: "i18nextはもう不要。2026年に多言語（i18n）Vite + Preactアプリを構築するためのガイド。AIエージェントで翻訳し、バンドルサイズ、SEO、パフォーマンスを最適化します。"
 keywords:
   - 国際化
   - ドキュメント
@@ -64,22 +64,45 @@ history:
 
 GitHub の[アプリケーションテンプレート](https://github.com/aymericzip/intlayer-vite-preact-template)もご覧ください。
 
-## Intlayerとは？
+## 代替手段ではなく Interlayer を使用する理由
 
-**Intlayer** は、モダンなウェブアプリケーションにおける多言語対応を簡素化するために設計された革新的なオープンソースの国際化（i18n）ライブラリです。
+「preact-i18n」や「i18next」などの主要なソリューションと比較して、Intlayer は次のような統合された最適化を備えたソリューションです。
 
-Intlayer を使うと、以下が可能です：
+**Preact を完全にカバー**
 
-- **コンポーネントレベルで宣言的な辞書を使い、翻訳を簡単に管理**できます。
-- **メタデータ、ルート、コンテンツを動的にローカライズ**できます。
-- **自動生成された型により TypeScript サポートを確保し、オートコンプリートやエラー検出を向上**させます。
-- **動的なロケール検出や切り替えなどの高度な機能を活用**できます。
+Intlayer は、**コンポーネント レベルのコンテンツ スコープ**、**遅延読み込み**、および国際化のスケーリング (i18n) に必要なすべての機能を提供することで、Preact と完全に連携するように最適化されています。
+
+**バンドルサイズ**
+
+大量の JSON ファイルをページにロードするのではなく、必要なコンテンツのみをロードします。 Intlayer は、**バンドルとページのサイズを最大 50% 削減**するのに役立ちます。
+
+**保守性**
+
+アプリケーションのコンテンツのスコープを設定すると、大規模なアプリケーションの **メンテナンスが容易になります**。コンテンツ コードベース全体を確認するという精神的な負担を負うことなく、単一の機能フォルダーを複製または削除できます。さらに、Intlayer は**完全に型指定**されており、コンテンツの正確性を保証します。
+
+**AI エージェント**
+
+コンテンツを同じ場所に配置すると、大規模言語モデル (LLM) によって **必要なコンテキストが削減**されます。 Intlayer には、翻訳の欠落をテストする **CLI**、**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**、**[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** などのツール スイートも付属しています。および **[エージェント スキル](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)** により、AI エージェントの開発者エクスペリエンス (DX) がさらにスムーズになります。
+
+**オートメーション**
+
+AI プロバイダーの費用で、選択した LLM を使用して CI/CD パイプラインで自動化を変換します。 Intlayer は、コンテンツ抽出を自動化する **コンパイラー** と、**バックグラウンドでの翻訳**を支援する [Web プラットフォーム](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) も提供します。
+
+**パフォーマンス**
+
+大量の JSON ファイルをコンポーネントに接続すると、パフォーマンスと反応性の問題が発生する可能性があります。 Intlayer は、ビルド時のコンテンツの読み込みを最適化します。
+
+**非開発によるスケーリング**
+
+Intlayer は単なる i18n ソリューションではなく、**自己ホスト型 [ビジュアル エディター](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** と **[完全な CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** を提供します。 **リアルタイム**で多言語コンテンツを管理できるようになり、翻訳者、コピーライター、その他のチーム メンバーとのコラボレーションがシームレスになります。コンテンツはローカルおよび/またはリモートに保存できます。
 
 ---
 
 ## Vite と Preact アプリケーションで Intlayer をセットアップするステップバイステップガイド
 
-### (オプション) ステップ 1 : コンポーネントのコンテンツを抽出する
+<Steps>
+
+<Step number={1} title="コンポーネントのコンテンツを抽出する" isOptional={true}>
 
 既存のコードベースがある場合、数千のファイルを変換するのは時間がかかることがあります。
 
@@ -191,6 +214,9 @@ bun run build # Or bun run dev
 
  </Tab>
 </Tabs>
+</Step>
+
+</Steps>
 
 ### （任意）サイトマップと robots.txt（ビルド時生成）
 

package/docs/ja/intlayer_with_vite+react.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-05-06
-title: Vite + React i18n - Reactアプリの翻訳方法 2026
-description: Intlayerを使ってViteとReactアプリケーションに国際化（i18n）を追加する方法を学びます。このガイドに従ってアプリを多言語対応にしましょう。
+updatedAt: 2026-05-31
+title: "Vite + React i18n - あなたのアプリを翻訳する完全ガイド"
+description: "i18nextはもう不要。2026年に多言語（i18n）Vite + Reactアプリを構築するためのガイド。AIエージェントで翻訳し、バンドルサイズ、SEO、パフォーマンスを最適化します。"
 keywords:
   - 国際化
   - ドキュメント
@@ -36,129 +36,37 @@ history:
 
 <TOC/>
 
-## Intlayerとは？
+## 代替手段ではなく Interlayer を使用する理由
 
-**Intlayer**は、最新のウェブアプリケーションにおける多言語対応を簡素化するために設計された革新的なオープンソースの国際化（i18n）ライブラリです。
+「react-i18next」や「i18next」などの主要なソリューションと比較して、Intlayer は次のような統合された最適化を備えたソリューションです。
 
-Intlayerを使うと、以下が可能です：
+**Vite と React を完全にカバー**
 
-- **コンポーネントレベルで宣言的な辞書を使って** 翻訳を簡単に管理できます。
-- **メタデータ、ルート、コンテンツを動的にローカライズ** できます。
-- **自動生成された型によりTypeScriptサポートを保証** し、オートコンプリートやエラー検出を向上させます。
-- **動的なロケール検出や切り替えなどの高度な機能を活用** できます。
+Intlayer は、**コンポーネント レベルのコンテンツ スコープ**、**遅延読み込み翻訳**、および国際化のスケーリング (i18n) に必要なすべての機能を提供することにより、Vite および React と完全に連携するように最適化されています。
 
-### (オプション) ステップ 1 : コンポーネントのコンテンツを抽出する
+**バンドルサイズ**
 
-既存のコードベースがある場合、数千のファイルを変換するのは時間がかかることがあります。
+大量の JSON ファイルをページにロードするのではなく、必要なコンテンツのみをロードします。 Intlayer は、**バンドルとページのサイズを最大 50% 削減**するのに役立ちます。
 
-このプロセスを容易にするために、Intlayerは、コンポーネントを変換しコンテンツを抽出するための [コンパイラ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/compiler.md) / [エクストラクタ](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/cli/extract.md) を提案しています。
+**保守性**
 
-セットアップするには、`intlayer.config.ts` ファイルに `compiler` セクションを追加します。
+アプリケーションのコンテンツのスコープを設定すると、大規模なアプリケーションの **メンテナンスが容易になります**。コンテンツ コードベース全体を確認するという精神的な負担を負うことなく、単一の機能フォルダーを複製または削除できます。さらに、Intlayer は**完全に型指定**されており、コンテンツの正確性を保証します。
 
-```typescript fileName="intlayer.config.ts" codeFormat={["typescript", "esm", "commonjs"]}
-import { type IntlayerConfig } from "intlayer";
+**AI エージェント**
 
-const config: IntlayerConfig = {
-  // ... 他の構成
-  compiler: {
-    /**
-     * コンパイラを有効にするかどうかを指定します。
-     */
-    enabled: true,
+コンテンツを同じ場所に配置すると、大規模言語モデル (LLM) によって **必要なコンテキストが削減**されます。 Intlayer には、翻訳の欠落をテストする **CLI**、**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**、**[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** などのツール スイートも付属しています。および **[エージェント スキル](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)** により、AI エージェントの開発者エクスペリエンス (DX) がさらにスムーズになります。
 
-    /**
-     * 出力ファイルのパスを定義します。
-     */
-    output: ({ fileName, extension }) => `./${fileName}${extension}`,
+**オートメーション**
 
-    /**
-     * 変換後にコンポーネントを保存するかどうかを指定します。これにより、コンパイラを一度だけ実行してアプリを変換し、その後削除することができます。
-     */
-    saveComponents: false,
+AI プロバイダーの費用で、選択した LLM を使用して CI/CD パイプラインで自動化を変換します。 Intlayer は、コンテンツ抽出を自動化する **コンパイラー** と、**バックグラウンドでの翻訳**を支援する [Web プラットフォーム](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) も提供します。
 
-    /**
-     * 辞書キーの接頭辞
-     */
-    dictionaryKeyPrefix: "",
-  },
-};
+**パフォーマンス**
 
-export default config;
-```
-
-<Tabs>
- <Tab value='抽出コマンド'>
-
-コンポーネントを変換してコンテンツを抽出するためにエクストラクタを実行します
-
-```bash packageManager="npm"
-npx intlayer extract
-```
-
-```bash packageManager="pnpm"
-pnpm intlayer extract
-```
-
-```bash packageManager="yarn"
-yarn intlayer extract
-```
-
-```bash packageManager="bun"
-bun x intlayer extract
-```
-
- </Tab>
- <Tab value='Babelコンパイラ'>
-
-```bash packageManager="npm"
-npm install @intlayer/babel --save-dev
-```
-
-```bash packageManager="pnpm"
-pnpm add @intlayer/babel --save-dev
-```
-
-```bash packageManager="yarn"
-yarn add @intlayer/babel --save-dev
-```
-
-```bash packageManager="bun"
-bun add @intlayer/babel --dev
-```
-
-```js fileName="babel.config.js"
-const {
-  intlayerExtractBabelPlugin,
-  getExtractPluginOptions,
-} = require("@intlayer/babel");
-
-module.exports = {
-  presets: ["next/babel"],
-  plugins: [
-    // コンポーネントから辞書へコンテンツを抽出する
-    [intlayerExtractBabelPlugin, getExtractPluginOptions()],
-  ],
-};
-```
+大量の JSON ファイルをコンポーネントに接続すると、パフォーマンスと反応性の問題が発生する可能性があります。 Intlayer は、ビルド時のコンテンツの読み込みを最適化します。
 
-```bash packageManager="npm"
-npm run build # または npm run dev
-```
+**非開発によるスケーリング**
 
-```bash packageManager="pnpm"
-pnpm run build # または pnpm run dev
-```
-
-```bash packageManager="yarn"
-yarn build # または yarn dev
-```
-
-```bash packageManager="bun"
-bun run build # Or bun run dev
-```
-
- </Tab>
-</Tabs>
+Intlayer は単なる i18n ソリューションではなく、**自己ホスト型 [ビジュアル エディター](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** と **[完全な CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** を提供します。 **リアルタイム**で多言語コンテンツを管理できるようになり、翻訳者、コピーライター、その他のチーム メンバーとのコラボレーションがシームレスになります。コンテンツはローカルおよび/またはリモートに保存できます。
 
 ---
 

package/docs/ja/intlayer_with_vite+react_compiler.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2024-03-07
-updatedAt: 2026-05-06
-title: Vite + React i18n - 既存のアプリを多言語アプリに変換する 2026
-description: Intlayer Compiler を使用して、既存の Vite および React アプリケーションを多言語化する方法をご覧ください。ドキュメントに従って、国際化 (i18n) し、AI で翻訳します。
+updatedAt: 2026-05-31
+title: "Vite + React i18n - あなたのアプリを翻訳する完全ガイド"
+description: "i18nextはもう不要。2026年に多言語（i18n）Vite + Reactアプリを構築するためのガイド。AIエージェントで翻訳し、バンドルサイズ、SEO、パフォーマンスを最適化します。"
 keywords:
   - 国際化
   - ドキュメント
@@ -92,7 +92,9 @@ GitHub で [アプリケーションテンプレート](https://github.com/aymer
 
 ## Vite および React アプリケーションに Intlayer を設定するためのステップバイステップガイド
 
-### ステップ 1: 依存関係のインストール
+<Steps>
+
+<Step number={1} title="依存関係のインストール">
 
 npm を使用して必要なパッケージをインストールします。
 
@@ -129,7 +131,9 @@ bun x intlayer init
 - **vite-intlayer**
   Intlayer を [Vite バンドラー](https://vite.dev/guide/why.html#why-bundle-for-production) と統合するための Vite プラグイン、およびユーザーの優先ロケールの検出、クッキーの管理、URL リダイレクトの処理のためのミドルウェアが含まれています。
 
-### ステップ 2: プロジェクトの構成
+</Step>
+
+<Step number={2} title="プロジェクトの構成">
 
 アプリケーションの言語を構成するための構成ファイルを作成します。
 
@@ -183,7 +187,9 @@ export default config;
 
 > この構成ファイルを通じて、ローカライズされた URL、ミドルウェアのリダイレクト、クッキー名、コンテンツ宣言の場所と拡張子、コンソールでの Intlayer ログの無効化などを設定できます。利用可能なパラメータの完全なリストについては、[構成ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/configuration.md) を参照してください。
 
-### ステップ 3: Vite 構成に Intlayer を統合する
+</Step>
+
+<Step number={3} title="Vite 構成に Intlayer を統合する">
 
 構成に intlayer プラグインを追加します。
 
@@ -202,7 +208,9 @@ export default defineConfig({
 
 > `intlayerCompiler()` Vite プラグインは、コンポーネントからコンテンツを抽出し、`.content` ファイルを書き出すために使用されます。
 
-### ステップ 4: コードをコンパイルする
+</Step>
+
+<Step number={4} title="コードをコンパイルする">
 
 デフォルトのロケールでハードコードされた文字列を使用してコンポーネントを記述するだけです。残りはコンパイラが処理します。
 
@@ -341,7 +349,9 @@ export default App;
 
 - **`IntlayerProvider`** は、ネストされたコンポーネントにロケールを提供するために使用されます。
 
-### (オプション) ステップ 6: コンテンツの言語を変更する
+</Step>
+
+<Step number={6} title="コンテンツの言語を変更する" isOptional={true}>
 
 コンテンツの言語を変更するには、`useLocale` フックによって提供される `setLocale` 関数を使用できます。この関数を使用すると、アプリケーションのロケールを設定し、それに応じてコンテンツを更新できます。
 
@@ -363,7 +373,9 @@ const LocaleSwitcher: FC = () => {
 
 > `useLocale` フックの詳細については、[ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/react-intlayer/useLocale.md) を参照してください。
 
-### (オプション) ステップ 7: 欠落した翻訳を埋める
+</Step>
+
+<Step number={7} title="欠落した翻訳を埋める" isOptional={true}>
 
 Intlayerは、欠落した翻訳を埋めるためのCLIツールを提供しています。`intlayer`コマンドを使用して、コードから欠落した翻訳をテストおよび埋めることができます。
 
@@ -400,6 +412,9 @@ bun x intlayer fill         # 欠落した翻訳を埋める
 ```
 
 > 詳細については、[CLIドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/cli/ci.md)を参照してください。
+> </Step>
+
+</Steps>
 
 ### （任意）サイトマップと robots.txt（ビルド時生成）
 

package/docs/ja/intlayer_with_vite+solid.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-04-18
-updatedAt: 2026-05-06
-title: Vite + Solid i18n - Solidアプリの翻訳方法 2026
-description: Vite と Solid のウェブサイトを多言語対応にする方法を紹介します。国際化（i18n）と翻訳のドキュメントに従ってください。
+updatedAt: 2026-05-31
+title: "Vite + Solid i18n - あなたのアプリを翻訳する完全ガイド"
+description: "i18nextはもう不要。2026年に多言語（i18n）Vite + Solidアプリを構築するためのガイド。AIエージェントで翻訳し、バンドルサイズ、SEO、パフォーマンスを最適化します。"
 keywords:
   - 国際化
   - ドキュメント
@@ -56,16 +56,37 @@ history:
 
 <!-- GitHubの[アプリケーションテンプレート](https://github.com/aymericzip/intlayer-solid-template)もご参照ください。 -->
 
-## Intlayerとは何ですか？
+## 代替手段ではなく Interlayer を使用する理由
 
-**Intlayer**は、最新のウェブアプリケーションにおける多言語対応を簡素化するために設計された革新的なオープンソースの国際化（i18n）ライブラリです。
+`@solid-primitives/i18n` や `i18next` などの主要なソリューションと比較して、Intlayer は次のような統合された最適化を備えたソリューションです。
 
-Intlayerを使うと、以下が可能です：
+**フルソリッドカバレッジ**
 
-- **コンポーネントレベルで宣言的な辞書を使って翻訳を簡単に管理**できます。
-- **メタデータ、ルート、コンテンツを動的にローカライズ**できます。
-- **自動生成された型によりTypeScriptのサポートを保証**し、オートコンプリートやエラー検出を向上させます。
-- **動的なロケール検出や切り替えなどの高度な機能を活用**できます。
+Intlayer は、**コンポーネント レベルのコンテンツ スコープ**、**リアクティブ変換**、および国際化のスケーリング (i18n) に必要なすべての機能を提供することで、Solid と完全に連携するように最適化されています。
+
+**バンドルサイズ**
+
+大量の JSON ファイルをページにロードするのではなく、必要なコンテンツのみをロードします。 Intlayer は、**バンドルとページのサイズを最大 50% 削減**するのに役立ちます。
+
+**保守性**
+
+アプリケーションのコンテンツのスコープを設定すると、大規模なアプリケーションの **メンテナンスが容易になります**。コンテンツ コードベース全体を確認するという精神的な負担を負うことなく、単一の機能フォルダーを複製または削除できます。さらに、Intlayer は**完全に型指定**されており、コンテンツの正確性を保証します。
+
+**AI エージェント**
+
+コンテンツを同じ場所に配置すると、大規模言語モデル (LLM) によって **必要なコンテキストが削減**されます。 Intlayer には、翻訳の欠落をテストする **CLI**、**[LSP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/lsp.md)**、**[MCP](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/mcp_server.md)** などのツール スイートも付属しています。および **[エージェント スキル](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/agent_skills.md)** により、AI エージェントの開発者エクスペリエンス (DX) がさらにスムーズになります。
+
+**オートメーション**
+
+AI プロバイダーの費用で、選択した LLM を使用して CI/CD パイプラインで自動化を変換します。 Intlayer は、コンテンツ抽出を自動化する **コンパイラー** と、**バックグラウンドでの翻訳**を支援する [Web プラットフォーム](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md) も提供します。
+
+**パフォーマンス**
+
+大量の JSON ファイルをコンポーネントに接続すると、パフォーマンスと反応性の問題が発生する可能性があります。 Intlayer は、ビルド時のコンテンツの読み込みを最適化します。
+
+**非開発によるスケーリング**
+
+Intlayer は単なる i18n ソリューションではなく、**自己ホスト型 [ビジュアル エディター](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_visual_editor.md)** と **[完全な CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/en/intlayer_CMS.md)** を提供します。 **リアルタイム**で多言語コンテンツを管理できるようになり、翻訳者、コピーライター、その他のチーム メンバーとのコラボレーションがシームレスになります。コンテンツはローカルおよび/またはリモートに保存できます。
 
 ---
 
@@ -75,7 +96,9 @@ Intlayerを使うと、以下が可能です：
 
 <TOC/>
 
-### ステップ1: 依存関係のインストール
+<Steps>
+
+<Step number={1} title="依存関係のインストール">
 
 npmを使って必要なパッケージをインストールします：
 
@@ -113,7 +136,9 @@ bun x intlayer init
 - **vite-intlayer**
   Intlayerを[Viteバンドラー](https://vite.dev/guide/why.html#why-bundle-for-production)と統合するためのViteプラグイン、およびユーザーの優先ロケール検出、クッキー管理、URLリダイレクト処理のためのミドルウェアを含みます。
 
-### ステップ 2: プロジェクトの設定
+</Step>
+
+<Step number={2} title="プロジェクトの設定">
 
 アプリケーションの言語を設定するための設定ファイルを作成します：
 
@@ -137,7 +162,9 @@ export default config;
 
 > この設定ファイルを通じて、ローカライズされたURL、ミドルウェアのリダイレクション、クッキー名、コンテンツ宣言の場所と拡張子、コンソールでのIntlayerログの無効化などを設定できます。利用可能なパラメータの完全なリストについては、[設定ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/configuration.md)を参照してください。
 
-### ステップ3: Vite設定にIntlayerを統合する
+</Step>
+
+<Step number={3} title="Vite設定にIntlayerを統合する">
 
 intlayerプラグインを設定に追加します。
 
@@ -152,7 +179,9 @@ export default defineConfig({
 });
 ```
 
-### ステップ 3: Vite 設定に Intlayer を統合する
+</Step>
+
+<Step number={3} title="Vite 設定に Intlayer を統合する">
 
 intlayer プラグインを設定に追加します。
 
@@ -169,7 +198,9 @@ export default defineConfig({
 
 > `intlayer()` は Vite プラグインで、Intlayer を Vite に統合するために使用されます。コンテンツ宣言ファイルのビルドを保証し、開発モードでそれらを監視します。Vite アプリケーション内で Intlayer の環境変数を定義します。さらに、パフォーマンス最適化のためのエイリアスも提供します。
 
-### ステップ 4: コンテンツを宣言する
+</Step>
+
+<Step number={4} title="コンテンツを宣言する">
 
 翻訳を格納するためのコンテンツ宣言を作成および管理します。
 
@@ -199,7 +230,9 @@ export default appContent;
 
 > 詳細については、[コンテンツ宣言のドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/content_file.md)を参照してください。
 
-### ステップ5: Intlayerをコードで利用する
+</Step>
+
+<Step number={5} title="Intlayerをコードで利用する">
 
 アプリケーション全体でコンテンツ辞書にアクセスします：
 
@@ -259,7 +292,9 @@ export default App;
 > <img src="{String(content.image.src)}" alt="{String(content.image)}" />
 > ```
 
-### （オプション）ステップ6: コンテンツの言語を変更する
+</Step>
+
+<Step number={6} title="コンテンツの言語を変更する">
 
 コンテンツの言語を変更するには、`useLocale`フックによって提供される`setLocale`関数を使用できます。この関数により、アプリケーションのロケールを設定し、それに応じてコンテンツを更新できます。
 
@@ -288,7 +323,9 @@ const LocaleSwitcher: Component = () => {
 };
 ```
 
-### （オプション）ステップ7: アプリケーションにローカライズされたルーティングを追加する
+</Step>
+
+<Step number={7} title="アプリケーションにローカライズされたルーティングを追加する">
 
 このステップの目的は、各言語に対して一意のルートを作成することです。これはSEOとSEOフレンドリーなURLに役立ちます。
 例：
@@ -353,7 +390,9 @@ const App: Component = () => (
 export default App;
 ```
 
-### （オプション）ステップ8: ロケール変更時にURLを変更する
+</Step>
+
+<Step number={8} title="ロケール変更時にURLを変更する">
 
 ロケールが変更されたときにURLを変更するには、`useLocale`フックによって提供される`onLocaleChange`プロップを使用できます。`@solidjs/router`の`useNavigate`と`useLocation`フックを使用して、URLパスを更新できます。
 
@@ -390,7 +429,9 @@ const LocaleSwitcher: Component = () => {
 };
 ```
 
-### （オプション）ステップ9: HTMLの言語属性と言語方向属性を切り替える
+</Step>
+
+<Step number={9} title="HTMLの言語属性と言語方向属性を切り替える">
 
 アクセシビリティとSEOのために、`<html>`タグの`lang`と`dir`属性を現在のロケールに合わせて更新します。
 
@@ -413,7 +454,9 @@ const AppContent: Component = () => {
 };
 ```
 
-### （オプション）ステップ10：ローカライズされたリンクコンポーネントの作成
+</Step>
+
+<Step number={10} title="ローカライズされたリンクコンポーネントの作成">
 
 内部URLを現在の言語で自動的にプレフィックスするカスタム`Link`コンポーネントを作成します。
 
@@ -434,7 +477,9 @@ export const Link: ParentComponent<AnchorProps> = (props) => {
 };
 ```
 
-### （オプション）ステップ11: Markdownをレンダリングする
+</Step>
+
+<Step number={11} title="Markdownをレンダリングする">
 
 Intlayerは、独自の内部パーサーを使用して、SolidアプリケーションでMarkdownコンテンツを直接レンダリングすることをサポートしています。デフォルトでは、Markdownはプレーンテキストとして扱われます。リッチHTMLとしてレンダリングするには、アプリケーションを`MarkdownProvider`でラップします。
 
@@ -472,48 +517,9 @@ const MyComponent = () => {
 };
 ```
 
-### TypeScriptを設定する
-
-TypeScript設定に自動生成された型が含まれていることを確認してください。
-
-```json5 fileName="tsconfig.json"
-{
-  "compilerOptions": {
-    // ...
-  },
-  "include": ["src", ".intlayer/**/*.ts"],
-}
-```
-
-### Git設定
-
-Intlayerによって生成されたファイルは、Gitリポジトリにコミットしないように無視することを推奨します。
-
-これを行うには、`.gitignore`ファイルに以下の指示を追加してください。
-
-```bash
-#  Intlayerによって生成されたファイルを無視する
-.intlayer
-```
-
-### VS Code拡張機能
-
-Intlayerでの開発体験を向上させるために、公式の**Intlayer VS Code拡張機能**をインストールできます。
-
-[VS Codeマーケットプレイスからインストール](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
-
-この拡張機能は以下を提供します：
-
-- 翻訳キーの**オートコンプリート**。
-- 欠落している翻訳の**リアルタイムエラー検出**。
-- **翻訳されたコンテンツのインラインプレビュー**。
-- **翻訳を簡単に作成・更新するためのクイックアクション**。
-
-拡張機能の使い方の詳細については、[Intlayer VS Code 拡張機能のドキュメント](https://intlayer.org/doc/vs-code-extension)を参照してください。
-
----
+</Step>
 
-### (オプション) ステップ 1 : コンポーネントのコンテンツを抽出する
+<Step number={1} title="コンポーネントのコンテンツを抽出する" isOptional={true}>
 
 既存のコードベースがある場合、数千のファイルを変換するのは時間がかかることがあります。
 
@@ -608,6 +614,50 @@ bun run build # Or bun run dev
 
  </Tab>
 </Tabs>
+</Step>
+
+</Steps>
+
+### TypeScriptを設定する
+
+TypeScript設定に自動生成された型が含まれていることを確認してください。
+
+```json5 fileName="tsconfig.json"
+{
+  "compilerOptions": {
+    // ...
+  },
+  "include": ["src", ".intlayer/**/*.ts"],
+}
+```
+
+### Git設定
+
+Intlayerによって生成されたファイルは、Gitリポジトリにコミットしないように無視することを推奨します。
+
+これを行うには、`.gitignore`ファイルに以下の指示を追加してください。
+
+```bash
+#  Intlayerによって生成されたファイルを無視する
+.intlayer
+```
+
+### VS Code拡張機能
+
+Intlayerでの開発体験を向上させるために、公式の**Intlayer VS Code拡張機能**をインストールできます。
+
+[VS Codeマーケットプレイスからインストール](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)
+
+この拡張機能は以下を提供します：
+
+- 翻訳キーの**オートコンプリート**。
+- 欠落している翻訳の**リアルタイムエラー検出**。
+- **翻訳されたコンテンツのインラインプレビュー**。
+- **翻訳を簡単に作成・更新するためのクイックアクション**。
+
+拡張機能の使い方の詳細については、[Intlayer VS Code 拡張機能のドキュメント](https://intlayer.org/doc/vs-code-extension)を参照してください。
+
+---
 
 ### （任意）サイトマップと robots.txt（ビルド時生成）