こんにちはライターのニカイドウです。
先日、ECサイト・ネットショップの運営で便利なサイトを3つ紹介させていただきました。
ECサイト・ネットショップ運営で便利ツール・ソフト3つまとめ【商品ページ作成編】
ECサイト管理の仕事で、一番WEBデザイナーっぽい感じの仕事をしていると思うのが商品画像作成です。
今は主に商品の写真を使いサムネイルや紹介用の画像の作成していくことが多いです。
使用しているソフトは定番のAdobe Photoshop・Illustratorで、画像の明るさ調整などの加工や切り抜き、テキストの追加などをしています。
しかし、仕事をしていく内に、Photoshop・illustrator以外にも便利なソフトやツールを教えて貰い使う機会もありました。
今回は、わたしがECサイト・ネットショップサイトの管理の仕事で実際に使った、画像作成に便利なサイト・ツール
・画像切り抜きツール
・ファイル形式の変換
・商用利用可のアイコン素材のサイト
について紹介していきます。
【切り抜きツール】画像の背景を削除できるサイト「remove.bg」
まず1つ目の便利なサイト・ツールが、画像を背景から自動で切り抜いてくれるサイト「remove.bg」です。

サイトで紹介されているように背景を削除したい画像をドロップすると5~10秒ほどで切り抜かれ画像が表示されます。
この切り抜きがかなり丁寧ですごい!
ぱっと見た感じ不自然な切り抜きもなくキレイに画像が作られます。
また、切り抜いた画像は元がjpeg形式のファイルでもpngになります。
実際に切り抜きした画像がこちらになります。
【人】
切り抜き前
切り抜き後
人物の切り抜きが主な使い方のようですが、花など人以外のものの切り抜きも可能でした。
【バラの花】
切り抜いた画像によっては、拡大してみると背景との境界線部分がちょっと荒く見えるものがありますが、そのままの大きさで使う場合や、縮小して使う場合は問題なく使うことができます。
(わたしの場合、上記の写真2枚くらいの切り抜き具合なら使っちゃいます。笑)
わたしが仕事をする時は、基本的にデータを他の人と共有することもあるため画像の切り抜きはPhotoshopを使用しています。
しかし、画像によっては、そこまで丁寧な切り抜きではなくても大丈夫なもの(バナー用にかなり縮小して使う画像など)や、
使う期間が限られていて他の人とデータ共有することもないもの(ネットセール用の短期間しか使わない画像など)があり、そういう画像作成の時に時間短縮のために利用しています。
余談ですが、切り抜いた画像が表示された状態で、右側にある編集ボタンをクリックするとremove.bgが用意した背景と合成して画像を作ることもできます。
合成用の背景もざっと見て30種類以上ありました。
無料の商用利用可のアイコン素材サイト「icooon-mono」
2つ目の便利なサイト・ツールが、無料で商用利用できるアイコン素材サイト「icooon-mono」です。
まず、素材のアイコンが6000個以上ととても豊富です。
例えば「パソコン」と検索しただけでも、ディスプレイのパソコン、ノートパソコンなど30個以上アイコンが表示されます。
また、
・サイズ→16pxから512pxまでの7サイズ
・カラー→RGBの数値の入力か、rgbと出ている枠をクリックで色調整用のグラデーションが出てくる(自分で色調整できる)
・画像のファイルの形式→PNG・JPG・SVGの3種類で保存可能」
など他の画像と合わせて使うのにこちらで調整して作成・保存もできます。
他にもいくつか商用利用もできる素材サイトがありますが、
icooon-monoのようにサイズやカラー調整、ファイル形式まで選べるサイトは、他にはなかなかないので重宝しています。
わたしの場合、テキストと合わせて装飾にicooon-monoのアイコンを使用したことがあります。
(クリスマスシーズンに「プレゼントにおすすめ!」という文章にプレゼントのアイコンを一緒に使うなど)
PSDファイル・AIファイル変換ソフト Convertio
3つ目は、ファイル形式の変換ができるソフトConvertioです。
PSD AI 変換。オンライン フリー — Convertio
使い方はシンプルでファイルをドロップして、変換するファイル形式を選べば10秒ほどでダウンロード可能になります。(会員登録なども不要)
また、変換するファイルはPCに保存しているファイル以外に、ドロップボックス・Googleドライブ・URL引用でも対応可能です。
仕事では、Photoshopを使っていてillustrator用のai形式で保存されている素材を使いたい時に変換して
利用したことが何回かあります。
今のところ変換して問題なく使用しているのですが、ファイルの内容によっては、変換後、テキストのフォントが変わってしまうことなどがあるのでその点を踏まえて使っています。
今回即席で用意したaiファイルです。
【変換前】aiの画像(illustrator) ファイルサイズ・3.6MB
【変換後】psdの画像(Photoshop)
ファイルサイズ・2.4MB
psdファイルに変換すると、「MENU」のフォントが変わっていました。
【まとめ】 うまく便利なツールを使いこなして画像作りをしよう
実際に利用して便利だと思ったツールやソフトを紹介しました。
わたしの場合、1年くらい前まではillustrator・Photoshopなどもほぼ使ったことがない状態で、使い方を覚えるのに必死でした。
現在、仕事で画像作成をするうえで、illustrator・Photoshop以外に、補助として使える便利なツールも色々あることに気づき今回まとめていきました。
本格的にECサイト用のバナーや画像を作るとなるとやはり、illustrator・Photoshopなどの業界標準ソフトが必要です。
しかし、今回紹介したようなツールの利用でより効率よく画像作成をしていくことができます。
ECサイト・ネットショップだと大量に商品画像を作る必要がある時など、限られた時間で画像を作ってアップしていく必要な時もあります。
そんな時に、今回紹介した便利なツール・ソフトを活用して仕事をしていただけたら幸いです。