GLANZ. CREATIVE WORKS
画像・メディアリソースガイドライン

画像フォーマット

WebP・AVIFの選定基準、複数フォーマット対応、レスポンシブ画像の実装

次世代画像フォーマットの選定

現代のブラウザサポート状況を考慮し、以下の優先順位で画像フォーマットを選定してください。

推奨フォーマット

  • WebP: 第一選択。JPEG・PNG に比べて 25-35%のファイルサイズ削減が可能
  • AVIF: 最新フォーマット。WebP よりもさらに高い圧縮率（対応ブラウザが限定的）

従来フォーマット（フォールバック用）

  • JPEG: 写真・グラデーションが多い画像
  • PNG: 透明度が必要な画像、シンプルなグラフィック
  • SVG: アイコン、シンプルなイラスト、ロゴ
フレームワークを使用しない案件やデザインが PC のみの案件では、すべての画像に複数フォーマット対応やレスポンシブ対応を行うのは現実的ではありません。
条件に応じて適切な実装レベルを選択してください。

複数フォーマット対応

picture タグ使用時は、最新・高圧縮率のフォーマットから順番に記述してください

<picture>
  <source srcset="/images/hero.avif" type="image/avif" />
  <source srcset="/images/hero.webp" type="image/webp" />
  <img src="/images/hero.jpg" alt="" width="800" height="600" />
</picture>
フォーマットの優先順位
  1. AVIF (最高圧縮率・最新)
  2. WebP (広いブラウザサポート・高圧縮率)
  3. JPEG/PNG (全ブラウザサポート・フォールバック)

適切な画像サイズ設定

  • デスクトップ: 最大表示サイズの 2 倍解像度まで
  • モバイル: デバイスピクセル比を考慮した適切なサイズ
  • ファイルサイズ: 1 画像あたり 500KB 以下を目安

レスポンシブ対応

フレームワーク等の画像最適化機能を利用する場合

<img
  src="/images/product-800.webp"
  srcset="
    /images/product-400.webp   400w,
    /images/product-800.webp   800w,
    /images/product-1200.webp 1200w
  "
  sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
  alt="商品画像"
  width="800"
  height="600"
  loading="lazy"
/>

フレームワーク等の最適化機能が利用できない場合

<!-- ✅ デスクトップとモバイルの2サイズ -->
<img
  src="/images/product-800.webp"
  srcset="/images/product-400.webp 400w, /images/product-800.webp 800w"
  sizes="(max-width: 768px) 400px, 800px"
  alt="商品画像"
  width="800"
  height="600"
  loading="lazy"
/>

<!-- または、PCデザインのみの場合 -->
<img
  src="/images/product.webp"
  alt="商品画像"
  width="800"
  height="600"
  loading="lazy"
/>

アクセシビリティ

alt属性、色彩コントラスト、SVGアクセシビリティの実装ガイド

ファイル命名規則

接頭辞ルール、ファイル名構成、レスポンシブ・連番対応の命名規則

Copyright © 2026