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