Web Creation
Webサイトの背景画像を保存する方法｜Chrome編
最終更新日 2023.06.08| 公開日 2017.11.08
Webサイト上で見えているのに、ドラッグできないし保存もできない…。そうした画像の多くは、Webのコーディングでしばしば「背景」として配置されています。Google Chromeでそんな画像を保存する手順をご紹介しましょう。
※2023年5月21日：最新の状況に合わせて内容を更新しました。
大まかな流れ
- Google Chromeで［検証］を選ぶ
- ［Apptication］タブを表示
- ［Flame］→［top］→［Images］と階層をたどる
- 目当ての画像を探して保存
Google Chromeで背景画像を保存する方法
この記事は、Windows 11でGoogle Chromeを使った方法を紹介します。Mac版のGoogle Chromeでも、見た目が若干異なるものの、方法はまったく同じです。Mac版Safariでの方法は、以前に書いた記事をご覧ください。
→Webサイトの背景画像を取得する方法｜Safari編
例えばこれが、ドラッグできない画像の例。アップルのWebサイトでは画像が「背景」として配置されているケースが意外と多いです。まずはページのどこでもいいので右クリックして、コンテキストメニューから［検証］を選びましょう。
ウインドウの右側に「デベロッパーツール」が表示されました。ページのソースコードなどを確認できるツールですが、画像を取り出すだけであれば、ソースコードの理解は必要ありません。
そのまま左側に表示させておいてもいいのですが、僕は別ウインドウに切り離して使っています。切り離す操作は、歯車アイコンの横にある［…］ボタンから行います。
デベロッパーツールのパネルの上の方に、表示を切り替えるためのタブがあります（一見タブに見えませんが）。そこから［Application］を選びましょう。パネルが狭いとすべてのタブが表示されていませんが、その時は右端にある「>>」を押すと表示しきれない項目が表示されるはずです。
これがApplicationタブに切り替えたところです。この画面の左側、下のほうに［Frames］という項目があると思います。そこから［Top］→［Images］と階層をたどりましょう。
「Images」の横にある三角マークを押して展開すると、そのWebページに使われている画像がすべて表示されます。あとはそこから目当ての画像を見つけて、右クリックして［Save image as…］などから保存します。
なお、デベロッパーツールで画像を選択すると、下側に画像のデータサイズやピクセルサイズ（この例の981×496と書かれている部分）が表示されています。似たような画像がいくつもあったときは、一番サイズの大きいものをダウンロードするといいでしょう。
以上、ステップバイステップでご紹介してきましたが、慣れてしまえば案外簡単です。ぜひお試しください。
Thumbnail photo by Luca Micheli on Unsplash
