【Canva】モックアップの使い方について

自作グッズやデザインを公開したい時に、デザインだけでなく、よりリアルにアイテムに反映したが画像で見せることができる「モックアップ」というものがあります。

Illustratorなどでも、モップアップファイルは配布されていたりしますが、

今回はオンライングラフィックツール「Canva」を使って簡単にデザインをアイテムに反映した画像制作のやり方を説明します。

Canvaのモックアップ機能は無料プランでも利用できます。

登録についてはこちらの記事をごらんください。

モックアップとは何か

モックアップ（mock-up）とは、英語で直訳すると「模型」を意味します。

ウェブサイトやアプリの開発時などに、色やデザインのサンプルとして パソコンやスマホなど物にデザインを反映して作成でき、より具体的にデザインを見せることができます。

モックアップでなくとも、アイテムに背景透過の素材画像を貼り付ければよいかというと、

奥行きやシワに対する形などに素材を対応させることができず不自然になる場合があります。モックアップを使えば自然な形でデザインをアイテムに反映できるので、よりリアルなアイテム画像が作れるようになります。

Canvaでは、このモックアップ機能がアプリとして利用でき、パソコンやスマホだけでなく、Tシャツやマグカップ、トートバックなどの画像作成もできます。

種類は現在

• スマートフォン
• 印刷物
• アパレル
• コンピューター
• フレーム
• ホーム＆リビング
• パッケージ
• グラフィックス
• タブレット&TV
• 時計（Apple Watch系）

以前より種類も増えたので今後も増えるかもしれません。

Canvaのモックアップアプリはどこ?

Canvaのモックアップアプリの場所について説明します。

まずCanvaにログインし、新規デザインで画面を開きます。

画面左のメニューにある「アプリ」をクリックし、上部の検索バーで「Mookups」と検索します。

「Mookups」見つかったらクリックします。

初めて利用する場合はアプリの概要が表示されるので「開く」をクリックします。

「Mookups」の使い方

アプリの中から使いたい画像を探して、決まったらクリックします。

モックアップ画像のイラスト（野原と青空）の部分に画像を挿入することができます。

使いたいデザイン画像をアップロードして、モックアップの画像にドラッグ&ドロップします。

デザインは背景色がなくても反映されます。

デザインの位置や大きさの調整

モックアップ画像を選択した状態で、「Mookups」を開きます。

もし、テキストやアップロードの項目が開かれている場合は、画面左のメニューからもう一度「アプリ」→「「Mookups」を選択します。

すると、調整設定の画面が表示されます（読み込みまでに時間がかかる場合あり）

一番上の素材表示部分では大きさ、位置をマウスで動かし調整できます。

配置の項目で中央揃えなどもできますし、反転なども行えます。

またCanvaモックアップのすごいところが、モックアップ素材によっては色変更もできます。

Tシャツの場合基本は白なのですが、カラー設定がある場合は色の部分をクリックすると好みの色に変更でき、Tシャツの色変更もできます。

設定を反映するには設定項目下にある「変更を適用」を必ずクリックしてください。

あとはダウンロードして画像保存します。

Canvaですとモックアップ画像を別途ダウンロードしなくても、プレゼン資料や、チラシ、SNS投稿画像も作れるので作業もはかどります。

まとめ

湾曲やヨレのある部分までデザインを反映してくれるので、モックアップは大変便利で、デザイン初心者でもCanvaなら簡単に作成できます。

名刺のデザインにしても、ただ名刺のデザインだけを表示するだけでなく、実際に名刺に反映されたサンプルとして画像を提示できれば、お客様にもイメージが伝わりやすくなります。

仮デザインでも「どのように見えるか」のテストでも使えますね。

私はillustratorでもモックアップを使うことがありますが、Canvaで作るのが断然簡単ですし、モックアップ素材を探す手間も短縮できるのでおススメです。