Webサイトやロゴの制作実績をのせるためのモックアップ、以前に作ろうと思ったときは、Adobe Stockで素材を探して、Photoshopではめ込んで、なんかうまくいかなくてYoutubeでやり方を探して…、有料素材を購入して、などと大変な思いをしました。

がしかし、Figmaのプラグインで簡単に作れてしまったので（もっと早く知りたかった…）いくつか紹介します。無料です！

１．Artboard Studio Mockups

まず、お好みの素材を探します。
「Free Items」を選択すると無料で使える素材で絞り込めます。
実写真にはめ込めるものもあって、見てるだけで楽しい。
モックアップだけでなく野菜とか花の写真素材もあります。

モックアップ素材を選ぶと、白いラベルと、空のモックアップが表示されるので、白いラベルの上に、表示させたいオブジェクト（ロゴとか）を配置してください。
配置したら青いボタン「Render Selected Frame」をクリック。

今回noteのアイキャッチ用にさらに加工します。

Unsplashでデスクの写真を選択、noteアイキャッチのサイズ（1280*670）のフレームに当てます。

Unsplashはフリー写真画像を簡単に呼び出せるプラグインです。
ご存じない方はこちらからどうぞ。

さっき作ったモックアップを配置して、完成。

noteのアイキャッチにしてみたよ。

２．Clay Mockups 3D

Artboard Studio Mockupsと違うところは、角度やデバイスの色を好きに変えられるところです。
素材の種類自体はArtboard Studio Mockupsの方が多いかもですが、好みもあると思います。

まずお好みのモックアップ素材を探します。
デバイスやカメラの角度も変えることができます。
ドラッグでグリグリお好みの位置にセットすることも可能。
デバイスカラーも好きな色に変えられます。

素材が決まったら、はめ込むレイヤーを作成します。
素材の画面に書いてあるサイズで用意します（上の素材だと375*812）。
サイズが違ってもアスペクト比が同じだったらハマるのでOK。
レイヤーを選択すると、モックアップに自動で表示されます。

モックアップに表示されたら青いボタン「Save as Image」をクリック。

同じくnoteのアイキャッチにしてみたよ。

３．Vectary 3D Elements

2のClay Mockups 3Dとの大きな違いは、シャドウがついているところでしょうか（素材の違いももちろんあるけど）
シャドウがある方がリアリティがありますね。

こちらも素材を選んで、レイヤーを選んで、「Apply Frame」をクリックしてはめ込み、「Finish」をクリックして完成です。

左上のアイコンから色々設定ができます。
スタジオ、曇りの日、夕日の空とか、外部環境がいろいろ選べて色が変えられるのが面白い。

それと、右下のEditボタンから何やらブラウザで3Dイメージを操作できる編集画面へ行くことができます。
ちょっと未着手ですが、楽しそう。

まとめ

以上、簡単にかっこいいモックアップ画像をFigmaプラグインで無料で作る方法でした。