Macで右クリック一発 WebP変換を極める完全ガイド Automatorとcwebpで現場最速ワークフローを構築 |

フロントエンド実務でも学習中でも、画像の最適化は避けて通れません。とくにWebPは軽量かつ画質も良好で、Core Web VitalsやLCP改善にも直結します。本稿では、Zenn記事「Mac Finderで画像右クリックでWebpに変換する方法」をベースに、再現性の高い手順と実務のツボ、そして実際に遭遇しやすいエラーの解決策までを網羅します。Automatorとcwebpで右クリック即変換を実現し、チームや個人の制作フローを一段引き上げましょう。参照元の手順骨子はZenn記事をご覧ください。

Automator x cwebpで何が変わるのか
準備 Homebrewとcwebpインストール
Automatorでクイックアクションを作る全手順
ベストプラクティス品質設定リサイズロスレス
実務の落とし穴 CMYKやICCで出るエラーの対処
代替ルート Previewとsipsだけで回す
運用設計プロジェクトへの展開とチーム共有
品質検証とリグレッション防止チェックリスト
よくある質問と即回答
まとめと拡張アイデア

Automator x cwebpで何が変わるのか

Finderで右クリック Quick Actionsから即座にWebPを生成できるため、ブラウザ向けの軽量化が作業ラインに自然に溶け込みます。骨子はAutomatorのクイックアクションにcwebpを組み込むだけ。
cwebpはGoogle提供のエンコーダ。圧縮率と画質のバランスが優秀で、品質値、リサイズ、ロスレスなど実務で必要なオプションが揃っています。

準備 Homebrewとcwebpインストール

ターミナルを開く
下記を実行してWebPツール群を導入

brew install webp

これで cwebp コマンドが使えるようになります。

補足 Homebrew未導入ならbrew公式の手順で事前にセットアップしておきましょう。

Automatorでクイックアクションを作る全手順

以下は右クリックで複数画像を一括変換する最短ルートです。元記事の流れを、実務視点の注釈付きで再構成しています。

Automatorを起動
新規書類で「クイックアクション」を選択
画面上部で次を設定
- ワークフローが受け取る現在の項目画像ファイル
- 検索対象 Finder
左ペインで「シェルスクリプトを実行」を検索してドラッグ
「入力の引き渡し方法」を「引数として」に変更
スクリプト欄へ下記を貼り付ける

# cwebp のフルパスを which で確認し、必要に応じて書き換え
CWEBP_PATH="/opt/homebrew/bin/cwebp"  # Intel Mac は /usr/local/bin/cwebp の可能性

# 画質とリサイズなどのデフォルト
QUALITY="90"        # 実務でのバランス良
RESIZE=""           # 例: RESIZE="-resize 1920 0" 幅1920に収める
EXTRA_OPTS=""       # 例: EXTRA_OPTS="-m 6 -sharp_yuv"

for file in "$@"; do
  dir="$(dirname "$file")"
  base="$(basename "$file")"
  name="${base%.*}"
  out="${dir}/${name}.webp"

  # 上書き防止 既存webpがあれば連番付与
  if [ -e "$out" ]; then
    i=1
    while [ -e "${dir}/${name}_${i}.webp" ]; do i=$((i+1)); done
    out="${dir}/${name}_${i}.webp"
  fi

  # 変換実行 CMYKなど色空間問題は後述のFAQ参照
  "$CWEBP_PATH" -q "$QUALITY" $RESIZE $EXTRA_OPTS "$file" -o "$out"
done

Cmd Sで「WebPに変換」といった名前で保存
Finderで画像を選択右クリック Quick Actionsから実行

上記の骨組みはZenn記事のサンプルを実務向けに拡張したものです。品質 -q とリサイズ -resize を変数に切り出して、案件ごとに調整しやすくしています。

ベストプラクティス品質設定リサイズロスレス

cwebpの主なオプションと推奨値は以下。詳細はマニュアル相当の資料を添えています。

画質 -q 85〜92 85を基準に、写真多めのLPは88〜92、イラストやUI要素は80〜85でも破綻しにくい。
リサイズ -resize width height 片方を0にするとアスペクト比維持。例幅を1920に収めたい場合は -resize 1920 0。
ロスレス -lossless 小さなアイコンや線画で効果的。ただしファイルサイズはロッシーより大きくなりがち。
高品質チューニング例 -m 6 -sharp_yuv 画質重視、ただし変換時間は増えます。

実務Tips

まず -q 85 と -q 90 の2バリエーションでGolden Sampleを作り、デザイナー承認を得てから一括適用。
写真は -q 88 前後、イラストは -q 80〜85 が安定しやすい。
LPのヒーロー画像は幅1920〜2560で1枚、サムネイル系は幅640〜1280の複数派生を用意してsrcsetで配信。

