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