モックアップでデザイン力を上げる!手軽で無料のPSDファイル50選

latestmockup2016aug-top (1)

 

苦労して完成させたデザイン、せっかくならより魅力的に演出したいもの。しかし、面倒なデザイン編集作業もしたくない。

 

そんなときは、作品イメージをはめ込む作業のみで、デザインのクオリティを高めることができる Photoshop 用ファイルを利用してみましょう。今回はクライアント向けプレゼン資料や、ブランディングに欠かせない無料のモックアップ用PSDファイルをまとめてご紹介します。

 

 

まるで本当に撮影したような「リアルな仕上がり」を追求したフリー素材が揃います。ここぞというときに使いたいモックアップはいかがでしょう。

 

 

 

詳細は以下から。

 

 

 

モックアップとは?

 

では、モックアップとは何でしょう。すこし調べてみると以下のように記述されています

モックアップとは、工業製品の設計・デザイン段階で試作される、外見を実物そっくりに似せて作られた実物大の模型のこと。 ソフトウェアやWebサイト、印刷物などのデザインを確認するための試作品のこともモックアップと呼ぶことがある。

 

たとえばTシャツ用のデザインを作成したら、実際にプリントしなくても質感を確かめることもできるでしょう。また新しいお店がオープンするので、ロゴを含んだ名刺や紙袋などのグッズを作ってみたり。Webでは、完成したデザインをクライアントに提出するとき、完成予想図をデザインすることで、価値を高めるだけでなく、より分かりやすく魅せることもできます。

 

 

 

モックアップ用PSDファイルの使い方

 

実際にモックアップ素材の手軽な使い方を見てみましょう。まず、利用したいモックアップ素材を Photoshop で開きましょう。今回は、iPhone Perspective Screen Mockup をサンプルに利用しています。

 

レイヤーパネルを確認すると、サムネイルの右下にマークの付いたレイヤーが5つあり、これらは「スマートオブジェクト」レイヤーであることを意味しています。スマートオブジェクトでは、すべてのデータ特性とともに元の画像のコンテンツを保持するため、非破壊編集を行うことができます。では、サムネイルをダブルクリックしましょう。

 

step1

 

 

すると新しいレイヤーが起動するので、用意しておいたお好みの画像イメージを埋め込みましょう。今回は、Monet Free UI Kit を参考に利用しています。編集が終わったら、メインメニューよりファイル>保存して、オリジナルのファイルに戻ります。

 

step2

 

 

選んだ画像イメージがきちんと立体的に配置されているのを確認できました。では、残り4枚も同じように変更してみましょう。

 

step3

 

 

変更した様子がこちら。ドラッグ&ドロップのみの手軽な作業のみで、見た目をグッとアップさせることができました。

 

step4

 

 

同様に背景レイヤーも自由な配色でカラーリングできます。今回は、グラデーションツールを使ってペイントしています。

 

step5

 

 

 

モックアップでデザイン力を上げる!手軽で無料のPSDファイル50選

 

※ 2019年2月25日追記: 無料ダウンロードできる最新モックアップ素材を別の記事でもまとめています。毎年クオリティもぐんぐん上がっているのを実感できますよ。

 

リアルな仕上がりは感動モノ!すごいPhotoshopモックアップ厳選75個まとめ

【2017年総まとめ】モックアップ作成で絶対役立つ!すごいPSD素材厳選100個まとめ

デザイン披露に役立つ!置き換えるだけのお手軽な無料モックアップ素材コレクション

Photoshopでここまでできる!すごい無料モックアップテンプレート69選

 

Paper Cup Free Mockup

パテルカラー3色が用意された紙コップのモックアップ素材。スマートオブジェクト機能を利用した、お手軽カスタマイズが可能です。

Paper-Cup-Free-Mockup-prev01

 

 

 

Tableware PSD Mockup vol.3

マグカップなどの食器に自由なロゴや文字を配置できるモックアップ。

001-tableware-stationery-collection-pack-coffee-cup-sugar-bowl-elements-mockup-vol-3-psd-free-resource

 

 

 

Paper Coffee Cup Mockup

紙でできたコーヒーカップに、お好みのデザインを加えることができる超リアルなモックアップ。

Paper-Coffee-Cup-Mockup-1

 

 

 

Free Corporate Style PSD Mockup

黒で統一されたメンズアイテムを中心に揃えた、ブランディング用モックアップPSDセット。電子タバコやアロマオイル、マッチなど珍しいアイテムも多数。

Free-Corporate-Style-PSD-Mockup-prev01

 

 

 

Advanced Branding Stationery Mockup

