差がつく無料モックアップ素材集〜iPhone & スマホ & PCでおすすめ50選

クライアントやチームメンバーに、自社サービスやWebサイト、アプリケーションなどを、より実際の環境に近い状態で見せたい。そんなときには、デバイスのモックアップ素材が便利です。スマートフォン(iPhone)とPCにサービスのモックアップを作成するのなら、質の高い素材が必要です。

今回、モバイルアプリやWebサイトの制作過程で使える、無料モックアップ素材を50個ご紹介します。

iPhone X編

最も新しく発売されたiPhone X。最新のiPhoneでデザインモックアップを作りたいとき、次のような素材を使ってみてはいかがでしょうか?

1. 2色のiPhone Xのモックアップ

1

こちらのリンクから、iPhone Xのモックアップ素材10パターンのにアクセスできます。このモックアップ素材には、5つのアングルが2色ずつ入っています。PSD形式でダウンロードできます。

2色のiPhone Xのモックアップ

2. SmartObjectsに対応するiPhone Xのモックアップ

こちらのパッケージに、正面のiPhone Xのモックアップ素材が入っています。このファイルの素材が、PhotoshopのSmartObjectsに対応しています。PSD形式でダウンロードできます。

SmartObjectsに対応するiPhone Xのモックアップ

3. PSDとSketch形式でダウンロードできるiPhone Xのモックアップ

3

こちらのリンクから、正面のiPhone Xのモックアップ素材2パターンを入手できます。PSDおよびSketch形式でダウンロードできます。

PSDとSketch形式でダウンロードできるiPhone Xのモックアップ

4. デバイス2台で背面にiPhone Xの画面を映っているモックアップ

4

こちらは、正面と背面のある、背面にデバイスを写ってるiPhone Xのモックアップです。PSD形式でダウンロードできます。

デバイス2台で背面にiPhone Xの画面を映っているモックアップ

5. デバイスの色を変更できるiPhone Xのモックアップ

5

デバイスの色を変更できるiPhone Xのモックアップです。PSDおよびSketch形式でダウンロードできます。

デバイスの色を変更できるiPhone Xのモックアップ

6. ワイヤレスチャージに置かれているiPhone Xのモックアップ

6

 

ワイヤレスチャージに置かれているiPhone Xのモックアップ素材です。PSD形式でダウンロードできます。

ワイヤレスチャージに置かれているiPhone Xのモックアップ

7. 廊下の様子を写っているiPhone Xのモックアップ

7

こちらのパッケージは、廊下の様子を、手にしているiPhone Xで写っているモックアップ素材です。PSD形式でダウンロードできます。

廊下の様子を写っているiPhone Xのモックアップ

8. Sketch用iPhone Xのモックアップ

8

彩度低めのモックアップです。このパッケージに、Sketch用iPhone Xのデザイン素材が入っています。

Sketch用iPhone Xのモックアップ

9. カラフルなiPhone Xのモックアップ

9

このパッケージに、Photoshop用iPhone Xのデザインモックアップが入っています。各デバイスの背面色は、iPhone Xではなく、iPhone 5cの色をそれぞれモチーフにしています。

カラフルなiPhone Xのモックアップ

10. フラットカラーのiPhone X

10

このパッケージに、Photoshop用iPhone Xのデザインモックアップが入っています。フラットカラーとは、ドロップシャドウや質感のある色合いを重視にしているデザイン手段です。この素材は、フラットカラーでiPhone Xを再現できています。

フラットカラーのiPhone X

11. アニメーション付きのiPhone Xのモックアップ

17

このパッケージに、Photoshop用iPhone Xのデザインモックアップが入っています。iPhone Xが浮かんでいるアニメーション付きのモックアップであるため、PhotoshopからGIF形式で書き出すと、フローティングアニメーションになります。

アニメーション付きのiPhone Xのモックアップ

12. HomePodと並んだiPhone Xのモックアップ

18

Photoshop用iPhone Xのデザインです。Siri搭載ホームスピーカー「HomePod」もモックアップに入っています。

HomePodと並んだiPhone Xのモックアップ

iPhone 8編

Xとほぼ同時に発売されたiPhone 8。ホームボタンがついているタイプのモックアップも、まだまだ需要がありそうです。

13. ゴールドのiPhone 8のモックアップ

11 このパッケージは、iPhone 8の正面のみ、ゴールドバージョンのモックアップ素材です。PSD形式でダウンロードできます。

ゴールドのiPhone 8のモックアップ

14. デバイス2台で背面にiPhone 8の画面を映っているモックアップ

12

これは、iPhone 8の正面と背面のある、前にあるiPhone 8が後ろの一台の背面に画面を映っているモックアップ素材です。PSD形式でダウンロードできます。

デバイス2台で背面にiPhone 8の画面を映っているモックアップ

