ブログ記事を書くとき、スマホで撮った写真をPCに移して、1枚ずつリサイズして、WebPに変換して…という手作業、面倒に感じていませんか？
今回は、そんな手間を完全にゼロにする「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公式のツールを用意します。
- Google DevelopersのWebP公式サイト にアクセスします。
- Windows用のzipファイル（libwebp-x.x.x-windows-x64.zip）をダウンロードして解凍します。
- 解凍したフォルダの bin フォルダ内にある cwebp.exe というファイルだけを取り出します。
- PC上の使いやすい場所（デスクトップなど）に「画像変換」などの専用フォルダを作り、そこに cwebp.exe を入れます。
ステップ2：実行用バッチファイルを作成
次に、ドラッグ＆ドロップを受け付ける窓口となるファイルを作ります。
- メモ帳を開き、以下のコードをコピーして貼り付けます。
@echo off
setlocal
cd /d "%~dp0"
echo ===================================================
echo 画像をWebP（ウェッピー）に変換します
echo ===================================================
powershell -NoProfile -ExecutionPolicy Bypass -File "%~dp02_convert_logic.ps1" %*
pause2. ファイル名を 1_ここへドロップ.bat として、「Shift-JIS」形式で先ほどの cwebp.exe と同じフォルダに保存します。
ステップ3：処理ロジックのファイルを作成
最後に、裏側で画像を処理するメインのプログラムを作ります。
- 再度メモ帳を開き、以下のコードをコピーして貼り付けます。
# 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
ツールの使い方
使い方は驚くほど簡単です。
- 変換したい画像（JPG/PNG）やZIPファイルを、1_ここへドロップ.bat のアイコンにドラッグ＆ドロップします。
- 黒い画面が開くので、ファイル名を入力（例: travel-tips）してEnterを押します。（何も入力せずにEnterを押すと日付になります）
- 「元の画像やZIPを削除しますか？ (y/n)」と聞かれるので、削除してよければ y 、残すなら n（またはそのままEnter）を押します。
- 全自動で処理が進み、同じフォルダ内に Converted_WebP というフォルダが作られ、そこに最適化されたWebP画像が連番で保存されます。
あとはこれをWordPressにアップロードするだけ！これまでの「画像ソフトを開いて、リサイズして、別名で保存して…」という作業が数秒で終わるようになります。ぜひ試してみてください。
エクスプローラーの「表示」→「特大アイコン」でアイコンを最大化するとドラッグ&ドロップしやすくていいと思います。
よく使うことになると思うので、このフォルダをエクスプローラー左にショートカットで登録することをオススメします。
うまく動かないときは
以下の点について見直してみてください。
- Googleからダウンロードしたツールが cwebp.exe で間違いないか
- 保存したツールのファイル名があっているか
1_ここへドロップ.bat と 2_convert_logic.ps1 です。 - 保存したツールが「Shift-JIS」形式 で保存されているか
- 3つのファイルが同じフォルダ内に存在しているか
ツールを使うにあたっての注意点
以下の点は少し注意が必要です。
- WebPに変換するにあたって少しだけ画質を落としております。
- 一部の古いIEなど未対応ブラウザ（シェア合計1%前後）ではWebPが表示できません。
サイトで使用する画像を完全にWebPのみに切り替えるかは慎重にご判断ください。 - 同じファイル名で保存すると、Converted_WebP フォルダ内に存在した同名ファイルに上書き保存されます。先にサーバーにアップしておくか、別のファイル名を指定するなどで回避してください。
まとめ
今回は作成したWebP変換ツールをご紹介しました。
当サイトは開発ブログやガジェット紹介などがメインなので、使用しているブラウザも新しいだろうということで完全WebPに切り替えています。
本来はGoogleAnalyticsなどで未対応ブラウザからのアクセス数を確認すべきですが、まだアクセスがほぼ無いのでサイトのジャンルで決めてしまいました。