アバタープレースホルダー生成ツール（イニシャル・パターン）
アバタープレースホルダー生成ツール
アバタープレースホルダー生成ツール：イニシャルとパターンのアバターをSVGで作成 | We.Inc
名前からイニシャルアバターや幾何学パターンのアバターを作成。同じ名前なら同じアバターになります。SVGやPNGのダウンロード、データURIのコピー、チーム全員分の一括生成に対応し、Reactコードも付いています。
プレースホルダーアバターは、本人が写真をアップロードするまでプロフィール写真の代わりに表示される画像です。一般的なのは、名前から決まる色の上にその人のイニシャルを置く方式で、同じ名前なら必ず同じアバターになります。下に名前を入力してイニシャル、グラデーション、パターンのアバターを作り、SVGやPNGファイルをダウンロードするか、コードをコピーしてください。
このツールで作れるアバターのスタイル
- イニシャル
- 単色の背景に2文字
- チームページ、コメント欄、CRM
- グラデーションイニシャル
- 2色のグラデーションに2文字
- 一般消費者向けアプリ、遊び心のあるブランド
- パターン
- 左右対称の5×5の正方形グリッド
- 匿名ユーザー、テスト用アカウント、ボット
名前を1つ、またはリストでまとめて入力します。各名前はハッシュ化されて色とパターンが決まるため、再読み込みしても別の端末でも結果は変わりません。文字色はコントラストを考えて自動で選ばれます。何もアップロードされません。
- 名前を1行に1つずつ入力します。本名、メールアドレス、ユーザーIDが使え、それぞれが1つのアバターになります。
- スタイル、形（円形、角丸、四角）、パレット、サイズを選びます。
- イニシャルは名前の最初と最後の単語から取られます。単語が1つだけの場合は、その最初の2文字を使います。
- 各アバターをSVGまたはPNGでダウンロードするか、SVGやデータURIをコピーできます。自分のアプリで同じアバターを生成するReactコンポーネントもコピーできます。
- ユーザーが表示名を変更できる場合は、表示名ではなく変わらないIDをハッシュ化しましょう。そうしないと、名前を変えるたびにアバターの色も変わってしまいます。
- イニシャルは2文字までにしましょう。小さいサイズで3文字にすると窮屈になり、読みにくくなります。
- アバターには必ず近くに本人の名前を表示するか、alt テキストに名前を入れましょう。色と文字だけでは、スクリーンリーダーの利用者には誰なのかが伝わりません。
- SVGアバターはどのサイズでも鮮明なうえ、数百バイトしかないため、画像ファイルを保存せずにその場で生成できます。
よくある質問
色はどうやって決まるのですか？
名前を小さなハッシュ関数（FNV-1a）に通して数値に変換し、その数値でパレットから色を選びます。同じ名前からは常に同じ数値が得られるため、名前が変わらない限りアバターも変わりません。
文字色はアクセシビリティに配慮されていますか？
背景ごとに、WCAG の相対輝度の計算式を使って黒と白のどちらの文字がより高いコントラストになるかを判定し、そちらを使います。パステル系のパレットでは濃い色の文字、鮮やかな色では白い文字になります。
このアバターを商用製品で使えますか？
はい。アバターは入力内容をもとにあなた自身のブラウザーで作成されるもので、自由に使えます。このページのReactのサンプルも、どのプロジェクトにも無料でコピーできます。
テストデータ用の架空の人物を生成するものですか？
いいえ。入力した名前から抽象的なプレースホルダーを作るだけです。デモには、実在の人物や生成された顔の写真よりも安全な選択肢です。
決まった形のアバターが役立つ理由
- 一人ひとりがどこでも同じ色を保っていると、長いリストの中でも名前を読む前に同僚を見分けられるようになります。ページを読み込むたびに色がランダムに変わると、その効果が失われるうえ、スクリーンショットやテストも不安定になります。
- ハッシュ化なら、何も保存せずに安定した結果が得られます。サーバーとブラウザーのどちらでも、同じIDから同じアバターを描画できます。
大量に表示する場合
- 数百人規模のリストでは、画像ファイルを作るのではなく、SVGをコンポーネントとしてインラインで描画しましょう。ネットワークリクエストが一切発生せず、マークアップも小さく保てます。
- メールや Open Graph タグなどで画像URLが必要な場合は、1人につき1回PNGを書き出してキャッシュしてください。多くのメールクライアントはSVGを表示しないためです。
Reactのイニシャルアバターコンポーネント
名前をハッシュ化して色を選び、コントラストに合わせて黒または白の文字を選んで、インラインSVGとして描画します。依存ライブラリは不要です。
落ち着いた色
パステル
モノクロ
アバターを作成
名前（1行に1つ、最大60件）
スタイル
イニシャル
パターン
形
円形
角丸
四角
パレット
サイズ：{n}px
{name} のアバター
コピー
Reactで使う
同じイニシャルアバターを、どのReactアプリにも組み込める小さなコンポーネントにしたものです。
無料で始める · クレジットカード不要
関連: 無料ツール｜ビジネス向け計算・生成ツール
製品
ご利用いただける方
機能
リソース
会社情報
サイトマップを見る