表現力を高めるブランディングに欠かせない、15種類のPSDテンプレート素材を揃えたモックアップセット。圧倒的な立体感とリアル感に注目です。

Advanced-Branding-Stationery-Mockup-prev07

 

 

 

Perspective App Screens Mockup 16

作成したモバイルアプリのスクリーンショットを立体的に並べた、プレゼンテーション向けモックアップPSD。

app-screen-ios-perspective-presentation-psd-free-resource-mockup-vol-15

 

 

 

Feminine Minimal Logo Creator

女性らしいミニマルなロゴデザインを作成できるキットで、使用しているフリーフォント一覧も揃っています。

freebie-slide-1470039725-1

 

 

 

Pokémon Go UI iPhone Mockup (Exclusive)

世界的ブームとなったポケモンGOのUIデザインが再現されています。

free-pokemon-ui-mockup-1000x750

 

 

 

iPhone Perspective Screen Mockup

立体的に並べられたモバイルアプリ向け画面スクリーンをデザインするモックアップ。

free-iphone-app-screen-mockup-1000x673

 

 

 

Front View Mockup Scene

花や観葉植物に囲まれ、床に置かれた2種類のポスターサイズに対応したモックアップ素材。

freebie-retina-1471856749

 

 

 

A4 Paper Mockup PSD

折りたたんだり、めくれた様子を再現できるA4サイズのポスター用モックアップ。

A4-Paper-Mockup-PSD-Template

 

 

 

Cardboard Tube Packaging Mockup

黄金テクスチャが印象的な、ポスター保管用のチューブ型パッケージ用モックアップ素材。

Cardboard-Tube-Packaging-MockUp-600

 

 

 

Ornamental PSD Frame Mockup

作品をより立派に魅せる、高級感のあるウッドフレーム枠を利用した、ポスター用モックアップPSD。

ornamental-retro-frame-poster-photo-presentation-mockup-free-psd

 

 

 

London Underground Ad Screen Mockup

イギリスの地下鉄 Underground の駅構内にある、電子広告板をカスタマイズするモックアップ素材。

billboard-mockup

 

 

 

Bed Linen Mockup Template

ベッドシーツをお好みのデザインに変更できるモックアップで、丸くなって寝る猫も一緒についてきます。

freebie-slide-1468503591-1

 

 

 

Layered Truck Mockup

トラックの荷台および車体を自由なデザインでカスタマイズできます。

free-truck-mockup-layered-psd-1000x632

 

 

 

Renault Van Mockup

6000×4494の300dpiで表現された、プリント印刷にも対応するモックアップ素材で、商業バンをラミネート加工してしまいます。

free-renault-van-4k-mockup

 

 

 

Burger Store Branding Mockup

バーガーショップのブランディング用モックアップ素材で、ハンバーガーやフライドポテト、持ち帰り用ボックスなどが揃います。

burger-store-branding-mockup

 

 

 

Food Container Package Mockup

魚の切り身や肉のスライスなどを入れる、発泡スチロール製のパックを再現したモックアップ。

Food-Container-Mockup-1

 

 

 

Paper Pouch Packaging Mockup

紙パッケージのデザインも自由に行うことができるPSDモックアップ。

Coffee-Pouch-Mockup-PSD

 

 

 

Milk Packaging Mockup

紙パックと瓶の2種類を用意した、牛乳などの飲料ドリンクパッケージ用モックアップ。

Milk-Packaging-Mockup-PSD

 

 

 

Cosmetics Mockup Creator: 2 Demo PSDs

化粧品などのコスメティック用品を揃えた、立体感たっぷりに表現するモックアップ。

cosmetics-mockup-600

 

 

 

Free Square Book Mockup

正方形のハードカバーでできた文庫本用モックアップ。

Free-Square-Book-Mockup-prev05

 

 

 

Juice Bottle Mockup PSD

プラスティックでできたジュースのボトルを作成できるPSDモックアップ。

juice-bottle-mockup-psd

 

 

 

Free Can Mockup PSD

光の当たり具合も考慮された、アルミ缶のデザインを変更できるモックアップ。

can-mockup

 

 

 

Juice Bottle Packaging Mockup

蓋やラベルだけでなく、入っている液体の色も変更できるすぐれもの。

Juice-Bottle-Packaging-Mockup-600

 

 

 

Paper Hot Cup Mockups

cup-mockup

 

 

 

Classic Mug Mockup Free Demo

世界で一つしかない自分だけのマグカップを作成できるモックアップキット。

Classic-Mug-Mockup-Free-Demo-prev01

 

 

 

Comprehensive Stationery Mockup

