ロゴやデザインのモックアップ作成に便利なジェネレーター6選!!
![投稿日](https://infigate.net/wp-content/themes/infigate/img/icon/edit_note.png)
![更新日](https://infigate.net/wp-content/themes/infigate/img/icon/update_note.png)
はじめに
ロゴやWebサイトのデザインが出来上がった際に、Web上のモックアップジェネレーターを使い一工夫することでクライアントがとてもイメージしやすい形にしてあげることが可能です。
この記事では街中のポスターにした際のイメージ、デバイス上で表示したイメージ、製品のラベルとして印字した際のイメージ…様々なモックアップ画像を簡単に作ることができるジェネレーターサイトをご紹介します。
紹介するジェネレーターはどれも簡単操作で可能ですので、クリエーターから上がってきた納品物を発注元のクライアント様がイメージ確認のために使用するといった用途も可能です。
MockupsJar
![](https://infigate.net/wp-content/uploads/2022/12/2022-12-13_13h21_34.png)
サイト名・サービス名 | MockupsJar |
サイト言語 | 英語 |
ユーザー登録 | 必要 |
利用料金 | 無料 |
サイトURL | https://mockupsjar.com/ |
ユーザー登録は必要ですが、FacebookアカウントもしくはGoogleAccountでも連携でき、登録さえしてしまえば無料で利用することが可能です。
また、カテゴリーも豊富で、スマホやPC、タブレットの他にも看板や本等様々なフレームが用意されています。
以下は実際に弊社のロゴをMockupsJarで地下鉄のポスターのイメージとして作成した例です。
![](https://infigate.net/wp-content/uploads/2022/12/result-HWn8bqvcwtEu6MFxs-DZUdywdYLWJjWoJw.jpg)
MockupPhotos
![](https://infigate.net/wp-content/uploads/2022/12/2022-12-13_13h35_19.png)
サイト名・サービス名 | MockupPhotos |
サイト言語 | 英語 |
ユーザー登録 | 必要 |
利用料金 | 無料 |
サイトURL | https://mockup.photos/ |
こちらもユーザー登録は必要ですが無料で様々なモックアップを利用することが可能です。
無料で無制限というのは助かりますね。
以下はMockupPhotosを使って弊社のサイトのSP版を埋め込んでみました。
![](https://infigate.net/wp-content/uploads/2022/12/White-iPhone-5-outside-on-world-map.jpg)
Mockuper
![](https://infigate.net/wp-content/uploads/2022/12/2022-12-13_13h58_09.png)
サイト名・サービス名 | MockupsJar |
サイト言語 | 英語 |
ユーザー登録 | 不要 |
利用料金 | 無料 |
サイトURL | https://mockuper.net/ |
ユーザー登録不要でサクッと試せるのがこちらのmockuper。写り込む影の具合なども調整できるので無料なのに使い勝手が良いです。
以下はmockuperを使って弊社のWebサイトをMacPCに表示したイメージです。
![](https://infigate.net/wp-content/uploads/2022/12/mockuper.png)
smartmockups
![](https://infigate.net/wp-content/uploads/2022/12/2022-12-13_13h58_43.png)
サイト名・サービス名 | smartmockups |
サイト言語 | 英語 |
ユーザー登録 | 不要 |
利用料金 | 無料 |
サイトURL | https://smartmockups.com/ |
ダウンロードサイズによっては無料で作成することが可能です。
以下はsmartmockupsで作成したサンプルです。
![](https://infigate.net/wp-content/uploads/2022/12/smartmockups_lblr5e4e.jpg)
MOCKUPBRO
![](https://infigate.net/wp-content/uploads/2022/12/2022-12-13_14h02_15.png)
サイト名・サービス名 | MOCKUPBRO |
サイト言語 | 英語 |
ユーザー登録 | 不要 |
利用料金 | 無料 |
サイトURL | https://mockupbro.com/ |
MOCKUPBROもユーザー登録不要でサクッと使うことが可能です。
デバイス関係よりはパッケージや名刺などの印刷物などのモックアップが充実している印象でした。
以下は弊社のロゴをスマホカバーに印字した際のサンプルです
![](https://infigate.net/wp-content/uploads/2022/12/iphone-14-case-mockup-1.png)
mediamodifier
サイト名・サービス名 | mediamodifier |
サイト言語 | 英語 |
ユーザー登録 | 必要 |
利用料金 | 無料・一部有料 |
サイトURL | https://mediamodifier.com/ |
こちらのサイトのすごく便利なところは、一枚のアップロードで複数のモックアップへの一括プレビューが可能な部分です。
![](https://infigate.net/wp-content/uploads/2022/12/2022-12-13_14h09_32.png)
さいごに
以上でロゴやサイトのデザインなどのモックアップを生成することができるジェネレーターサイトのご紹介でした。
できることはほとんどどのサイトも似ていますが、モックアップの種類やユーザー登録の有無、再現性の高さなどを比較して選んでみると良いかと思います。
個人的にはユーザー登録不要で使えるMockuperが手軽で良いかなと思いました。