Webサイトに使われている背景画像を取得する方法
「このWebサイトに使われている画像をローカルに保存したいのだけど、どうしてもドラッグできない。どうすればいい？」
こんな質問をときどきされることがあります。
Web制作に関わっている人だとわりと普通に知っていたりするのですが、Web制作に無縁だったりするとやはりなかなか知らないのも確か。ここに書き留めておくと、案外検索で訪れて誰かの役に立つかもしれないと思い、投稿してみました。
（2017.11.08）Google Chrome最新版に対応した記事を書きました。Google Chromeユーザの方は下記のリンクをどうぞ。Safariユーザの方はそのまま読み進んでください。
→Webサイトに使われている背景画像を取得する方法2017
Google Chromeで背景画像を保存
まずは、僕がメインで使っているGoogle Chromeをベースにやり方を紹介します。
例えば、AppleのWebページなどでは、画像がページの背景などに割り当てられていて、ドラッグしようとしてもできないことが多いです。そこで使うのが、「デベロッパーツール」というもの。［表示］→［開発/管理］→［デベロッパーツール］とメニューを辿って表示させます。
パネルが現れたら、上のタブから［Resorces］を選びましょう。
あとはパネル左側の階層表示を開いていき、［Images］と書いている部分までたどり着きましょう。
ここまでくればあとは簡単。項目を一つ一つ見ていくと目当ての画像が見つかるはずです。左側に現れたプレビューエリアをデスクトップにドラッグ＆ドロップすれば完了です。あるいは、プレビューの下のURLをクリックすれば、その画像を新規ウインドウで開くこともできます。
Safariで背景画像を保存
同じ機能は、主要なWebブラウザならだいたい搭載されています。
例えばSafariの場合は、［開発］メニューから［Webインスペクタを表示］を選びます。そもそも［開発］メニューが表示されていない！という人は、［環境設定］を開き、［詳細］タブから［メニューバーに”開発”タブを表示］を選びましょう。
あとは、［リソース］タブを選んで、パネルの左側で［イメージ］をクリックして展開。あとは目当ての画像を探していく、という流れ。
と、わかってしまえば手順はごく簡単なもの。背景画像以外でも、ドラッグで掴めない画像は大抵この方法で保存できます。もりもり使っていきましょう。