はじめに

ロゴやWebサイトのデザインが出来上がった際に、Web上のモックアップジェネレーターを使い一工夫することでクライアントがとてもイメージしやすい形にしてあげることが可能です。

この記事では街中のポスターにした際のイメージ、デバイス上で表示したイメージ、製品のラベルとして印字した際のイメージ…様々なモックアップ画像を簡単に作ることができるジェネレーターサイトをご紹介します。

紹介するジェネレーターはどれも簡単操作で可能ですので、クリエーターから上がってきた納品物を発注元のクライアント様がイメージ確認のために使用するといった用途も可能です。

MockupsJar

サイト名・サービス名	MockupsJar
サイト言語	英語
ユーザー登録	必要
利用料金	無料
サイトURL	https://mockupsjar.com/

ユーザー登録は必要ですが、FacebookアカウントもしくはGoogleAccountでも連携でき、登録さえしてしまえば無料で利用することが可能です。

また、カテゴリーも豊富で、スマホやPC、タブレットの他にも看板や本等様々なフレームが用意されています。

以下は実際に弊社のロゴをMockupsJarで地下鉄のポスターのイメージとして作成した例です。

---

MockupPhotos

サイト名・サービス名	MockupPhotos
サイト言語	英語
ユーザー登録	必要
利用料金	無料
サイトURL	https://mockup.photos/

こちらもユーザー登録は必要ですが無料で様々なモックアップを利用することが可能です。
無料で無制限というのは助かりますね。

以下はMockupPhotosを使って弊社のサイトのSP版を埋め込んでみました。

---

Mockuper

サイト名・サービス名	MockupsJar
サイト言語	英語
ユーザー登録	不要
利用料金	無料
サイトURL	https://mockuper.net/

ユーザー登録不要でサクッと試せるのがこちらのmockuper。写り込む影の具合なども調整できるので無料なのに使い勝手が良いです。

以下はmockuperを使って弊社のWebサイトをMacPCに表示したイメージです。

---

smartmockups

サイト名・サービス名	smartmockups
サイト言語	英語
ユーザー登録	不要
利用料金	無料
サイトURL	https://smartmockups.com/

ダウンロードサイズによっては無料で作成することが可能です。
以下はsmartmockupsで作成したサンプルです。

---

MOCKUPBRO

サイト名・サービス名	MOCKUPBRO
サイト言語	英語
ユーザー登録	不要
利用料金	無料
サイトURL	https://mockupbro.com/

MOCKUPBROもユーザー登録不要でサクッと使うことが可能です。
デバイス関係よりはパッケージや名刺などの印刷物などのモックアップが充実している印象でした。

以下は弊社のロゴをスマホカバーに印字した際のサンプルです

---

mediamodifier

サイト名・サービス名	mediamodifier
サイト言語	英語
ユーザー登録	必要
利用料金	無料・一部有料
サイトURL	https://mediamodifier.com/

こちらのサイトのすごく便利なところは、一枚のアップロードで複数のモックアップへの一括プレビューが可能な部分です。

---

さいごに

以上でロゴやサイトのデザインなどのモックアップを生成することができるジェネレーターサイトのご紹介でした。

できることはほとんどどのサイトも似ていますが、モックアップの種類やユーザー登録の有無、再現性の高さなどを比較して選んでみると良いかと思います。

個人的にはユーザー登録不要で使えるMockuperが手軽で良いかなと思いました。