- PhotoshopやGIMPを使って画像加工してるけど難しすぎて使いこなせない！
- 動作が重すぎて作業する度にイライラする！
- PhotoshopやGIMP以外に画像加工に使える編集ソフトはないの？
こんな悩みを解決できる記事を書きました。
これまで、FotorやMOLDIVなど簡単に画像加工ができるツールを紹介してきました。
ただ、これらのツールはあくまでもテンプレートを使って画像を作っていくため、どうしてもデザインの幅に制限がありました。
一方で、PhotoshopやGIMPを使えば自由なデザインを作ることができますが、初心者には操作が難しく、また動作が重たいというデメリットがあります。
そこで今回は、
- 自由にデザインを作ることができる
- 誰でも直感的に操作ができる
- しかも動作がめちゃめちゃ軽い
と、両者のいいとこ取りをしたようなツール「Adobe XD」をご紹介させていただきます。
実際、私もずっとPhotoshopを使って画像加工をしていましたが、最近は完全にAdobe XDに乗り換えてしまいました。
BUYMAの商品画像を加工する際に必要な機能に絞って、かなり丁寧に使い方を紹介しますので、ぜひ読み進めてみてください！
それでは、早速いってみましょう！
目次
Adobe XDとは？
ほとんどの方が、そもそも「Adobe XD」って何者！？という感じだと思いますので、簡単に説明させていただきます。
Adobe XDはPhotoshopやIllustratorで有名なAdobe社が提供する画像編集ソフトの1つです。
PhotoshopやIllustratorに比べると機能が圧倒的に少なく直感的に操作できるので、デザイナーではない人や初心者の方でも扱いやすいツールになっています。
PhotoshopやIllustratorに比べると歴史が浅いので、初耳という方も多いと思いますが、Webデザインやアプリ開発の現場では多くのデザイナーが愛用しているツールになります。
なぜAdobe XDがおすすめなのか？
Adobe製品だけど無料で使える
まず1つ目は無料で使えるという点です。
Adobe製のソフトと聞くとお金がかかるイメージを持つ方も多いと思いますが、Adobe XDは無料で使うことができます。
無料プランだと一部使えない機能はありますが、BUYMAの出品画像を作る分にはまったく必要のない機能になりますので、無料プランで大丈夫です！
Adobe XDの料金プランはこちら
とにかくサクサク動く！作業ストレスが全くない！
これは、PhotoshopやGIMPを使ったことがある方しか実感できないかもしれませんが、Adobe XDは動作がめちゃめちゃ軽いです。
感動するレベルです！
商品画像を作ろうと思ってAdobe XDを起動するとすぐに立ち上がってくれますし、作業の途中で動作がいきなり遅くなったりすることもほとんどありません。
データ保存にもPhotoshopやGIMPほど時間がかかることがなく、軽さで作業時間が短縮されるだけでも大きなメリットだと思います。
ややこしい機能がない！
こちらがAdobe XDの操作画面になります。
めちゃめちゃシンプルですよね。
Adobe XDには「図形を描く」「線を引く」「文字を書く」くらいの機能しかないのですが、機能が少ない分、誰でも簡単に使えるツールになっています。
PhotoshopやGIMPは機能が多すぎてソフトの使い方から勉強する必要がありますが、Adobe XDならこの記事にさらっと目を通すだけで使えるようになります。
学習コストがほとんどかからないのもメリットの1つですね。
実際にAdobe XDで画像加工をしてみよう！
少し前置きが長くなってしまいましたが、ここからAdobe XDの使い方について解説していきます。
Adobe XDを使うには、お使いのパソコンにAdobe XDをインストールする必要があります。
今回、インストール方法の説明は省略させていただきますのが、以下の記事にインストール方法がわかりやすくまとまっていますので、よかったら参考にしてみてください。
・Adobe XDのインストール方法はこちら
・Adobe XDのダウンロードはこちら
インストールが完了したら、早速画像を作っていきましょう。
今回は、以下のような画像を作ってみたいと思います。
画像のサイズを設定する
まずは画像のサイズ（＝アートボードのサイズ）を設定します。
Adobe XDを起動するとこのような画面になると思いますので、「カスタムサイズ」をクリックします。
するとこのような画面が表示されますので、画面左側にある「アートボートツール」を選択します。
画面上で四角形を描けるようになりますので、適当な大きさの四角形を作ります。
画面右上の数値が四角形の大きさを表しています。
これが画像のサイズになりますので、今回は「W700」「H700」で設定します。
BUYMAの商品画像の大きさについて詳しく知りたい方はこちら
枠線を付ける
次に画像に枠線を付けていきます。
枠線を付けるときは長方形ツールを使います。
長方形ツールを選択して適当に四角形を作ります。
※わかりやすするために四角形の色を赤にしています。
大きさを先ほどと同じように「W700」「H700」に設定します。
線の太さを変更します。
線の色を変更します。
塗りをなしにします。
ロゴ画像を取り込む
続いてロゴ画像を取り込みます。
尚、ロゴ画像については事前にネット上からダウンロードしてきたものになります。
ロゴをドラック＆ドロップします。
このままだとロゴが大きすぎるので少し小さくします。
ロゴの上でクリックすると画像の周囲に青い線が表示されるます。
その状態で、左上、左下、右上、右下のいずれかにマウスを当てると、矢印が表示されて大きさを変更することができるようになります。
文字を書く
文字を書くための下地を作っていきます。
枠線を作ったときと同じように四角形ツールを選択して、適当な大きさの四角形を描きます。
線をなしにします。
塗りを変更して真っ黒にします。
サイズを変更します。
幅は画像のサイズにあわせて「700」にして、高さは適当に「150」としておきます。
画像の下部に移動します。
ちなにみ、このボタンをクリックすると一瞬で画像の一番下に整列させることができます。
文字を入力していきます。
文字ツールを選択します。
画面上でクリックする文字を入力できるようになるので、文字を入力していきます。
今回は「手元に1点在庫あり」という文言を入れたいと思います。
この状態だと文字が小さいのも文字を大きくします。
文字の色を変更します。
お好みでフォントを変更することもできます。
フリーフォントをパソコンにインストールすれば、自動的にAdobe XDでも使えるようになりますので、お気に入りのフォントで文字を入力することも可能です。
背景画像を使う
次に背景画像を入れていきます。
画像は、予めLOUIS VUITTON（ルイ・ヴィトン）の公式サイトからダウンロードしてきたものになります。
ロゴ画像と同様にドラック＆ドロップでAdobe XDに取り込み、画像のサイズを「W700」にします。
この状態だと背景画像が一番上にきていて、ロゴや枠線が見えなくなってしまっているので、一番下に移動させます。
といっても操作は簡単で画像の上で右クリックをして「最背面へ」を選択すればOKです。
このままだと背景の印象が強すぎるので画像を少し透明にします。
商品画像を配置する
最後に、商品画像を配置します。
商品画像についてもロゴ画像や背景画像と同じようにドラック＆ドロップで取り込むことができます。
ただ、ここで注意しなければいけないのが、ほとんどの商品画像は背景が白くなっているという点です。
そのまま取り込むとこんな感じになってしまいます。
これだとあまりカッコよくないので背景を透明にしたのですが、Adobe XDには背景を切り抜く機能がありません。
そんなときは以前ご紹介した「remove.bg」を併用することでAdobe XDの弱点を補うことができます。
先ほどの画像をremove.bgにアップして背景を透明にします。
詳しい使い方は「商品画像の背景を一瞬で透明にする方法【3秒で白抜き！】」で解説していますので、よかったら参考にしてみてください。
remove.bgから背景が透明になった画像をダウンロードして、再度Adobe XDに取り込みます。
今度はいい感じに商品画像を配置することができました。
あとは、画像の大きさや位置を調整して完成です。
画像を保存する
画像が完成したら保存していきます。
まずは、画面左下のレイヤーアイコンをクリックします。
アートボードを右クリックします。
選択した画像の書き出しをクリックします。
名前：何でもOK
フォーマット：JPGを選択
画質：100％のままでOK
書き出し先：デザインを選択
を設定して書き出しをクリックします。するとパソコンに画像が保存されます。
以上で作業完了となります。おつかれさまでした。
あとは、そのままBUYMAの出品画面から画像をアップロードしてもらって大丈夫です。
まとめ
いかがでしたか？
今回は、Adobe XDを使った画像加工の方法をシェアさせていただきました。
画像加工にはこだわりたいけど、PhotoshopやGIMPのような難しい画像編集ソフトは使いたくないという方に最適なツールということがお分かりいただけたかと思います。
繰り返しになりますが、Adobe XDは本当に直感的に使えるツールなので、本や動画で使い方を勉強する必要は一切ありません。
この記事で基本的な使い方はすべてお伝えしたので、あとは騙されたと思って一度使っていただければと思います！笑
ダウンロード先のURLも貼っておきますね。
https://creativecloud.adobe.com/apps/download/xd
本日は以上になります！
最後までお読みいただきありがとうございました。