実務の落とし穴 CMYKやICCで出るエラーの対処

右クリック変換の現場で最も多い詰まりどころが、CMYK JPEGなど色空間の違いによるエラーです。例えば、以下のようなエラーに遭遇することがあります。

libjpeg error: Unsupported color conversion request
Error! Could not process file ...

このメッセージはlibjpeg由来で、CMYK JPEGをRGBに変換しないまま処理しようとして失敗しているケースが多いと報告されています。対処としては、事前にRGBに変換してからcwebpをかける、あるいはImageMagick等で色空間変換を挟む方法が推奨されています。

最短の回避策画像をRGBに直す

Photoshopやプレビュー.appで「カラーを割り当て」または「カラープロファイルを変換」でRGBに変換して保存、再度クイックアクションを実行。CMYKからsRGBへ変換するとエラーが解消します。

コマンド系の回避策 ImageMagickを併用

magick input.jpg -colorspace sRGB temp-rgb.jpg のようにRGBに直してからcwebpへ。libjpeg側の色変換制約を避けられます。根本原因はcwebpではなくlibjpegにある点がポイントです。

原因の理解が重要

cwebp自体はエンコーダですが、JPEGデコードでlibjpegに依存するため、CMYK入力時に「Unsupported color conversion」が起き得ます。CMYK系素材を扱うワークフローでは、入稿受け取り時にRGB化チェックを入れる運用が安定します。

代替ルート Previewとsipsだけで回す

環境によってはcwebpを使わず、macOS標準のツールだけで完結したい場合もあります。

プレビュー.appはmacOS 11以降でWebP閲覧と簡易変換をサポート。単体変換なら十分です。
sipsはmacOS標準の画像変換ユーティリティで、リサイズやフォーマット変換に使えます。WebPへの変換は歴史的に限定的でしたが、JPEGやPNGへの相互変換は安定。必要に応じてワークフローの補助として使えます。

Automatorをsips派生で組む参考例や、右クリックメニューに出すチュートリアルは複数の実践記事が確認できます。cwebpを使いたくない制約がある場合の代替として有効です。

運用設計プロジェクトへの展開とチーム共有

標準化ファイルを用意

Automatorの.workflowをGitリポジトリに格納し、プロジェクト毎の推奨品質値やリサイズ値をREADMEに明記。
例
- Marketingサイト A: -q 88 -resize 1920 0
- 管理画面UI: アイコンは -lossless、スクリーンショットは -q 85 -resize 1600 0

デザインチームとの合意形成

Golden Sample運用を徹底。トップヒーロー写真やブランド要素は目視比較で閾値を決める。
CMYK納品物のRGB化ルールを入稿要件に追記。libjpeg系の制約により作業者が詰まらないよう、入稿段階で未然に防ぐ。

自動化の拡張

フォルダ監視 Folder Actionsで、特定ディレクトリに入った画像を自動WebP化。
失敗ログをSlackに通知する簡易スクリプトを追加すれば、CMYK混入などの検出も早くなります。

品質検証とリグレッション防止チェックリスト

重要画像はビジュアルデフで比較し、主観評価に加えてSSIMやPSNRで定量化。
ページ単位ではLighthouseおよびWebPageTestでLCPや転送量の差分を追跡。
WebPに非対応な古いUA向けのフォールバックは <picture> で担保。
デザイナー承認済みのGolden Sampleを回帰テストの基準として保管。

よくある質問と即回答

Q. 右クリックで複数ファイルを選ぶと速度がバラつく

A. -mレベルや-sharp_yuvの有無で処理時間は伸びます。PC負荷と画質を見ながら-m 4程度から調整を。

Q. libjpegのUnsupported color conversionで止まる

A. ほぼCMYK入力が原因です。RGBへ変換してから再実行。ImageMagickで一括RGB化も可。

Q. プレビュー.appやsipsだけでやりたい

A. 単発処理や簡易フローなら可能。大量変換や細かな画質調整はcwebpの方が柔軟。

Q. 品質は何で決めるべき

A. ペルソナと用途ごとに閾値を定義。写真系は-q 88前後、UI系は-q 80〜85から着地を探るのが無難。

まとめ Automator化でWebPはワンクリックへ

Homebrewでwebpを入れ、Automatorのクイックアクションにcwebpを組み込む。これだけで右クリック即WebP化が完成します。
実務では画質とリサイズの既定値を案件別に標準化し、CMYK混入時のRGB化ルールを入稿要件へ。libjpeg系エラーで作業が止まるのを未然に防ぎます。
代替としてPreviewやsipsでの軽量フローも用意し、メンバーの環境差や権限差に柔軟に対応しましょう。

(Visited 2 times, 1 visits today)

目次