MeDo

アバターコンポーネント・ジェネレーター。

プロンプト1つで、本番投入できるアバターを生成します。写真、Notion風イラスト、イニシャルのフォールバック、プレゼンスバッジ、スタックグループ、アップローダーの6つのオープンソースパターン。すべてTailwind + shadcn製で、アクセシブル、テーマ変更可能、MITライセンスです。コードをコピーしても、Lovable、Bolt、v0、Cursorのプロジェクトへ直接再生成してもかまいません。

アバター
アバター

6 個のテンプレート

生成できる アバター テンプレート

どのテンプレートもスクリーンショットではなく実際のプロンプトです。任意の AI エディタに貼り付けるか、MeDo で実行して React + Tailwind のコードを受け取れます。

基本画像+フォールバック

イニシャルにフォールバックする写真アバター

読み込めれば写真、失敗すればイニシャル。どのアプリでも最初に必要になるアバターです。

Tailwind CSSを使って、再利用可能な<Avatar />のReactコンポーネントを作成してください。 パターン：画像とイニシャルフォールバックを備えた基本のアバター。 レイアウト：円形のアバターで、srcが読み込めれば<img>を描画します。エラー時やsrcがない場合は、名前の文字列から決定論的に導出した背景色を持つイニシャルのフォールバックを描画してください。 API：src、name（必須。alt テキストとイニシャルに使用）、size（"xs" | "sm" | "md" | "lg" | "xl"）のprops、およびclassNameのパススルー。 含めるもの：nameから生成する必須のalt テキスト、loading="lazy"、ローカルstateによるonErrorでのフォールバック切り替え、リンクやボタンの内側に置かれた場合のfocus-visibleリング、Tailwindのdark:クラスによるライト/ダークモード対応。 制約：React + Tailwindのみ。外部のUIや画像ライブラリは使わないこと。画像の読み込み中にレイアウトシフトを起こさないこと（固定のwidth/heightで領域を予約する）。

MeDoで試す
ステータスプレゼンスバッジ

プレゼンスドット付きアバター

online、away、busy、offline——アバターの縁に固定したプレゼンスドット。

Tailwind CSSを使って、<AvatarWithStatus />のReactコンポーネントを作成してください。 パターン：プレゼンスバッジ付きのアバター。 レイアウト：円形のアバターの右下に小さなステータスドットを固定します。背景色のリングで写真から切り離し、どのサーフェス上でも判別できるようにしてください。 API：src、name、size、status（"online" | "away" | "busy" | "offline"）のprops。ドットの色はステータスごとにマッピングし、ドットのサイズはアバターのサイズに合わせてスケールさせます。 含めるもの：イニシャルのフォールバック、スクリーンリーダー向けにステータスを読み上げる視覚的に隠したテキストラベル（色だけに頼らないこと）、ラッパーへのaria-label、ライト/ダークモード対応。 制約：React + Tailwindのみ。外部UI依存なし。ドットがアバターの縁を30%以上覆わないこと。

MeDoで試す
グループスタック+溢れ

+Nチップ付きアバターグループ

+Nオーバーフローチップを備えた重ね表示のアバタースタック。チーム、担当者、共同編集者向け。

Tailwind CSSを使って、<AvatarGroup />のReactコンポーネントを作成してください。 パターン：オーバーフロー件数を表示する重ね表示（スタック）アバターグループ。 レイアウト：アバターを約3分の1ずつ重ねて横一列に並べ、それぞれに背景色のリングを付けてスタックの判別性を保ちます。max件を超えたら、同じサイズと形状の「+N」カウンターチップを描画してください。 API：users（{ src, name }の配列）、max（デフォルト4）、size のprops、および行末に破線の「招待」アフォーダンスを描画する任意のonAddClick。 挙動：ホバー時、対象のアバターをわずかなtranslateとz-indexの変更で隣接要素より前面に持ち上げます。"dir"propでスタックの重なり方向を反転できるようにしてください。 含めるもの：アバターごとのイニシャルフォールバック、メンバー総数を要約するaria-label、focus-visibleリングを持つキーボードフォーカス可能な項目、ライト/ダークモード対応。 制約：React + Tailwindのみ。外部UI依存なし。アニメーションライブラリも使わないこと。

MeDoで試す
サイズスケール+形状

スケールシステム

1つのスケール上に並ぶxsからxlまで、さらにcircle、squircle、角丸スクエアのバリアント。

Tailwind CSSを使って、サイズと形状のスケールを完備したテーマ変更可能な<Avatar />のReactコンポーネントを作成してください。 パターン：アバターのデザインシステム・プリミティブ。 API：size（"xs" | "sm" | "md" | "lg" | "xl" | "2xl"）は単一のルックアップオブジェクト経由でマッピングし、width、height、フォントサイズ、border-radiusをまとめて制御します。shape（"circle" | "squircle" | "square"）、加えてsrc、name、className。 要件：イニシャルのフォントサイズはアバターのボックスに比例してスケールさせ、xsでも2xlでもバランスが崩れないようにします。すべてのトークンはファイル冒頭の1つの設定オブジェクトに置き、チームが一箇所でテーマを変更できるようにしてください。 含めるもの：イニシャルのフォールバック、nameから生成するalt テキスト、ルート要素へのforwardRef、エクスポートされたTypeScriptのprop型、ライト/ダークモード対応。 制約：React + Tailwindのみ。外部UI依存なし。計算されたピクセルサイズを除きインラインスタイルは使わないこと。