15. 正面と背面のiPhone 8のモックアップ

13

このモックアップ素材は、ブラックの本体が背中合わせに倒立しているPhone 8です。PSD形式でダウンロードできます。

正面と背面のiPhone 8のモックアップ

16. アプリの様子も並べられるiPhone 8のモックアップ14

Photoshop用iPhone 8のデザインモックアップです。このiPhone 8の両脇に、サービスに関連しているスクリーンショットを並べられます。

アプリの様子も並べられるiPhone 8のモックアップ

17. 正面のiPhone 8のモックアップ

15

このパッケージに、Photoshop用iPhone 8の正面のみのデザインモックアップが入っています。高級感のあるデザインにおすすめです。

正面のiPhone 8のモックアップ

18. フラットカラーのiPhone 8のモックアップ

16

このパッケージに、Photoshop用iPhone 8の正面のみのデザインモックアップが入っています。画像として、フラットカラーを再現しています。

フラットカラーのiPhone 8のモックアップ

19. 生活で使われているiPhone 8のモックアップ

19

さまざまな生活シーンでiPhone 8を使っている様子をモチーフにしています。PSD形式でダウンロードできます。

生活で使われているiPhone 8のモックアップ

20. Sketch用iPhone 8のモックアップ

20 New

こちらは、画質が高い、Sketch用iPhone 8のデザインです。デザイン素材は、デバイスのブラックバージョンのみです。

Sketch用iPhone 8のモックアップ

iPhone 6編

iPhone 6は最新モデルではありませんが、iPhone 6のユーザーは未だに多くいます。多くの人にとって、馴染みのあるスマートフォンです。

21. 街や机が背景になっているiPhone 6のモックアップ

21

この6つのモックアップの6パターンでは、自然な環境でiPhone 6を使っている様子を再現しています。アプリケーションが使われるシーンを想定した提案ができますね。PSD形式でダウンロードできます。

生活で使われているiPhone 6のモックアップ

22. 2色のiPhone 6のモックアップ

22

上記のモックアップ2パターンを使うと、画質が高い2色でデザインをモックアップできます。PSD形式でダウンロードできます。

2色のiPhone 6のモックアップ

23. 生活で使われているiPhone 6のモックアップ

23

このモックアップ素材3パターンは、都会でiPhone 6を手で持っているような素材です。PSD形式でダウンロードできます。

生活で使われているiPhone 6のモックアップ

24. SamsungとiPhone 6のモックアップ

24

iPhone 6SとSamsung Galaxy S6のモックアップ素材です。スマートフォンを異なる角度で手にしているため、幅広く使えます。PSD形式でダウンロードできます。

SamsungとiPhone 6のモックアップ

25. 森で使われているiPhone 6のモックアップ

25

森のような自然な環境でiPhone 6で使われている場面を基に作られたデザインモックアップです。iPad Air 2の素材もパッケージに入っています。PSD形式でダウンロードできます。

森で使われているiPhone 6のモックアップ

26. 3色のiPhone 6のモックアップ

26

ホワイト、ブラック、ゴールドバージョンのiPhone 6のモックアップの素材です。スマートフォンの正面のみです。PSD形式でダウンロードできます。

3色のiPhone 6のモックアップ

27. アングルが多い3色のiPhone 6のモックアップ

27

iPhone 6の全カラーに加え、右と左の角度も入っている、Photoshop用モックアップ素材です。

アングルが多い3色のiPhone 6のモックアップ

28. Vector形式のiPhone 6のモックアップ

28

全カラーのiPhone 6のPhotoshop用モックアップ素材です。Vectorで作られている上、画質が高いため、iPhone 6の画像のサイズを大きく調整できます。

Vector形式のiPhone 6のモックアップ

29. iPhone 6と6 Plusのモックアップ

29

こちらは、iPhone 6と6 Plusの全サイズとカラーが揃っている、Photoshop用モックアップ素材です。どれのカラーのiPhone 6でも斜めのアングルのみです。

iPhone 6と6 Plusのモックアップ

30. iPhone 6と6 Plusの2色のモックアップ

30

ホワイトとブラック2バージョンのiPhone 6 Plusが用意されています。PSD形式でダウンロードできます。

iPhone 6と6 Plusの2色のモックアップ

31. フラットカラーのiPhone 6モックアップ

31

フラットカラーを再現しているiPhone 6のパッケージです。PSD形式でダウンロードできます。

フラットカラーのiPhone 6のモックアップ

32. フラットカラーのiPhone 6の3色のモックアップ

32

フラットカラーを再現しているiPhone 6デザインです。ゴールド、シルバー、ブラックの3色が入っています。PSD形式でダウンロードできます。

フラットカラーのiPhone 6の3色のモックアップ

