Figma を使ってECサイトの商品画像をキレイにしてみた。
はじめに
本記事は、初心者エンジニアな私が、趣味で開発しているECサイトの商品画像をFigma を用いてカッコよくしてみた様子を備忘録も兼ねて記していきますー！
最初に結論
商品画像のサイズ、背景の有無、位置を揃えることで全体的に統一感が出て実施前よりも洗練された印象になりました！ （ちなみに、インテリアが好きなので歴史的名作家具と呼ばれる商品をメインに掲載しています。値段が高い。。）
利用したツールについて
Figma というデザインツールに、remove bg という背景透過をするためのプラグインを入れて作成しています。
■Figma 公式 www.figma.com
■remove bg 公式 www.remove.bg
やったこと
- 背景透過
- 商品画像のサイズ調整
- 商品位置の調整
こちらが私が作業しているFigmaのページなのですが、1つの商品画像は [600 × 450] の大きさで統一し、フレームに対して縦横のマージンをできるだけ合わせるように配置しています。 特に、形が左右非対称の場合、違和感が出ないように縦横のマージンを調整するのは意外に難しいです。。（笑）
余談
Figma には以前から触れたことがあったのですが、久しぶりに利用するということで以下のコンテンツで勉強させていただきました。 Youtube で気軽に観ることができるので、おすすめです〜！ （デザイン初心者レベルから、上級者？レベルまでの内容を紹介してくれています！）
さいごに
ここまでお読み頂きまして、ありがとうございましたー！ 簡単なFigma でできることの紹介のような形になってしまいましたが、私のような初心者エンジニアがポートフォリオを作る際に、若干のデザインを凝ることで見栄えが格段に良くなるので結構おすすめです。
この記事が誰かのためになれば嬉しいですー！