MeDoで試す
アップロード編集可能

アップロードと削除ができるアバター

カメラバッジ、アップロードボタン、ファイル制約を備えたアバター。設定画面向け。

Tailwind CSSを使って、<AvatarUploader />のReactコンポーネントを作成してください。 パターン：設定画面用の編集可能なプロフィール写真コントロール。 レイアウト：左側に大きなアバターを置き、その右下に円形のカメラバッジを固定します。右側には「プロフィール写真」のラベル、ファイル制約のヒント行（"PNG or JPG, up to 2 MB"）、そしてアップロードのプライマリボタンと削除のテキストボタンを配置してください。 挙動：バッジとアップロードボタンの両方から呼び出される非表示の<input type="file" accept="image/png,image/jpeg">。クライアント側でのサイズ／形式の検証とインラインのエラーメッセージ。URL.createObjectURLによるローカルプレビュー（アンマウント時にrevoke）。削除するとイニシャルのフォールバックに戻ります。 含めるもの：ファイル入力への<label>の関連付け、検証メッセージ用のaria-liveリージョン、focus-visibleリング、ボタンの無効化／アップロード中の状態、ライト/ダークモード対応。 制約：React + Tailwindのみ。アップロードライブラリもトリミング用の依存も使わず、呼び出し側にonChange(file)コールバックを公開してください。

MeDoで試す
プロフ行アバター+情報

アバター・名前・ロールの行

アバター、名前、認証マーク、ロール——テーブルやメンバーリストを埋める行です。

Tailwind CSSを使って、<AvatarRow />のReactコンポーネント（および<MemberList />のラッパー）を作成してください。 パターン：メンバーリスト、テーブル、コメントスレッド向けのアバター＋メタデータ行。 レイアウト：左にアバター、中央に2行のブロック（本人の名前と任意の認証マーク、控えめな2行目「Team · Role」）、右端にアクションボタンを配置します。中央のブロックは折り返さず、min-w-0 + truncateで省略表示してください。 API：users（{ src, name, role, team, verified }の配列）、末尾アクションのラベル、onAction(user)コールバックのprops。 含めるもの：イニシャルのフォールバック、ラッパー内のセマンティックな<ul>/<li>マークアップ、末尾ボタンのアクセシブルネーム（"Manage access for {name}"）、行のホバーハイライト、focus-visibleリング、ライト/ダークモード対応。 制約：React + Tailwindのみ。テーブルやリストのライブラリは使わず、320px幅でも溢れずに機能すること。

MeDoで試す

サイト種別ごとの アバター パターン

同じ アバター コンポーネントを、掲載するサイトの種類に合わせて調整します。

01 / 06

SaaSのチーム設定

メンバーリストの出来はアバター行で決まります。写真、名前、ロール、アクセス操作。誰もまだ写真をアップロードしていなくても、イニシャルのフォールバックがテーブルをきれいに保ちます。

アバター のスタイルとバリアント

ページ全体のトーンに合うバリアントを選び、そのまま生成します。

01 / 06

基本のアバター

イニシャルのフォールバックと、名前ごとに決定論的な背景色を備えた画像アバター。他のすべてのバリアントが拡張するベースラインです。

React・Next.js・Vue・Svelte での アバター

React、Next.js、Vue 3、SvelteKit、Astro、素の HTML — 同じ アバター を 6 通りの方法で組み込めます。

01 / 06

React のアバター

サイズのルックアップとonErrorフォールバックを備えた単一の関数コンポーネント。画像の失敗フラグ以外にクライアントstateを持たないため、React 18以降のツリーのどこに置いても安全です。

src/components/Avatar.tsx

export function Avatar({ src, name, size = "md" }) {
  const [failed, setFailed] = useState(false);
  return failed || !src
    ? <span className={box[size]}>{initials(name)}</span>
    : <img src={src} alt={name} onError={() => setFailed(true)} />;
}

アバター コンポーネントを使うのは誰か

チーム・メンバーリスト

設定画面、組織図、権限テーブル——どれも必要な行は同じです。アバター、名前、ロール、アクション。一度生成しておけば、アプリ内のあらゆるテーブルで再利用できます。

リアルタイム共同編集

+Nチップを添えたスタックアバターは、最も低コストなプレゼンスUIです。サイドバーもWebSocketダッシュボードも要らず、1行で「今誰が編集しているか」を伝えられます。

ソーシャルフィードとコメント