新しく事業をはじめるときに必要になりそうな、ブランディング用アイテムを揃えたモックアップ素材セットで、自由にロゴや文字テキストを追加できます。

multimedia-stationary-mockup

 

 

 

Free Realistic hanging T-Shirt Mockup

壁にかけられたTシャツ用モックアップで、光の反射やシワの具合などリアル感を追求した作品を完成させます。

Free-Realistic-Hanging-T-Shirt-Mockup

 

 

 

Label Tag PSD Mockup

穴を金メッキの金具で補強した、商品用ラベルタグのモックアップPSD。

Label-Tag-PSD-MockUp-600

 

 

 

Free Craft Packaging PSD Mockup

ハンドメイド感が素敵なパッケージデザイン用モックアップPSD。

Free-Craft-Packaging-PSD-Mockup-prev01

 

 

 

Realistic Business Cards Mockup #4

無造作に並べられた名刺デザインを、それぞれお好みで変更できるモックアップ。

Realistic-Business-Cards-MockUp-4-600

 

 

 

Animated iPad Mockup

自由に画面ディスプレイを変更でき、さらにアニメーションまで加えることができる新世代のモックアップPSD。

Animated-iPad-Mockup

 

 

 

Doglr – iPad Mockup Scene PSD

iPad の画面ディスプレイを違和感なく合成するモックアップで、特に立体感がポイントの素材。

Doglr-iPad-Mockup-prev01

 

 

 

Female Hands with iPhone 6 Mockup

女性が操作するiPhone 6 の画面ディスプレイを変更できるモックアップで、背景カラーも自由にカスタマイズできます。

female-hands-mockup

 

 

 

Apple Watch Models Mockups

3種類のバリエーションを見事に表現した、立体感たっぷりなApple Watch用モックアップ。

free-apple-watch-mockup-psd-1000x692

 

 

 

Free Designer Wide Art Wall Mockup

モダンなインテリア家具が並べられた空間に、ワイドなアート作品を飾ることができるポスター用モックアップPSD。

Free-Designer-Wide-Art-Wall-Mockup

 

 

 

3 Apple Devices Mockup Freebies

iPhoneおよびiPad、Macbook の画面ディスプレイをそれぞれ変更できるモックアップ。

freelancer-kit-mockup

 

 

 

Square Brochure Mockup

正方形でできた立体的なパンフレットを作成するモックアップで、プレゼンテーションなどにもオススメ。

Square-Brochure-Mockup-prev01

 

 

 

Book Mockup / Hardcover Edition

ハードカバーの文庫本の表紙および見開きページをデザインするモックアップ。

book-mockup-hardcover-01-1300x874

 

 

 

PSD Letter Paper Mockup

ペロリとめくれた様子を見事に表現した、立体感たっぷりなポスター用モックアップ。

paper-brand-letter-us-presentation-mockup-free-resource-psd

 

 

 

Free Vintage Poster Mockup

バインダーに挟んだフライヤーを、自由自在にデザインできるモックアップ。

vintage-flyer-mockup

 

 

 

MacBook Pro on White Table in the Office

快適な作業スペースに置かれたMacbook Proの画面ディスプレイを、自由に変更できるモックアップPSD。

workoffice-mockup

 

 

 

Floating Desk with iMac Mockup Free

こちらは白バージョンの椅子が良いされたワークスペース。iMac の画面ディスプレイを変更できます。

workspace-mockup

 

 

 

Free PSD Photo-Realistic  Book Cover Mockup

テーブルの上に無造作に置かれた雑誌の表紙カバーを、自由に変更できるモックアップ素材。

Free-Psd-Book-Cover-Mockup

 

 

 

Poster Holding Mock-up

色々な大きさで表現できる、手で持ったポスター用モックアップ。

hand-holding-psd-poster-mockups-template

 

 

 

Poster Mockup / 12 Different Images

上記アイテムとは異なり、こちらは女性が手で持った様子を表現したモックアップ素材。

holding-poster-mockup-psd-designs

 

 

 

Picture Art Mockup vol.5

オシャレなインテリア空間に並べられた額ぶちに、お好みのアートワーク作品を飾ることができるモックアップキット。

picture-art-studio-psd-mockups

 

 

 

Poster Exhibition Gallery Mockup

まるで実際に展示会で披露されている雰囲気を演出できるプレミアム・モックアップ素材セット。

exibition-gallery-poster-mockup-set

 

 

サムネイル@ : PSD Ringed Notepad Mockup – Pixeden

参照元リンク : 15 Photoshop Poster Mockup Templates – For Your Creative Design – Tutsplus