今回は、そんな手間を完全にゼロにする「Windowsのドラッグ＆ドロップだけで、複数画像やZIPを自動でWebP化＆リサイズする自作ツール」の作り方をご紹介します。

少し面倒な手順もありますが、作ったあとはフォルダごと他の作業者に共有すればチーム全体で効率化できますので是非お試しください。

まずは知っておきたい「WebP（ウェッピー）」の基本

WebPは、Googleが開発した次世代の画像フォーマットです。従来のJPEGやPNGと比べて、画質を保ったままファイルサイズを25〜34%ほど軽くできるのが最大の特徴です。

現在ではChrome、Safari、Edge、Firefoxなど、主要なブラウザはすべてWebPに完全対応しています。さらに、WordPressもバージョン5.8以降から標準でWebPアップロードをサポートしているため、プラグインなしでそのままメディアライブラリに追加可能です。

サイトの表示速度アップ（SEO対策）のためにも、これからのブログ運営にWebPは必須と言えます。

この自動化ツールでできること

今回作成するツールを使うと、以下のような処理が一瞬で完了します。

• ドラッグ＆ドロップで一括処理:
  複数画像でも、Googleフォトからダウンロードした「ZIPファイル」でも、そのまま放り込むだけでOK。
• 自動リサイズ:
  横幅が1200pxを超える画像は、自動で比率を維持したまま1200pxに縮小（小さい画像はそのまま）。
• SEO対策バッチリの自動命名:
  指定したキーワード（例: blog-article）を使って、blog-article-01.webp のように綺麗な連番ファイル名に自動変更。
• 元ファイルの自動お掃除: 処理が終わったら、元の画像ファイルやZIPファイルを自動削除することも可能。

自動リサイズが横幅1200pxとなっているのは、Google自身が Google Discover に表示する画像として「幅 1,200 ピクセル以上、高解像度（300K 以上）、アスペクト比: 16:9」を推奨しているためです。

詳しくは Google Discover 公式ドキュメント をご覧ください。

それでは、具体的な作成手順（所要時間：約5分）を解説します。

ステップ1：Google公式ツール「cwebp」をダウンロード

WebP変換の心臓部となる、Google公式のツールを用意します。

1. Google DevelopersのWebP公式サイト にアクセスします。
2. Windows用のzipファイル（libwebp-x.x.x-windows-x64.zip）をダウンロードして解凍します。
3. 解凍したフォルダの bin フォルダ内にある cwebp.exe というファイルだけを取り出します。
4. PC上の使いやすい場所（デスクトップなど）に「画像変換」などの専用フォルダを作り、そこに cwebp.exe を入れます。

ステップ2：実行用バッチファイルを作成

次に、ドラッグ＆ドロップを受け付ける窓口となるファイルを作ります。

1. メモ帳を開き、以下のコードをコピーして貼り付けます。

@echo off
setlocal
cd /d "%~dp0"

echo ===================================================
echo   画像をWebP（ウェッピー）に変換します
echo ===================================================

powershell -NoProfile -ExecutionPolicy Bypass -File "%~dp02_convert_logic.ps1" %*

pause

2. ファイル名を 1_ここへドロップ.bat として、「Shift-JIS」形式で先ほどの cwebp.exe と同じフォルダに保存します。

ステップ3：処理ロジックのファイルを作成

最後に、裏側で画像を処理するメインのプログラムを作ります。

1. 再度メモ帳を開き、以下のコードをコピーして貼り付けます。

# 2_convert_logic.ps1

$DroppedItems = $args
$cwebp = Join-Path $PSScriptRoot "cwebp.exe"

if (-not (Test-Path $cwebp)) {
    Write-Host "[エラー] cwebp.exeが見つかりません。同じフォルダに入れてください。" -ForegroundColor Red
    return
}

Write-Host "【設定を入力してください】" -ForegroundColor Cyan
$prefix = Read-Host "1. ファイル名の頭につける文字（例: travel-tips）※空欄なら日付になります"
$deleteOption = Read-Host "2. 変換が終わった後、元の古い画像を削除しますか？ (y/n)"
$dateStr = Get-Date -Format "yyyyMMdd_HHmmss"

