Webページから画像を一括ダウンロードする方法
デザインリサーチや競合の素材集めで一番面倒なのが、画像を一枚ずつ保存することだ。仕入れ先サイトの80枚の商品画像、ギャラリーページの高解像度写真、大手のポートフォリオまで——右クリック、名前を付けて保存、リネームの繰り返し。これは仕事じゃない、ただの手作業だ。
右クリック保存の問題点
一括ダウンロードが必要だと気づくのは、たいてい既にループにハマった後だ——右クリック、保存、リネーム、右クリック、保存、リネーム。ブラウザには「画像を全部選択してダウンロード」なんて機能はない。
サードパーティ製ツールは存在するが、二種類に大別される：<img> タグしかスキャンしない軽量拡張機能（遅延読み込み画像や背景画像を見逃す）、あるいはインストールが必要なデスクトップアプリ（ブラウザのログインセッションを引き継げず、認証が必要な画像は403になる）。
FlowPickの画像ダウンローダーはブラウザ内で動作し、現在のログイン状態を保持したまま、ネットワークリクエストを監視して画像をキャプチャする。<img> タグだけに依存しない。
FlowPickが検出できる画像
すべての画像が <img> タグの中にあるわけではない。FlowPickはブラウザが実際に発行するネットワークリクエストを監視して画像をキャプチャし、以下のソースをカバーする：
- 標準的な
<img>要素 — 最も一般的なタイプ <picture>と<source>要素 — 複数解像度のレスポンシブ画像、FlowPickは最高解像度のバリアントを選択- 遅延読み込み画像 — スクロール時に読み込まれる画像、DOMに入った時点でキャプチャ
<video>のポスターフレーム — 動画のサムネイル
スキャナーはDOMの現在の状態で動作する。まだスクロールしていない領域、まだ読み込まれていない画像はリストに表示されない——この点は操作時に注意が必要だ。
検出できないケース：
- Canvasでレンダリングされた画像——ネットワークリクエストを経由しないため拡張機能からは見えない
- Base64インライン画像——HTMLに直接埋め込まれており、独立したリソースではない
- CSS
background-image——検出できる場合もあるが、サイトの実装方式に依存する
対応画像フォーマット
| フォーマット | 拡張子 | 一般的な用途 |
|---|---|---|
| JPEG | .jpg、.jpeg | 写真、商品画像 |
| PNG | .png | スクリーンショット、透過画像 |
| GIF | .gif | アニメーション、アイコン |
| WebP | .webp | モダンWebフォーマット、JPEGより軽量 |
| SVG | .svg | アイコン、ロゴ、ベクターイラスト |
WebPについて：主要ブラウザはすべて対応しているが、一部の古いデスクトップソフト（2021年以前のPhotoshop、一部のWindowsアプリ）では直接開けない。JPEG互換が必要な場合、FlowPickは .jpg/.jpeg のみをフィルタリングしてダウンロードできる。
ステップバイステップ
ステップ1：ページを開き、まず最後までスクロール
対象の画像があるページを開く。遅延読み込みのギャラリーサイト（最近の画像サイトのほとんど）の場合、まずページを上から下までゆっくりスクロールし、画像を実際にDOMに読み込ませてからFlowPickを開く。
このステップを飛ばして、拡張機能に数枚しか表示されないと不思議がる人が多い。ページ上部は読み込まれていても、スクロールしていない下部の画像はDOMに存在せず、FlowPickもキャプチャできない。
ステップ2：FlowPickのポップアップを開く
ブラウザのツールバーにあるFlowPickアイコンをクリック。バッジの数字は現在のページで検出されたメディアリソースの総数。
ステップ3：画像タブに切り替え
ポップアップ内で画像タブ（📷）をクリックすると、検出された画像のサムネイルグリッドが表示される。
数が予想より多いかもしれない——ほとんどのページではコンテンツ画像以外に、UI要素、アイコン、広告画像も混ざっている。これがフィルタリングの意味だ。
ステップ4：必要なものをフィルタリング
フォーマットでフィルタ：必要なフォーマットだけチェック。JPEGだけ欲しければ .jpg/.jpeg だけチェック、GIFが不要なら .gif を外す。
ファイルサイズでフィルタ：最小KB値を設定するのが最も効果的なフィルタリングだ。5KB以下はほぼアイコンか装飾要素で、欲しいコンテンツ画像ではない。
| シーン | 推奨最小ファイルサイズ |
|---|---|
| アイコン・装飾を除外 | 10 KB |
| コンテンツギャラリー | 50 KB |
| 高解像度画像のみ | 100 KB以上 |
フィルタ後、サムネイルグリッドが更新される。ざっと目を通し、漏れがないか確認——ダウンロード後に削除するより、この段階でチェックを外す方がずっと速い。
ステップ5：対象画像を選択
- 全選択でフィルタ後の全画像を取得
- サムネイルをクリックして個別に選択/解除
- Shift + クリックで範囲選択
ステップ6：ダウンロード
選択をダウンロードをクリック。FlowPickは選択された画像を並行ダウンロードし、ブラウザのデフォルトダウンロードフォルダに元のファイル名で一枚ずつ保存する。
ポップアップに進捗が表示される。並行ダウンロードとは、50枚の画像が1枚の50倍の時間を要しないということだ。
ダウンロードしたファイルの保存先
すべての画像はブラウザのデフォルトダウンロードフォルダ（通常はシステムの Downloads ディレクトリ）に保存され、各画像は元のURLのファイル名を保持する。ZIPにはまとめられない。
ダウンロードした画像のファイル名が汎用的な場合（image.jpg、photo001.jpg など）、それはそのサイトの画像URLに意味のあるファイル名が元々ないだけで、FlowPickの問題ではない。
実際のユースケース
商品画像の比較リサーチ
複数の仕入れ先の商品を比較する際、各商品ページに5〜8枚のアングル画像があり、ギャラリーで遅延読み込みされる。
操作：商品ページを開き、各サムネイルをクリックしてフルサイズ画像を読み込ませ、FlowPickで最小ファイルサイズ（例：150KB）を設定して商品の大きな画像だけを抽出する。
写真ポートフォリオのアーカイブ
ポートフォリオサイトに多いフルスクリーンスクロールレイアウトで、遅延読み込みへの依存が強い——その領域がビューポートに入った時点で初めて画像が読み込まれる。
操作：通常の速度でページ全体を閲覧し、その後FlowPickを開き、最小100KBに設定。ほぼクリーンな高解像度写真が得られ、サムネイルが混ざることもない。
講座資料・技術ドキュメント
技術ドキュメントやオンライン講座には図表やフロー図が多数含まれるが、独立したダウンロードボタンはない。
操作：ドキュメントページを最後までスクロールし、FlowPickでファイルサイズフィルタを使ってUI要素を除外、すべての図表を一括取得する。
Bilibiliの投稿とコメント欄
投稿者の投稿内の画像やコメント欄の画像もFlowPickで検出可能。まずページをスクロールして画像を読み込ませ、FlowPickでスキャンする。このシナリオは Bilibili動画のダウンロード と組み合わせて使える——動画は動画タブ、画像は画像タブ、同じポップアップでタブを切り替えるだけだ。
相性の良いサイト・悪いサイト
相性が良い：
- Pixiv / ArtStation：ギャラリー系サイト、画像は標準的なネットワークリクエスト経由、ページをスクロールし切ってからスキャンすれば良好
- Notionの公開ページ：画像が埋め込まれたNotionの共有ページ、FlowPickで一括取得可能
- Bilibiliの投稿：投稿者の投稿やコメント欄の画像、スクロール読み込み後に一括キャプチャ可能
相性が悪い：
- Google画像検索結果：検索結果の画像はサードパーティドメインにホストされており、CORS制限でダウンロードに失敗する可能性がある。元のページに移動してダウンロードすることを推奨
- Canvasレンダリングのギャラリー：一部のサイトはWebGL/Canvasで画像を描画しており、この場合画像はネットワークリクエストを経由しないためFlowPickは検出できない
- ホットリンク防止署名付き画像：一部のサイトの画像URLにIPバインドの署名トークンや
Referer検証が含まれており、FlowPickはURLを検出できるが直接リクエストすると403になる。この場合は右クリック→新しいタブで開く→手動保存するしかない
プライバシーについて
FlowPickの画像スキャンは完全にブラウザのタブ内で実行される。検出された画像URLとダウンロードされたファイルがデバイスから外部に出ることはない。ダウンロードはブラウザが画像のホスティングサーバーに直接リクエストするもので、FlowPickのサーバーは一切介在しない。
同じFlowPick拡張機能で、タブを切り替えるだけで異なる種類のメディアを処理できる。画像は画像タブ、動画は動画タブ、音声は音声タブ——他の二つに興味があれば、以下に対応するチュートリアルがある。
おすすめ記事
- M3U8/HLSストリーミングのダウンロード：完全初心者ガイド — 画像、動画、音声、FlowPickは同じ検知ロジックで処理する。この記事はHLSストリーミングの仕組みと操作手順を解説
- Webページの音声を検知してダウンロード：ポッドキャスト、BGM、オーディオブック — 画像ダウンロードと同じ操作ロジック、音声タブに切り替えるだけ
- Bilibili動画をローカルにダウンロードする方法 — Bilibiliの動画と画像はセットで保存したいことが多い、この記事は動画部分を解説
- FlowPick vs Video DownloadHelper 比較 — 一括画像ダウンロードはFlowPickにあってVideo DownloadHelperにない機能、この記事で両者の違いを詳しく比較