デザインねこ

現役グラフィックデザイナーがお届けするデザインの時短ネタや参考ネタ、HOW TOなどのお役立ち情報から、ハンドメイド、インテリアや暮らし、ネコとの生活など様々なジャンルの記事を2人と1匹でお届けする(デザインよりの)雑記ブログ。

ページ内の画像を丸ごとダウンロードできるエクステンション「imagedownloader」

こんにちは、今日もよろしくお願いします、デザインねこ@toranekodesignです。

f:id:toraneko-design:20171202235959j:plain

今回はまたもやエクステンションの紹介です。つい先日なのですが、本業の方でふらっと仕事をふられました。内容としては、とある企業さんの商品のパッケージ(プライベートブランドってやつですね)のデザインをしてほしいと。まあ依頼をしてきた担当者の忙しかったり、色々あるのはわかるのですが、仕事のふり方が「まあ任せるから、好きなようにやっちゃってよ」的な感じで雑なんですよね。雑。極めて雑。以前に別の案件の時に「こういう仕事のふり方をしてないでほしい」という話をしていたのですがね。 と、すいませんここまではやや愚痴も含まれております(笑)

ということがあって、パッケージのデザイン提案をすることになりました。もちろん該当商品の知識もなく情報すらない。全く好き勝手に作っても、説得力が持たせられない。そんなときは一般的には簡易的にでも市場にある競合商品の調査が必要になります。そんな際に使える便利なエクステンションを今回はご紹介いたします。

Image Downloader

今回ご紹介するのがImage Downloaderというエクステンション。平たくいうと画面にある画像をまるごとダウンロードしちゃうというエクステンションです。もちろんサイズなどの条件をつけて画像を絞り込んだりすることも可能。今回のケースでは競合他社のパッケージを収集すべく使いました。

f:id:toraneko-design:20171202235029j:plain

まずはchrome web storeでダウンロードします。  

f:id:toraneko-design:20171202235059j:plain

ダウンロード後、機能拡張に関するアラートが出ますが気にせず拡張機能を追加」ボタンをクリックします。  

f:id:toraneko-design:20171202235125j:plain

その後、拡張機能の初期設定画面が表示されますが、特に設定を変えずに使い始めてOKです。気に入ったようでしたらドネーション(寄付)をするときっと作者の方に喜ばれるのではないかと。ちなみに寄付しなくても使えます。

 

f:id:toraneko-design:20171202235220j:plain

今回はサンプルとしてikeaの家具のページにしました。この商品画像のデータのみを抽出することを目標とします。

f:id:toraneko-design:20171202235257j:plain  

まずはウィンドウ右上のアイコンをクリックします。

f:id:toraneko-design:20171202235328j:plain  

小さいウィンドウが開いてページにある画像がダウンロードのため選べるようになっています。IKEAのページでもヘッダーからアイコンまですべての画像をダウンロードできるようになっています。

f:id:toraneko-design:20171202235357j:plain  

ここから画像のサイズで絞り込んでいきます。対象となるサイズは一度デスクトップにドラック&ドロップして、マックなら「情報を見る」ウィンドウズなら「プロパティ」で画像のサイズを調べましょう。となっているはずです。 この数字をもとにスライダーを動かして❶のwidth(幅)とheight(高)を指定していきます。 該当するサイズに絞ると商品画像に絞り込まれてることがわかります。ここで❷のselect ALLにチェックを入れます。これで絞り込まれた画像が一括でダウンロード出来ます。(select ALLにチェックを入れなければ個別にダウンロードすることも可能です) ダウンロードするデータは「ダウンロードフォルダ」に入りますが、❸でダウンロードフォルダ内でサブフォルダの指定をすることも可能です。こちらのウィンドウにフォルダ名を入力するとそこに画像がダウンロードされます。今回はIKEAから抽出するので「ikea」としましょう。 そのほかにも ❹url名でフィルタをかけて画像を絞り込んだり ❺ページの中のリンク先の画像を収集する。(下記の画像のような画像をダウンロードする)

f:id:toraneko-design:20171202235518j:plain  

といった機能もあるので、収集したい内容に合わせて調整できます。

f:id:toraneko-design:20171202235547j:plain  

ということで説明と準備が完了したのでダウンロードしましょう。通常のダウンロード時と同様に、対象の画像が一気にダウンロードされていきます。

f:id:toraneko-design:20171202235609j:plain  

指定したIKEAフォルダがダウンロードフォルダ内にできています。 f:id:toraneko-design:20171202235628j:plain  

さらにその中にダウンロードした画像が入っています。これにてダウンロードが完了です。

まとめ

今回は、ページ内の画像を丸ごとダウンロードできるエクステンション「imagedownloader」のご紹介でした。こんな風にサクッと対象の競合商品を集めて、価格ともう一つの軸を作ってマッピングしたらデザイン提案の追加資料になりますよ。とはいえ、これくらいの資料くらいは社内の担当で事前に用意しろよクソ野郎。。。(忙しいのはみんな一緒なんだからふざけんじゃねえぞ、、、と) おっと。(笑) ということで、今回はこのへんで。