差がつく無料モックアップ素材70選【iPhone スマホ編】

10

「クライアントやチームメンバーに、自社サービスやWebサイト、アプリケーションなどを、より実際の環境に近い状態で見せたい……!」

そんなときには、デバイスのモックアップ素材が便利。スマートフォン(iPhone)にサービスのモックアップを作成するのなら、質の高い素材が必要です。

今回はモバイルアプリなどの制作過程で使える、無料モックアップ素材をご紹介します。

Androidのモックアップをお求めの方は、以下の記事をご覧ください。

iPhone 13 シリーズ

最新のiPhone 13 シリーズのモックアップをご紹介します。

New Free iPhone 13 Mockups

Free iPhone 13 Mockups

スタンダードなiPhone 13のモックアップです。全5色用意されています。

New Free iPhone 13 Mockups

Freebie iPhone 13 Mockup – PSD

https://dribbble.com/shots/16449889-Freebie-iPhone-13-Mockup-PSD

PSDデータで用意されているiPhone 13モックアップです。縦に5台並んだデザインがオシャレ。

Freebie iPhone 13 Mockup – PSD

iPhone 13 Sketch Library

iPhone 13 Sketch Library

Sketchで使えるiPhone 13モックアップです。14台まとめて使うことも、一部分解することも可能。

iPhone 13 Sketch Library

Free New iPhone 13 Mockup

iPhone 13 モックアップ

Figmaですぐに使える、iPhone 13のモックアップです。

Free New iPhone 13 Mockup

Free iPhone 13 Mockup Scene

ree iPhone 13 Mockup Scene

こちらもFigma上ですぐに使えるiPhone 13モックアップ。周囲にAppleデバイスが散らばったデザインです。

Free iPhone 13 Mockup Scene

Free iPhone 13 Pro Max Mockup

Free iPhone 13 Pro Max Mockup

iPhone 13 Pro Maxのモックアップ。3台並んだデザインです。

Free iPhone 13 Pro Max Mockup

iPhone 12 シリーズ

iPhone 12シリーズのモックアップをご紹介します。

Gravity Psd Iphone 12 Mockup Set

Gravity Psd Iphone 12 Mockup Set

▲引用:pixeden

2台のiPhone12が宙に浮いているモックアップです。

Gravity Psd Iphone 12 Mockup Set

Isometric Psd iPhone 12 Mockup Set

Isometric Psd iPhone 12 Mockup Set

▲引用:pixeden

iPhone12が数台並んでいるモックアップです。

Isometric Psd iPhone 12 Mockup Set

iPhone 12 Pro Mockup

iPhone 12 Pro Mockup

▲引用:sketchfav

各色揃ったiPhone 12 Proのモックアップです。

iPhone 12 Pro Mockup

iPhone 12 Mockup

iPhone 12 Mockup

▲引用:gitu

使いやすいスタンダードなモックアップです。

iPhone 12 Mockup

iPhone 12 Pro Mockup

iPhone 12 Pro Mockup

▲引用:gitu

iPhone 12 Proが2台並んだモックアップです。

iPhone 12 Pro Mockup

Perspective Psd Iphone 12 Pro Mockup Set

Perspective Psd Iphone 12 Pro Mockup Set

▲引用:pixeden

iPhone 12 Proが数台重なった、スタイリッシュなモックアップです。

Perspective Psd Iphone 12 Pro Mockup Set

Psd iPhone 12 Mockup Set

Psd iPhone 12 Mockup Set

▲引用:pixeden

カラーバリエーションが豊富なiPhone 12 Proのモックアップです。

Psd iPhone 12 Mockup Set

iPhone 11 シリーズ

iPhone 11シリーズのモックアップをご紹介します。

iPhone 11 Pro Mockup Set

iPhone Mockup Photoshop and Sketch

▲出典:speckyboy

iPhone 11 Proのモックアップ。3種類のシーンを提供しています。それぞれのテンプレートには4種類のデフォルトカラーが設定されており、アプリやWebサイトなどのデザインをアピールできます。

iPhone 11 Pro Mockup Set

iPhone XI Clay Minimalist Mockups

iPhone Mockup Photoshop and Sketch

▲出典:speckyboy

iPhone XIのモックアップ。スマートオブジェクトを使って、簡単にカスタマイズできます。

iPhone XI Clay Minimalist Mockups

Isometric iPhone 11 Pro Max Mockup

