Dictionary

役割と種類

対象のオブジェクトがユーザーに関するものであることを明確にするために使用します。

Avatarを円形にするのが望ましい理由

円形のプロフィール写真は、顔を強調するため、より効果的に機能します。ほとんどの顔はプロフィール写真の中央にあります。正方形のプロフィール写真で顔を見ると、ユーザーはそれに集中するのに時間がかかります。これは、正方形の中心から各コーナーまでの距離が側面までの距離よりも長いためです。ユーザーはすべてを見るには、対角線に沿って目を動かす必要があります。

円形のプロフィール写真で顔を見ると、ユーザーは中央を見ればすべてを見ることができます。これは、円の中心からすべての端までの距離が等距離にあるためです。ユーザーは目を動かす必要がないため、それに集中する時間が少なくなります。

また、プロフィール写真の最も重要な部分は顔です。背景領域が少ないほど、より多くのユーザーが顔に集中できます。正方形のプロフィール写真は、円形のプロフィール写真よりも多くの背景領域を表示します。円形のプロフィール写真は、コーナーの背景領域をカットします。

いつ使うべきか / 使わないべきか

Avatarを使用しないほうがよい場合

プロフィール写真の円形は、顔を強調するのには効果的です。しかし、それは顔以外の写真にはそれほど効果的ではありません。顔以外の写真の背景には、ユーザーがより見たいコンテンツが含まれている場合があります。角を切り落とすと、奥行きとディテールもカットされる可能性があるので、ユーザーオブジェクト以外のオブジェクトを扱う場合は円形のAvatarではなく四角形で表現するべきです。

インタラクション

Avatar単体でインタラクションを起こすことはできません。Button、Interactive List、Interactive TableなどのInteractiveなコンポーネントに内包し、それらのコンポーネントにインタラクションを起こさせるべきです。

スタイル

外観

Size

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

	Modifier class
XS	.-size-xs
S	.-size-s
M*	.-size-m
L	.-size-l

Mixin-based

HTML

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

SCSS

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

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

Class-based

HTML

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

SCSS

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

@include inhouse.avatar-export;