Web制作

模写コーディングで使う画像をサイトから一括ダウンロードする方法

※ 当サイトではアフィリエイト広告を利用しています

サイトの模写コーディングの時に使う画像を一括で取得する方法ない?

Progateが一通り終わった後には模写をする人が多いと思います。

そして模写をする際にそのサイトで使用されている画像を取得して模写していきますが、画像を1つずつ右クリックで保存していくとかなり効率が悪いです(右クリックで保存が出来ない画像もあります)

今回はその画像を一括で取得する方法について書いていきたいと思います。

 

完全無料のプログラミングスクール『ZeroPlus Gate』
30日間でWeb制作を学べる無料のプログラミングスクールがこちら
  • 30日間でWeb制作を学べる
  • 完全無料
  • 現役エンジニアへの質問無制限
  • オンラインの動画学習なので時間場所を問わず勉強可能
  • 最大4回の学習サポート面談
  • 受付は1日25名までの先着制
無料なのに専属のメンターが付き、現役エンジニアへの質問も無制限という破格のサービスです。
いきなり数十万するプログラミングスクールは厳しい・・・という人のお試しに最適。
現在は無料ですがいつ有料になるか分からないので、気になる方はお早めに👇

\ 完全無料 /

ZeroPlus Gate公式サイト

先着1日25名まで!

模写コーディングで使う画像をサイトから一括で取得する方法

今回はChromeの拡張機能『Image Downloader』を使います。

これは『Chromeの設定 → 拡張機能』から検索しても見つからないので、以下ページにアクセスしてChromeに追加して下さい。

chrome ウェブストア

まずはこちらが表示されるので『Chromeに追加』をクリックします。

Image Downloader:『Chromeに追加』をクリック

Image Downloader:『Chromeに追加』をクリック

そして『拡張機能を追加』をクリックします。

Image Downloader:『拡張機能に追加』をクリック

Image Downloader:『拡張機能に追加』をクリック

そして画面右上にこちらが表示されれば追加完了です。

Image Downloader:Chromeに追加完了

Image Downloader:Chromeに追加完了

もしアイコンが表示されていなかったら右上のパズルのようなアイコンをクリックして、ピンをクリックして有効化しましょう。

Chrome拡張機能有効化

Chrome拡張機能有効化

右上にアイコンが表示されれば有効化完了です。

Image Downloader:有効化

Image Downloader:有効化

今回テストで使うのは私も参加した模写サイトとしても有名なiSaraのLPにします。

iSara[イサラ]|バンコクのノマドエンジニア育成講座

 

画像をダウンロードする

それではダウンロード手順についてですが、次のようになります。

Image Downloader:画像のダウンロード手順

Image Downloader:画像のダウンロード手順

Image Downloader:画像のダウンロード手順

Image Downloader:画像のダウンロード手順

 

  1. サイトを開いた状態で右上のアイコンをクリック
  2. 全てをダウンロードする場合チェック
  3. 『Download』をクリック
  4. 警告文を再表示しないにチェック
  5. 『Yes, Download』をクリック

ダウンロードをクリックしたら警告文が出ますが、気にせずチェックしてOKです。

警告文を翻訳すると次のようになります。

Chromeの設定をざっと見て、ダウンロード場所を検索します。 [ダウンロードする前に各ファイルの保存場所を確認する]オプションがオンになっている場合、続行すると多くのポップアップウィンドウが開く可能性があります。これを実行してもよろしいですか?」

するとダウンロードフォルダに画像が1枚ずつダウンロードされます。

背景画像について

以前はダウンロード出来るのは『imgタグ』のみでしたが、今は背景画像である『background-image』もダウンロード出来るようになったようです。

まとめ

今回は模写コーディングで使う画像をサイトから一括ダウンロードする方法を解説しました。

模写であれば適当な画像やアイコンでもいいかも知れませんが、せっかくなら同じ画像で模写したいですよね。

あとはここから少しずつデベロッパーツールに慣れていくという目的も少しあります(デベロッパーツールはWeb制作では必須です)

以上になります。

 

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-Web制作
-