33. アイコンが含まれているiPhone 6のモックアップ

33

iPhone 6 PlusのPhotoshop用モックアップ素材です。Apple Watchの素材も収録されています。

アイコンが含まれているiPhone 6のモックアップ

34. Illustrator用iPhone 6のモックアップ

34

Webデザインのワイヤーフレームを作成するときに役に立つiPhone 6のモックアップ素材です。Illustrator形式でダウンロードできます。

Illustrator用iPhone 6のモックアップ 

35. Sketch用iPhone 6のモックアップ

35

こちらは、Sketch用iPhone 6のモックアップ素材のパッケージです。Vector形式で作成されています。

Sketch用iPhone 6のモックアップ 

その他のiPhone編

ここからは、iPhoneX、iPhone8、iPhone6以外のモックアップ素材をご紹介します。

36. 外と家の中のiPhone 5のモックアップ

36

机や車、公園などでiPhone 5を使っているシーンの素材です。PSD形式でダウンロードできます。

外と家の中のiPhone 5のモックアップ

37. アメリカ国旗の上にあるiPhone 5のモックアップ

37

机の上にiPhoneを使っている4つのシーンのモックアップ素材です。PSD形式でダウンロードできます。

アメリカ国旗の上にあるiPhone 5のモックアップ

38. 机の上にあるiPhone 5のモックアップ

38

机の上に置かれているiPhone 5を基に、ユーザーのニーズに合わせるための写真のフィルターでも入っています。PSD形式でダウンロードできます。

机の上にあるiPhone 5のモックアップ

39. iPhone SEの2色のモックアップ

39

iPhone SEのPhotoshop用モックアップ素材です。デバイスのホワイトとブラックバージョンがあります。

iPhone SEの2色のモックアップ

40. 4色のiPhone SEのモックアップ

40

こちらは、iPhone SEのPhotoshop用モックアップ素材4パターンです。iPhone SEの全カラーが含まれているパッケージです。

4色のiPhone SEのモックアップ

MacBook編

PCをモックアップ素材として使いたい場合、下記のような例を使ってみてはいかがでしょうか?

41. MacBook Airのモックアップ

41
ウッドテーブルの上にMacbook Airが置かれた様子を再現したモックアップ素材です。全部で3パターン入っています。PSD形式でダウンロードできます。

MacBook Airのモックアップ

42. ベンチの上のMacBook Proのモックアップ

42

木製ベンチの上に、MacBook Proと本3冊が置かれている素材です。PSD形式でダウンロードできます。

木製ベンチの上のMacBook Proのモックアップ

43. MacBook Pro Retinaのモックアップ

43

4パターンのあるMacBook Pro Retinaのモックアップ素材です。机に置かれる様子などはあります。PSD形式でダウンロードできます。

MacBook Pro Retinaのモックアップ

44. 正面のみのMacBookのモックアップ

44

正面のみのMacBookのモックアップ素材です。PSD形式でダウンロードできます。

サイズを調整できるMacBookのモックアップ

45. 3色のMacBookのモックアップ

45

シルバーとグレーとゴールドの3色のMacBookの正面が入っているパッケージです。正面のみです。PSD形式でダウンロードできます。

3色のMacBookのモックアップ

スマートフォンとPC編

スマートフォンとPCを組み合わせるモックアップは、イメージにデバイス2台が入っているため、レスポンシブなデザインを提案するときにぴったりです。

46. MacBookとiPhoneののモックアップ

46

ウッドテーブルにMacBook ProとiPhoneが置かれていて、実際に両方を使っている素材の7パターンです。PSD形式でダウンロードできます。

MacBookとiPhoneのモックアップ

47. パソコンの画面上に見えるモックアップ

47

他のモックアップ素材と異なり、パソコンの画面を中心にサービスの階層を明確にしているデザインです。PSD形式でダウンロードできます。

パソコンの画面上に見えるモックアップ

48. ベッド脇に置かれたMacBook ProとiPhone 5のモックアップ

48

ベッド脇に置かれたスマートフォンとノートパソコンのあるデザイン素材です。PSD形式でダウンロードできます。

ベッド脇に置かれたMacBook ProとiPhone 5のモックアップ

49. MacBookとスマートフォンの画面を重視しているモックアップ

49

このモックアップ素材は、スマートフォンとノートパソコンをイメージにしたデザインです。スマートフォンとパソコンの間に画像を挿入でき、サービスをイメージしやすくなります。PSD形式でダウンロードできます。

MacBookとスマートフォンの画面を重視しているモックアップ

50. 机に置かれているスマートフォンとMacBookのモックアップ

50

MacBook ProとiPhone 8がデスクに置かれているモックアップです。PSD形式でダウンロードできます。

机に置かれているスマートフォンとMacBookののモックアップ

(翻訳:Jordan Colston)

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