• 2017年10月19日

作業を効率化! Photsohopで利用できるお手軽モックアップ30

作業を効率化! Photsohopで利用できるお手軽モックアップ30

作業を効率化! Photsohopで利用できるお手軽モックアップ30 700 433 パソコン生活サポート Pasonal

Photsohopにはビジネス・プライベート問わず、便利なモックアップ-ファイルが多数揃っています。プライベートでは、記事のサムネイルなどに使えますし、フリーランサーの方でもクライアントとのやり取りで効果を発揮することができます。

モックアップの利点は何といっても「作業を大幅に短縮させることができる」という点です。画像を任意のものに差し替えるだけで、アッと言う間に完成させることができます。作業を効率化させるためにも欠かせない存在というわけです。

今回は、「Photsohopで利用できるお手軽モックアップ30」を記事にしたいと思います。

 

INDEX

始めにお読みください

ダウンロードをするまえに、下記の事項をよくお読みください。

  • ダウンロードは自己責任で行ってください。
  • 安全性が確認されたサイトのみを掲載しています。
  • ダウンロード先の9割以上は海外のサイトです。
  • ダウンロード先の利用規約をよく確認してからお使いください。

 

モックアップって何?

モックアップを作ることは、クライアントとのやり取りにおいて非常に重要な意味を持ちます。モックアップとは簡単に言うと「見本(模型)」のようなものです。プロダクトデザインなど、まず検討レベルの段階においてパソコン上で「ひな形」を作ることが多々あります。

この見本を作ることによって、クライアントはデザインやカラーを見て判断できるので、交渉もスムーズにいくでしょう。これは、「上司」や「グループ間」でのやり取りでも同じです。Photoshopであらかじめ完成されたモックアップを作ることによって、多彩なカラーバーリエーションデザインを簡単に実現することができます。

 

【モックアップの利点】

  • 結果を素早く修正することができる。
  • 作業効率が大幅にアップする。
  • 異なるカラー・バリエーションに対応させることが可能。

 

スマートフォン用のモックアップ(7)

スマートフォン用のモックアップです。ディスプレイ部分に画像をはめ込むことができます。ゲームや便利なアプリなどの紹介、画面などの操作説明など多くのシーンで活用することができます。

 

【PSD】ゴージャスな外観のiPhone8用モックアップ

最近発売されたiPhone8用のディスプレイモックアップです。バックスタイルもあります。画面の操作説明やアプリケーションの紹介などに利用できます。

サイトをみてみる

利用範囲 可否
 個人利用
 商業利用
 価格 free

※180秒経過しないとダウンロードボタンは表示されません。ご注意ください。(シェアするとロック解除)

ゴージャスな外観のiPhone8用モックアップ

 

【PSD】iPhone8用のカラフルモックアップ

カラフルなカラーのiPhone8用モックアップです。全部で4~5種類ほどのカラーがあります。外観はダークなタイプとなっています。

サイトをみてみる

利用範囲 可否
 個人利用
 商業利用
 価格 free

iPhone8用のカラフルモックアップ

 

【PSD】おしゃれな感じのiPhone用モックアップ

シルバーカラーのiPhone用のモックアップです。おしゃれで爽やかな印象を受けます。バックに映ったデザインがよりリアリティを演出しています。

サイトをみてみる

利用範囲 可否
 個人利用
 商業利用
 価格 free

※180秒経過しないとダウンロードボタンは表示されません。ご注意ください。(シェアするとロック解除)

おしゃれな感じのiPhone用モックアップ

 

【PSD】真正面タイプのプレゼンテーション用iPhone 7のモックアップ

iPhone7用のモックアップです。PSD形式なので、Photoshopでも利用することができます。ビジネスシーンで利用可能です。

サイトをみてみる

利用範囲 可否
 個人利用
 商業利用
 価格 free

プレゼンテーション用iPhone 7のモックアップ(PSD)

 

【PSD】斜め見下ろし型タイプのiPhone7 Plus用モックアップ

斜め上から見下ろしたようなiPhone7 Plus用のモックアップファイルです。こちらも個人・商用利用が可能です。

サイトをみてみる

利用範囲 可否
 個人利用
 商業利用
 価格 free

※180秒経過しないとダウンロードボタンは表示されません。ご注意ください。(シェアするとロック解除)

【PSD】斜め上から見下ろしたiPhone7用モックアップ

 

【PSD】ちょっとしたアイテム付きのiPhone7イヤー+ポッド付きモックアップ

使用感のあるシーンでデザインされたモックアップです。周りに散らばったアイテムがいい雰囲気をだしています。

サイトをみてみる

利用範囲 可否
 個人利用
 商業利用
 価格 free

iPhone7イヤー+ポッド付きモックアップ

 

【PSD】3パネルタイプのiPhoneのアプリケーション用モックアップ

こちらは3パネルでデザインされたモックアップです。アプリケーションデザインや画面の移り変わりなどのシーンを表現するときに向いています。

サイトをみてみる

利用範囲 可否
 個人利用
 商業利用
 価格 free