コメントスレッド、リアクション、メンションでは、1ページに何百回もアバターが繰り返されます。サイズスケールを持つ単一のプリミティブなら、レイアウトの一貫性を保ちつつバンドルも小さく収まります。

チャット・サポート受信箱

プレゼンスバッジは、顧客がまだオンラインかどうかを担当者に伝えます。イニシャルのフォールバックがあれば、誰もプロフィール写真を設定していない受信箱でも読みやすさが保たれます。

アカウント設定とオンボーディング

アップロード対応アバターは、ファイル形式とサイズの検証、ローカルプレビュー、削除までを担います。アップロードライブラリなしで、プロフィール写真フロー全体が完結します。

マーケットプレイスとレビュー

認証マーク付きのレビュアーアバターは、星を1つ増やすより信頼感に効きます。プロフィール行をそのまま商品ページに組み込めます。

アバター をプロジェクトに追加する方法

アバター テンプレートを選んで本番に載せるまでの 4 ステップ。

01約30秒

アバターのパターンを選ぶ

上の6つのテンプレートを見て、作りたい画面に最も近いものを選びましょう。写真、イラスト、テーブル行、プレゼンスのスタック、アップロードコントロールから選べます。

02約2秒

その場でプレビューする

各カードは実際のReact + Tailwindプレビューを描画するので、コピーする前に余白とサイズ感を確認できます。

03約10秒

プロンプトかコードをコピーする

プロンプトをMeDo、Lovable、Bolt、v0、Cursorに貼り付けるか、カードからコンポーネントのコードをそのまま取得しましょう。

04約1分

自分のアプリに組み込む

<Avatar />を一度importすれば、sizeとshapeのpropsでテーブルやヘッダー、コメントスレッドに何度でも再利用できます。

アバターに関するよくある質問

アバターコンポーネントとは何ですか？

アバターコンポーネントは、ユーザーやチーム、組織を表す小さな画像——多くの場合は円形のプロフィール写真——を描画するコンポーネントです。本番投入できるアバターは、写真が存在しない場合や読み込みに失敗した場合にも対応し、通常は自動生成した背景色の上に本人のイニシャルを表示します。

アバターのイニシャルフォールバックはどう動きますか？

コンポーネントはユーザー名を空白で分割し、最初と最後のパートの先頭1文字を大文字で描画します。背景色は名前の文字列から決定論的に導出されるため、同じ人物にはセッションやデバイスをまたいでも常に同じ色が割り当てられます。

アバターグループ（スタックアバター）とは何ですか？

アバターグループは、重なり合ったアバターを横一列に並べたものです。各アバターに背景色のリングを付けることで、重ねても判別しやすくなります。最大表示件数を超えた分は「+N」チップとして描画されます。チームメンバー、タスクの担当者、同時編集者を示す標準的なパターンです。

これらのアバターコンポーネントはアクセシブルですか？

はい。すべてのアバターはユーザー名から導出したalt テキストを持ち、プレゼンスの状態は色だけに頼らず視覚的に隠したラベルで読み上げられます。ツールチップはaria-describedbyで関連付けられ、操作可能なアバターにはfocus-visibleのリングが表示されます。

これらのアバターコンポーネントは商用利用も無料ですか？

はい。ギャラリー内のすべてのテンプレートはMITライセンスです。個人開発、クライアントワーク、商用製品で、クレジット表記もライセンス料も不要でご利用いただけます。

React、Vue、Svelteで動きますか？

コンポーネントはReact + Tailwindで書かれていますが、マークアップ自体はフレームワークに依存しません。上のフレームワークのセクションでは、同じアバターをNext.js、Vue 3、SvelteKit、Astro、素のHTMLで示しています。

アバター画像のサイズ指定と最適化はどうすべきですか？

Retinaディスプレイでも鮮明に見えるよう、表示ボックスの約2倍（40pxのアバターなら80px）の正方形にトリミングして配信してください。レイアウトシフトを防ぐためにwidthとheightを明示し、object-coverを使い、ファーストビューより下のアバターにはloading="lazy"を追加します。

写真アバターとイラストアバター、どちらを使うべきですか？

本人性が重要な場面——チームディレクトリ、サポート受信箱、マーケットプレイスのレビュー——では実際の写真アバターを使いましょう。顔は人物を認識する最速の手がかりです。一方、多くのユーザーが写真をアップロードしない場合、ブランドとして統一された見た目にしたい場合、実際の顔を表示するとプライバシー上の懸念がある場合は、Notion風のイラストアバターが適しています。よくできた仕組みは両方に対応します。写真があれば写真を、なければ決定論的なイラストかイニシャルを表示するのです。

アバターコンポーネントを30秒で生成。

6つのアバターテンプレートをプロンプトから再生成するか、自分だけの仕様を記述しましょう。写真、イラスト、プレゼンスバッジ、スタックグループ、アップローダー。無料、MITライセンス、登録不要です。

ジェネレーターを開く料金を見る