WordPress

【canva】モックアップ機能の使い方!Photoshopはもう要らない!?

以前、スマホでの操作方法・操作手順の記事を書いていたときに、

もりのゆか

もっとわかりやすくスマホのスクショ画面の画像作れないかな

と悩んだことがありました。どういう画像かというとこんな画像です↓

TinyPNGの使い方
【ワードプレス高速化】画像をアップロードする前に必ずやること もりのゆか こんにちは@moriyuka317 もりのです^^ 今日は、 ワードプレスを始めたばかりサイトが重い(遅い...

この記事は、

canvaを使ったモックアップのやり方

をかなり具体的にお伝えしています。

注意:パソコン限定の機能です

この記事を読むことで

  • canvaでモックアップ機能が使えるようになる
  • canvaでのデザインレベル向上!

それでは早速お伝えしていきます。

モックアップのやり方・手順

まず、そもそもモックアップとは何かというと、

プロダクトデザインなどにおいて、外観デザインの試作・検討レベルで用いられる模型をいう。

コトバンクより

例えば「服」などのデザインをした際、
デザインした画像をTシャツやパンツなどに当て込んでイメージを広げるといったものです。

言葉だけではイメージしづらいので、
実際にcanvaを使ってモックアップをやっていきましょう!
(※モックアップ機能は無料プランでも使えます!)

もりのゆか

今回はcanvaアプリをインストール済みという設定でいきなり操作説明に入ります。

手順1:モックアップしたい画像をアップロードする

まずはcanva「デザインを作成」より白紙のデザインを準備します。
(※今回はInstagram投稿サイズで作成)

左側にあるサイドメニューより
「アップロード」を選択し、
「モックアップしたい画像(メディア)をアップロード」します。

手順2:写真を選択して「画像を編集」をクリック

続いて、モックアップした画像を選択し、「画像を編集」をクリックします。
(写真を選択すると写真の周りに青い枠が表示されます)

手順3:サイドメニューからスマートモックアップを探す

画面左の画面を少しスクロールすると、「smart mockups」(スマートモックアップ)という箇所がありますので、
「すべて表示」をクリックします。

すると様々なモックアップのサンプルが表示されます。

モックアップ3

手順4:お好みのモックアップを選択する

続いて、お好みのモックアップを選択します。

今回は試しにスマートモックアップの中の
「Laptop5」を使用してみます。

モックアップ4

すると、先ほどの画像が「Laptop5」の画像の中に入ったのがお分かりでしょうか?

↓↓↓

モックアップ5

【注意】画像によっては見切れてしまいます

モックアップ機能を活用する際の注意点としては、

画像のサイズ(特に横幅)が大きいものは見切れてしまう可能性がある

という点です。

例えば、下記の写真を「Phone1」でモックアップしていきます。

モックアップ6

すると、先ほどの画像が「Phone1」の画像の中に入りました。

モックアップ7

しかし横幅が大きいため、写真が見切れてしまっています。

モックアップする際は画像の形・サイズに注意しましょう!

スマホのスクリーンショット画面をモックアップ

スマホのスクリーンショットをモックアップしていきたいと思います。

まずはスクリーンショットした画像をアップロードし、「画像を編集」からモックアップを選択していきます。

モックアップ8

スマホ画像のモックアップを選択してみると、ピッタリと画像が収まっています!

モックアップ9

モックアップはパソコン画面やスマホの画像だけでなく、

  • カード
  • フレームとポスター
  • 衣料品
  • マグカップ

などがあります。

ぜひ一度試してみてくださいね!

まとめ

このモックアップ機能がcanvaで、
しかも無料版でできることを知った時はかなり衝撃でした。。

何かの際にモックアップを使う場面が出てきたらぜひこの方法を試してみてくださいね^^

リビジョンの使い方と機能
【ワードプレス】リビジョンの表示と記事の復元について記事の復元ができる!ワードプレスのリビジョンの使い方と機能について、ワードプレス初心者の方に向けてわかりやすく解説します!...
トラストコーチングスクール

“コミュニケーションが武器になる”

トラストコーチングスクールは、コーチングを受けながらコーチングの技術を学べる新しい形のスクールです。
全てのプログラムはベーシック講座からスタートし、ニーズにあったステップへ進むことができます。コーチングを体系的に学び「認定コーチ」の資格を取得し、コーチとして活動することもできます。

トラストコーチング講座を受講する