iPhoneのアプリケーション用のモックアップ

 

iPad用のモックアップ(1)

iPadやiPad miniなどのディスプレイタイプのモックアップです。画面説明、アプリケーション、ホームページのデザイン、画面操作説明などの用途で使うことができます。

 

【ベクター】美しい光沢が特徴的なiPad miniのベクターファイル

黒と白の2種類のタイプのiPadのモックアップです。光沢がゴージャス感を演出しています。

サイトをみてみる

利用範囲 可否
 個人利用
 商業利用
 価格 free

iPad miniのベクターモックアップ

 

 

ノートパソコンなどのディスプレイ用モックアップ(2)

ノートパソコンやWebブラウザ用のはめ込みモックアップです。アプリケーション、企業などのシステム、ホームページ、WordPressのテーマなど色々なシーンで活用することができます。また、画面の紹介やレビュー、操作説明などにも利用できます。

 

【PSD】ワンディスプレイタイプのMac Book pro

ノートパソコンタイプのモックアップです。真正面からのシンプルな視点なので色々なシーンで利用することができます。

サイトをみてみる

利用範囲 可否
 個人利用
 商業利用
 価格 free

Mac Book pro リテナディスプレイのモックアップ

 

【PSD】やや斜め視点のMac Book Air

Mac Book Airのモックアップです。やや斜め上からの視点です。画面は小さいですが、ものは使いようです。シンプルですが、使いどころは多いかもしれません。

サイトをみてみる

利用範囲 可否
 個人利用
 商業利用
 価格 free

Mac Book Airのモックアップ

 

Webデザイン用のモックアップ(7)

主にウェブデザインをみせたい場合に利用するモックアップです。レスポンシブデザインなど、異なるデバイスや画面で表示するときなどに有効です。ホームページやWordPressのテーマなどを美しく魅せることができます。

 

【PSD】シャドウが特徴的なフラットレスポンシブディスプレイ

こちらはレスポンシブに対応したモックアップです。ディスプレイ、iPad、スマートフォンなど異なる画面サイズで製品をみせたい時などに利用できます。WordPressのテーマや、ホームページなどで使えそうです。

サイトをみてみる

利用範囲 可否
 個人利用
 商業利用
 価格 free

【PSD】フラットレスポンシブディスプレイのモックアップ

 

【PSD】重厚なイメージのレスポンシブディスプレイ

こちらもレスポンシブタイプのモックアップです。先程は3種類でしたが、こちらはノートパソコンが加わり4種類となっています。光沢もあってゴージャスな感じに仕上がりそうです。

サイトをみてみる

利用範囲 可否
 個人利用
 商業利用
 価格 free

レスポンシブディスプレイのモックアップ Type2

 

【PSD】さわやかな印象が特徴的なレスポンシブディスプレイ

こちらはディスプレイとスマートフォンの2種類のレスポンシブタイプのモックアップです。ライトな背景が爽やかな印象を醸し出しています。個人的には、このような感じが好きです。

サイトをみてみる

利用範囲 可否
 個人利用
 商業利用
 価格 free

さわやかな印象で伝えたいときのディスプレイモックアップ

 

【PSD】Webスクリーンブラウザのモックアップ

ワイドスクリーンのウェブ ブラウザのモックアップです。画面説明や サイトのデザイン、WordPressのテーマなどに使えそうです。

サイトをみてみる

利用範囲 可否
 個人利用
 商業利用
 価格 free

Webスクリーンブラウザのモックアップ

 

【PSD】パースペクティブ(遠近法や奥行き)で魅せるデザインタイプ

異なるページをいくつもみせたい場合に使えそうなWebデザイン、ホームページ用のモックアップです。ページ全体をデザイン的にみせることができます。チラシやフライヤーなどにも利用できそうです。

サイトをみてみる

利用範囲 可否
 個人利用
 商業利用
 価格 free

パースペクティブタイプで魅せるタイプ

 

【PSD】パースペクティブタイプのフラットデザイン

こちらもパースペクティブですが、フラットデザインに近いタイプです。こちらは奥行き感はあまりなく、1つのページをよりしっかりとみせることができます。

サイトをみてみる

利用範囲 可否
 個人利用
 商業利用
 価格 free

パースペクティブタイプのフラットデザイン

 

【PSD】折り重なったようなパースペクティブタイプ

こちらもパースペクティブタイプのモックアップです。一見すると名刺のような感じがしますが、Webデザインやホームページなどで使います。折り重なったような表現がユニークです。

サイトをみてみる

利用範囲 可否
 個人利用
 商業利用
 価格 free

折り重なったようなパースペクティブタイプ

 

ブックタイプのモックアップ(6)

書籍を紹介する時に使えそうなタイプのモックアップです。本の紹介本のレビュー、出版などで利用することができます。サイトで書籍のレビューなどをしている人はサムネイルとしても利用できるでしょう。

 

【PSD】ケースに入れられた直立タイプのブック

直立したデザインのモックアップです。主に書籍のカバーなどのデザインをみせたいときや、本のレビューや紹介などに利用できそうです。

