以前、スマホでの操作方法・操作手順の記事を書いていたときに、
もっとわかりやすくスマホのスクショ画面の画像作れないかな？
と悩んだことがありました。どういう画像かというとこんな画像です↓
この記事は、
をかなり具体的にお伝えしています。
注意：パソコン限定の機能です
この記事を読むことで
- canvaでモックアップ機能が使えるようになる
- canvaでのデザインレベル向上！
それでは早速お伝えしていきます。
目次
モックアップのやり方・手順
まず、そもそもモックアップとは何かというと、
プロダクトデザインなどにおいて、外観デザインの試作・検討レベルで用いられる模型をいう。
コトバンクより
例えば「服」などのデザインをした際、
デザインした画像をTシャツやパンツなどに当て込んでイメージを広げるといったものです。
言葉だけではイメージしづらいので、
実際にcanvaを使ってモックアップをやっていきましょう！
（※モックアップ機能は無料プランでも使えます！）
今回はcanvaアプリをインストール済みという設定でいきなり操作説明に入ります。
手順１：モックアップしたい画像をアップロードする
まずはcanvaの「デザインを作成」より白紙のデザインを準備します。
（※今回はInstagram投稿サイズで作成）
左側にあるサイドメニューより
「アップロード」を選択し、
「モックアップしたい画像（メディア）をアップロード」します。
手順２：写真を選択して「画像を編集」をクリック
続いて、モックアップした画像を選択し、「画像を編集」をクリックします。
（写真を選択すると写真の周りに青い枠が表示されます）
手順３：サイドメニューからスマートモックアップを探す
画面左の画面を少しスクロールすると、「smart mockups」（スマートモックアップ）という箇所がありますので、
「すべて表示」をクリックします。
すると様々なモックアップのサンプルが表示されます。
手順４：お好みのモックアップを選択する
続いて、お好みのモックアップを選択します。
今回は試しにスマートモックアップの中の
「Laptop５」を使用してみます。
すると、先ほどの画像が「Laptop5」の画像の中に入ったのがお分かりでしょうか？
↓↓↓
【注意】画像によっては見切れてしまいます
モックアップ機能を活用する際の注意点としては、
という点です。
例えば、下記の写真を「Phone１」でモックアップしていきます。
すると、先ほどの画像が「Phone1」の画像の中に入りました。
しかし横幅が大きいため、写真が見切れてしまっています。
スマホのスクリーンショット画面をモックアップ
スマホのスクリーンショットをモックアップしていきたいと思います。
まずはスクリーンショットした画像をアップロードし、「画像を編集」からモックアップを選択していきます。
スマホ画像のモックアップを選択してみると、ピッタリと画像が収まっています！
モックアップはパソコン画面やスマホの画像だけでなく、
- カード
- 本
- フレームとポスター
- 衣料品
- マグカップ
などがあります。
ぜひ一度試してみてくださいね！
まとめ
このモックアップ機能がcanvaで、
しかも無料版でできることを知った時はかなり衝撃でした。。
何かの際にモックアップを使う場面が出てきたらぜひこの方法を試してみてくださいね＾＾
