Avatar

Avatar は、対象のオブジェクトがユーザー（人）に関するものであることを示すための、円形を基本とした画像コンポーネントです。プロフィール画像やユーザーアイコンとして用い、対象がユーザーに紐づいていることを視覚的に明確にします。

1. 概要 (Overview)

Avatar は、表示する対象がユーザーに関連するオブジェクトであることを示すために使います。基本は円形で表示し、内側にユーザーの顔写真などを配置します。

円形のプロフィール写真は、顔を強調するために効果的です。円の中心からすべての端までの距離が等距離であるため、ユーザーは中央を見るだけで対象を捉えることができます。また、コーナーの背景領域がカットされることで、顔への集中度が高まります。

Avatar 単体ではインタラクションを持ちません。クリック／タップなどのインタラクションが必要な場合は、Button や Interactive List、Interactive Table など、インタラクションを担うコンポーネントの中に内包させて使用します。

Avatar のかたちをつくる要素です。内側のメディアを円形にクリッピングする範囲を定義します。

必須/任意: 必須

Container の内側に配置する画像です。原則としてユーザーの顔写真を <img> で配置します。

必須/任意: 必須

対象のオブジェクトがユーザー（人）に関するものであることを示すときに使います。プロフィール画像、コメントの投稿者アイコン、ユーザー一覧の項目などに用います。

顔以外のオブジェクト（商品・場所・モノなど）を表現する場合は、円形の Avatar は適していません。コーナーをカットすることで奥行きやディテールが失われる可能性があるため、ユーザーオブジェクト以外を扱う場合は円形の Avatar ではなく、四角形のサムネイル画像で表現します。

サイズを指定できます。コンテキストや Avatar を含めるコンポーネントのサイズに応じて XS / S / M / L の4種類から選択します。

<div class="avatar-component">
  <img src="/images/partners/example.png" alt="ユーザー名" />
</div>

@use '@pepabo-inhouse/components-web' as inhouse;

.avatar-component {
  @include inhouse.avatar-style(
    $option: (
      size: m,
    )
  );
}

<div class="in-avatar -size-m">
  <img src="/images/partners/example.png" alt="ユーザー名" />
</div>

@use '@pepabo-inhouse/components-web' as inhouse;

@include inhouse.avatar-export;

Avatar 単体はインタラクションを持たないため、固有のステートは持ちません。Avatar をインタラクティブにしたい場合は、Button や Interactive List など、インタラクションを担うコンポーネントに内包させ、そのコンポーネントのステートに従います。

このコンポーネント固有のチェック項目です。コントラスト・フォーカス可視化など全コンポーネント共通の原則はアクセシビリティガイドラインを参照してください。