記事内に商品プロモーションが含まれる場合があります
パソコン画面などに自分の用意した写真をはめ込んだ画像（モックアップ）を、Canvaなら無料で、ワンクリックで作成できます。他にもTシャツやマグカップ、ポスターなどのモックアップも作れます。
1.Canva「Mockups」でできること
「モックアップ」とは、このようにパソコンやスマホの画面などに画像をはめこんだものです。よくアプリやWebサービスのサイトなどで見られますよね。
Canvaなら、「Mockups」というアプリ（Canva内の機能）を使えば、とても簡単にモックアップ画像を作成できます。
- モックアップの枠を選ぶ
- モックアップにしたい画像をアップロード
- はめ込む画像を選択して位置調整
たったこれだけで、シンプルなモックアップもおしゃれなモックアップも作れます。
作れるモックアップはたくさんの種類があり、大カテゴリーは「テクノロジー（PCやスマホ等）、パッケージ、印刷物、アパレル、ホーム＆リビング」のように分かれています。
たとえば、こんなスマホのモックアップや…
パソコン画面のモックアップもたくさんあります。
こんなマグカップのモックアップも。
こんなポスターのモックアップも作れます。
とにかく簡単なので、パソコンに不慣れな人でも大丈夫です！
2.モックアップの作り方
それでは、CanvaのMockupsの使い方を、実際の画面でモックアップを作りながら解説します。
なお、Canvaを使用するには無料の会員登録が必要です。まだ会員登録していない場合は、下の青いボタンから登録してください。
モックアップ画像の作り方は２パターンある
Canvaでモックアップ画像を作る場合、「どこからモックアップのアプリにアクセスするか」で操作が２パターンあります。
- ホーム画面からモックアップアプリを開く
- 編集画面からモックアップアプリを開く
どちらでも問題ありませんが、①の場合でも最後に編集画面でモックアップ画像を開くことができるので、基本的には①の「ホーム画面からモックアップ画像作成アプリを開く」でOKです。
ホーム画面から開いたモックアップアプリからだと、「枕」でこんなに表示されますが…（まだまだ下にスクロール可能）
編集画面から開いたモックアップアプリでは、これだけ（すべて無料）です。
どうしても無料でやりたいという場合は、②の方法で「編集画面からモックアップアプリを開く」のがよいでしょう。その方が探しやすいです。
ちなみに、ポップなイラストっぽいモックアップは、ほぼ編集画面から開いたモックアップアプリにしか出てきません。そのうち修正されるかもしれませんが、謎です…。
ホーム画面からモックアップ画像を作る方法
まずはCanvaのホーム画面からモックアップ作成アプリを開いて、モックアップを作る方法を解説します。
モックアップアプリを開いてテンプレートを探す
Canvaのトップページを開いたら、左メニューの「アプリ」（なければ「もっと見る」の中にあります）をクリックします。
下にスクロールして、「Mockups」をクリックします。
これで、モックアップのアプリを開くことができます。
アプリ内では、キーワード検索や、カテゴリーでモックアップを探すことができます。
実際に、こんな感じのクッションのモックアップを作ってみましょう。
よければCanvaを開いて、何か適当な写真を用意して、一緒にやってみてくださいね。
カテゴリーの「ホーム＆リビング」をクリックし、「枕」をクリックします。
一覧でモックアップが表示されるので、気に入ったモックアップの画像をクリックします。
このような画面になるので、「選択」をクリックします。
モックアップにしたい画像をアップロード
続いて、モックアップにしたい画像をCanvaにアップロードします。
右上の「ファイルをアップロード」をクリックします。
パソコンのフォルダが開かれると思うので、用意しておいた画像を選択してアップロードしましょう。
アップロードされた画像をクリックして、「次へ」をクリックします。
モックアップになりました。画像の調整または保存ができますが、上下の余白が気になるので、まずは「画像の調整」をクリックしてみましょう。
モックアップにする部分を調整
「画像の調整」をクリックするとこの画面になります。位置や大きさなどを変更できます。
画像の大きさを変更するには、四隅の丸を調節したい方向へドラッグするだけでOKです。
画像上をクリックしたまま動かせば、切り抜き位置の調整ができます。
完了したら、「保存」をクリックしましょう。
モックアップを保存
この画面に戻るので、「モックアップの保存」をクリックします。
そのままダウンロードする場合は、「ダウンロード」をクリックすればパソコンのフォルダ内に保存されます。「デザインに使用」は、モックアップ画像を使ってCanvaでデザインを作成できます。
「デザインに使用」をクリックすると、作成するデザインのサイズを選べます。
サイズをクリックすると「そのサイズでの白紙のデザイン上に、モックアップ画像がのった状態の編集画面」になります。
あとはモックアップ画像そのものの画像編集（背景除去など）や、その他デザインを編集することが可能です。
なお、モックアップ画像は全体でひとつの画像として扱われるので、画像編集したときは、はめ込み画像だけでなくモックアップ画像全体に加工が適用されます。注意してくださいね。
編集画面での画像のダウンロード方法は、こちらの記事で解説しています。
Canvaの編集画面からモックアップを作成する方法
ここまでは１つめの方法として、「ホーム画面からモックアップアプリを開いて、モックアップ画像を作成する」方法を解説しました。
２つめの方法として、すでに編集画面を開いている状態からモックアップアプリを開いてみます。
編集画面左メニューの「素材」をクリックし、下にスクロールすると「モックアップ」があります。クリックしましょう。
このように、モックアップ作成アプリのメニューが開きます。
カテゴリーをクリックしたり、キーワード検索したりして好みのモックアップを探しましょう。ただし、先述したように、無料のモックアップのみ表示されます。
好みのモックアップが見つかったら、クリックしてデザイン上に表示させます。
あとは、「アップロード」から画像をドラッグしてモックアップのテンプレート上にドロップすれば、モックアップ画像になります。
モックアップにしたい画像（この例なら猫の画像）をまだアップロードしていなければ、編集画面上に使いたい画像をドラッグ＆ドロップすれば、Canvaにアップロードできます。
「ホーム画面から」と「編集画面から」の違いは？
表示されるモックアップの数
先述したように、ホーム画面からMockupsを開いたほうがモックアップ数が多いです。
余白の色を指定できる
編集画面からMockupsを開くと、画像の余白部分の色を指定できます。
操作できる内容はほぼ同じで、「カラー」の部分で色を変更すると…
このように、モックアップの画像をはめこむ部分に余白ができた場合に、その余白部分の色が変更されます。
3.モックアップ作成時の注意点
背景に合わせた画像の調節が必要
Canvaで作れるモックアップは、製品単体のものと背景付きのものがあります。
背景つきのモックアップは、写真のうつり具合や加工具合によっては背景から浮いたり、逆に目立たなかったりするので注意が必要です。
猫画像をそのままモックアップにすると、左のようにクッションが目立たない状態でした。猫画像を編集してからモックアップにしたところ、右のようにいい感じに！
自然な、かつ商品をしっかり目立たせるモックアップ画像にしたければ、画像を加工してみるのがおすすめです。
はめ込んだ後の画像単体の加工はできない
画像をはめこんでモックアップにした後は、「モックアップテンプレート＋はめ込んだ画像」でひとつの画像扱いとなり、はめ込み画像単体で加工できないようになります。
ネコだけをモノトーンにしたくても、このようにモックアップ全体がモノトーンになってしまいます。
はめ込む画像にフィルターをかけるなど加工したい場合は、モックアップ適用前に行いましょう。
モックアップに使う画像の色調節の方法とコツ
モックアップにすると画像の色味が微妙に変わるので、元画像を編集しようとしてもどれくらい調節すればよいのか、分かりづらいかもしれません。
なので、モックアップ画像の近くに元画像を置いて、色味を比較しながら画像編集するのがおすすめです。
まずは「アップロード」から元画像を選択し、モックアップ画像の近くに置きます。
続いて、上の「編集」→「調整」をクリックします。
各項目の丸を左右に動かせば、明るさなどを調節できます。今回の場合は画像のそのままの状態だとモックアップが暗かったので、全体的に明るめ＆温かめに調節します。
いいかんじにできたら、調節した画像だけダウンロードしたいので、まずは「ページを追加」します。
追加した真っ白なページに、「調節した画像だけ」を移動します。
右上の「共有」から「ダウンロード」をクリックしましょう。
「現在のページ」を選択して「完了」、最後に「ダウンロード」をクリックすれば、調節した画像をダウンロードできます。
あとはこれまで解説したように、同様の方法でモックアップ画像を作れば、元の無調節の画像を使ったときよりもいいかんじのモックアップ画像を作れます。
まとめ
- Canvaのモックアップ作成アプリは、ホーム画面からも編集画面からもアクセスできる
- ホーム画面からアクセスした方が種類は多い
- 編集画面からアクセスすると、余白部分の色を変更できる
- モックアップ作成後は、はめ込んだ部分だけの画像編集はできないので、色味調節などははめ込む画像単体で行う
今回はモックアップ作成機能の解説でしたが、Canvaには他にも便利な画像加工機能がたくさんあるので、ぜひ活用してみてください！
なお、「モックアップ」は無料の機能ですが、有料機能にも便利なものがたくさんあります。
下のボタンから有料プラン「Canva Pro」に登録すると、通常30日間の無料お試し期間が45日に延長されるので、お得に試してみたい方におすすめです。
