編集者・小平淳一の共有ノート編集者、ライター、クリエイティブディレクター。伝えたいことを実名で書き連ねます。

Webサイトに使われている背景画像を取得する方法

背景画像を保存する方法
[`evernote` not found]
Pocket

「このWebサイトに使われている画像をローカルに保存したいのだけど、どうしてもドラッグできない。どうすればいい?」
こんな質問をときどきされることがあります。

Web制作に関わっている人だとわりと普通に知っていたりするのですが、Web制作に無縁だったりするとやはりなかなか知らないのも確か。ここに書き留めておくと、案外検索で訪れて誰かの役に立つかもしれないと思い、投稿してみました。

(2017.11.08)Google Chrome最新版に対応した記事を書きました。Google Chromeユーザの方は下記のリンクをどうぞ。Safariユーザの方はそのまま読み進んでください。
Webサイトに使われている背景画像を取得する方法2017
 

Google Chromeで背景画像を保存

まずは、僕がメインで使っているGoogle Chromeをベースにやり方を紹介します。

bgget01

例えば、AppleのWebページなどでは、画像がページの背景などに割り当てられていて、ドラッグしようとしてもできないことが多いです。そこで使うのが、「デベロッパーツール」というもの。[表示]→[開発/管理]→[デベロッパーツール]とメニューを辿って表示させます。

Chromeのデベロッパーツールを表示

パネルが現れたら、上のタブから[Resorces]を選びましょう。

Chromeのデベロッパーツールを

あとはパネル左側の階層表示を開いていき、[Images]と書いている部分までたどり着きましょう。

ここまでくればあとは簡単。項目を一つ一つ見ていくと目当ての画像が見つかるはずです。左側に現れたプレビューエリアをデスクトップにドラッグ&ドロップすれば完了です。あるいは、プレビューの下のURLをクリックすれば、その画像を新規ウインドウで開くこともできます。

Safariで背景画像を保存

同じ機能は、主要なWebブラウザならだいたい搭載されています。

SafariのWebインスペクタを表示

例えばSafariの場合は、[開発]メニューから[Webインスペクタを表示]を選びます。そもそも[開発]メニューが表示されていない!という人は、[環境設定]を開き、[詳細]タブから[メニューバーに”開発”タブを表示]を選びましょう。

SafariのWebインスペクタ

あとは、[リソース]タブを選んで、パネルの左側で[イメージ]をクリックして展開。あとは目当ての画像を探していく、という流れ。

と、わかってしまえば手順はごく簡単なもの。背景画像以外でも、ドラッグで掴めない画像は大抵この方法で保存できます。もりもり使っていきましょう。

Comments are currently closed.