ホームページやSNSでしばしば見かける、スマートフォン、タブレット、PC、スマートウォッチ、Tシャツ、マグカップ、書籍など各種製品のはめ込み画像。「モックアップ」と呼ばれるものですが、これはどのようにして作るのでしょうか？技術力のあるデザイナーなら、Photoshopなどのグラフィックソフトで作るのでしょうが、技術力も芸術的センスもない一般のユーザーなら、モックアップ・ジェネレーター(mockup generator)を使うのが一番手っ取り早い方法でしょう。
無料か、あるいは比較的お手頃な値段で利用できるモックアップ・ジェネレーターは、ウェブ上で利用できるオンラインのサービスです。いずれも海外のサイトですが、筆者が知る限り20ほどサービスがあります。この中で、無料あるいは低廉な価格で安全に利用でき、かつ高品質なモックアップを作成できるものベスト5サイトをピックアップしてみました。それぞれについて、使い方、メリット、デメリットについて詳しく紹介したいと思います。
Smartmockups
モックアップの種類
Smartmockupsは、基本的に無料のモックアップ・ジェネレーターで、あらかじめ用意されたオリジナルのモックアップテンプレートに画像（PNG、JPG、PDF、GIF、動画）をアップロードすることで、簡単にモックアップを作成することができ、自分好みにカスタマイズすることができます。静止画像だけではなく、YouTubeやVimeoなどの動画をはめ込むことができます。
モックアップテンプレートの種類も幅広くて、次のようなジャンルの計7,000以上に上っています（有料の場合）。
- テクノロジーモックアップ：
スマートフォン、デスクトップ、ラップトップ、タブレット、TV、その他デジタル機器など - 印刷用モックアップ：
パンフレット、雑誌、書籍、ポスター、名刺、その他文具など - アパレルモックアップ：
Tシャツ、パーカー、キャップ、その他衣類など - パッケージモックアップ：
（化粧品、食品、飲料など - ホーム＆リビングモックアップ：
マグカップ、枕、キャンドル、その他 - ソーシャルメディア用モックアップ：
Facebook、Twitterなど
パソコン製品のモックアップ SmartmockupsのHPより
マグカップのモックアップの場合だと、カップの曲面に沿ったテキストや画像を入れることができます。製品がとてもリアルで魅力的に見えますね。
マグカップのモックアップ SmartmockupsのHPより
モックアップの作り方
モックアップの作り方はとても簡単です。以下の手順でモックアップ（はめ込み画像）を作ることができます。例として、iPhoneのホーム画面をiPhone14のテンプレートにはめ込んでモックアップを作ってみましょう。
- はめ込み用の画像（iPhoneのスクリーンショット）を自分のPCで作成し、保存しておく
- モックアップのデザインテンプレート(iPhone14）を選ぶ
- 画像をテンプレートの青い画面にドラッグ＆ドロップする
- 切り抜きツールで背景のサイズを調整する
- 出来上がった画像（モックアップ）をダウンロードする
これだけの簡単操作でiPhoneの美しいモックアップを作ることができます。出来上がりは次のようになっています。ただし、無料版ではサイズの大きさが限定され、拡大すると画像が不鮮明になるのが残念です。出来上がりのサイズを大きくしたり、画像をカスタマイズしたい場合には、有料版を選ぶことになります。
8,000点以上のモックアップが利用できるSmartmockupsの有料プラン料金は次のとおりです。無料のモックアップ点数は2,700以上です。
- 9ドルの月額課金（年額108ドル）、すべてダウンロード無制限
Canva内での利用
Canvaは、Photoshopなどの高度なツールを使わなくても、プロ並みのオシャレなデザインが作れる画像編集ツールです。メニューの一つとして、Smartmockupsが組み込まれており、追加料金を払うことなく、8,000以上のモックアップを利用することができます。Canvaの有料版の料金は、年間12,000円です。月当たりにすると1,000円。月額料金は1,250円です。これはSmartmockupsの有料プランとほぼ同額なので、Canvaの他のサービスを使う人なら、追加料金なしでSmartmockupsが使える分だけお得と言えるでしょう。
有料プランのCanvaの中でSmartmockupsを使う場合には、8,000点以上のモックアップテンプレートを利用することができます。背景も自由に選ぶことができます。次のモックアップは、背景付きのデザインの一例です。
Smartmockups (Canva)で作成したモックアップ
もう一つの例として、次にのようなマグカップのテンプレートにイラストを貼り付けてみましょう。
YOUR DESIGN HEREのところに、好きなデザインのイラストや写真を貼り付けることができます。ここでは、イラストAC」という素材サイトから、クリスマスの飾りのイラストを使い、貼り込んでみましょう。手順は先に述べたのと同じです。飾りのイラストは次のようなものです。
完成したモックアップは次のようなものです。
このように、あっという間に、美しいデザインのマグカップのモックアップができました。
Placeit
次に紹介するのは、Placeitというモックアップ作成ツールです。
Placeitで作成できるモックアップは、35,000以上あり、SmartMockupsを遥かに凌ぐラインアップを誇っています。利用したいモックアップは、キーワードで検索して、すぐに探すことができます。
Placeitのカバーするモックアップの種類は、次のとおりです。
Tシャツ、Tシャツビデオ、長袖Tシャツ、スウェットシャツ、マグカップ、アパレル、iPhone、MacBook、iPad、iMac、枕、帽子、本、トートバッグ、タンクトップ。スポーツジャージ、アプリビデオ、Androidデバイス、ポスター、名刺、フライヤー、バナー、雑誌、パンフレットなど。
フォーマット：JPG、PNG、MP4
モックアップの作成法はSmartMockupsとほぼ同じです。無料のモックアップからいくつかのサンプルモックアップを作ってみましょう。
もとの画像は上のようなものです。
テンプレートのUPLOAD YOUR IMAGEの部分に、先ほどのクリスマス飾りのイラストを貼り付けてみましょう。モックアップ画像を開いて、PCに保存しておいたクリスマスの飾りのイラストを挿入するだけです。その後、画像をPCにアップロードしたのが、次の画像です。とてもおしゃれなクリスマスらしいモックアップができました。イラストがシャツのしわに沿って自然な湾曲をしているので、とてもリアルですね。
Placeitは、SmartMockupsと同じように、PC、タブレット、スマートフォンのモックアップにも対応しています。例えば、次のようなモックアップが無料で利用できます。PCとスマートフォンという２つの異なるデバイスの画面に別々の画像を嵌め込むことができます。
次に示すのは、出来上がったモックアップ画像です。これが無料なのは驚きですね。
Placeitの唯一のデメリットは、有料プランの料金がやや高いということです。
- 単価：7.95ドル
- 14.95ドルの月額課金、すべてダウンロード無制限
- 89.69ドルの年間サブスクリプション、すべて無制限ダウンロード付き
ただし、無料でもかなり多数のモックアップを利用できますから、試しに無料プランで利用してみることをお勧めします。無料で利用可能なモックアップテンプレートは3,000種類以上に上ります。
Renderforest
Renderforestは、Placeitに似たオンラインデザインツールで、ロゴ、ビデオ、そしてウェブサイトを含む様々なモックアップを作成することができます。
Renderforestのモックアップの難点は、フィルター機能が弱いので、目的のテンプレートを見つけるのが少し難しいことです。
Renderforestで、テンプレートを選び、デザインを追加し、好きな色を選んでダウンロードするだけなので、モックアップを容易に作成することができます。例として、ビルボードに画像をはめ込んでみましょう。下に示すのは嵌め込む前の画面です。
UpLoadボタンを押して、PC内のはめ込み用画像をアップロードします。若干時間はかかりますが、ビルボードに貼り込んだ画像が出来上がります。DOWNLOADボタンをクリックすれば、PC内に嵌め込み画像を保存してすることができます。
ただし、無料で作成できるモックアップは少なく、有料プランに入らないと十分なサービスが利用できないのは残念なところです。有料プランの料金は次のとおりです。PlaceitやSmartMockupsよリも高くなっています。
- Liteコース 月額 1,999円
- Proコース 月額 3,499円
Mockuper（無料）
もし完全に無料のモックアップジェネレーターをお探しでしたら、Mockuperは最も優れたサービスと言えるでしょう。
Mockuperには800以上のテンプレートがあり、無料のモックアップのコレクションとしてはかなりのボリュームだと言えるでしょう。他の無料モックアップジェネレーターとは異なり、Mockuperはカスタマイズのオプションを提供しています。デバイス画面への映り込みのカスタマイズ、背景色の変更（一部のテンプレート）、テキストオーバーレイなどの追加レイヤーを設定することが可能です。もし、予算が限られていて、質の高いモックアップイメージが必要な場合は、ぜひチェックしてみてはいかがでしょうか。
例として、iPadのモックアップを作成してみましょう。次の画像は、iPadのモックアップ作成画面です。
PCに保存しておいたiPadの画面をここにアプローすると、モックアップのはめ込みデザインを作成することができます。
完全無料とはいえ、高品質のモックアップを作ることができます。使いやすさも抜群です。無料のモックアップ・ジェネレーターを探しているかたは、ぜひ登録しておくといいでしょう。
Mockup Photos（無料）
もう一つの高品質な100％無料のモックアップジェネレーターはMockup Photosです。
現在のところ、1500以上のテンプレートが利用可能で、かなりの規模のライブラリを持っています。iPhone、タブレット、デスクトップ画面、スマートウォッチなどのデバイスのテンプレートが中心ですが、ポスターやビルボードなど、他のカテゴリーのモックアップもあります。
例として、次のようなクリスマスカードをはめ込んでみたいと思います。
高品質なモックアップを簡単に作成。画像のはめ込みも、PC内のはめ込み用画像をモックアップ画面にドラッグ＆ドロップするだけの簡単操作です。また、100%無料なツールだというのも魅力です。簡単にモックアップを作りたい方にはお勧めのツールだといえます。
もう一つ、例として、iMac、iPad、iPhoneというApple製品３つに異なるモックアップ画像を嵌め込んでみましょう。もとのモックアップ画面は、下のようになっています。
手順は、PC内に用意した３つの異なる画像を、それぞれ３つのデバイスのPLACE IMAGE HEAREの画面にドラッグ＆ドロップするだけの簡単操作です。
あっという間に、イメージ通りのモックアップ画像が出来上がります。手間がかかるのは、モックアップはめ込み画像を用意するときだけです。
おわりに
以上、5つの代表的なモックアップ・ジェネレーターのツールを詳しく紹介しました。この中でどれがベストかということは、モックアップを使う頻度、種類、モックアップ以外のデザイン・テンプレートの必要性、予算などによって異なるかと思います。
もし少しでも豊富なモックアップが必要だという方には、Placeitが一番のおすすめになります。モックアップ以外のデザイン・テンプレートが必要で、加えてコストパーフォーマンスのよいモックアップ・ジェネレーターがほしければ、Smartmockupsが最適でしょう。多少モックアップの種類が少なくても、完全無料で高品質のモックアップ・ジェネレーターをお求めの方なら、Mockup PhotosかMockuperがお勧めです。完全無料ではないとはいえ、豊富な無料モックアップも提供してしているのは、SmartMockupsとPlaceitです。
サービスの種類によって、提供しているモックアップの種類も微妙に異なります。例えば、iPhoneのモックアップを使いたい場合、SmartMockupsなら最新モデルのPhone14 Proのモックアップも使えますが、Placeitでは最新型モデルのモックアップは提供していません。これらお勧めのサービスの中から、自分に合った最適なものを慎重に選んでいただければと思います。
コメント