アバタープレースホルダー画像 (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つの方法があります:

  1. CSS border-radius — 正方形の画像要素にborder-radius: 50%を適用。画像ファイルは正方形のままですが、ブラウザが円形にレンダリングします。
  2. 組み込みボーダーラジアス — プレースホルダー生成ツールのボーダーラジアススライダーを画像幅の半分(150×150画像の場合75px)に設定して、最初から円形の画像を生成します。

ユースケース

ユーザープロフィールシステムを構築する開発者は、ユーザーが自分の写真をアップロードする前に表示するアバタープレースホルダーが必要です。デザインチームはワイヤーフレームやモックアップでユーザー生成コンテンツエリアを表現するためにアバタープレースホルダーを使用します。

試してみる — Image Placeholder Generator

フルツールを開く