準備するもの
チェックリスト開始前に必要なものを揃えます：①対象のHTMLとすべての画像ファイルが入ったフォルダ、②圧縮ツール（Squoosh Webアプリまたはimageminなど）、③圧縮前の総ファイルサイズのメモ（比較用）、④バックアップ用の別フォルダ（`original/`など）。この4点を整えてから作業を開始することで、途中でつまずいた場合にも元の状態に戻せます。
送付先のクライアントの環境を事前確認します。「PCメインか、スマホメインか」によって適切な圧縮率が変わります。また社内メールやSlackでURLを共有するのか、外部ポータルで案件管理しているのかによって、共有サービスに求める要件も異なります。
- 相手がログインなしで開ける状態か確認する
- PCとスマホで最低1回ずつ表示を確認する
- 内部情報・個人情報・不要な外部送信が残っていないか見る
- レビュー期限と修正時の差し替え方を決めておく
実際の手順
チェック①：`original/`フォルダに元画像をコピーしてバックアップ済み。チェック②：すべての画像ファイル（PNG・JPEG・GIF・SVG）の一覧を把握済み。チェック③：各画像をWebPまたは圧縮JPEG（品質75〜85）に変換し、`img-compressed/`または同フォルダに保存済み。チェック④：HTMLの画像パス（src・background-image）を更新済み。
チェック⑤：ブラウザでHTMLを開き、全画像が正しく表示されることを目視確認済み（PC）。チェック⑥：スマートフォン実機または開発者ツールのモバイルエミュレーションで画像表示を確認済み。チェック⑦：圧縮後の総ファイルサイズを計測し、圧縮前と比較（30%以上の削減が目安）。
チェック⑧：ギガサイト便にアップロードし、URLを取得済み。チェック⑨：発行URLをシークレットウィンドウで開き、画像・レイアウト・表示速度を最終確認済み。チェック⑩：クライアントへURLと圧縮済み旨を含む送付メールを送信済み。
失敗しやすい点
チェック④（HTMLのパス更新）は見落としが多い項目です。圧縮後にWebP形式に変換した場合、HTMLの拡張子をすべて変更しないと画像が表示されません。`grep -r '.png' index.html`で残っているパスを検索し、対応するWebPに更新してください。
チェック⑦（サイズ比較）を省くと「圧縮できているつもりで実はほとんどサイズが変わっていない」という状態に気づけません。特にJPEGをJPEGのまま圧縮した場合、設定によっては1〜2%しか減らないことがあります。WebPへの変換を積極的に活用することで、確実な圧縮効果が得られます。
テンプレ文面
チェックリスト全項目完了後の送付テンプレ：「件名：[確認依頼] Webデザインプレビュー / 〇月〇日版。本文：プレビューURLをご案内します。画像は表示速度を優先して最適化済みです。レイアウト・文字・構成のご確認をお願いします。期限：〇月〇日。URL：[プレビューURL]。」
圧縮前後のファイルサイズ差を記録した場合は、社内向けの作業報告に「Before: 45MB → After: 8MB（82%削減）」のように記載しておくと、次回の参考になります。また定期的に同様の共有作業がある場合、このチェックリストをノーション等に保存してテンプレ化しておくと毎回の準備が不要になります。
よくある質問
Figmaからエクスポートした画像はすでに最適化されていますか？
FigmaのエクスポートはPNGやSVGを高品質で出力しますが、Web用の圧縮は適用されていません。特に2倍解像度（@2x）でエクスポートした場合はファイルサイズが大きくなるため、エクスポート後に必ず圧縮工程を挟んでください。
チェックリストのどのステップに最も時間がかかりますか？
画像枚数によりますが、最も時間がかかるのは圧縮とHTMLパスの更新です。画像が20枚以上ある場合はCLIツールで一括処理するのが効率的で、手動作業に比べて作業時間を70〜80%短縮できます。
クライアントから「画像が荒い」と言われた場合、どう対応すればよいですか？
まず品質設定（quality値）を確認し、75以下に設定していた場合は80〜85に上げて再圧縮します。それでも解決しない場合は圧縮なしのオリジナルで再確認してもらうか、問題のある画像のみ高品質版に差し替えます。全体を非圧縮に戻す前に原因を特定することが大切です。