いーぐるです。
今回は「BOOTHの商品写真がパッとしない…」と悩んでいる人に向けて記事を書きます。
おしゃれな写真を作りたいけど、デザインのスキルが無いと落ち込みますよね…。
「私には無理だ…」って。。
そんな人におすすめしたいのは、『Canva（キャンバ）』という無料のデザインツールです。
これはCanvaで編集した商品の写真です。↓
用意されていた「白クマの写真」を差し替えて作りました。
Canvaにはすでに完成したデザインが数多く用意されています。
デザインをイチから作らなくても、完成しているデザインを少し弄るだけで「良い感じ」の写真が作れます。
以上の理由から「私にはデザインのスキルが無いから…」と悩んでいる人でも大丈夫です。
『Canva』は商用利用も可能であり、ソフトをダウンロードする必要もなく、ウェブ上で使えるのが特徴です。
この記事では「3Dモデルを販売したい方」を対象に、
- 商品の写真を切り抜く
- Canvaで写真を編集する
- Canvaの編集機能・商品を見てもらうコツ
という順番でお伝えします。
初めてCanvaに触れる人が迷わないように、初心者目線で使い方をお伝えします。
この記事を読めば、「お客さんに商品を見てもらうコツ」がわかるようになります。
目次
- 【ステップ1】Unityで3Dモデルの写真を撮る・ペイント3Dで切り抜く
- 【ステップ2】Canvaで写真を編集する！おしゃれな写真が簡単に作れます！
- 【無料】Canvaの会員登録をする
- 【基本1】デザインを『1000×1000』で作成する
- 【基本2】テンプレートを選ぶ
- 【基本3】文字を編集する
- 【基本4】写真を合わせる
- 【基本5】完成したデザインをダウンロードする
- 【？】デザインの編集を中断したい時は？
- 【？】文章を追加したい時は？
- 【？】文字の上に写真が重なってしまう時は？
- 【？】背景にした写真の位置を調節したい時は？
- 【？】シンプルな背景は無いの？
- 【？】デザインを複製・削除・追加したい時は？
- 【？】写真や素材を半透明にできるの？
- 【？】矢印や線を追加したい時は？
- 【？】写真の角度を変えることはできるの？
- 【？】デザインの一部の要素を抜き取りたい時は？
- 【？】「写真が暗い」と感じる時は？
- 【？】「なんとなくパッとしない時は？」
- 【？】文章が読みづらい時は？
- 【BOOTH】商品に興味を持ってもらうコツは「写真の役割を決める」ことが大切です！
- まとめ：Canvaで3Dモデルの写真を編集しよう！
【ステップ1】Unityで3Dモデルの写真を撮る・ペイント3Dで切り抜く
（まずはUnityから写真を切り抜きます。↑）
今回は【AFK】ラブレターの無料版を使って解説します。
あなたが販売する3Dモデルを用意して進めてください。
- Unityに3Dモデルをインポートする
- 3Dモデルの写真を撮る
- ペイント3Dで切り抜く
という手順で進めます。
この記事ではスクリーンショットを撮って、ペイント3Dで切り抜く…という方法で解説します。
もうみんな知ってたら恥ずかしいんですが、
Windowsの純正の切り抜き機能、めっちゃ便利😭✨写真選択⇒ペイント3Dで開いて動画の通りにするだけ
整ってる画像だと1分かからないし精度も悪くないので
ちょっとした画像編集ならこれで事足りてしまう…！こういう便利情報もっと欲しい…🤔 pic.twitter.com/EkqKfyasHI
— おき@3DCG人事 (@yoru_3dcg) January 22, 2022
ペイント3Dの『マジック選択』機能が、写真を切り抜く一番簡単な方法です。
1.Unityに3Dモデルをインポートする
- Unityを起動する
- 3Dモデル等をインポートする※
- Hierarchyに3Dモデル等を入れる
ところまで進めます。
アバターと一緒に撮影する方は、アバターもインポートしてください。
「これから3Dモデルを作る予定」という方は、こちらの記事を参考にどうぞ。
Blenderで3Dモデルを作り、BOOTHで販売するところまでを初心者向けに解説しています。
2.3Dモデルの写真を撮る
- カメラの背景を単色にする
- スクリーンショットを撮る
- ペイントに貼りつける
ところまで進めます。
カメラの角度を合わせる
Hierarchyの中にある『Main Camera』を選択します。
Camera Previewを見ながら、3Dモデルがカメラの撮影範囲に収まるように位置を合わせます。
カメラの角度は、
- 十字の矢印マーク
- 円を描いている矢印マーク
をそれぞれ選択して合わせてください。
カメラの背景の色を変える
『Main Camera』を選択して、
- Clear Flagsをクリック
- 『Solid Color』を選択
- Back Groundの色を変える
ところまで進めます。
背景の色を単色にすることで、写真を切り抜きやすくなります。
『Solid Color』は3Dモデルが目立つ色を設定してください。
ライトで照らす
必要に応じてライトを当てます。
商品が明るい方が、第一印象が良くなります。
- Hierarchyで右クリック
- 『Light』→『Spot Light』
という手順でライトを出せます。
角度を調節して商品が明るくなるよう調節してください。
スクリーンショットを撮る
Unityの『Game』をクリックして、Camera Previewが全体に映し出された状態にします。
『Game』のままスクリーンショットを撮影します。
『Scene』で撮影しない理由は、輪郭がガタガタになってしまうからです。
スクリーンショットはキーボードの
- 『PrintScreen』を押す方法
- 『Fn』＋『PrintScreen』を押す方法
- 『Win』＋『PrintScreen』を押す方法
などがあります。
よくわからない人は、こちらの記事にわかりやすく書かれています。
「マウスホイールでズームした時に、3Dモデルが消えてしまう…」という人は、
キーボードの『alt＋マウス操作』でゆっくり近づくことができます。
ペイントに貼りつける
スクリーンショットができたら、ペイントを開いて貼り付けます。
『貼り付け』をクリックしても、何も起こらない…という人は、スクリーンショットが上手くできていません。
キーボードによってスクリーンショットの方法は変わります。
押すボタンの組み合わせを変えて、再度スクリーンショットを撮ってください。
3.ペイント3Dで切り抜く
スクリーンショットが撮れたら
- ペイント3Dを開く
- マジック選択で切り抜く
- 『透明なキャンパス』に貼りつけて保存する
ところまで進めます。
もうみんな知ってたら恥ずかしいんですが、
Windowsの純正の切り抜き機能、めっちゃ便利😭✨写真選択⇒ペイント3Dで開いて動画の通りにするだけ
整ってる画像だと1分かからないし精度も悪くないので
ちょっとした画像編集ならこれで事足りてしまう…！こういう便利情報もっと欲しい…🤔 pic.twitter.com/EkqKfyasHI
— おき@3DCG人事 (@yoru_3dcg) January 22, 2022
2番の『マジック選択で切り抜く』ところまでは、こちらのツイートも参考になります。
ペイント3Dを開く
まずスクリーンショットを貼りつけた状態で『ペイント3D』を開きます。
変更内容は『保存しない』でOKです。
マジック選択で切り抜く
『マジック選択』をクリックして、3Dモデルだけが残るようにして『次へ』をクリックします。
（※ギリギリまで枠を狭める必要はありません。適当でOKです。）
切り抜かれる範囲が水色の線で囲われます。
「良い感じ」だと思ったら、『完了』をクリックすると切り抜けます。
- 余計な部分を消したい：『削除』を選択
- 消え過ぎた部分を修正したい：『追加』を選択
- ※マウスホイールでズームも可能
です。
『削除』と『追加』を使って、直感的に切り抜く範囲を調節できます。
丁寧に線をなぞる必要はありません。
適当に「シャー」っと線を書いて、削除・追加ができます。
やってみるとわかりますが、消え方がかなり大雑把です。
上手くできない時は、Unityのカメラの角度を調整して、細かい部分が出ないように撮影し直してください。
透明なキャンバスに貼りつける
切り抜いた写真の上で右クリックして『コピー』を選択します。
左上の『メニュー』から『新規作成』を選択してください。
「作業内容を保存しますか？」と聞かれるので、『保存しない』を選択します。
（※『保存する』を選択すると、切り抜かれて残った背景が保存されてしまいます）
透明なキャンバスに貼り付ける
新しい画面が開いたら
- 『キャンバス』を選択
- 『透明なキャンバス』をオンにする
- キャンバスのサイズを1000×1000にする※
- 右クリックから『貼り付け』を選択
します。
BOOTHの写真は1000×1000がピッタリなので、切り抜いた写真も同じくらい大きめにして貼り付けましょう。
Canvaで編集する際に、小さい画像を大きくすると画質が粗くなってしまうためです。
切り抜いた写真を保存
- 『メニュー』から『名前を付けて保存』を選択
- 『コピーとして保存』→『画像』を選択
- 『保存』を選択
することで写真が切り抜けました。
切り抜いた写真は『透過写真』として、背景と合わせることができます。
【ペイント3D】マジック選択のデメリット
（狐雪ちゃんの髪の毛：水色の線が上手に囲えていない↑）
ペイント3Dのマジック選択は、狭いところを切り抜くのが苦手です。
具体的には
- アバターの髪の毛
- 複雑な構造の衣装
などを切り抜くのは難しいと思ってください。
解決策は『Unity Recorder（無料）』がおすすめです。
こちらの記事で『Unity Recorder』を用いた撮影方法も解説しています。
アバターにポーズをとらせてUnityで撮影したい場合も、こちらの記事が参考になります。
【ステップ2】Canvaで写真を編集する！おしゃれな写真が簡単に作れます！
（こんな感じに編集できます。↑）
Canvaで写真を編集していきます。
基本的な使い方を解説した後に、便利な編集機能をご紹介します。
【無料】Canvaの会員登録をする
Canvaにアクセスして、登録をクリックして会員登録をしてください。↑
- メールアドレス
- Apple
等のアカウントで登録できます。
冒頭でもお伝えしましたが、サービスは無料で使えます。
僕も4年くらいずっと無料で使っています。
【基本1】デザインを『1000×1000』で作成する
作ったアカウントでログインします。
『デザインを作成』から『カスタムサイズ』を選択します。
- 幅：1000px
- 高さ：1000px
で『新しいデザインを作成』をクリックします。
【基本2】テンプレートを選ぶ
テンプレートから好きなデザインを選びます。
『テンプレートを検索』から
- キーワードで絞り込む
- 色で絞り込む
ということもできます。
マウスホイールでスクロールして、テンプレートをドラッグ＆ドロップすると編集できます。
操作を間違えた時はキーボードのctrl＋Zで元に戻せます。
【基本3】文字を編集する
- 文字をダブルクリック：文章の編集
- 文字を右クリック：『削除』
- フォントの変更
- 文字の大きさの変更
- 文字の色を変更
などができます。
商品のイメージに合ったデザインに編集しましょう。
【基本4】写真を合わせる
- 画面左端の『アップロード』をクリック
- 『メディアをアップロード』をクリック
- 切り抜いた写真をドラッグ＆ドロップする
ことで写真を合わせられます。
写真が大きすぎる時は、隅の〇をマウスで掴んでサイズを調節できます。
背景をVRChatの写真に差し替えただけで「良い感じ」の雰囲気になりました。
【基本5】完成したデザインをダウンロードする
デザインが完成したら、
- 『共有』をクリック
- 『ダウンロード』を選択
- 『完了』を選択して『ダウンロード』
をクリックして保存できます。
Canvaの詳しい使い方は後述しておりますので、使いこなしたい方は読み進めてください。
有料のデザインの見分け方
Canvaのデザインの多くは無料で使えますが、一部に有料のデザインが含まれています。
プロと書かれた『王冠のマーク』が有料デザインの目印です。
テンプレートだけでなく、
- 素材
- 写真
- フォント
などにも含まれています。
有料のデザインが含まれている場合、ダウンロードする際にお金を請求されます。
【？】デザインの編集を中断したい時は？
編集したデザインは自動的にウェブ上に保存されます。
デザインに手を加えると、約5秒程で「すべての変更は保存されました」と表示されます。
上記の理由から『データの保存ボタン』はありません。
【？】文章を追加したい時は？
画面左端の『テキスト』を選択してください。
見出しを選択すると、編集中のデザインに追加されます。
【？】文字の上に写真が重なってしまう時は？
3Dモデルの写真を右クリックして、『背面へ移動』を選択してください。
文字を選択して『前面へ移動』をクリックしてもOKです。
素材や写真を追加した際に「文字が隠れて見えない…」という場面で重宝します。
【？】背景にした写真の位置を調節したい時は？
背景となった写真をダブルクリックすることで、写真の位置を調節できます。
写真のサイズが編集中のデザインよりも大きい場合に重宝します。
【コツ】背景が上手く選択できない時は？
背景が上手く選択できない時は、デザインの隅をダブルクリックしてください。
中央をクリックすると、文字などが選択されてしまいます。
【？】シンプルな背景は無いの？
画面左端の『背景』を選択してください。
お好みの背景を選んで編集できます。
【？】デザインを複製・削除・追加したい時は？
- 『ページを複製』
- 『ページを削除』
- 『ページを追加』
を選択します。
1つのプロジェクトで50枚までデザインを追加できます。
『ページの複製』は元のデザインを残しつつ、片方のデザインを編集して比較できます。
上下に並べてスクロールして、見比べながら編集できます。
【？】写真や素材を半透明にできるの？
『透明度』を調節してください。
〇をマウスで左右に動かすことで、透明度を自由に調節できます。
【？】矢印や線を追加したい時は？
画面左端の『素材』を選択して、『矢印』で検索してください。
検索結果から素材を使うことができます。
【？】写真の角度を変えることはできるの？
写真を選択した状態で、矢印マークを操作して角度を調節できます。
「反転」から素材を反転させることもできます。
【？】デザインの一部の要素を抜き取りたい時は？
- Aのデザインから一部の要素を、
- Bのデザインに移したい…
という場合もありますよね。
やり方は簡単です。
- テンプレートの要素を選択する
- 右クリック→『コピー』を選択
- 移したいデザインの上で右クリック→『貼り付け』を選択
すれば、一部の要素を別のデザインにコピペできます。
編集の幅が広がるので、ぜひ覚えておいてください。
【？】「写真が暗い」と感じる時は？
「撮影の段階では明るいのに、Canvaでは暗くなる…」という時は、
- 暗い部分を選択する
- 『画像を編集』をクリック
- 『明るさ』等を編集
してください。
テンプレートの画像を差し替えると、元の画像の明るさが適用されてしまいます。
【？】「なんとなくパッとしない時は？」
枠があるだけで、デザインがまとまって見えるようになります。
「写真を差し替えると、微妙なデザインになってしまう…」
と悩んでいる人は、線の枠を使ってみてください。
【？】文章が読みづらい時は？
文章の背景に『帯』を入れると文字が読みやすくなります。
不格好になってしまう場合は、帯の透明度を下げて後ろのデザインが透けて見えるようにしても良いですね。
【BOOTH】商品に興味を持ってもらうコツは「写真の役割を決める」ことが大切です！
（シンプルなデザイン・アバターが印象的なデザイン↑）
最後に「BOOTHで商品を見てもらうコツ」をお伝えします。
結論から言うと、『写真に役割を持たせる』ことが大切です。
- 1番目の写真：お客さんに興味を持ってもらう役目
- 2番目から：商品の詳細を説明する役目
だと考えてください。
「UnityやVRChatの写真は貼っても良い」のですが、1枚目から貼るべきではありません。
具体的には、
- 1番目：Canvaでおしゃれなデザインを作る
- 2番目から：UnityやVRChatの写真を貼る
という感じに考えてください。
1番目の写真は商品を大きく見せるために、あえて枠からはみ出すように編集するのもおすすめです。
2番目からは、「商品の全体を見てもらうように編集する…」といった具合です。
お客さんの気持ちを書くと、以下のようになります。
「おっ？この商品良い感じだな！」（商品を選択）
「ふむふむ。こんな感じなのか～」（2枚目以降の写真を見る）
「VRChatでも使えるんだね！」（VRChatの写真）
という感じです。
これは実際に僕が物を買う時の「心の移り変わり」を文章にしました。↑
重要なのは「1枚目の写真で印象に残らなけば、商品を見てすらもらえない」ということです。
【改善】「全然♡スキがつかない…」その理由とは？
「BOOTHに出品したけど、全然♡スキがつかない…」
という方は、1番目の写真の役割が果たせていない可能性があります。
少し例え話をしましょう。
あなたが美人・イケメンの写真を友達から見せられたとします。
「ねぇ、この人めちゃくちゃ良くない？」
「う～ん、、そうかな…（正直微妙かも…）」
と感じた経験は誰しもあると思います。
「すごく良い」と感じれば、年齢や性格など「もっと詳しく」知りたくなりますが、「微妙」だと感じた人に興味は湧きませんよね。
人はこのように、パッと見て「良い・悪い」の判断を一瞬で行います。
1番目の写真に『適当なスクリーンショット』を貼っていると、一瞬で「興味ねぇわ…」と判断されてしまいます。
人も商品も第一印象が大切です。
【改善】マイナスな印象を与えてしまう写真とは？
- 1番目に適当なスクショを貼っている。
- 写真のサイズが合っていない。
- 「どんな商品なのか分かりにくい」写真
はマイナスな印象を持たれてしまうと思ってください。
1番目の写真が雑だと「商品も適当に作ったんだろうな…」という印象になってしまいます。
Unityの写真を貼るのは良いのですが、1番目の写真は興味を引くデザインを貼りましょう。
それだけでお客さんの反応は大きく変わりますよ。
まとめ：Canvaで3Dモデルの写真を編集しよう！
- ペイント3Dで写真を切り抜く
- Canvaで編集する
- 写真に役割を持たせて編集する
という内容をお伝えしました。
Canvaのテンプレートを使うだけで商品の印象はガラリと変わります。
「販売したけど売れなかった」という商品も、見せ方を変えるだけで売れる確率がグッと上がります。
ぜひ今日から試してみてくださいね。
おしまい。
※記事で使用させていただいたアバター