$outDir = Join-Path $PSScriptRoot "Converted_WebP"
if (-not (Test-Path $outDir)) { New-Item -ItemType Directory -Path $outDir | Out-Null }

$imagesToProcess = @()
$tempDirs = @()
$failedSources = @()

foreach ($item in $DroppedItems) {
    if (-not (Test-Path $item)) { continue }
    $ext = [System.IO.Path]::GetExtension($item).ToLower()

    if ($ext -eq '.zip') {
        Write-Host "ZIPファイルを解凍しています...: $([System.IO.Path]::GetFileName($item))"
        $tempDir = Join-Path $env:TEMP ([guid]::NewGuid().ToString())
        Expand-Archive -Path $item -DestinationPath $tempDir -Force
        $tempDirs += $tempDir
        $extractedImages = Get-ChildItem -Path $tempDir -Recurse | Where-Object { $_.Extension -match '\.(jpg|jpeg|png|webp)$' }
        foreach ($img in $extractedImages) {
            $imagesToProcess += [PSCustomObject]@{ Path = $img.FullName; Source = $item }
        }
    }
    elseif ($ext -match '\.(jpg|jpeg|png|webp)$') {
        $imagesToProcess += [PSCustomObject]@{ Path = $item; Source = $item }
    }
}

if ($imagesToProcess.Count -eq 0) {
    Write-Host "変換できる画像が見つかりませんでした。画像をドロップしてください。" -ForegroundColor Yellow
    return
}

Add-Type -AssemblyName System.Drawing
$count = 1
Write-Host "`n--- 変換を開始します (画質: 85) ---" -ForegroundColor Cyan

foreach ($item in $imagesToProcess) {
    $file = $item.Path
    $source = $item.Source
    try {
        $img = [System.Drawing.Image]::FromFile($file)
        $width = $img.Width
        $img.Dispose()

        $newName = if ([string]::IsNullOrWhiteSpace($prefix)) { "${dateStr}_" + $count.ToString("D2") + ".webp" } else { "${prefix}-" + $count.ToString("D2") + ".webp" }
        $outPath = Join-Path $outDir $newName
        
        Write-Host "変換中: $([System.IO.Path]::GetFileName($file)) -> $newName"

        # WebP変換実行
        if ($width -gt 1200) {
            & $cwebp -q 80 -m 6 -resize 1200 0 $file -o $outPath *>$null
        } else {
            & $cwebp -q 80 -m 6 $file -o $outPath *>$null
        }

        if (-not (Test-Path $outPath) -or (Get-Item $outPath).Length -eq 0) { throw "失敗" }
        $count++
    } catch {
        Write-Host "【失敗】: $($file) は変換できませんでした。" -ForegroundColor Red
        if ($failedSources -notcontains $source) { $failedSources += $source }
    }
}

# 後片付け
foreach ($td in $tempDirs) { Remove-Item -Path $td -Recurse -Force -ErrorAction SilentlyContinue }

# 元ファイルのクリーンアップ
if ($deleteOption -match '^[yY]') {
    Write-Host "`n--- 元ファイルの整理 ---" -ForegroundColor Cyan
    foreach ($source in $DroppedItems) {
        if ($failedSources -contains $source) {
            Write-Host "残しました（エラーがあったため）: $([System.IO.Path]::GetFileName($source))" -ForegroundColor Yellow
        } elseif (Test-Path $source) {
            Remove-Item -Path $source -Force -Recurse -ErrorAction SilentlyContinue
            Write-Host "削除しました: $([System.IO.Path]::GetFileName($source))"
        }
    }
}

Write-Host "`nすべて完了しました！" -ForegroundColor Green
Write-Host "『Converted_WebP』フォルダを確認してください。"

2. ファイル名を 2_convert_logic.ps1 とし、同じく cwebp.exe やバッチファイルがあるのと同じフォルダに「Shift-JIS」形式で保存します。

3. これで完成です！フォルダ内は以下の3つのファイルが並んでいる状態になります。

• cwebp.exe
• 1_ここへドロップ.bat
• 2_convert_logic.ps1

ツールの使い方

使い方は驚くほど簡単です。

