💥 事件発生 — 「サイトが、激重っ！？」
いい写真が撮れた。さっそくサイトに載せよう——そう思った、その瞬間。
旅先で撮ったとっておきの夜景を、ページに何枚か載せるぞ〜。うん、画面で見てもキレイだ。これは映える。
……あれ？ ページがなかなか表示されない。写真がジワ……ジワ……と降りてくる。スマホで開いたら、もっと遅い。ファイルを見たら1枚で十数MB。そりゃ重い。
ぼく写真がデカすぎてサイトがモッサモサなんだけど！？ でも、せっかくキレイに撮れたのに小さくしたくない……。
クロード落ち着いて。見た目はほぼそのまま、容量だけ小さくできるよ。Web用に“軽量化”するだけ。原因を切り分けよう。
🕵 犯人さがし — 真犯人は「でかすぎる写真」
重さの正体は、シンプルだった。スマホの写真は、Webに載せるには“立派すぎる”のだ。
「軽くする」と一口に言っても、やり方は2つ。さあ、どっちを選ぶ？
選択肢A：オンライン変換サイト
- ブラウザで使えてお手軽
- でも写真を相手のサーバーに送信
- → 人に見せたくない写真は不安
選択肢B：手元で完結する道具
- 変換は自分のPCの中だけ
- 写真は1枚も外に出ない
- → 安心・オフラインでも動く
ぼくオンライン変換、ラクそうだけど……家族の写真とか、知らないサイトに上げるのはちょっとイヤだなあ。
クロードその感覚、大事。実は変換はブラウザの中だけでできる。写真をどこにも送らずに済む道具を、自分で作ろう。
🛠 作戦会議 — 「送らない」「フォルダごと」
設計のキモは2つ。写真を外に出さないこと。そして、何十枚でも一発で片づくこと。
ぼく1枚ずつポチポチ変換するのは無理。旅行のフォルダ、100枚以上あるんだけど……。
クロードならフォルダごと選んで一括変換。形式（WebP / JPEG）と品質をスライダーで選べるようにして、最後はZIPでまとめてダウンロード。インストールも不要、ブラウザで開くだけにしよう。
仕組みはこう。ブラウザのCanvas（描画キャンバス）に写真を一度描き直し、そこからWebP / JPEG で書き出す。品質を少し落とすだけで、見た目はほぼ同じまま容量がぐっと減る。サーバーは一切いらない。
// 写真を Canvas に描き直す（ぜんぶブラウザの中だけ）
const bmp = await createImageBitmap(file);
canvas.width = bmp.width; canvas.height = bmp.height;
ctx.drawImage(bmp, 0, 0);
// WebP / JPEG ＋ 品質を指定して書き出す
const type = format === 'webp' ? 'image/webp' : 'image/jpeg';
canvas.toBlob(blob => { /* これが軽くなった画像 */ },
type, quality); // quality 0.8 が黄金比🐛 HEIC事件 — 「この写真、開けません」
いざ完成、テスト実行。フォルダをドサッと選んで……あれ、何枚か変換されてない！？
原因はHEIC——iPhoneの新しい標準形式だった。パソコンのブラウザはHEICを読めないことがある。読み込めない写真だけ、変換からこぼれ落ちていた。
ぼくJPEGの写真はちゃんと軽くなったのに、一部だけ無反応……。バグ！？
クロードバグじゃなくて形式の相性。HEICはブラウザ次第で読めないんだ。だから——読めない写真はエラーとしてハッキリ表示して、成功・失敗の件数も出すようにしよう。だまって落とさない設計に。
🛡 “親切な失敗”に作り替え
読み込めなかった写真は、名前つきで「失敗」と表示。さらに案内文で「iPhoneは設定→カメラ→フォーマットを『互換性優先（JPEG）』にすると確実」と添える。エラーを隠さず、次にどうすればいいかまで見せる——これがいちばん親切だ。
🎉 完成 — フォルダごと、一気に軽量化
直したツールを、もう一度テスト。今度はどうだ……？
フォルダを選んで「変換開始」をポチッ。プログレスバーがスーッと伸びて、十数MBの写真が数百KBに。最後にZIPでまとめてダウンロード。さっきまで激重だったページが、見た目そのままでサクサク動き出した。
ぼく軽い！ 速い！ しかも写真は1枚も外に出してない……！ 100枚が一瞬で片づいた！
クロードでしょ。これ、実はこの『AI探検隊』のサイトに載せる画像も、同じ発想で軽くしてるんだ。重い写真は、もう怖くないよ。
「重すぎる」から、
「フォルダごと一発」へ。
🆕 進化版『Snapfit』登場 — 名前も中身も、大きく更新
最初の完成版を毎日使うほど、欲しい機能と直したい癖が見えてきた。そこで——アプリ自体を作り直した。
ぼく大量フォルダでまわすと、たまに変換が止まる。ファイル名が同じだと上書きされる。あと、変換中に「やっぱりやめたい」が押せない……。
クロードOK、まとめて直そう。名前も『Snapfit』に（Snap＝写真／Fit＝Web用にフィット）。中身は、安定性・親切さ・自由度をぜんぶ底上げする。
🆕 新しくなった12のところ
- 名前を『Snapfit』に。 「Snap（写真）」を「Fit（Web用にぴったり）」させる、というコンセプトを名前に込めた。
- 3つの入り口。 ドラッグ＆ドロップ／フォルダ選択／ファイル選択、好きな方法で読み込める。
- 出力は3形式。 WEBP（推奨）／ JPEG ／ PNG（可逆）。可逆PNGは品質を落とさず保存したい時に。
- 長辺サイズを選べる。 変更しない／1280／1600（ブログ向け）／1920（推奨）／2560／3840。用途に合わせて1クリック。
- フォルダ構造をZIPに保持。 「2024/旅行/01_朝」みたいな入れ子をそのまま残せる（オフにすると平らにまとめる）。
- 削減率の見える化。 1枚ごとの「元→後・−○％」と、フォルダ全体の合計サマリーを表示。「軽くなった実感」が一目で。
- 途中キャンセル。 変換中に「やっぱりやめる」ができる。100枚回し始めて気が変わっても安心。
- EXIFの向きを自動正立。 iPhoneの縦写真が横倒しで保存される問題に対処。
- JPEGの白背景。 透過PNGをJPEGに書き出す時、自動で白く塗ってから保存（汚い縁が出ない）。
- HEIC失敗は明示。 読めなかったファイル名と理由を結果リストにハッキリ表示。
- 厳格なセキュリティ設定。 アプリ自身のHTMLにCSP（コンテンツの制限）を明記。怪しいスクリプトは原理的に動かない。
- 同名衝突を自動リネーム。 同じ名前があれば
(1)を付けて上書きを防止。
🆕 さらに v1.1 で進化した5つのところ
- AVIF入力にも対応。 次世代のAVIF（JPEGより軽い後継規格）も読み込めるように。古い写真も新しい写真もOK。
- PNGを選ぶと品質スライダー自動オフ。 可逆形式（劣化なし）に品質指定は不要。誤操作の余地を消した。
- PDFマニュアル同梱。 A4・8ページの『Snapfit 使い方マニュアル』を同梱。表紙→目次→4ステップ→オプション→FAQ→トラブル→動作環境とプライバシーまで網羅。
- ワンクリック起動。 配布フォルダの
start_local.bat（あるいはSnapfit.lnk）をダブルクリックすれば、既定ブラウザで即起動。インストール不要。 - ドラッグの追従を精密化。 ドロップゾーンの中で要素を行き来しても枠線がチラつかないように、
dragleaveの判定を厳密化。
🎁 配布パッケージ（3点セット）
Snapfitは、ブラウザだけで動く静的アプリ（HTML + CSS + JS）。配布物は次のとおり、合計数十KB＋PDF 19KBと非常に軽い構成です。
- index.html / style.css / app.js — アプリ本体。
- start_local.bat（Windows）/ Snapfit.lnk — ダブルクリックで起動するランチャー。
- Snapfit_使い方マニュアル.pdf — A4・8ページの公式マニュアル。
🔒 変わらない約束。 写真は1枚もネットに出ません。Snapfitもこれまで通り、すべての処理をあなたのブラウザの中だけで行います。安心は、進化版でもそのまま。
使い方マニュアル — Snapfitを4ステップで
画像の通りに進めるだけ。所要時間：写真100枚でも1〜2分です。
Snapfitを開くと、まず大きなドロップゾーンが出ます。フォルダや画像をここにドラッグ＆ドロップするのが一番ラク。または、ボタンから選んでもOK。
- フォルダを選択：フォルダごと一括（中の画像を自動で拾います）。
- ファイルを選択：1枚〜数枚だけ選びたい時に。
対応形式：JPEG / PNG / WEBP / GIF / BMP / AVIF（HEICはブラウザ次第）。
「出力形式」のドロップダウンから、保存したい形式を選びます。Web用ならWEBP（推奨）でOK。
- WEBP（推奨）：いちばん軽い。サイトに載せる写真はこれ。
- JPEG：互換性最強。古い環境やメールに添付する時に。
- PNG（可逆）：画質を一切落とさず保存。スクショ・図版・透過画像向け。
下の品質スライダー（既定 0.80）は、写真なら 0.75〜0.85 が黄金比。下げるほど軽く、上げるほど高画質。
「長辺の最大サイズ」のドロップダウンから、写真の長い辺の長さを選びます。元のサイズより小さい数字を選ぶと、その大きさにまでリサイズされます。
- 変更しない：そのままのサイズ（軽くなるのは再圧縮の効果のみ）。
- 1280 px：SNS投稿・サムネ用に。
- 1600 px（ブログ向け）：本文中の写真にぴったり。
- 1920 px（推奨）：高品質サイト用。今のWeb写真の標準。
- 2560 px / 3840 px：4K表示や大判印刷を見据える時。
必要なら、その下の「フォルダ構造をZIPに保持する」のチェックも合わせて確認。階層をそのまま残したいならON。
「変換開始」を押すと、プログレスバーがスーッと伸びていきます。途中で気が変わったらキャンセルもOK。
終わると、画面下に「合計：◯ MB → ◯ KB（−◯％）」の削減サマリーと、変換結果リストが表示されます。1枚ずつダウンロードしてもよし、上の「ZIPでダウンロード」でまとめて保存してもよし。
次のフォルダを変換したい時は、「クリア」でリセットして①からどうぞ。
💡 こんな時はこの設定（早見表）
- ブログ本文の写真 → WEBP ／ 品質 0.80 ／ 長辺 1600 px
- ポートフォリオ・作品紹介 → WEBP ／ 品質 0.85 ／ 長辺 1920 px
- SNSアイコン・サムネ → WEBP ／ 品質 0.80 ／ 長辺 1280 px
- 図版・スクショ・透過素材 → PNG（可逆）／ 長辺 変更しない
- 古い環境にメール添付 → JPEG ／ 品質 0.80 ／ 長辺 1600 px
🔬 おまけ — このツールの“しくみ”
魔法ではありません。やっていることは、意外とシンプルです。
画像の入ったフォルダをまるごと選択。中の画像ファイルだけを自動で拾い上げる。何枚あってもOK。
各写真をブラウザの Canvas に一度描く。この処理はすべて手元の中で完結し、写真はネットに出ない。
WebP または JPEG を選び、品質スライダー（既定0.8）で圧縮。見た目をほぼ保ったまま容量を削る。
変換後は1枚ずつでも、ZIPで一括でもダウンロード可能。元の写真には手を触れない。
🧠 なぜ「ブラウザの中だけ」が安心なの？
このツールは、写真をサーバーへ一切アップロードしません。変換はあなたのPC（ブラウザ）の中で行われ、できあがった画像もその場で保存されるだけ。だから人に見られたくない写真でも安心で、ネットが無くても動きます。「便利だけど、写真を預けるのは不安」——その悩みごと解決するのが、この設計の狙いです。
🪶 WebPって何？ なぜ軽いの？
WebP（ウェッピー）は、Webのために作られた画像形式です。JPEGやPNGと同じくらいの見た目を、より小さい容量で表現できるのが強み。このサイトでも、写真はWebP（品質82）に整えてから載せています。今回の道具は、その“いつもの軽量化”を誰でもボタン一発でできるようにしたものです。
⚠ 使い方のおやくそく。 このツールは、自分が撮った・正当に利用できる写真を、自分のサイトや作業のために軽量化するためのものです。他人の著作物を権利者の許可なく加工・再配布するのはNG。また、HEIC形式はブラウザによって読み込めない場合があります（iPhoneは「互換性優先（JPEG）」で撮るか、JPEGに書き出してから使うと確実）。道具は、正しく・気持ちよく使いましょう。
🌙 教訓 — 「重い・面倒・不安」は、道具にできる
100枚を1枚ずつ変換する未来も、写真を見知らぬサーバーに預ける不安も、回避された。
📌 この一件で学んだこと
- 「重い」には理由がある。 スマホ写真は立派すぎるだけ。縮小＋再圧縮で、見た目はほぼそのまま軽くなる。
- 便利さと安心は、両立できる。 ブラウザの中だけで処理すれば、写真を外に出さずに済む。
- 繰り返す作業は、道具にする。 1枚ずつを“フォルダごと一発”に変える価値は大きい。
- 失敗は、隠さず見せる。 読めないHEICは「失敗」と表示し、次の一手まで案内する。
このサイト「AI探検隊」は、AIで「Webサイト・音楽・画像」を実際につくって見せる場所です。今回みたいな小さな“自作ツール”も、AIと組めば週末の片手間で生まれます。 「重いな」「面倒だな」「ちょっと不安だな」——そう思った瞬間こそ、道具づくりのチャンス。あなたの“重すぎる写真”も、きっと軽くできます。