---
summary: ユーザーのプロフィール画像を円形で表示する
category: Data Display
---

# Avatar

ユーザーのプロフィール画像を表示するコンポーネントです。素の `<img>` でプロフィール画像を表示する代わりに使います。ユーザー以外の画像には使わず、操作やオブジェクトを表す記号には Icon を使います。

## 基本の使い方

```tsx
import { Avatar } from 'wip-ui'

<Avatar src="/avatar.png" alt="山田 花子" />
```

## 使う場面

- ユーザー一覧やコメント欄など、そのコンテンツがどのユーザーのものかを示すとき
- プロフィールページやユーザー詳細など、ユーザーを目立たせたいとき

## 使い方

### 対象

- [avoid] 商品画像など、ユーザー以外のオブジェクトの画像に使わない

### サイズ

- [should] 一緒に並べるテキストや、Avatar を置く要素の大きさに合わせて size を選ぶ

### 操作

- Avatar 自体は、クリックなどの操作を受け付けない
- [should] 押せるようにしたい場合は、Avatar を Button や LinkButton などの操作できるコンポーネントの中に置く

## アクセシビリティ

- [must] alt を指定する。どのユーザーの画像かが分かる文言（例：ユーザー名）にする
- [should] すぐ隣にユーザー名を表示している場合は、alt="" にする。読み上げで名前が2回続くのを防ぐため
- [avoid] 「アバター」「プロフィール画像」のような、画像の種類を示す言葉を alt に入れない

## 実装

- [should] Next.js の Image など、画像の描画に別のコンポーネントを使う場合は、as にそのコンポーネントを渡す

## Props（自動生成）

型定義から生成した props の一覧です。react-aria-components から引き継いだ props の説明は英語です。DOM の汎用的な属性・イベントは省略しています。