サイトをみてみる

利用範囲 可否
 個人利用
 商業利用
 価格 free

ケースに入れられたブックタイプのモックアップ

 

【PSD】垂直と机に置かれているような2種類のブックタイプ

2つの異なるタイプの視点でデザインされたモックアップです。スタンダードですが、ちょっとしたシーンに利用することができます。

サイトをみてみる

利用範囲 可否
 個人利用
 商業利用
 価格 free

2種類のタイプのBookモックアップ

 

【PSD】掲げられたような表現が印象的なブックタイプ

「おすすめはコレ!」といった感じで掲げられているタイプのモックアップです。ハードカバーの表紙を簡単に変更することができます。本の紹介やレビュー記事などで利用できそうなモックアップですね。

サイトをみてみる

利用範囲 可否
 個人利用
 商業利用
 価格 free

掲げられたような表現が印象的なブックタイプ

 

【PSD】見開きのオープンタイプのブック

ガバッと見開いたオープンタイプのモックアップです。書籍の中身などを紹介したい場合にりようすることができます。背景のブルーも爽やかな感じで好感が持てます。

サイトをみてみる

利用範囲 可否
 個人利用
 商業利用
 価格 free

見開きのオープンタイプのブック

 

【PSD】クルっと折れ曲がったような見開きタイプのマガジン

丸めたようなデザインが印象的なモックアップです。書籍というより、マガジンや冊子などに利用します。添えられたコーヒーがリアリティを演出しています。

サイトをみてみる

利用範囲 可否
 個人利用
 商業利用
 価格 free

クルっと折れ曲がったような見開きタイプのマガジン

 

【PSD】日常生活でありそうなワンシーンのようなタイプ

ちょっしたシーンを演出できそうなモックアップです。書籍のレビューやおすすめの書籍などに利用することができます。何やらストーリーが浮かんできそうです。

サイトをみてみる

利用範囲 可否
 個人利用
 商業利用
 価格 free

日常生活でありそうなシーンを表現できるタイプ

 

パンフレット や 名刺 などのモックアップ(6)

パンフレットや冊子などに利用できるPhotoshop用のモックアップです。画像やテキストを差し込むだけなので、簡単に作成することができます。製品の紹介や企業サイトなどの利用することができます。

 

【PSD】表紙と見開きが伏せられたようなタイプ

こちらは中身より、表紙と裏をみせるタイプのモックアップです。冊子のデザイン案などクライアントにみせるときに利用すると良いでしょう。

サイトをみてみる

利用範囲 可否
 個人利用
 商業利用
 価格 free

見開きが伏せられたようなタイプのBookモックアップ

 

【PSD】垂直に立てられた3つ折りタイプ

こちらは垂直にきちっと立てられたタイプのモックアップです。3つ折りになっていような折り畳みタイプのパンフレットや冊子に利用できます。

サイトをみてみる

利用範囲 可否
 個人利用
 商業利用
 価格 free

垂直に立てられたようなパンフレット- モックアップ

 

【PSD】机に伏せられた3つ折りタイプ

机にぺたっと伏せられたような3つ折りタイプのパンフレットです。

サイトをみてみる

利用範囲 可否
 個人利用
 商業利用
 価格 free

※180秒経過しないとダウンロードボタンは表示されません。ご注意ください。(シェアするとロック解除)

伏せられたような3つ折りタイプのパンフレット

 

【PSD】見開きタイプのパンフレット

ぺらっとめくったような感じのモックアップです。冊子の中身をチラッと紹介したい時や冊子のデザインをクライアントに見せるときなどに利用できます。

サイトをみてみる

利用範囲 可否
 個人利用
 商業利用
 価格 free

案内パンフレットなどに最適な冊子タイプのモックアップ

 

【PSD】重なり合った名刺タイプ

名刺が扇状に折り重なったタイプです。螺旋階段のようなデザインが印象的ですね。名刺は白いタイプですが、カラーの変更も可能です。

サイトをみてみる

利用範囲 可否
 個人利用
 商業利用
 価格 free

重なり合った名刺タイプのモックアップ

 

【PSD】クリップで立てられたちょっと変わったデザインのタイプ

クリップで立てられた可愛い感じのモックアップです。ファニーな雰囲気なので、堅苦しさを感じません。結構好きなタイプです。

サイトをみてみる

利用範囲 可否
 個人利用
 商業利用
 価格 free

クリップで立てられた名刺モックアップ

 

まとめ

さて、どうだったでしょうか? 気になったモックアップはあったでしょうか。モックアップは画像を差し替えるだけで簡単に作成することができるので非常に便利ですが、そのほとんどはPhotoshopかIllustratorが必要になります。

今回のモックアップはジャンルもバラバラでしたが、そのうちジャンルごとに絞って紹介していこうと思います。

モックアップをじゃんじゃん活用して、仕事の作業を効率化させましょう!

 

Photoshopのチュートリルやテクニックの記事

ぱそなる の最新の更新を
プッシュ通知で購読しよう

よかったらシェアしてください

返信を残す

CAPTCHA


日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)