diff --git a/docs/xplat/src/content/jp/components/layouts/avatar.mdx b/docs/xplat/src/content/jp/components/layouts/avatar.mdx
index 8a96d06f89..bf089fb685 100644
--- a/docs/xplat/src/content/jp/components/layouts/avatar.mdx
+++ b/docs/xplat/src/content/jp/components/layouts/avatar.mdx
@@ -1,81 +1,105 @@
---
-title: "{Platform} Avatar | レイアウト コントロール | インフラジスティックス"
-description: インフラジスティックスの {Platform} Avatar コンポーネントを使用して、画像、アイコン、またはイニシャルを表示します。
-keywords: avatar, layout, {ProductName}, Infragistics, アバター, レイアウト, インフラジスティックス
+title: "{Platform} Avatar Component | レイアウト | インフラジスティックス"
+description: "{Platform} Avatar コンポーネントを使用して、画像、イニシャル、アイコン、またはカスタム コンテンツでユーザー、エンティティ、またはオブジェクトを表現します。"
+keywords: "{Platform} Avatar, avatar component, profile image, initials, {ProductName}, Infragistics, アバター, プロフィール画像, イニシャル, インフラジスティックス"
+last_updated: "2026-07-29"
license: MIT
-mentionedTypes: ["Avatar"]
+mentionedTypes: ["Avatar", "Badge", "Icon"]
+relatedComponents: ["Badge"]
_language: ja
llms:
- description: "{ProductName} Avatar コンポーネントで画像、アイコン、またはイニシャルを表示し、サイズや形状を設定する方法を説明します。"
+ description: "{ProductName} Avatar トピックでは、画像、イニシャル、アイコン、カスタム コンテンツ、形状、サイズ、スタイリング、アクセシビリティ ガイダンスを使用してユーザー、エンティティ、またはオブジェクトの識別情報をレンダリングする方法について説明します。"
---
import PlatformBlock from 'igniteui-astro-components/components/mdx/PlatformBlock.astro';
import Sample from 'igniteui-astro-components/components/mdx/Sample.astro';
import ApiLink from 'igniteui-astro-components/components/mdx/ApiLink.astro';
+import Anatomy from 'igniteui-astro-components/components/mdx/Anatomy.astro';
+import Faq from 'igniteui-astro-components/components/mdx/Faq.astro';
+import FaqItem from 'igniteui-astro-components/components/mdx/FaqItem.astro';
+import { Image } from 'astro:assets';
+import avatarAnatomy from '@xplat-images/anatomy-content-light/avatar-lt-a.png';
+import avatarDo from '@xplat-images/avatar/avatar_do1.png';
+import avatarDo2x from '@xplat-images/avatar/avatar_do1@2x.png';
+import avatarDoNot from '@xplat-images/avatar/avatar_do_not1.png';
+import avatarDoNot2x from '@xplat-images/avatar/avatar_dont1@2x.png';
-# {Platform} Avatar (アバター)
+# Avatar コンポーネント
-{ProductName} アバターは、アプリケーションでイニシャル、画像、またはアイコンを表示するのに役立ちます。
+{ProductName} Avatar は、画像、イニシャル、またはカスタム コンテンツでユーザー、エンティティ、またはオブジェクトを表現します。
-## {Platform} Icon Avatar の例
+リスト、カード、プロフィール メニュー、アクティビティ フィードでコンパクトなビジュアル アイデンティティを提供するためにアバターを使用します。
-
+## ライブ デモ
+
-## 使用方法
-
-
-
-まず、次のコマンドを実行して {ProductName} npm パッケージをインストールする必要があります。
-
-```cmd
-npm install {PackageWebComponents}
-```
+
-
+
-まず、次のコマンドを実行して、対応する {ProductName} npm パッケージをインストールする必要があります:
+
-```cmd
-npm install igniteui-react
-```
+
-次に、以下のように、 と必要な CSS をインポートする必要があります:
+## アナトミー
-```tsx
-import { IgrAvatar } from 'igniteui-react';
-import 'igniteui-webcomponents/themes/light/bootstrap.css';
-```
+アバターは、画像セマンティクスを適用してサポートされているコンテンツ パターンのいずれかをレンダリングする単一のホスト要素です。
+
-
+
-
+1. 画像コンテナー: 画像コンテンツ タイプを表示します。
+2. アイコン コンテナー: アイコン コンテンツ タイプを表示します。
+3. イニシャル コンテナー: テキスト コンテンツ タイプを表示します。
-```csharp
-// in Program.cs file
+
-builder.Services.AddIgniteUIBlazor(typeof(IgbAvatarModule));
+```text
+igc-avatar[role="img"] // host - exposes the avatar
+└─ div[part="base"] // avatar wrapper
+ ├─ span[part="initials"] // rendered when `initials` is set
+ ├─ slot // rendered when `initials` is not set
+ └─ img[part="image"] // rendered while `src` is set and loads
```
-
-
-また、追加の CSS ファイルをリンクして、スタイルを コンポーネントに適用する必要があります。以下は、**Blazor Web Assembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります:
+
-```razor
-
+```text
+igx-avatar[role="img"] // host - exposes the avatar
+└─ one of, by priority:
+ ├─ div.igx-avatar__image // `src` set - image painted as a background
+ ├─ igx-icon // `icon` set
+ ├─ span // `initials` set - first two characters
+ └─ ng-content // custom projected content
```
-
+## はじめに
+
+アバター コンポーネントを使用する前に登録してください。{ProductName} をまだセットアップしていない場合は、共通の[作業の開始](../general-getting-started.mdx)トピックを最初に完了してください。
+
```ts
import { defineComponents, IgcAvatarComponent } from 'igniteui-webcomponents';
@@ -84,39 +108,69 @@ defineComponents(IgcAvatarComponent);
-{ProductName} の完全な概要については、[作業の開始](../general-getting-started.mdx)トピックを参照してください。
+
- は、画像、イニシャル、またはアイコンを含むその他のコンテンツを表示できます。 の宣言は次のように簡単です。
+`` をレンダリングする前に Angular アバター コンポーネントをインポートしてください。{ProductName} をまだセットアップしていない場合は、共通の[作業の開始](../general/getting-started.mdx)トピックを最初に完了してください。
-
-
-```html
-
+```ts
+import { IgxAvatarComponent } from 'igniteui-angular/avatar';
```
+アバターをレンダリングする前に React ラッパーとテーマ スタイルシートをインポートしてください。{ProductName} をまだセットアップしていない場合は、共通の[作業の開始](../general-getting-started.mdx)トピックを最初に完了してください。
+
```tsx
-
+import { IgrAvatar } from 'igniteui-react';
+import 'igniteui-webcomponents/themes/light/bootstrap.css';
```
+`Program.cs` でアバター モジュールを登録し、テーマ スタイルシートをホスト ページに追加してください。{ProductName} をまだセットアップしていない場合は、共通の[作業の開始](../general-getting-started.mdx)トピックを最初に完了してください。
+
+```csharp
+builder.Services.AddIgniteUIBlazor(typeof(IgbAvatarModule));
+```
+
```razor
-
+
```
-アバターには、コンテキストに基づいてさまざまなコンテンツを描画できるようにするいくつかの属性があります。アバターの境界にコンテンツを表示する最も基本的な方法は、開始タグと終了タグの間にコンテンツを提供することです。
+## 使用方法
+
+デフォルト スロットに画像ソース、イニシャル、またはカスタム コンテンツを指定してアバターをレンダリングします。
+
+### バリアント
+
+
+
+表示するコンテンツ ソースのみを設定します。アバターは が設定されている場合にそれをレンダリングし、そうでない場合はデフォルト スロット コンテンツをレンダリングします。また、 が設定されて正常に読み込まれている間は画像要素もレンダリングします。
+
+
+
+
+
+表示するコンテンツ ソースのみを設定します。Angular アバターは、`src`、次に `icon`、次に `initials` の順でレンダリングし、これらの入力が設定されていない場合はプロジェクションされたカスタム コンテンツにフォールバックします。
+
+
```html
+
+
+
+
+
@@ -124,11 +178,30 @@ defineComponents(IgcAvatarComponent);
+
+
+```html
+
+
+
+
+
+```
+
+
+
```tsx
+
+
+
+
-
+
```
@@ -137,6 +210,12 @@ defineComponents(IgcAvatarComponent);
```razor
+
+
+
+
@@ -144,18 +223,34 @@ defineComponents(IgcAvatarComponent);
-### イニシャル
+
+
+
+
+
+
+
+
+
+
+
+
+### 形状
- 属性が設定されている場合、アバターのすべての子要素は無視され、この属性に渡された文字列が表示されます。
+ を `square`、`rounded`、または `circle` に設定します。
```html
-
+
+```
-
-
-
+
+
+
+
+```html
+
```
@@ -163,9 +258,7 @@ defineComponents(IgcAvatarComponent);
```tsx
-
-
-
+
```
@@ -173,109 +266,402 @@ defineComponents(IgcAvatarComponent);
```razor
-
-
-
-
-
+
```
-
+
-### 画像
+
- 属性に静的アセットに有効な URL が割り当てられている場合、アバターは画像を表示することもできます。その場合、 値は無視され、子要素は描画されません。
+
-
+
-```html
-
-
-
-```
+
-
+### サイズ
-```tsx
-
-
-
+プリセット アバター サイズが必要な場合は、`--ig-size` を共通サイズ トークンのいずれかに設定します。
+
+
+
+```css
+igc-avatar {
+ --ig-size: var(--ig-size-large);
+}
```
-
+
-```razor
-
-
-
+```html
+
```
-
+
-### 形状
+
-アバターは、`circle`、`rounded`、`square` の 3 つの形状をサポートしています。アバターの形状は `square` であり、 属性を介して変更できます。
+
-
+
-### サイズ
+
-形状とは別に、アバターのサイズも `--ig-size` CSS 変数を利用して変更できます。サポートされているサイズは、`small` (デフォルト)、`medium`、`large` です。次のコード スニペットは、異なるコンポーネント サイズを使用する方法を示しています。
+
-```css
-igc-avatar {
- --ig-size: var(--ig-size-large);
+### 推奨事項
+
+**使用する場合:** プロフィール画像、イニシャル、またはアイコンなど、UI が人物、組織、オブジェクト、またはアカウントのコンパクトな表現を必要とする場合にアバターを使用します。繰り返し表示される識別情報が簡単にスキャンできるように、同じ UI 領域内で一貫したアバター戦略を維持してください。
+
+
+
+**使用しない場合:** 対象を表現する代わりにカウント、ステータス、または通知インジケーターを表示する必要がある場合は、[Badge](../inputs/badge.mdx) コンポーネントを使用してください。Badge は、識別情報とステータスの両方を表示する必要がある場合にアバターを装飾することもできます。
+
+
+
+
+
+**使用しない場合:** 対象を表現する代わりにカウント、ステータス、または通知インジケーターを表示する必要がある場合は、[Badge](../inputs/badge.mdx) コンポーネントを使用してください。Badge は、識別情報とステータスの両方を表示する必要がある場合にアバターを装飾することもできます。
+
+
+
+
+
+
+
+| 推奨 |
+非推奨 |
+
+
+
+
+ |
+ |
+
+
+
+
+完全なアバター API サーフェスについては、これらの API リファレンスを使用してください。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## 依存関係
+
+
+
+スロット アイコンには、 コンポーネントの登録またはインポートが必要です。
+
+
+
+
+
+アバターはデフォルトの外観に共通テーマ スタイルシートも使用します。
+
+
+
+
+
+Sass スタイリング ワークフローでは、 および API を使用します。
+
+
## その他のリソース
+サポートおよび関連する Ignite UI ドキュメントについては、これらのリソースを使用してください。
+
- [{ProductName} **フォーラム (英語)**]({ForumsLink})
- [{ProductName} **GitHub (英語)**]({GithubLink})
+
+## 関連コンポーネント
+
+識別情報をステータス、アクション、またはより豊富なレイアウトと組み合わせる必要がある場合は、これらの関連コンポーネントを使用してください。
+
+
+
+- [Badge](../inputs/badge.mdx) - カウント、ステータス、または通知インジケーターを表示するには Badge を使用してください。UI が識別情報とステータスの両方を必要とする場合、Badge は Avatar を装飾することができます。
+
+
+
+
+
+- [Badge](../inputs/badge.mdx) - カウント、ステータス、または通知インジケーターを表示するには Badge を使用してください。UI が識別情報とステータスの両方を必要とする場合、Badge は Avatar を装飾することができます。
+
+
+
+## FAQ
+
+
+
+ UI が人物、アカウント、組織、またはオブジェクトを表現する必要がある場合は Avatar を使用します。UI がカウント、ステータス、または通知インジケーターを表示する必要がある場合は Badge を使用します。
+
+
+
+ いいえ。Avatar は非インタラクティブであり、単独ではフォーカスを受け取りません。表現される対象にアクションが必要な場合は、インタラクティブなコンポーネント内に配置してください。
+
+
+
+ アバター画像が特定の対象を識別する場合は、意味のある代替テキストを提供してください。隣接するテキストが既にその対象を識別している場合は、同じ識別情報を繰り返さないようにしてください。
+
+