モックアップ素材専門のサイト
この記事では、プレゼンテーションやApp Store画像、SNS投稿などで役立つモックアップ画像作成用の素材配布サイトをまとめました。
素材サイトの選定基準としては以下の通りです。
商用利用可能
クレジット表記不要
Appleデバイス素材の取り扱いあり
また、紹介するモックアップ素材配布サイトは「モックアップ素材専門のサイト」か「総合的なイラスト素材配布サイト」に分けていますので、まずはモックアップ素材専門のサイトから以下4サイトをご紹介します。
モックアップ素材のみを扱うサイトは、モックアップ制作には適さないな素材が表示されないため、必要な素材探しが捗る点がメリットです。モックアップとしてはめ込む画像が揃っている場合は、こちらのタイプのサイトを参考に、素材を探してみるとよいでしょう。
GoodMockups
「GoodMockups」は、デザイナーのための高品質な無料モックアップPSDファイルを豊富に提供するサイトです。Apple製品やブランディング素材、屋内外広告からソーシャルメディア、雑誌や書籍など、幅広いカテゴリーでモッ クアップを探せます。素材の種類が多岐にわたり、カテゴリー分けされているため、必要なモックアップをカンタンに見つけることが可能です。
Graphberry
[border-gray
「Graphberry」では、個人利用から商用利用まで、さまざまなプロジェクトに使用できるPSDモックアップを無料で提供しているサイトです。iPadやiPhoneのケース、ビジネスカードや紙製品など、多様なデザインニーズに応える素材が揃っており、クリエイティブなプロジェクトでも有効に活用できます。
また、素材を選択した画面で「USE ONLINE」をクリックすると、外部サイトの「MockupBro」にアクセスでき、オンライン上で直接モックアップの編集が可能になります。
MOCKUPS-DESIGN
「MOCKUPS-DESIGN」は、とくに印刷物に特化したモックアップ素材を提供するサイトです。フライヤーやブロシュア、ビジネスカードなど、さまざまな印刷サイズに対応したモックアップが豊富に揃っています。とくにフ ライヤーカテゴリーでは、印刷サイズに応じて素材を絞り込むことが可能で、より具体的なデザインニーズに応えられます。デザイナーがクリエイティブなアイデアを形にしやすくなるように設計されたサイトで、商用プロジェクトにも安心して使用できる高品質な素材が揃っています。
Mockups For Free
「Mockups For Free」は、グラフィックデザインやWebデザイン向けのPSDファイルを提供するモックアップ素材サイトです。アパレルや化粧品パッケージングにいたるまで、多岐にわたるカテゴリーでモックアップが用意されています。とくに、ロゴやパッケージング、SNSなどのモックアップが豊富で、クリエイティブなプロジェクトの質を高めるのに役立ちます。
モックアップも入手できるイラスト素材配布サイト
続いて、総合的なデザイン素材サイト（ギャラリーサイト）を5つご紹介します。
総合的な素材サイトの場合、モックアップ以外の素材も見つけられるため、はめ込む画像から探したい方はこちらのタイプを活用するとよいでしょう。
Adobe Stock PR
「Adobe Stock」は、2億7000万点以上の豊富な素材が揃っている最大級のストックサイトで、その 中にモックアップ素材も取り扱われています。Adobe Stockを使う場合、デザイナーにとっては、Adobe Creative Cloudとのシームレスな連携が大きなメリットとなるでしょう。初めてのユーザーの場合、最初の10点まで無料で、初月は無料キャンペーンを適用したうえで利用が可能です。
Free Design Resources
「Free Design Resources」は、モックアップだけでなく、フォントやアイコンといったさまざまなデザイン素材を提供しているサイトです。素材によってライセンスが異なり、商用利用できるもの は素材選択後の画面に「100% Free」や「Commercial use」と記載されています。それぞれの素材に記載されたライセンスを確認し、適切に利用するようにしましょう。
GRAPHIC BURGER
「GRAPHIC BURGER」は、アイコンやUIデザインテンプレート、背景画像やテキストエフェクトなど、モックアップ以外のデザイン素材も無料で提供しているサイトです。デザイナーが求める多彩な素材が揃っており、とくにモックアップに関しては、アパレルやパッケージング、デジタルデバイスなど、多様なシーンにマッチするものが見つかります。
LS Graphics
「LS Graphics」は、リアルな質感を持つ高品質のモックアップ素材を提供するサイトです。Apple製品をはじめとする現実に存在するデバイスをベースにしたモックアップが充実しており、リアリズムを追求したプレ ゼンテーションに最適です。Figma用のプラグインやオンラインエディターの提供もあり、デザインワークフローの効率化をサポートします。また、素材のダウンロードには会員登録が必要です。
Pixeden Club
「Pixeden Club」は、汎用性の高いモックアップ素材から個性的なデザインまで、幅広いニーズに応える素材が揃っているサイトです。無料会員では1日に5回までのダウンロード制限がありますが、それでも多彩なシーンで活用できるモックアップを手軽に利用できます。プレミアム会員になることで、より多くの素材にアクセスできるため、幅広いデザインプロジェクトに役立つでしょう。
Web上でモックアップ画像が作れるオンラインエディターも紹介
ここまでは、デザインツールを使用してモックアップ制作をする前提で、素材サイトのご紹介をしてきました。しかし、ツールを使わずとも、Webブラウザ上でモックアップを作れる便利なオンラインエディターも存在します。
ここでは、以下2つのサービスをご紹介します。
Artboard Studio
Smartmockups
Artboard Studio
「Artboard Studio」は、当サイトunprintedのプレスリリースに使うモックアップ画像制作にも活用しているサイトです。テンプレートを選択したあとはドラッグ&ドロップするだけで、画面の反射まで表現される 高クオリティなモックアップが作れます。基本無料で利用できますが、無制限で利用したい場合は$7/月の有料プランに加入する必要があります。
Smartmockups
「Smartmockups」は、無料かつ会員登録なども不要で、モックアップ画像を自動作成できるWebサービスです。テンプレートには、Apple製品をはじめとするデバイスやSNSのポスト画面など、幅広く用意されており、テンプレー トを選択したら埋め込みたい画像をアップロードするだけでカンタンにモックアップが作れます。なお、2024年9月27日からはオンラインエディターとしては利用できなくなり、Canvaのモックアップ機能としてのみ使用できるようになる予定ですので、気になる方は今のうちに試してみるのがよいでしょう。
Figmaでモックアップを作成したい場合は？
多くの素材サイトで配布されているデータは、PhotoshopやIllustratorに対応したフォーマットになっています。しかし、普段Figmaを使ってデザイン制作をしている場合、モックアップ画像もFigmaで作ってしまいたいのではないでしょうか？
実は、Figmaコミュニティファイルでもモックアップ素材が配布されています。コミュニティファイルで配布されているモックアップ素材をそのまま活用できると、素材サイトで素材を探さずとも、Figma上で制作が完結するため作業の効率化が図れます。
コミュニティファイルの中にも高品質なモックアップ素材が多くあります。目当てのファイルがあれば、利用してみてはいかがでしょうか？。
モックアップ素材サイトを使う際の注意点
モックアップ素材を配布するサイトの中には、クレジット表記が必要になるケースもあります（有名素材サイトのfreepik は無料プランの場合クレジット表記が必要）。しかし、ユースケースによってはクレジット表記がデザインの障壁になってしまうケースも少なくありません。そのため、モックアップ素材にはクレジット表記が不要かどうかをチェックしておくとよいでしょう。
そのほか、商用利用できない素材だとビジネスでの活用ができないので、サイトを利用する際は必ず利用規約に目を通してから素材を入手するようにしましょう。
まとめ
当記事では、モックアップ素材が入手できる9つのサイトを紹介しました。専門サイトからイラスト素材サイトまで幅広くカバーしているので、目的に合わせて使い分けていただければと思います。また、Web上で簡単にモックアップが作れるオンラインエディターや、Figmaコミュニティファイルについてもご紹介しました。
これらのサイトを活用することで、クオリティの高いモックアップ画像を効率的に作成できるでしょう。ぜひ、魅力的なプレゼンテーション資料やデザイン制作に活用してみてください。
