Photsohopにはビジネス・プライベート問わず、便利なモックアップ-ファイルが多数揃っています。プライベートでは、記事のサムネイルなどに使えますし、フリーランサーの方でもクライアントとのやり取りで効果を発揮することができます。
モックアップの利点は何といっても「作業を大幅に短縮させることができる」という点です。画像を任意のものに差し替えるだけで、アッと言う間に完成させることができます。作業を効率化させるためにも欠かせない存在というわけです。
今回は、「Photsohopで利用できるお手軽モックアップ30」を記事にしたいと思います。
始めにお読みください
ダウンロードをするまえに、下記の事項をよくお読みください。
- ダウンロードは自己責任で行ってください。
- 安全性が確認されたサイトのみを掲載しています。
- ダウンロード先の9割以上は海外のサイトです。
- ダウンロード先の利用規約をよく確認してからお使いください。
モックアップって何?
モックアップを作ることは、クライアントとのやり取りにおいて非常に重要な意味を持ちます。モックアップとは簡単に言うと「見本(模型)」のようなものです。プロダクトデザインなど、まず検討レベルの段階においてパソコン上で「ひな形」を作ることが多々あります。
この見本を作ることによって、クライアントはデザインやカラーを見て判断できるので、交渉もスムーズにいくでしょう。これは、「上司」や「グループ間」でのやり取りでも同じです。Photoshopであらかじめ完成されたモックアップを作ることによって、多彩なカラーバーリエーションやデザインを簡単に実現することができます。
【モックアップの利点】
- 結果を素早く修正することができる。
- 作業効率が大幅にアップする。
- 異なるカラー・バリエーションに対応させることが可能。
スマートフォン用のモックアップ(7)
スマートフォン用のモックアップです。ディスプレイ部分に画像をはめ込むことができます。ゲームや便利なアプリなどの紹介、画面などの操作説明など多くのシーンで活用することができます。
【PSD】ゴージャスな外観のiPhone8用モックアップ
最近発売されたiPhone8用のディスプレイモックアップです。バックスタイルもあります。画面の操作説明やアプリケーションの紹介などに利用できます。
サイトをみてみる
利用範囲 | 可否 |
---|---|
個人利用 | 〇 |
商業利用 | 〇 |
価格 | free |
※180秒経過しないとダウンロードボタンは表示されません。ご注意ください。(シェアするとロック解除)
【PSD】iPhone8用のカラフルモックアップ
カラフルなカラーのiPhone8用モックアップです。全部で4~5種類ほどのカラーがあります。外観はダークなタイプとなっています。
利用範囲 | 可否 |
---|---|
個人利用 | 〇 |
商業利用 | 〇 |
価格 | free |
【PSD】おしゃれな感じのiPhone用モックアップ
シルバーカラーのiPhone用のモックアップです。おしゃれで爽やかな印象を受けます。バックに映ったデザインがよりリアリティを演出しています。
利用範囲 | 可否 |
---|---|
個人利用 | 〇 |
商業利用 | 〇 |
価格 | free |
※180秒経過しないとダウンロードボタンは表示されません。ご注意ください。(シェアするとロック解除)
【PSD】真正面タイプのプレゼンテーション用iPhone 7のモックアップ
iPhone7用のモックアップです。PSD形式なので、Photoshopでも利用することができます。ビジネスシーンで利用可能です。
利用範囲 | 可否 |
---|---|
個人利用 | 〇 |
商業利用 | 〇 |
価格 | free |
【PSD】斜め見下ろし型タイプのiPhone7 Plus用モックアップ
斜め上から見下ろしたようなiPhone7 Plus用のモックアップファイルです。こちらも個人・商用利用が可能です。
利用範囲 | 可否 |
---|---|
個人利用 | 〇 |
商業利用 | 〇 |
価格 | free |
※180秒経過しないとダウンロードボタンは表示されません。ご注意ください。(シェアするとロック解除)
【PSD】ちょっとしたアイテム付きのiPhone7イヤー+ポッド付きモックアップ
使用感のあるシーンでデザインされたモックアップです。周りに散らばったアイテムがいい雰囲気をだしています。
利用範囲 | 可否 |
---|---|
個人利用 | 〇 |
商業利用 | 〇 |
価格 | free |
【PSD】3パネルタイプのiPhoneのアプリケーション用モックアップ
こちらは3パネルでデザインされたモックアップです。アプリケーションデザインや画面の移り変わりなどのシーンを表現するときに向いています。
利用範囲 | 可否 |
---|---|
個人利用 | 〇 |
商業利用 | 〇 |
価格 | free |
iPad用のモックアップ(1)
iPadやiPad miniなどのディスプレイタイプのモックアップです。画面説明、アプリケーション、ホームページのデザイン、画面操作説明などの用途で使うことができます。
【ベクター】美しい光沢が特徴的なiPad miniのベクターファイル
黒と白の2種類のタイプのiPadのモックアップです。光沢がゴージャス感を演出しています。
利用範囲 | 可否 |
---|---|
個人利用 | 〇 |
商業利用 | 〇 |
価格 | free |
ノートパソコンなどのディスプレイ用モックアップ(2)
ノートパソコンやWebブラウザ用のはめ込みモックアップです。アプリケーション、企業などのシステム、ホームページ、WordPressのテーマなど色々なシーンで活用することができます。また、画面の紹介やレビュー、操作説明などにも利用できます。
【PSD】ワンディスプレイタイプのMac Book pro
ノートパソコンタイプのモックアップです。真正面からのシンプルな視点なので色々なシーンで利用することができます。
利用範囲 | 可否 |
---|---|
個人利用 | 〇 |
商業利用 | 〇 |
価格 | free |
【PSD】やや斜め視点のMac Book Air
Mac Book Airのモックアップです。やや斜め上からの視点です。画面は小さいですが、ものは使いようです。シンプルですが、使いどころは多いかもしれません。
利用範囲 | 可否 |
---|---|
個人利用 | 〇 |
商業利用 | 〇 |
価格 | free |
Webデザイン用のモックアップ(7)
主にウェブデザインをみせたい場合に利用するモックアップです。レスポンシブデザインなど、異なるデバイスや画面で表示するときなどに有効です。ホームページやWordPressのテーマなどを美しく魅せることができます。
【PSD】シャドウが特徴的なフラットレスポンシブディスプレイ
こちらはレスポンシブに対応したモックアップです。ディスプレイ、iPad、スマートフォンなど異なる画面サイズで製品をみせたい時などに利用できます。WordPressのテーマや、ホームページなどで使えそうです。
利用範囲 | 可否 |
---|---|
個人利用 | 〇 |
商業利用 | 〇 |
価格 | free |
【PSD】重厚なイメージのレスポンシブディスプレイ
こちらもレスポンシブタイプのモックアップです。先程は3種類でしたが、こちらはノートパソコンが加わり4種類となっています。光沢もあってゴージャスな感じに仕上がりそうです。
利用範囲 | 可否 |
---|---|
個人利用 | 〇 |
商業利用 | 〇 |
価格 | free |
【PSD】さわやかな印象が特徴的なレスポンシブディスプレイ
こちらはディスプレイとスマートフォンの2種類のレスポンシブタイプのモックアップです。ライトな背景が爽やかな印象を醸し出しています。個人的には、このような感じが好きです。
利用範囲 | 可否 |
---|---|
個人利用 | 〇 |
商業利用 | 〇 |
価格 | free |
【PSD】Webスクリーンブラウザのモックアップ
ワイドスクリーンのウェブ ブラウザのモックアップです。画面説明や サイトのデザイン、WordPressのテーマなどに使えそうです。
利用範囲 | 可否 |
---|---|
個人利用 | 〇 |
商業利用 | 〇 |
価格 | free |
【PSD】パースペクティブ(遠近法や奥行き)で魅せるデザインタイプ
異なるページをいくつもみせたい場合に使えそうなWebデザイン、ホームページ用のモックアップです。ページ全体をデザイン的にみせることができます。チラシやフライヤーなどにも利用できそうです。
利用範囲 | 可否 |
---|---|
個人利用 | 〇 |
商業利用 | 〇 |
価格 | free |
【PSD】パースペクティブタイプのフラットデザイン
こちらもパースペクティブですが、フラットデザインに近いタイプです。こちらは奥行き感はあまりなく、1つのページをよりしっかりとみせることができます。
利用範囲 | 可否 |
---|---|
個人利用 | 〇 |
商業利用 | 〇 |
価格 | free |
【PSD】折り重なったようなパースペクティブタイプ
こちらもパースペクティブタイプのモックアップです。一見すると名刺のような感じがしますが、Webデザインやホームページなどで使います。折り重なったような表現がユニークです。
利用範囲 | 可否 |
---|---|
個人利用 | 〇 |
商業利用 | 〇 |
価格 | free |
ブックタイプのモックアップ(6)
書籍を紹介する時に使えそうなタイプのモックアップです。本の紹介、本のレビュー、出版などで利用することができます。サイトで書籍のレビューなどをしている人はサムネイルとしても利用できるでしょう。
【PSD】ケースに入れられた直立タイプのブック
直立したデザインのモックアップです。主に書籍のカバーなどのデザインをみせたいときや、本のレビューや紹介などに利用できそうです。
利用範囲 | 可否 |
---|---|
個人利用 | 〇 |
商業利用 | 〇 |
価格 | free |
【PSD】垂直と机に置かれているような2種類のブックタイプ
2つの異なるタイプの視点でデザインされたモックアップです。スタンダードですが、ちょっとしたシーンに利用することができます。
利用範囲 | 可否 |
---|---|
個人利用 | 〇 |
商業利用 | 〇 |
価格 | free |
【PSD】掲げられたような表現が印象的なブックタイプ
「おすすめはコレ!」といった感じで掲げられているタイプのモックアップです。ハードカバーの表紙を簡単に変更することができます。本の紹介やレビュー記事などで利用できそうなモックアップですね。
利用範囲 | 可否 |
---|---|
個人利用 | 〇 |
商業利用 | 〇 |
価格 | free |
【PSD】見開きのオープンタイプのブック
ガバッと見開いたオープンタイプのモックアップです。書籍の中身などを紹介したい場合にりようすることができます。背景のブルーも爽やかな感じで好感が持てます。
利用範囲 | 可否 |
---|---|
個人利用 | 〇 |
商業利用 | 〇 |
価格 | free |
【PSD】クルっと折れ曲がったような見開きタイプのマガジン
丸めたようなデザインが印象的なモックアップです。書籍というより、マガジンや冊子などに利用します。添えられたコーヒーがリアリティを演出しています。
利用範囲 | 可否 |
---|---|
個人利用 | 〇 |
商業利用 | 〇 |
価格 | free |
【PSD】日常生活でありそうなワンシーンのようなタイプ
ちょっしたシーンを演出できそうなモックアップです。書籍のレビューやおすすめの書籍などに利用することができます。何やらストーリーが浮かんできそうです。
利用範囲 | 可否 |
---|---|
個人利用 | 〇 |
商業利用 | 〇 |
価格 | free |
パンフレット や 名刺 などのモックアップ(6)
パンフレットや冊子などに利用できるPhotoshop用のモックアップです。画像やテキストを差し込むだけなので、簡単に作成することができます。製品の紹介や企業サイトなどの利用することができます。
【PSD】表紙と見開きが伏せられたようなタイプ
こちらは中身より、表紙と裏をみせるタイプのモックアップです。冊子のデザイン案などクライアントにみせるときに利用すると良いでしょう。
利用範囲 | 可否 |
---|---|
個人利用 | 〇 |
商業利用 | 〇 |
価格 | free |
【PSD】垂直に立てられた3つ折りタイプ
こちらは垂直にきちっと立てられたタイプのモックアップです。3つ折りになっていような折り畳みタイプのパンフレットや冊子に利用できます。
利用範囲 | 可否 |
---|---|
個人利用 | 〇 |
商業利用 | 〇 |
価格 | free |
【PSD】机に伏せられた3つ折りタイプ
机にぺたっと伏せられたような3つ折りタイプのパンフレットです。
利用範囲 | 可否 |
---|---|
個人利用 | 〇 |
商業利用 | 〇 |
価格 | free |
※180秒経過しないとダウンロードボタンは表示されません。ご注意ください。(シェアするとロック解除)
【PSD】見開きタイプのパンフレット
ぺらっとめくったような感じのモックアップです。冊子の中身をチラッと紹介したい時や冊子のデザインをクライアントに見せるときなどに利用できます。
利用範囲 | 可否 |
---|---|
個人利用 | 〇 |
商業利用 | 〇 |
価格 | free |
【PSD】重なり合った名刺タイプ
名刺が扇状に折り重なったタイプです。螺旋階段のようなデザインが印象的ですね。名刺は白いタイプですが、カラーの変更も可能です。
利用範囲 | 可否 |
---|---|
個人利用 | 〇 |
商業利用 | 〇 |
価格 | free |
【PSD】クリップで立てられたちょっと変わったデザインのタイプ
クリップで立てられた可愛い感じのモックアップです。ファニーな雰囲気なので、堅苦しさを感じません。結構好きなタイプです。
利用範囲 | 可否 |
---|---|
個人利用 | 〇 |
商業利用 | 〇 |
価格 | free |
まとめ
さて、どうだったでしょうか? 気になったモックアップはあったでしょうか。モックアップは画像を差し替えるだけで簡単に作成することができるので非常に便利ですが、そのほとんどはPhotoshopかIllustratorが必要になります。
今回のモックアップはジャンルもバラバラでしたが、そのうちジャンルごとに絞って紹介していこうと思います。
モックアップをじゃんじゃん活用して、仕事の作業を効率化させましょう!
Photoshopのチュートリルやテクニックの記事
- Photoshop 簡単な影の作り方3パターン + リアルな影など
- Photoshop モデルと彫像のコンポジット チュートリアル
- 日本語で学べるPhotoshopチュートリアルまとめ
- Photoshop チュートリアル 20選
- Photoshop クリエイティブな光のエフェクト表現 + ダウンロード
- Photoshop CC 簡単にチョコレートの背景を作るチュートリアル
- Dimension × Photoshop で作る3Dストロークテキスト
- Photoshopでアーティスティックな流体アートを簡単に作る方法
- Photoshop 炎と人のコンポジット・テクニック / 簡単チュートリアル
- Photoshop 氷のようなフローズンエフェクトのチュートリアル
- チラシのデザインどうしよう?! 素人が学ぶべきデザイン基礎10個
- Photoshop 顔をリザードに変形させるレタッチ
- Photoshop ビンテージ写真を簡単に作る方法
- Photoshop 鏡のようなリフレクション効果を簡単に作成する方法
- Photoshop モデルのヘアカラーを簡単に変える方法
- Photoshop 可愛くておしゃれなカラフルパッチワーク テキスト
- WebデザインをアップさせるPhotoshopスキルテクニック Part.1
- Photoshop CC レタッチ / スピード レタッチ
- Photoshop CC チュートリアル / 光のデザインアート Vol.1
- Photoshop CC チュートリアル / Nebula(宇宙)の作り方
- Photoshop CC チュートリアル / 幻想的な光のライン
- Photoshop チュートリアル / ドロップレイン
- Photoshopで髪の毛を綺麗に切り抜く 5つのテクニック
- Photoshop 女性をスリムにする簡単な方法! 自然なレタッチの極意
- Photoshop アート キメラと少女 チュートリアル【Part.1】
- Photoshopでライオンなどの体毛を綺麗に切り抜くテクニック
- Photoshop 簡単に3Dキャラクタを作るチュートリアル
- Photoshop 花で彩られたフローラル タイポグラフィ
- Photoshop パペットワープがもっと上手くなる簡単テクニック
- Photoshopで犬や猫などの動物の体や顔を綺麗に切り抜くテクニック
- Photoshop 木漏れ日や降り注ぐ光を簡単に表現する方法
- Photoshop 雪を簡単に表現できるスノーエフェクト
- Photoshop 雨の日のガラスを表現する方法
- Photoshopで人物の破壊を表現するチュートリアル
- Photoshop 機械のカエル チュートリアル【Part.1】
- Photoshop フリーで使えるヘアーブラシ10 + テクニック
- Photoshop 瞳を簡単に変えるテクニック10
- Photoshop 炎の呪術師 簡単チュートリアル!
- Photoshop カエルの王様 簡単チュートリアル!
- Photoshop ミニチュア風 エフェクト 簡単チュートリアル!
- Adobe Dimension × Photoshopで作るガラスのロケット