Webサイトの背景画像を保存する方法|Safari編

Web Creation

「このWebサイトに使われている画像をローカルに保存したいのだけど、どうしてもドラッグできない。どうすればいい?」こんな質問をときどきされることがあります。Web制作に関わっている人だと知っている人も多いのですが、Web制作に無縁だったりするとやはりなかなか知らないのも確か。ここではMac版Safariを使った方法をご紹介しましょう。

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

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

それでは、手順を追ってご紹介していきましょう。

Safari環境設定
最初に[開発]メニューというものを表示させる必要があります。メニューバーの[Safari]メニューから[環境設定]を開きましょう。環境設定ウインドウが開いたら[詳細]タブに切り替え[メニューバーに”開発”タブを表示]にチェックを入れます。
Safariで要素の詳細を表示
続いて、保存したい画像があるWebページにアクセス。[control]キー+クリックまたは右クリックでコンテキストメニューを開き[要素の詳細を表示]を選びます。
SafariでWebインスペクタを表示
あるいは、メニューバーの[開発]メニューから[Webインスペクタを表示]を選んでも構いません。
すると、このようなパネルが表示されます。

Webインスペクタから画像を保存

Webインスペクタは、Web開発者がWebページの要素を確認したり、パフォーマンスをチェックしたりするツールです。このツールを使うことで、背景画像を取り出すことができます。

上部のタブから[ソース]タブを選び、表示を切り替えましょう。左側の[イメージ]フォルダをクリックして展開します。するとページ内に使われている画像が並ぶので、その中から目当てのものを探します。見つけたら、コンテキストメニューから[ファイルを保存]を選んで保存しましょう。

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

「Safariの使いこなし」ならこちらもオススメ

Thumbnail photo by David Peters on Unsplash

タイトルとURLをコピーしました