@intlayer/docs 8.11.2 → 8.11.3

package/docs/ja/intlayer_with_astro_svelte.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-06
-title: Astro + Svelte i18n - 2026年にAstro + Svelteアプリケーションを翻訳する方法
-description: Intlayerを使用してAstro + Svelteサイトに国際化（i18n）を追加する方法を学びます。このガイドに従って、サイトを多言語化しましょう。
+updatedAt: 2026-05-31
+title: Astro + Svelte i18n - 完全な翻訳ガイド： Astro + Svelte
+description: バンドルサイズ、SEO、パフォーマンス、保守性のための最良のソリューション。2026年にAstro and Svelte ウェブサイトを多言語化しましょう。LLM翻訳、Agent Skills & MCP。
 keywords:
   - 国際化
   - ドキュメント
@@ -58,16 +58,37 @@ history:
 
 <TOC/>
 
-## Intlayerとは？
+## 代替手段ではなく Interlayer を使用する理由
 
-**Intlayer**は、現代的なウェブアプリケーションでの多言語サポートを簡素化するために設計された、革新的でオープンソースの国際化 (i18n) ライブラリです。
+「astro-i18n」や「i18next」などの主要なソリューションと比較して、Intlayer は次のような統合された最適化を備えたソリューションです。
 
-Intlayerを使用すると、以下のことが可能になります：
+**Astro を完全にカバー**
 
