アバタープレースホルダー画像 (150x150)
ユーザープロフィール画像用の150x150ピクセル正方形アバタープレースホルダーを作成。一般的なアバターサイズ、border-radiusによる円形クロッピング、ベストプラクティスを解説します。
Common Sizes
詳細な説明
アバタープレースホルダー — 150×150
アバター画像は、Webアプリケーション、フォーラム、ソーシャルメディア、メッセージングアプリで使用される小さな正方形のプロフィール画像です。最も一般的なアバターサイズは150×150ピクセルですが、多くのアプリケーションでは32pxから256pxまでのさまざまなサイズで表示されます。
一般的なアバターサイズ
| コンテキスト | サイズ | 備考 |
|---|---|---|
| コメントスレッド | 32×32 or 40×40 | テキスト横の小さなアバター |
| ナビゲーションバー | 36×36 or 48×48 | ヘッダーのプロフィールアイコン |
| プロフィールカード | 96×96 or 128×128 | 中サイズ表示 |
| プロフィールページ | 150×150 or 256×256 | フルプロフィール表示 |
円形アバターの作成
最新のUIではアバターを円形で表示します。2つの方法があります:
- CSS border-radius — 正方形の画像要素に
border-radius: 50%を適用。画像ファイルは正方形のままですが、ブラウザが円形にレンダリングします。 - 組み込みボーダーラジアス — プレースホルダー生成ツールのボーダーラジアススライダーを画像幅の半分(150×150画像の場合75px)に設定して、最初から円形の画像を生成します。
ユースケース
ユーザープロフィールシステムを構築する開発者は、ユーザーが自分の写真をアップロードする前に表示するアバタープレースホルダーが必要です。デザインチームはワイヤーフレームやモックアップでユーザー生成コンテンツエリアを表現するためにアバタープレースホルダーを使用します。