iPhone Mockup Photoshop and Sketch

▲出典:speckyboy

正面と背面の両方を同時に見せられる、アイソメトリックなモックアップ。アプリのデザインや、iPhoneカバーのデザインを紹介するときにおすすめです。

個人利用だけでなく、商用利用も無料です。

Isometric iPhone 11 Pro Max Mockup

iPhone X シリーズ

今も現役のiPhone X/XR/XS/XS Maxのモックアップをご紹介します。

浮かび上がってくるiPhone XSのモックアップ

▲iPhone XS vector mockup by Virgil PanaiPhone Xs Mockup — Freebie PSD by Asylab

フォーマット:AI
サイズ:900KB

ダウンロードリンク

正面から見たシックなiPhone XSのモックアップ

▲iPhone Xs Mockup — Freebie PSD by Asylab

フォーマット:PSD
サイズ:20.4MB

ダウンロードリンク

重なったiPhone XRのモックアップ

▲iPhone XR Mockup Free PSD by Amrit Pal Singh

フォーマット:PSD
サイズ:5.1 MB

ダウンロードリンク

斜め上から見たiPhone XSのモックアップ

▲iPhone XS Mockup on a Solid Background by place it

フォーマット:PSD
サイズ:15 MB

ダウンロードリンク

少し浮き上がったiPhone XSのモックアップ

▲iPhone XS Mockup Floating on a Black Background by place it

フォーマット:PSD
サイズ:13.8 MB

ダウンロードリンク

円形デザインが美しいiPhone XSのモックアップ

▲Free Mockup — iPhone Xs by Val Pavliuchenko

フォーマット:PSD
サイズ:5MB

ダウンロードリンク

円の中心に置かれたiPhone XSのモックアップ

▲iPhone Xs Sketch Mockup (vector) by Alexander Hess

フォーマット:Sketch
サイズ:1MB

ダウンロードリンク

iPhone XSとiPhone XS Maxを並べたモックアップ

▲Apple iPhone Xs, iPhoneXsMax MockUp free Sketch by Volodymyr

フォーマット:Sketch
サイズ:8MB

ダウンロードリンク

色変化が綺麗なiPhone XRのモックアップ

▲iPhone XR Mockup — Freebie PSD by Asylab

フォーマット:PSD
サイズ:14.3MB

ダウンロードリンク

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

1

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

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

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

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

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

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

3

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

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

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

4

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

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

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

5

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

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

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

6

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

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

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

7

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

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

Sketch用iPhone Xのモックアップ

8

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

Sketch用iPhone Xのモックアップ

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

9

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

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

フラットカラーのiPhone X

10

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

フラットカラーのiPhone X

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

17

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

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

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

18

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

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

iPhone 8 シリーズ

Xとほぼ同時に発売されたiPhone 8。いまでも根強い人気があります。

ホームボタンがついているタイプのモックアップも、まだまだ需要がありそうです。

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

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

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

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

12

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

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

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

13

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

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

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

14

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

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

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

15

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

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

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

16

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

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

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

19

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

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

Sketch用iPhone 8のモックアップ

20 New

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

Sketch用iPhone 8のモックアップ

iPhone 6 シリーズ

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

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

21

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

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

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

22

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

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

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

23

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

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

SamsungとiPhone 6のモックアップ

24

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

SamsungとiPhone 6のモックアップ

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

25

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

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

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

26

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

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

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

27

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

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

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

28

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

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

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

29

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

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

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

30

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

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

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

31

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

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

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

32

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

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

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

33

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

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

Illustrator用iPhone 6のモックアップ

34

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

Illustrator用iPhone 6のモックアップ 

Sketch用iPhone 6のモックアップ

35

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

Sketch用iPhone 6のモックアップ 

iPhone 5 & iPhone SE シリーズ

「コンパクトなボディがいい!」と今でも熱烈なファンを抱えるiPhone5とiPhoneSEのモックアップをご紹介します。

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

36

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

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

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

37

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

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

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

38

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

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

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

39

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

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

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

40

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

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

iPhone × MacBook PC

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

MacBookとiPhoneのモックアップ

46

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

MacBookとiPhoneのモックアップ

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

47

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

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

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

48

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

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

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

49

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

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

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

50

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

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

(執筆:Jordan Colston 編集:Workship MAGAZINE編集部)

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
デザイナー副業案件
Workship