直訳すると「模型」を意味するモックアップは、デザインの完成イメージをつかむサンプルのようなもの。
たとえば、作成したスマホアプリの画面や、商品のパッケージ、Tシャツのデザイン、文庫本や雑誌のカバー。
モックアップなしで商品を作成すると、「なんかイメージと違う」といったクレームに発展し、最悪のケースは最初から作り直しということも。
そんな事故を防ぐのはもちろん、完成した作品にほんの一手間を加えることで、まるで使っているようなイメージを湧かせやすいというメリットも。
今回は、高品質なモックアップ素材を無料ダウンローできる便利サイト17選をご紹介します。
本当は教えたくない、モックアップ素材の無料配布サイトまとめ
Adobe Stock
無料で取得できるAdobe IDさえあれば、だれでも無料で利用できるAdobe Stock。7万点を超える素材をダウンロードでき、モックアップも多く揃います。
他との一番の違いは、フォトショップやイラストレーターなどのAdobe主要アプリ内で、素材の検索から試し使い、加工と補正、ライセンスの取得まで完結すること。
チーム作業では、リアルタイムで必要な人とデータ共有ができ、とても便利。
Adobe Stock + CCが最強説。組み合わせたメリットがこちら。
- 2億7000万点以上の素材が使える
- Adobe Senseiによる検索機能で、欲しい素材がすぐ見つかる
- Adobe Creative Cloudのソフトとの連携が可能
- チーム作業でのデータ共有がリアルタイム
- ロイヤリティフリーで使用制限なし
- 商用利用可能 – ダウンロードした画像は、サイトやサービスへ自由に掲載OK
とりあえずAdobe IDを無料で取得しておくだけでも良いでしょう。
Adobe Stockでは、素材10点まで無料ダウンロード、初月無料キャンペーン（期間中にキャンセルすれば無料のまま）を行っています、気になっているひとはこの機会にアドビの世界を体験してみましょう。
4年ちかくAdobe Stockを利用している、実際の使用感やメリットまとめています。
📎 商用可、Adobe Stock（アドビストック）導入で生産性が大幅アップした理由
Canva
https://www.canva.com/ja_jp/features/mockup/
フォトショップを使っていないというひとは、オンラインで作業が完結するCanvaがおすすめ。モックアップ素材も充実しており、ドラッグ＆ドロップの基本操作で、デザインが苦手なひとでも簡単に作成できます。
Unblast
圧倒的で抜群のおしゃれさを誇るunblast。あらゆる場所から手動で集められた厳選コレクションは、どれも超リアルで高品質なものばかり。
モックアップで困ったときは、まず覗いてみるとインスピーレーションの参考にもなっておすすめ。
LS Graphics
https://www.ls.graphics/free-mockups
まるで手にとることができそうなほどリアルに見せる、品質の高さに定評のあるLS Graphics。はめ込みたい画像やイラストを用意するだけで、あとはフォトショップが自動で行ってくれる便利なアイテムがずらり揃います。
Mock Up World
https://www.mockupworld.co/all-mockups/
世界中から集められたモックアップ、その数3000以上。キーワード検索はもちろん、「iPhone」や「ポスター」などより細かいカテゴリから絞り込むことも可能です。
Graphic Pear
アルミ缶や透明のボトル、ふわふわと浮いたコンテナ容器など、あまり他で見かけないモックアップのスタイルが特長。無料会員登録することで、ダウンロードできます。
Pixeden
https://www.pixeden.com/psd-mock-up-templates
老舗モックアップ配布サイトのひとつで、クオリティとオリジナリティをますます重視した素材が多数用意されたPixeden。こちらも無料サインアップすることで、Freeと書かれた素材を無制限でダウンロードできます。
PixelBuddha
https://pixelbuddha.net/mockups
デザイントレンドをうまく取り入れた素材を、数多く公開しているPixelBuddha。ロゴを魅力的にするモックアップも多く、文字テキストを編集するだけのお手軽さもポイント。
Blugraphic
https://www.blugraphic.com/mockups/
400を超えるモックアップ素材がフリーで公開されている優良サービス。ここにしかない限定モックアップも多く、まるで写真のような仕上がりを実現できる素材のみが厳選されています。その他にも、センスたっぷりな素材が多数。
Free Design Resources
https://freedesignresources.net/category/free-mockups/
300種類を超えるモックアップ素材が随時アップデートされているので、ブックマークしておきたい道具箱的サイト。
Graphberry
https://www.graphberry.com/category/mock-ups
こちらも300個ちかくのモックアップ素材をあつめたコレクションサイト Graphberry。スニーカーやスケートボードの模型など、PSDファイル形式でダウンロードできます。
Freebiesbug
https://freebiesbug.com/psd-freebies/mockups/
iphoneやMacBookといったガジェット系モックアップが多め。ただし、PSDファイル形式以外にもFigmaとSketchファイルがダウンロード可能できるありがたさ。
Mckups
600を超えるモックアップ素材が揃い、「アパレル」や「家・インテリア」、「パッケージ」、「ポスター」などのカテゴリに整理されていて便利。フォトショップ用PSDファイルが中心。
Apple Mockups
iPhoneやMac、iPadなどAppleガジェットのモックアップを集め、無料で公開しているライブラリ。PSDやAiなどさまざまなファイル形式を選択できます。
Free Mockup Generator
https://mockups.pixeltrue.com/
スマホやノートパソコン、デスクトップをつかったモックアップをブラウザ上で作成できるツール。素材をえらんで、スタイルと色を決め、画像を変更すれば、すぐ完成。フォトショップが使えない、という出先など、いざというときに。
Artboard Studio
オンライン上でモックアップを自由自在に作成できる専用ツール。英語バージョンのみですが、基本リストからアイテムをえらんでドラッグ、この繰り返し。アニメーション付きのモックアップが作成できる機能も。ただし、一部は有料ユーザーのみ。
UiPrint
ウェブサイトやアプリのアイデアを紙に手書きしたいときは、プリント印刷可能なスケッチ用テンプレートをダウンロードしてみましょう。10種類から選ぶことができます。
Printable Mockups
https://alexadam.github.io/demos/printable-mockups/index.html
ダウンロードしてそのままプリント印刷できる、さまざまなスクリーンサイズに最適化されたモックアップコレクション。
無料ダウンロードできるモックアップ素材、あつめています。
これまでに紹介した、高品質で無料のモックアップ素材の一覧はこちら。
「乗りもの」に絞ったモックアップ。車体からタイヤ、ホイールまでカスタマイズできます。
カテゴリ別にまとめた、最近のフリー素材。
モックアップ素材の編集方法について詳しく紹介しています。
作業効率アップにはAdobe Stockがおすすめ
実際のところ仕事では、ライセンスの取得やファイルの共有のしやすさに加え、「周りがアドビのツールを使っている」などの理由から、Adobe Stockを利用する機会が増えています。
フォトショップ上で素材を探し、気に入った素材を試しづかいで加工し、ボタン一発でファイルを共有。OKサインが出たらそのまま購入、という無駄のない流れ。
商用ライセンスつきなので、安心してつかえますし、とにかくライセンスを取得した画像の差し替えや、リアルタイムでのファイル共有など、普段よく行う作業だからこそ効率化したいところです。
いまなら最初の1ヶ月は無料で利用でき、素材10点のダウンロード付き。期間中にキャンセルすれば無料のままで、費用は一切かかりません。Creative Cloudも7日間の無料体験トライアルで、すべてのアプリを利用できるチャンスです。
