はじめに

「画像最適化」は、UX・速度・運用コストの三軸で確実に効果が出る領域です。しかし現場では、 “作った画像をそのままアップロードする” 運用が続き、画質劣化／転送量肥大／デバイスごとの表示崩れが慢性的に発生しています。

この記事では、Figmaから本番配信までを 完全自動化する“解像度別エクスポート戦略” と、React/Next.jsに共通で使える 運用に強い画像コンポーネント を提示します。

結論として、以下の4要素を揃えると運用は一気に安定します。

（1）解像度は1x/2x/3x
（2）フォーマットはAVIF/WebP/JPEG
（3）pictureによる最適フォールバック
（4）CI/CDでsharp自動生成

1. Figmaからは「3解像度 × PNG」だけ作ればよい

現場で最も事故が多いのが “Figmaエクスポートを手作業で最適化する” というプロセスです。

整理すべきルールをひとつだけ：これだけで運用が80%安定します。

Figma → PNG → 1x / 2x / 3x の3種類のみ出す

解像度	用途	例
1x	標準DPI・縮小配置	`hero.jpg`
2x	Retina標準	`hero@2x.jpg`
3x	高解像度端末（Pixel, iPad Pro等）	`hero@3x.jpg`

※ SVGはアイコン専用。ブラーやシャドウがある画像は必ずラスタに。

Figmaからの画像エクスポートは、プラグインで一括して行えます。

2. React/Next.js 共通で使える「ResponsiveImage」コンポーネント

解像度／フォーマットの自動選択を <picture> に任せ、
開発者は “srcを拡張子なしで指定するだけ” の状態にするのがベストです。

// utils/image-loader.ts
interface ResponsiveImageProps {
  src: string;      // 拡張子なしで与える: '/images/hero'
  alt: string;
  sizes?: string;
  loading?: 'lazy' | 'eager';
  priority?: boolean;
}

export const ResponsiveImage: React.FC<ResponsiveImageProps> = ({
  src,
  alt,
  sizes = '100vw',
  loading = 'lazy',
  priority = false
}) => {
  const base = src.replace(/\.[^/.]+$/, '');

  return (
    <picture>
      {/* 最軽量：AVIF */}
      <source
        type="image/avif"
        srcSet={`
          ${base}.avif 1x,
          ${base}@2x.avif 2x,
          ${base}@3x.avif 3x
        `}
        sizes={sizes}
      />

      {/* モダンブラウザ：WebP */}
      <source
        type="image/webp"
        srcSet={`
          ${base}.webp 1x,
          ${base}@2x.webp 2x,
          ${base}@3x.webp 3x
        `}
        sizes={sizes}
      />

      {/* フォールバック：JPEG/PNG */}
      <img
        src={`${base}@2x.jpg`}
        srcSet={`
          ${base}.jpg 1x,
          ${base}@2x.jpg 2x,
          ${base}@3x.jpg 3x
        `}
        alt={alt}
        loading={loading}
        sizes={sizes}
        fetchPriority={priority ? 'high' : 'auto'}
      />
    </picture>
  );
};

この実装で以下を自動的に達成できます：

端末に応じて 1x/2x/3x を最適選択
ブラウザ能力に応じて AVIF → WebP → JPEG の順に自動選択
LCP改善のための priority 設定も可能

3. アイコン管理は SVG + Spritesheet が最適解

アイコン管理を複雑にしているのは「色のバリエーション」と「重複ファイル」です。
整理するルールとしては：

単色アイコンは全部 SVG
→ ビルドで sprite 化
→ <Icon name="search" /> で使用

これだけで色変更・テーマ変更・差分レビューのすべてが軽くなります。

4. sharp による自動最適化パイプライン（CI/CD）

PNG→JPEG/WebP/AVIF 変換は手作業ではなく、CI/CDで自動化するのが正解 です。

以下は実務で使える Node.js スクリプト例です。

// scripts/build-images.js
// 役割：./assets/raw 以下の元画像から、1x/2x/3x の JPEG/WebP/AVIF を自動生成し ./public に出力するスクリプト

import sharp from 'sharp';
import fs from 'fs';
import path from 'path';

// 元画像が格納されているディレクトリを読み込み
for (const file of fs.readdirSync('./assets/raw')) {
  // 拡張子を除いたベース名（例: hero.png → hero）
  const base = file.replace(/\.[^.]+$/, '');
  // 入力ファイルの絶対パス
  const input = path.join('./assets/raw', file);

  // 1x / 2x / 3x の3解像度分を生成
  for (const scale of [1, 2, 3]) {
    // ファイル名の接尾辞（1xは無印、2xは @2x、3xは @3x）
    const suffix = scale === 1 ? '' : `@${scale}x`;

    // ---- JPEG 出力 ----
    // - 目安として幅 600px を基準に、scale倍する
    // - quality は 82 前後が画質とサイズのバランスが良い
    sharp(input)
      .resize({ width: 600 * scale })
      .jpeg({ quality: 82 })
      .toFile(`./public/${base}${suffix}.jpg`);

    // ---- WebP 出力 ----
    // - JPEG よりも高圧縮・高画質を狙う
    // - 一部古いブラウザでは未対応だが、多くのモダンブラウザで有効
    sharp(input)
      .resize({ width: 600 * scale })
      .webp({ quality: 82 })
      .toFile(`./public/${base}${suffix}.webp`);

    // ---- AVIF 出力 ----
    // - 現時点で最も高圧縮なフォーマット
    // - quality 値は WebP/JPEG より低め（50程度）でも十分高画質
    sharp(input)
      .resize({ width: 600 * scale })
      .avif({ quality: 50 })
      .toFile(`./public/${base}${suffix}.avif`);
  }
}

ポイント

CIで生成することで「画像を直接触る運用」が消失
WebP/AVIF は常に自動生成されるため抜け漏れゼロ
キャッシュ用の immutable パス付与も容易

5. ディレクトリは“原本 → 自動生成 → 公開”の3構成

/assets/raw        ← FigmaのPNG原本
/public/images     ← 自動生成されたJPEG/WebP/AVIF
/src/components    ← ResponsiveImage
/src/utils

まとめ：画像最適化は「仕組み化」した安定させる

この記事で紹介した戦略に沿うと、実務上の課題はほぼ消えます。

画質の劣化が消える
端末別の表示崩れが消える
手作業の圧縮や命名事故が消える
CDNキャッシュが安定する
LCPが確実に改善する

特に、Figma→PNG→CI/CDで自動最適化 → ResponsiveImage という流れは
“人が介在しない” ため、長期運用に最も強い構造です。

本記事が、あなたのプロジェクトの画像戦略を「再現性の高い仕組み」へ転換するきっかけになれば幸いです。