-- **翻訳の管理が容易**：コンポーネントレベルの宣言型辞書を使用します。
-- **動的なローカライズ**：メタデータ、ルート、コンテンツを動的にローカライズできます。
-- **TypeScriptサポート**：自動生成された型により、オートコンプリートやエラー検出が向上します。
-- **高度な機能**：動的なロケール検出や切り替えなどの機能を利用できます。
+Intlayer は、**多言語ルーティング**、**サイトマップ**、および国際化 (i18n) の拡張に必要なすべての機能を提供することで、Astro と完全に連携するように最適化されています。
+
+**バンドルサイズ**
+
+大量の 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を使用すると、以下のことが可能になります：
 
 GitHubで[アプリケーションテンプレート](https://github.com/aymericzip/intlayer-astro-template)を表示。
 
-### ステップ1: 依存関係のインストール
+<Steps>
+
+<Step number={1} title="依存関係のインストール">
 
 お好みのパッケージマネージャーを使用して、必要なパッケージをインストールします：
 
@@ -118,7 +141,9 @@ bun x intlayer init
 - **@astrojs/svelte**
   Svelteコンポーネントアイランドの使用を可能にする公式のAstro統合。
 
-### ステップ2: プロジェクトの設定
+</Step>
+
+<Step number={2} title="プロジェクトの設定">
 
 アプリケーションの言語を設定するための設定ファイルを作成します：
 
@@ -142,7 +167,9 @@ export default config;
 
 > この設定ファイルを使用して、ローカライズされたURL、ミドルウェアのリダイレクト、クッキー名、コンテンツ宣言の場所と拡張子、コンソールでのIntlayerログの無効化などを設定できます。利用可能なパラメータの全リストについては、[設定ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/configuration.md)を参照してください。
 
-### ステップ3: Astro設定へのIntlayerの統合
+</Step>
+
+<Step number={3} title="Astro設定へのIntlayerの統合">
 
 Astroの設定にintlayerプラグインとSvelte統合を追加します。
 
@@ -163,7 +190,9 @@ export default defineConfig({
 
 > `svelte()` 統合により、`client:only="svelte"` を通じてSvelteコンポーネントアイランドを使用できるようになります。
 
-### ステップ4: コンテンツの宣言
+</Step>
+
+<Step number={4} title="コンテンツの宣言">
 
 翻訳を保存するためのコンテンツ宣言を作成・管理します：
 
@@ -189,7 +218,9 @@ export default appContent;
 
 > 詳細については、[コンテンツ宣言のドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/content_file.md)を参照してください。
 
-### ステップ5: Astroでのコンテンツの使用
+</Step>
+
+<Step number={5} title="Astroでのコンテンツの使用">
 
 `intlayer`からエクスポートされたコアヘルパーを使用して、`.astro`ファイル内で直接辞書を消費できます。また、各ページにhreflangや正規リンクなどのSEOメタデータを追加し、クライアントサイドのインタラクティブなコンテンツのためにSvelteアイランドを組み込む必要があります。
 
@@ -277,7 +308,9 @@ const { title } = getIntlayer("app", locale);
 > - **`prefix-all`:** すべてのURLに言語プレフィックスが付きます。ルートを個別に処理する必要がない場合は、標準の `[locale]` を使用できます。
 > - **`search-param` または `no-prefix`:** ロケールフォルダは不要です。ロケールは検索パラメータまたはクッキーを通じて処理されます。
 
-### ステップ6: Svelteアイランドコンポーネントの作成
+</Step>
+
+<Step number={6} title="Svelteアイランドコンポーネントの作成">
 
 Svelteアプリケーションをラップするアイランドコンポーネントを作成します。ストアにアクセスする前に、サーバーによって検出されたロケールを使用して `setupIntlayer` を呼び出す必要があります。
 
@@ -322,7 +355,9 @@ Svelteアプリケーションをラップするアイランドコンポーネ
 
 > `locale` プロップはAstroページ（サーバー検出）から渡され、`setupIntlayer` を初期化するために使用されます。これにより、コンポーネント内のすべてのストアの初期ロケールとなります。
 
-### ステップ7: 言語切り替え機能の追加
+</Step>
+
+<Step number={7} title="言語切り替え機能の追加">
 
 言語切り替え機能はSvelteアイランド（ステップ6参照）に直接組み込まれています。`svelte-intlayer` の `useLocale` を使用し、ユーザーが新しい言語を選択したときにローカライズされたURLに移動します：
 
@@ -366,7 +401,9 @@ Svelteアプリケーションをラップするアイランドコンポーネ
 > **固定の維持に関する注意:**
 > `window.location.href` を介したリダイレクトのために `onLocaleChange` を使用することで、新しい言語のURLが確実に訪問され、Intlayerミドルウェアが言語クッキーを設定して、将来の訪問時にユーザーの好みが記憶されるようになります。
 
-### ステップ8: サイトマップとRobots.txt
+</Step>
+
+<Step number={8} title="サイトマップとRobots.txt">
 
 Intlayerは、動的にローカライズされたサイトマップとrobots.txtファイルを生成するためのユーティリティを提供します。
 
@@ -474,7 +511,9 @@ Intlayerを使用した開発体験を向上させるために、**公式のIntl
 
 ---
 
-### (Optional) Step 15: Extract the content of your components
+</Step>
+
+<Step number={15} title="Extract the content of your components" isOptional={true}>
 
 If you have an existing codebase, transforming thousands of files can be time-consuming.
 
@@ -579,3 +618,7 @@ bun run build # Or bun run dev
 ### さらに詳しく
 
 さらに詳しく知りたい場合は、[ビジュアルエディター](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_visual_editor.md)を実装したり、[CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_CMS.md)を使用してコンテンツを外部化したりすることもできます。
+
+</Step>
+
+</Steps>

package/docs/ja/intlayer_with_astro_vanilla.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-06
-title: Astro + Vanilla JS i18n - 2026年にAstro + Vanilla JSアプリケーションを翻訳する方法
-description: Intlayerを使用してAstro + Vanilla JSサイトに国際化（i18n）を追加する方法を学びます。このガイドに従って、サイトを多言語化しましょう。
+updatedAt: 2026-05-31
+title: Astro + Vanilla JS i18n - 完全な翻訳ガイド： Astro + Vanilla JS
+description: バンドルサイズ、SEO、パフォーマンス、保守性のための最良のソリューション。2026年にAstro and Vanilla JS ウェブサイトを多言語化しましょう。LLM翻訳、Agent Skills & MCP。
 keywords:
   - 国際化
   - ドキュメント
@@ -58,16 +58,37 @@ history:
 
 <TOC/>
 
-## Intlayerとは？
+## 代替手段ではなく Interlayer を使用する理由
 
-**Intlayer**は、現代的なウェブアプリケーションでの多言語サポートを簡素化するために設計された、革新的でオープンソースの国際化 (i18n) ライブラリです。
+「astro-i18n」や「i18next」などの主要なソリューションと比較して、Intlayer は次のような統合された最適化を備えたソリューションです。
 
-Intlayerを使用すると、以下のことが可能になります：
+**Astro を完全にカバー**
 
-- **翻訳の管理が容易**：コンポーネントレベルの宣言型辞書を使用します。
-- **動的なローカライズ**：メタデータ、ルート、コンテンツを動的にローカライズできます。
-- **TypeScriptのサポート**：自動生成された型により、オートコンプリートやエラー検出が向上します。
-- **高度な機能**：動的なロケール検出や切り替えなどの機能を利用できます。
+Intlayer は、**多言語ルーティング**、**サイトマップ**、および国際化 (i18n) の拡張に必要なすべての機能を提供することで、Astro と完全に連携するように最適化されています。
+
+**バンドルサイズ**
+
+大量の 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を使用すると、以下のことが可能になります：
 
 GitHubで[アプリケーションテンプレート](https://github.com/aymericzip/intlayer-astro-template)を表示。
 
-### ステップ1: 依存関係のインストール
+<Steps>
+
+<Step number={1} title="依存関係のインストール">
 
 お好みのパッケージマネージャーを使用して、必要なパッケージをインストールします：
 
@@ -112,7 +135,9 @@ bun x intlayer init
 - **vanilla-intlayer**
   IntlayerをVanilla JavaScript / TypeScriptアプリケーションと統合するパッケージ。UIフレームワークを使用せずに、Astroの `<script>` タグの任意の部分が言語変更に応答できるように、pub/subシングルトン (`IntlayerClient`) とコールバックベースのヘルパー (`useIntlayer`、`useLocale` など) を提供します。
 
-### ステップ2: プロジェクトの設定
+</Step>
+
+<Step number={2} title="プロジェクトの設定">
 
 アプリケーションの言語を設定するための設定ファイルを作成します：
 
@@ -136,7 +161,9 @@ export default config;
 
 > この設定ファイルを使用して、ローカライズされたURL、ミドルウェアのリダイレクト、クッキー名、コンテンツ宣言の場所と拡張子、コンソールでのIntlayerログの無効化などを設定できます。利用可能なパラメータの全リストについては、[設定ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/configuration.md)を参照してください。
 
-### ステップ3: Astro設定へのIntlayerの統合
+</Step>
+
+<Step number={3} title="Astro設定へのIntlayerの統合">
 
 Astroの設定にintlayerプラグインを追加します。Vanilla JSの場合、追加のUIフレームワーク統合は必要ありません。
 
@@ -154,7 +181,9 @@ export default defineConfig({
 
 > Astro統合プラグイン `intlayer()` は、IntlayerをAstroと統合するために使用されます。コンテンツ宣言ファイルの構築を確実にし、開発モードで監視します。Astroアプリケーション内でIntlayerの環境変数を定義し、パフォーマンス最適化のためのエイリアスを提供します。
 
-### ステップ4: コンテンツの宣言
+</Step>
+
+<Step number={4} title="コンテンツの宣言">
 
 翻訳を保存するためのコンテンツ宣言を作成・管理します：
 
@@ -192,7 +221,9 @@ export default appContent;
 
 > 詳細については、[コンテンツ宣言のドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/content_file.md)を参照してください。
 
-### ステップ5: Astroでのコンテンツの使用
+</Step>
+
+<Step number={5} title="Astroでのコンテンツの使用">
 
 Vanilla JSの場合、初期のサーバーサイドレンダリングには `.astro` ファイル内で `getIntlayer` を使用してすべてのレンダリングが行われます。その後、`<script>` ブロックがクライアントサイドで `vanilla-intlayer` を初期化し、言語の切り替えを処理します。
 
@@ -301,7 +332,9 @@ const { greeting, description, switchLocale } = getIntlayer("app", locale);
 > - **`prefix-all`:** すべてのURLに言語プレフィックスが付きます。ルートを個別に処理する必要がない場合は、標準の `[locale]` を使用できます。
 > - **`search-param` または `no-prefix`:** ロケールフォルダは不要です。ロケールは検索パラメータまたはクッキーを通じて処理されます。
 
-### ステップ6: 言語切り替え機能の追加
+</Step>
+
+<Step number={6} title="言語切り替え機能の追加">
 
 AstroでのVanilla JSの場合、言語切り替えは通常のリンクとしてサーバーサイドでレンダリングされ、クライアントサイドで `<script>` ブロックを通じてハイドレーションされます。ユーザーが言語リンクをクリックすると、`vanilla-intlayer` がローカライズされたURLに移動する前に `setLocale` を通じて言語クッキーを設定します。
 
@@ -342,7 +375,9 @@ AstroでのVanilla JSの場合、言語切り替えは通常のリンクとし
 > **プログレッシブエンハンスメントに関する注意:**
 > 言語切り替えリンクは、JavaScriptがなくても標準の `<a>` タグとして機能します。JSが利用可能な場合、`setLocale` の呼び出しが移動前にクッキーを更新するため、ミドルウェアが正しいリダイレクトを実行できます。
 
-### ステップ7: サイトマップとRobots.txt
+</Step>
+
+<Step number={7} title="サイトマップとRobots.txt">
 
 Intlayerは、動的にローカライズされたサイトマップとrobots.txtファイルを生成するためのユーティリティを提供します。
 
@@ -450,7 +485,9 @@ Intlayerを使用した開発体験を向上させるために、**公式のIntl
 
 ---
 
-### (Optional) Step 15: Extract the content of your components
+</Step>
+
+<Step number={15} title="Extract the content of your components" isOptional={true}>
 
 If you have an existing codebase, transforming thousands of files can be time-consuming.
 
@@ -555,3 +592,7 @@ bun run build # Or bun run dev
 ### さらに詳しく
 
 さらに詳しく知りたい場合は、[ビジュアルエディター](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_visual_editor.md)を実装したり、[CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_CMS.md)を使用してコンテンツを外部化したりすることもできます。
+
+</Step>
+
+</Steps>

package/docs/ja/intlayer_with_astro_vue.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2026-04-24
-updatedAt: 2026-05-06
-title: Astro + Vue i18n - 2026年にAstro + Vueアプリケーションを翻訳する方法
-description: Intlayerを使用してAstro + Vueサイトに国際化（i18n）を追加する方法を学びます。このガイドに従って、サイトを多言語化しましょう。
+updatedAt: 2026-05-31
+title: Astro + Vue i18n - 完全な翻訳ガイド： Astro + Vue
+description: バンドルサイズ、SEO、パフォーマンス、保守性のための最良のソリューション。2026年にAstro and Vue ウェブサイトを多言語化しましょう。LLM翻訳、Agent Skills & MCP。
 keywords:
   - 国際化
   - ドキュメント
@@ -58,16 +58,37 @@ history:
 
 <TOC/>
 
-## Intlayerとは？
+## 代替手段ではなく Interlayer を使用する理由
 
-**Intlayer**は、現代的なウェブアプリケーションでの多言語サポートを簡素化するために設計された、革新的でオープンソースの国際化 (i18n) ライブラリです。
+「astro-i18n」や「i18next」などの主要なソリューションと比較して、Intlayer は次のような統合された最適化を備えたソリューションです。
 
-Intlayerを使用すると、以下のことが可能になります：
+**Astro を完全にカバー**
 
-- **翻訳の管理が容易**：コンポーネントレベルの宣言型辞書を使用します。
-- **動的なローカライズ**：メタデータ、ルート、コンテンツを動的にローカライズできます。
-- **TypeScript의サポート**：自動生成された型により、オートコンプリートやエラー検出が向上します。
-- **高度な機能**：動的なロケール検出や切り替えなどの機能を利用できます。
+Intlayer は、**多言語ルーティング**、**サイトマップ**、および国際化 (i18n) の拡張に必要なすべての機能を提供することで、Astro と完全に連携するように最適化されています。
+
+**バンドルサイズ**
+
+大量の 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を使用すると、以下のことが可能になります：
 
 GitHubで[アプリケーションテンプレート](https://github.com/aymericzip/intlayer-astro-template)を表示。
 
-### ステップ1: 依存関係のインストール
+<Steps>
+
+<Step number={1} title="依存関係のインストール">
 
 お好みのパッケージマネージャーを使用して、必要なパッケージをインストールします：
 
@@ -118,7 +141,9 @@ bun x intlayer init
 - **@astrojs/vue**
   Vueコンポーネントアイランドの使用を可能にする公式のAstro統合。
 
-### ステップ2: プロジェクトの設定
+</Step>
+
+<Step number={2} title="プロジェクトの設定">
 
 アプリケーションの言語を設定するための設定ファイルを作成します：
 
@@ -142,7 +167,9 @@ export default config;
 
 > この設定ファイルを使用して、ローカライズされたURL、ミドルウェアのリダイレクト、クッキー名、コンテンツ宣言の場所と拡張子、コンソールでのIntlayerログ의無効化などを設定できます。利用可能なパラメータの全リストについては、[設定ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/configuration.md)を参照してください。
 
-### ステップ3: Astro設定へのIntlayerの統合
+</Step>
+
+<Step number={3} title="Astro設定へのIntlayerの統合">
 
 Astroの設定にintlayerプラグインとVue統合を追加します。
 
@@ -163,7 +190,9 @@ export default defineConfig({
 
 > `vue()` 統合により、`client:only="vue"` を通じてVueコンポーネントアイランドを使用できるようになります。
 
-### ステップ4: コンテンツの宣言
+</Step>
+
+<Step number={4} title="コンテンツの宣言">
 
 翻訳を保存するためのコンテンツ宣言を作成・管理します：
 
@@ -189,7 +218,9 @@ export default appContent;
 
 > 詳細については、[コンテンツ宣言のドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/dictionary/content_file.md)を参照してください。
 
-### ステップ5: Astroでのコンテンツの使用
+</Step>
+
+<Step number={5} title="Astroでのコンテンツの使用">
 
 `intlayer`からエクスポートされたコアヘルパーを使用して、`.astro`ファイル内で直接辞書を消費できます。また、各ページにhreflangや正規リンクなどのSEOメタデータを追加し、クライアントサイドのインタラクティブなコンテンツのためにVueアイランドを組み込む必要があります。
 
@@ -269,7 +300,9 @@ const { title } = getIntlayer("app", locale);
 > - **`prefix-all`:** すべてのURLに言語プレフィックスが付きます。ルートを個別に処理する必要がない場合は、標準の `[locale]` を使用できます。
 > - **`search-param` または `no-prefix`:** ロケールフォルダは不要です。ロケールは検索パラメータまたはクッキーを通じて処理されます。
 
-### ステップ6: Vueアイランドコンポーネントの作成
+</Step>
+
+<Step number={6} title="Vueアイランドコンポーネントの作成">
 
 Vueアプリケーションをラップし、サーバーによって検出されたロケールを受け取るアイランドコンポーネントを作成します。コンポーザブルを使用する前に、VueインスタンスにIntlayerプラグインを登録するために `installIntlayer` を呼び出す必要があります。
 
@@ -328,7 +361,9 @@ const { title } = useIntlayer("app");
 
 > `locale` プロップはAstroページ（サーバー検出）から渡され、`installIntlayer` を初期化するために使用されます。これにより、コンポーネントツリー内のすべてのコンポーザブルのロケールがデフォルト設定されます。
 
-### ステップ7: 言語切り替え機能の追加
+</Step>
+
+<Step number={7} title="言語切り替え機能の追加">
 
 言語切り替え機能はVueアイランドのテンプレート（ステップ6参照）に直接組み込まれています。`vue-intlayer` の `useLocale` を使用し、ユーザーが新しい言語を選択したときにローカライズされたURLに移動します：
 
@@ -376,7 +411,9 @@ const {
 > **固定の維持に関する注意:**
 > `window.location.href` を介したリダイレクトのために `onLocaleChange` を使用することで、新しい言語のURLが確実に訪問され、Intlayerミドルウェアが言語クッキーを設定して、将来の訪問時にユーザーの好みが記憶されるようになります。
 
-### ステップ8: サイトマップとRobots.txt
+</Step>
+
+<Step number={8} title="サイトマップとRobots.txt">
 
 Intlayerは、動的にローカライズされたサイトマップとrobots.txtファイルを生成するためのユーティリティを提供します。
 
@@ -484,7 +521,9 @@ Intlayerを使用した開発体験を向上させるために、**公式のIntl
 
 ---
 
-### (Optional) Step 15: Extract the content of your components
+</Step>
+
+<Step number={15} title="Extract the content of your components" isOptional={true}>
 
 If you have an existing codebase, transforming thousands of files can be time-consuming.
 
@@ -589,3 +628,7 @@ bun run build # Or bun run dev
 ### さらに詳しく
 
 さらに詳しく知りたい場合は、[ビジュアルエディター](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_visual_editor.md)を実装したり、[CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_CMS.md)を使用してコンテンツを外部化したりすることもできます。
+
+</Step>
+
+</Steps>

package/docs/ja/intlayer_with_create_react_app.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2024-08-11
-updatedAt: 2026-05-06
-title: Create React App i18n - Reactアプリの翻訳方法 2026
-description: Create React App (CRA) を使用したウェブサイトを多言語化する方法を見つけましょう。国際化（i18n）して翻訳するためにドキュメントに従ってください。
+updatedAt: 2026-05-31
+title: Create React App i18n - 完全な翻訳ガイド： React
+description: バンドルサイズ、SEO、パフォーマンス、保守性のための最良のソリューション。2026年にCreate React App ウェブサイトを多言語化しましょう。LLM翻訳、Agent Skills & MCP。
 keywords:
   - 国際化
   - 文書
@@ -45,7 +45,9 @@ Intlayerを使用すると、以下が可能です：
 
 ## ReactアプリケーションでのIntlayerセットアップ手順
 
-### ステップ1: 依存関係をインストール
+<Steps>
+
+<Step number={1} title="依存関係をインストール">
 
 npmを使用して必要なパッケージをインストールします：
 
@@ -81,7 +83,9 @@ bun x intlayer init
 
 Create React AppベースのアプリケーションにIntlayerを統合するための`react-scripts-intlayer`コマンドとプラグインを含みます。これらのプラグインは[craco](https://craco.js.org/)に基づいており、[Webpack](https://webpack.js.org/)バンドラーの追加設定を含みます。
 
-### ステップ2: プロジェクトの設定
+</Step>
+
+<Step number={2} title="プロジェクトの設定">
 
 アプリケーションの言語を設定するための設定ファイルを作成します：
 
@@ -105,7 +109,9 @@ export default config;
 
 > この設定ファイルを通じて、ローカライズされたURL、ミドルウェアリダイレクション、クッキー名、コンテンツ宣言の場所と拡張子、コンソールでのIntlayerログの無効化などを設定できます。利用可能なパラメータの完全なリストについては、[設定ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/configuration.md)を参照してください。
 
-### ステップ3: CRA設定へのIntlayerの統合
+</Step>
+
+<Step number={3} title="CRA設定へのIntlayerの統合">
 
 スクリプトをreact-intlayerを使用するように変更します：
 
@@ -119,7 +125,9 @@ export default config;
 
 > `react-scripts-intlayer`スクリプトは[CRACO](https://craco.js.org/)に基づいています。Intlayer cracoプラグインに基づいて独自のセットアップを実装することもできます。[こちらの例を参照](https://github.com/aymericzip/intlayer/blob/main/examples/react-app/craco.config.js)。
 
-### ステップ4: コンテンツの宣言
+</Step>
+
+<Step number={4} title="コンテンツの宣言">
 
 翻訳を保存するためのコンテンツ宣言を作成および管理します：
 
@@ -168,7 +176,9 @@ export default appContent;
 
 > コンテンツファイルにTSXコードが含まれている場合は、`import React from "react";`をコンテンツファイルにインポートすることを検討してください。
 
-### ステップ5: コード内でIntlayerを利用
+</Step>
+
+<Step number={5} title="コード内でIntlayerを利用">
 
 アプリケーション全体でコンテンツ辞書にアクセスします：
 
@@ -217,7 +227,9 @@ export default App;
 >
 > `useIntlayer`フックの詳細については、[ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/react-intlayer/useIntlayer.md)を参照してください。
 
-### (オプション) ステップ6: コンテンツの言語を変更する
+</Step>
+
+<Step number={6} title="コンテンツの言語を変更する" isOptional={true}>
 
 コンテンツの言語を変更するには、`useLocale`フックが提供する`setLocale`関数を使用します。この関数を使うことで、アプリケーションのロケールを設定し、それに応じてコンテンツを更新できます。
 
@@ -238,7 +250,9 @@ const LocaleSwitcher = () => {
 
 > `useLocale`フックの詳細については、[ドキュメント](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/packages/react-intlayer/useLocale.md)を参照してください。
 
-### (オプション) ステップ7: アプリケーションにローカライズされたルーティングを追加
+</Step>
+
+<Step number={7} title="アプリケーションにローカライズされたルーティングを追加" isOptional={true}>
 
 このステップの目的は、各言語にユニークなルートを作成することです。これはSEOやSEOフレンドリーなURLに役立ちます。
 例：
@@ -604,7 +618,9 @@ const App: FC = () => (
 );
 ```
 
-### (オプション) ステップ8: ロケール変更時にURLを変更
+</Step>
+
+<Step number={8} title="ロケール変更時にURLを変更" isOptional={true}>
 
 ロケール変更時にURLを変更するには、`useLocale`フックが提供する`onLocaleChange`プロップを使用できます。同時に、`react-router-dom`の`useLocation`と`useNavigate`フックを使用してURLパスを更新できます。
 
@@ -684,7 +700,9 @@ const LocaleSwitcher: FC = () => {
 > - [`dir`属性](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir)
 > - [`aria-current`属性](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-current)
 
-### （オプション）ステップ9：HTMLの言語と言語方向属性を切り替える
+</Step>
+
+<Step number={9} title="HTMLの言語と言語方向属性を切り替える">
 
 アプリケーションが複数の言語をサポートしている場合、`<html>`タグの`lang`属性と`dir`属性を現在のロケールに合わせて更新することが非常に重要です。これにより、以下のことが保証されます：
 
@@ -872,3 +890,7 @@ Intlayerでの開発体験を向上させるために、公式の**Intlayer VS C
 ### さらに進むには
 
 さらに進みたい場合は、[ビジュアルエディター](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_visual_editor.md)を実装するか、[CMS](https://github.com/aymericzip/intlayer/blob/main/docs/docs/ja/intlayer_CMS.md)を使ってコンテンツを外部化することができます。
+
+</Step>
+
+</Steps>

package/docs/ja/intlayer_with_express.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2024-08-11
-updatedAt: 2026-05-06
-title: Express i18n - Expressアプリの翻訳方法 2026
-description: Expressバックエンドを多言語化する方法を見つけましょう。国際化（i18n）して翻訳するためにドキュメントに従ってください。
+updatedAt: 2026-05-31
+title: Express i18n - 完全な翻訳ガイド： Express
+description: バンドルサイズ、SEO、パフォーマンス、保守性のための最良のソリューション。2026年にExpress バックエンドを多言語化しましょう。LLM翻訳、Agent Skills & MCP。
 keywords:
   - 国際化
   - ドキュメンテーション

package/docs/ja/intlayer_with_fastify.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-12-30
-updatedAt: 2026-05-06
-title: Fastify i18n - 2026年にFastifyアプリを翻訳する方法
-description: Fastifyバックエンドを多言語化する方法をご紹介します。国際化(i18n)と翻訳の手順については、ドキュメントに従ってください。
+updatedAt: 2026-05-31
+title: Fastify i18n - 完全な翻訳ガイド： Fastify
+description: バンドルサイズ、SEO、パフォーマンス、保守性のための最良のソリューション。2026年にFastify バックエンドを多言語化しましょう。LLM翻訳、Agent Skills & MCP。
 keywords:
   - 国際化
   - ドキュメント

package/docs/ja/intlayer_with_hono.md

@@ -1,8 +1,8 @@
 ---
 createdAt: 2025-08-23
-updatedAt: 2026-05-06
-title: Hono i18n - Hono アプリの翻訳方法 2026
-description: Hono バックエンドを多言語化する方法をご紹介します。ドキュメントに従って国際化 (i18n) と翻訳を行ってください。
+updatedAt: 2026-05-31
+title: Hono i18n - 完全な翻訳ガイド： Hono
+description: バンドルサイズ、SEO、パフォーマンス、保守性のための最良のソリューション。2026年にHono バックエンドを多言語化しましょう。LLM翻訳、Agent Skills & MCP。
 keywords:
   - 国際化
   - ドキュメント