インスタ画像のかんたん保存方法!PC版
制作会社でWebデザイナーをやっている やんこ です。
こないだお客様から『自社のインスタ画像を広告サイト(LP)にも掲載したい!』というご依頼をいただきました。
インスタ画像って、長押し(右クリック)で保存できない仕様になっているので、私は初めてこの作業が来たときには困惑してしまいました。
アプリを入れるやり方もあるっぽいんですが、それは避けたいんだよな〜ってあれこれ試してたら、とっても効率的なやり方があったので今回はその紹介をさせていただきまっす!
(※ 著作権侵害にあたる行為に使うのはダメ!絶対!!)
STEP1 パソコンでInstagramを開く
まずは保存したい画像のあるInstagramページをブラウザー(PC)で開きます。
STEP2 検証ツールを開く
画面上で右クリックして「検証」を選択。または、F12をクリック。
検証ツール(デベロッパーモード)を開きましょう。
検証ツールというのは、そのサイトがどの様なコードで作られているのか等が見れる画面です。
インスタ投稿画像の右側に、HTMLコードが書かれた画面が現れました。
これで第一段階成功です。
STEP3 カーソルアイコンをアクティブ(有効)にして、保存したい画像を選ぶ
次に、検証画面の左上(画面全体でいうと中央の上)にある
カーソルアイコンをクリックします。
このカーソルアイコンをクリックして、自分が見たいオブジェクトやテキストをクリックすると、その部分の情報やコードが見れるという仕組みです。
今回は例として、アジサイの画像を保存してみましょう。
左上のカーソルアイコンがアクティブ(水色)の状態でアジサイ画像をクリック。
クリックすると、右側の検証画面もアジサイ画像に関するHTMLコードがマークされた状態になります(水色のラインでマークされます)
STEP4 コードを選択
<div class="_9AhH0">・・・という行がマークされているのがわかりますね。
だけど、この<div class="_9AhH0">は右クリックに対応しませんという指令のコードと見た・・。その一行上の横向きになった三角マーク(これをクリックすると詳細が開きますよ、というマーク)をクリックしてみましょう。
横向き三角が下向き三角になりました。詳細が開けたということですね。
青色の下線が引かれた文字がつらつらと書かれています。
その文字群の上にマウスカーソルを持っていくと・・!!
保存したい画像のサムネイルが飛び出してきました!
この部分がアジサイ画像のコードですよ、ということです。
ここまできたら後はカンタン!
アジサイ画像のリンクテキスト上で右クリックして
Open in new tab
” Open in new tab ”をクリック。
すると・・・
Facebookのファビコンがついたページが開かれ、お目当ての画像が表示されます。
STEP5 画像を保存
右クリック→「名前をつけて画像を保存」を選んで所定の場所に保存するか、貼り付けたいツールにそのままドラッグ&ドロップしたら任務完了!!
まとめ
どうだったでしょうか?
HTMLコードを見慣れない方にはちょっと難しかったでしょうか。
でもこの手順を身につけてしまえば、特別なアプリをインストールしたり起動させることなく、あっという間に保存できます。
とはいえ、今回の事例はお客様のインスタ投稿画像を広告用に展開するという依頼。他人のインスタ画像を許可なく使用する理由で保存するのは絶対にNO!!ですよ!
このインスタ記事を快く使用させてくれたごはん屋 ヒバリのせいこちゃん、どうもありがとう〜!