1. 変換したい画像（JPG/PNG）やZIPファイルを、1_ここへドロップ.bat のアイコンにドラッグ＆ドロップします。
2. 黒い画面が開くので、ファイル名を入力（例: travel-tips）してEnterを押します。（何も入力せずにEnterを押すと日付になります）
3. 「元の画像やZIPを削除しますか？ (y/n)」と聞かれるので、削除してよければ y 、残すなら n（またはそのままEnter）を押します。
4. 全自動で処理が進み、同じフォルダ内に Converted_WebP というフォルダが作られ、そこに最適化されたWebP画像が連番で保存されます。

あとはこれをWordPressにアップロードするだけ！これまでの「画像ソフトを開いて、リサイズして、別名で保存して…」という作業が数秒で終わるようになります。ぜひ試してみてください。

エクスプローラーの「表示」→「特大アイコン」でアイコンを最大化するとドラッグ&ドロップしやすくていいと思います。

よく使うことになると思うので、このフォルダをエクスプローラー左にショートカットで登録することをオススメします。

Windows11 エクスプローラーのショートカットに表示されるフォルダを手動で管理する方法

opticode.lab.com

うまく動かないときは

以下の点について見直してみてください。

• Googleからダウンロードしたツールが cwebp.exe で間違いないか
• 保存したツールのファイル名があっているか
  1_ここへドロップ.bat　と　2_convert_logic.ps1　です。
• 保存したツールが「Shift-JIS」形式 で保存されているか
• 3つのファイルが同じフォルダ内に存在しているか

ツールを使うにあたっての注意点

以下の点は少し注意が必要です。

• WebPに変換するにあたって少しだけ画質を落としております。
• 一部の古いIEなど未対応ブラウザ（シェア合計1%前後）ではWebPが表示できません。
  サイトで使用する画像を完全にWebPのみに切り替えるかは慎重にご判断ください。
• 同じファイル名で保存すると、Converted_WebP フォルダ内に存在した同名ファイルに上書き保存されます。先にサーバーにアップしておくか、別のファイル名を指定するなどで回避してください。

まとめ

今回は作成したWebP変換ツールをご紹介しました。

当サイトは開発ブログやガジェット紹介などがメインなので、使用しているブラウザも新しいだろうということで完全WebPに切り替えています。

本来はGoogleAnalyticsなどで未対応ブラウザからのアクセス数を確認すべきですが、まだアクセスがほぼ無いのでサイトのジャンルで決めてしまいました。

今回はこのクイックアクセスを固定化し、追加・削除する方法をまとめます。

クイックアクセスのフォルダが消える&不要なフォルダが入る

Windows11は、デフォルトでは使用頻度の高いフォルダを自動でクイックアクセスへ登録する仕様となっています。
これが余計なおせっかいで、以下のようにどのフォルダかわからないものが登録されたり、必要なフォルダが除外されます。

2つの opticode-lab はそれぞれ別のフォルダなので「どっちのフォルダだよ！」となります。
よくある images や wordpress のようなフォルダが登録されると「どのサイトのフォルダだよ！」となります。

これを防ぐために、自動で登録・削除されないよう設定が必要です。

クイックアクセスが自動で更新されないようにする設定

エクスプローラーのメニューバー右の「・・・」を開き、「オプション」を開きます。

フォルダーオプション内の以下項目のチェックを外し、「適用」「OK」を押下して設定を閉じます。

• 最近使用したファイルを表示する(E)
• 使用頻度の高いフォルダーを表示する(Q)

これで自動更新が無くなります。

クイックアクセスにフォルダを登録・削除する方法

更新を止めた後は必要なものだけ手動で登録・削除しましょう。

クイックアクセスへ登録する方法

エクスプローラー上部のアドレスバーから登録したいフォルダをドラッグ&ドロップで登録ができます。

クイックアクセスから削除する方法

クイックアクセス内の削除したいフォルダを右クリックし、「クイックアクセスからピン留めを外す」から削除が可能です。

まとめ

開発していると同じようなディレクトリ構造・フォルダ名を扱うことが多いため、どのフォルダか非常に判り辛くなります。

固定・手動管理にしましょう。