Web開発用プレースホルダー画像サイズ一覧（OGP・カード・アバターの推奨寸法）

Web制作 デザイン フロントエンド UI

Webデザイン・UIモックアップ制作時に指定すべき主要パーツ別の推奨ダミー画像（Placeholder）サイズ一覧と、表示崩れを防ぐマークアップのガイドです。

1. オンライン ダミー画像生成ツール

用途に応じた縦横サイズと背景色を指定して即座にプレースホルダー画像を作成できます。

🖼️ この場でダミー画像を生成する

2. Web制作パーツ別 推奨プレースホルダーサイズ一覧

パーツ・用途推奨解像度 (px)アスペクト比理由・備考
OGP / SNSシェアカード1200 × 630約 1.91 : 1X (旧Twitter), Facebook, LINEの推奨アスペクト比
記事アイキャッチ・サムネイル800 × 45016 : 9モダンなブログ・ニュースサイトの標準
製品・カードUI（縦長）600 × 8003 : 4ECサイトの洋服・書籍・カードUI
ユーザーアバター / アイコン128 × 1281 : 1ユーザープロフィールの円形/角丸表示用
ヒーロービジュアル (PC)1920 × 108016 : 9フルHDモニタ用（ファーストビュー全画面表示）
ファビコン (Favicon) 検証512 × 5121 : 1PWA / Favicon の最高解像度

3. ダミー画像配置時の「Alt属性」と「アクセス不能」注意点

  1. alt 属性の仮記述: プレースホルダー配置時に <img src="..." alt="[仮] 〇〇の製品画像" /> のように仮テキストを明記しておくことで、納品時のアクセシビリティ対応漏れを防ぎます。
  2. 外部プレースホルダーサービスの単死対策: 外部ドメインの画像を直リンクしていると、相手サーバーの障害や仕様変更で開発中に画像が大量にリンク切れを起こします。ローカルSVGや自身でダウンロードしたPNG画像の利用を推奨します。