アバター

アバターコンポーネントは、ユーザーがアプリ内で自分を表す画像やアイコンを選択して視覚的に表現できるようにします。

アバターの設定

1: アバターの視覚的表現を選択する

アバターを表す視覚要素を選択してください：

• アイコン： ライブラリから定義済みのアイコンを選んでアバターを表現します。シンプルで象徴的な表現に適しています。

• 画像： 画像をアップロードしてアバターをパーソナライズします。写真やカスタムグラフィックの使用に最適です。

2: 形状（バリアント）を定義する

アバターの形状を選択してください：

• 丸（Circle）： アバターを円形のフレーム内に表示します。ユーザープロフィールで一般的な選択です。

• 四角（Square）： アバターを四角いフレーム内に表示します

3: サイズを設定する

• 定義済みサイズ： 「小」「中」「大」などのプリセットサイズから選択します。

• カスタムサイズ： より正確な制御が必要な場合は、アバターの正確な寸法（ピクセル単位）を指定します

デザインに合わせてアバターのサイズを調整します。

コンテキストと詳細の追加

4. 追加情報（詳細）を提供する

「詳細」設定を使用して、アバターに関する文脈を提供するテキストを追加します：

• メインテキスト： ユーザー名などのメインラベルを追加します。

• セカンダリテキスト： 役職や説明などの補助情報を含めます。

• テキストの位置： アバターに対するテキストの配置（上、下、左、右）を制御します。

• タグ： アバターを分類したり、さらに説明するためのタグを追加します。

5. ステータスやプレゼンスを示す（任意）

「ステータス」および「プレゼンス」インジケーターを使用して、アバターが表す人物やオブジェクトの状態や利用可能性を視覚的に伝えます。これらは一目で情報を提供する小さな視覚的手がかりです。

• ステータス： アバターに重ねて表示される色付きの点で、さまざまな状態を表すために使用されます。

  • 例:

    • 承認ステータス： 承認済みは緑、保留は黄、拒否は赤。

    • アカウントステータス： アクティブは緑、ロックは赤、停止は灰色。

    • タスクステータス： 完了は緑、進行中は黄、未開始は灰色。

  • カスタマイズ： 点の位置をアバター上で制御し、各ステータスを表す色を選択できます。

• プレゼンス： 「ステータス」と似ていますが、オンライン/オフラインの利用可能性を明示的に示します。

  • 一般的な使用： コミュニケーションやコラボレーションツールでよく使用されます。

  • 標準色： 通常、オンライン/利用可能は緑、オフライン/利用不可は赤または灰色を使用します。

なぜステータスとプレゼンスを使うのか？

• コミュニケーションの強化： 追加のテキストを必要とせずに素早く情報を伝えます。

• ユーザー体験の向上： ユーザーが利用可能性を理解し、情報に基づいた判断を下せるようにします。

• 効率の向上： 解釈しやすい視覚的手がかりで認知的負担を軽減します。

例: カスタマーサポートアプリでは、プレゼンスインジケーター付きのアバターを使用して、どのサポート担当者が現在オンラインで支援可能かを表示します。

6. エンティティアイコンを追加する（任意）

「エンティティアイコン」を使用して、アバターが何を表しているか（例：個人、グループ、組織）を明確にします。

• 追加方法： エンティティタイプを象徴するアイコンをライブラリから選択します。

• 例: 個人には一人のアイコン、チームにはグループのアイコン、企業には建物のアイコンを使用します。

• カスタマイズ：

  • サイズ： アイコンのサイズを調整して、主要なアバター画像を遮らない程度に目立つようにします。

  • 位置： アイコンをアバターの隅（例：左上、右下）に配置します。

7. インタラクティブなアクションを追加する（任意）

アクションボタンを追加してアバターをインタラクティブな要素に変えます。

• アクションボタン： クリック時に特定のアクションをトリガーするボタンを追加します。

  • 例: 「編集」（プロフィールを更新）、「メッセージ」（チャットを開始）、「フォロー」（ユーザーと接続）など。

• トリガー： アクションボタンがどのように起動されるかを定義します：

  • クリック時： ユーザーがボタンをクリックしたときにアクションが実行されます。

  • ホバー時： ユーザーがボタンにマウスを乗せたときにアクションが実行またはプレビューされます

---

利用例

• ユーザープロフィール： ユーザーの名前と役割を表示するアバターを表示します。

• 連絡先リスト： ステータスやプレゼンスとともに連絡先のアバターを表示します。

• チームダッシュボード： チームメンバーをアバターと現在のプロジェクトで表現します。

• インタラクティブなリスト： アクションボタン付きのアバターを使用して、迅速な操作（例：ユーザーへのメッセージ送信）を可能にします。

---

重要な注意事項

• 画像の最適化： 最高のパフォーマンスのために、適切な寸法で最適化された画像を使用してください。

• アクセシビリティ： 視覚障害のあるユーザーのために、アバターに代替テキストを提供してアクセシビリティを確保してください。

• 一貫性： アプリ全体でアバターのスタイルとサイズを一貫させて、統一されたユーザー体験を維持します。