エンジニアの副業は週1からでも可能？副業の例や探し方も解説
- ITエンジニア
- 副業
「クライアントやチームメンバーに、自社サービスやWebサイト、アプリケーションなどを、より実際の環境に近い状態で見せたい……！」
そんなときには、デバイスのモックアップ素材が便利。スマートフォン（iPhone）にサービスのモックアップを作成するのなら、質の高い素材が必要です。
今回はモバイルアプリなどの制作過程で使える、無料モックアップ素材をご紹介します。
Androidのモックアップをお求めの方は、以下の記事をご覧ください。
無料Androidモックアップ20選！流行デザインのみ厳選
Workship MAGAZINE
目次
iPhone 13 シリーズ
最新のiPhone 13 シリーズのモックアップをご紹介します。
New Free iPhone 13 Mockups
スタンダードなiPhone 13のモックアップです。全5色用意されています。
Freebie iPhone 13 Mockup – PSD
PSDデータで用意されているiPhone 13モックアップです。縦に5台並んだデザインがオシャレ。
Freebie iPhone 13 Mockup – PSD
iPhone 13 Sketch Library
Sketchで使えるiPhone 13モックアップです。14台まとめて使うことも、一部分解することも可能。
Free New iPhone 13 Mockup
Figmaですぐに使える、iPhone 13のモックアップです。
Free iPhone 13 Mockup Scene
こちらもFigma上ですぐに使えるiPhone 13モックアップ。周囲にAppleデバイスが散らばったデザインです。
Free iPhone 13 Pro Max Mockup
iPhone 13 Pro Maxのモックアップ。3台並んだデザインです。
iPhone 12 シリーズ
iPhone 12シリーズのモックアップをご紹介します。
Gravity Psd Iphone 12 Mockup Set
▲引用：pixeden
2台のiPhone12が宙に浮いているモックアップです。
Gravity Psd Iphone 12 Mockup Set
Isometric Psd iPhone 12 Mockup Set
▲引用：pixeden
iPhone12が数台並んでいるモックアップです。
Isometric Psd iPhone 12 Mockup Set
iPhone 12 Pro Mockup
▲引用：sketchfav
各色揃ったiPhone 12 Proのモックアップです。
iPhone 12 Mockup
▲引用：gitu
使いやすいスタンダードなモックアップです。
iPhone 12 Pro Mockup
▲引用：gitu
iPhone 12 Proが2台並んだモックアップです。
Perspective Psd Iphone 12 Pro Mockup Set
▲引用：pixeden
iPhone 12 Proが数台重なった、スタイリッシュなモックアップです。
Perspective Psd Iphone 12 Pro Mockup Set
Psd iPhone 12 Mockup Set
▲引用：pixeden
カラーバリエーションが豊富なiPhone 12 Proのモックアップです。
iPhone 11 シリーズ
iPhone 11シリーズのモックアップをご紹介します。
iPhone 11 Pro Mockup Set
▲出典：speckyboy
iPhone 11 Proのモックアップ。3種類のシーンを提供しています。それぞれのテンプレートには4種類のデフォルトカラーが設定されており、アプリやWebサイトなどのデザインをアピールできます。
iPhone XI Clay Minimalist Mockups
▲出典：speckyboy
iPhone XIのモックアップ。スマートオブジェクトを使って、簡単にカスタマイズできます。
iPhone XI Clay Minimalist Mockups
Isometric iPhone 11 Pro Max Mockup
▲出典：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のモックアップ
こちらのリンクから、iPhone Xのモックアップ素材10パターンにアクセス可能。5つのアングルが2色ずつ入っています。PSD形式でダウンロード可能です。
SmartObjectsに対応するiPhone Xのモックアップ
こちらのパッケージに、正面のiPhone Xのモックアップ素材が入っています。このファイルの素材が、PhotoshopのSmartObjectsに対応。PSD形式でダウンロード可能です。
SmartObjectsに対応するiPhone Xのモックアップ
PSDとSketch形式でダウンロードできるiPhone Xのモックアップ
こちらのリンクから、正面のiPhone Xのモックアップ素材2パターンを入手可能。PSDおよびSketch形式でダウンロードできます。
PSDとSketch形式でダウンロードできるiPhone Xのモックアップ
デバイス2台で背面にiPhone Xの画面を映っているモックアップ
こちらは、正面と背面があり、背面にデバイスが写ってるiPhone Xのモックアップです。PSD形式でダウンロードできます。
デバイス2台で背面にiPhone Xの画面を映っているモックアップ
デバイスの色を変更できるiPhone Xのモックアップ
デバイスの色を変更できるiPhone Xのモックアップ。PSDおよびSketch形式でダウンロードできます。
ワイヤレスチャージに置かれているiPhone Xのモックアップ
ワイヤレスチャージに置かれているiPhone Xのモックアップ素材です。PSD形式でダウンロードできます。
ワイヤレスチャージに置かれているiPhone Xのモックアップ
廊下の様子を写しているiPhone Xのモックアップ
こちらのパッケージは、廊下の様子を、手にしているiPhone Xで写っているモックアップ素材です。PSD形式でダウンロードできます。
Sketch用iPhone Xのモックアップ
彩度低めのモックアップです。このパッケージに、Sketch用iPhone Xのデザイン素材が入っています。
カラフルなiPhone Xのモックアップ
このパッケージに、Photoshop用iPhone Xのデザインモックアップが入っています。各デバイスの背面色は、iPhone Xではなく、iPhone 5cの色をそれぞれモチーフにしています。
フラットカラーのiPhone X
このパッケージに、Photoshop用iPhone Xのデザインモックアップが入っています。フラットカラーとは、ドロップシャドウや質感のある色合いを重視にしているデザイン手段です。この素材は、フラットカラーでiPhone Xを再現できています。
アニメーション付きのiPhone Xのモックアップ
このパッケージに、Photoshop用iPhone Xのデザインモックアップが入っています。iPhone Xが浮かんでいるアニメーション付きのモックアップであるため、PhotoshopからGIF形式で書き出すと、フローティングアニメーションになります。
HomePodと並んだiPhone Xのモックアップ
Photoshop用iPhone Xのデザインです。Siri搭載ホームスピーカー「HomePod」もモックアップに入っています。
iPhone 8 シリーズ
Xとほぼ同時に発売されたiPhone 8。いまでも根強い人気があります。
ホームボタンがついているタイプのモックアップも、まだまだ需要がありそうです。
ゴールドのiPhone 8のモックアップ
このパッケージは、iPhone 8の正面のみ、ゴールドバージョンのモックアップ素材です。PSD形式でダウンロードできます。
デバイス2台で背面にiPhone 8の画面を映っているモックアップ
これはiPhone 8の正面と背面のある、前にあるiPhone 8が後ろの一台の背面に画面を映っているモックアップ素材です。PSD形式でダウンロードできます。
デバイス2台で背面にiPhone 8の画面を映っているモックアップ
正面と背面のiPhone 8のモックアップ
このモックアップ素材は、ブラックの本体が背中合わせに倒立しているPhone 8です。PSD形式でダウンロードできます。
アプリの様子も並べられるiPhone 8のモックアップ
Photoshop用iPhone 8のデザインモックアップです。このiPhone 8の両脇に、サービスに関連しているスクリーンショットを並べられます。
正面のiPhone 8のモックアップ
このパッケージに、Photoshop用iPhone 8の正面のみのデザインモックアップが入っています。高級感のあるデザインにおすすめです。
フラットカラーのiPhone 8のモックアップ
このパッケージに、Photoshop用iPhone 8の正面のみのデザインモックアップが入っています。画像として、フラットカラーを再現しています。
生活で使われているiPhone 8のモックアップ
さまざまな生活シーンでiPhone 8を使っている様子をモチーフに。PSD形式でダウンロードできます。
Sketch用iPhone 8のモックアップ
こちらは、画質が高い、Sketch用iPhone 8のデザインです。デザイン素材は、デバイスのブラックバージョンのみです。
iPhone 6 シリーズ
iPhone 6は最新モデルではありませんが、iPhone 6のユーザーは未だに多くいます。多くの人にとって、馴染みのあるスマートフォンです。
街や机が背景になっているiPhone 6のモックアップ
この6つのモックアップの6パターンでは、自然な環境でiPhone 6を使っている様子を再現しています。アプリケーションが使われるシーンを想定した提案ができますね。PSD形式でダウンロードできます。
2色のiPhone 6のモックアップ
上記のモックアップ2パターンを使うと、画質が高い2色でデザインをモックアップできます。PSD形式でダウンロードできます。
生活で使われているiPhone 6のモックアップ
このモックアップ素材3パターンは、都会でiPhone 6を手で持っているような素材です。PSD形式でダウンロードできます。
SamsungとiPhone 6のモックアップ
iPhone 6SとSamsung Galaxy S6のモックアップ素材です。スマートフォンを異なる角度で手にしているため、幅広く使えます。PSD形式でダウンロード可能です。
森で使われているiPhone 6のモックアップ
森のような自然な環境でiPhone 6で使われている場面を基に作られたデザインモックアップです。iPad Air 2の素材もパッケージに入っています。PSD形式でダウンロードできます。
3色のiPhone 6のモックアップ
ホワイト、ブラック、ゴールドバージョンのiPhone 6のモックアップの素材です。スマートフォンの正面のみです。PSD形式でダウンロードできます。
アングルが多い3色のiPhone 6のモックアップ
iPhone 6の全カラーに加え、右と左の角度も入っている、Photoshop用モックアップ素材です。
Vector形式のiPhone 6のモックアップ
全カラーのiPhone 6のPhotoshop用モックアップ素材です。Vectorで作られている上、画質が高いため、iPhone 6の画像のサイズを大きく調整できます。
iPhone 6と6 Plusのモックアップ
こちらは、iPhone 6と6 Plusの全サイズとカラーが揃っている、Photoshop用モックアップ素材。どれのカラーのiPhone 6でも斜めのアングルのみです。
iPhone 6と6 Plusの2色のモックアップ
ホワイトとブラック2バージョンのiPhone 6 Plusが用意されています。PSD形式でダウンロードできます。
フラットカラーのiPhone 6モックアップ
フラットカラーを再現しているiPhone 6のパッケージです。PSD形式でダウンロードできます。
フラットカラーのiPhone 6の3色のモックアップ
フラットカラーを再現しているiPhone 6デザインです。ゴールド、シルバー、ブラックの3色が入っています。PSD形式でダウンロードできます。
アイコンが含まれているiPhone 6のモックアップ
iPhone 6 PlusのPhotoshop用モックアップ素材です。Apple Watchの素材も収録されています。
Illustrator用iPhone 6のモックアップ
Webデザインのワイヤーフレームを作成するときに役に立つiPhone 6のモックアップ素材です。Illustrator形式でダウンロードできます。
Sketch用iPhone 6のモックアップ
こちらは、Sketch用iPhone 6のモックアップ素材のパッケージです。Vector形式で作成されています。
iPhone 5 ＆ iPhone SE シリーズ
「コンパクトなボディがいい！」と今でも熱烈なファンを抱えるiPhone5とiPhoneSEのモックアップをご紹介します。
外と家の中のiPhone 5のモックアップ
机や車、公園などでiPhone 5を使っているシーンの素材です。PSD形式でダウンロードできます。
アメリカ国旗の上にあるiPhone 5のモックアップ
机の上にiPhoneを使っている4つのシーンのモックアップ素材です。PSD形式でダウンロードできます。
机の上にあるiPhone 5のモックアップ
机の上に置かれているiPhone 5を基に、ユーザーのニーズに合わせるための写真のフィルターも入っています。PSD形式でダウンロード可能です。
iPhone SEの2色のモックアップ
iPhone SEのPhotoshop用モックアップ素材です。デバイスのホワイトとブラックバージョンがあります。
4色のiPhone SEのモックアップ
こちらは、iPhone SEのPhotoshop用モックアップ素材4パターン。iPhone SEの全カラーが含まれているパッケージです。
iPhone × MacBook PC
スマートフォンとMacBook PCを組み合わせるモックアップは、イメージにデバイス2台が入っているため、レスポンシブなデザインを提案するときにぴったりです。
MacBookとiPhoneのモックアップ
ウッドテーブルにMacBook Proとスマートフォンが置かれていて、実際に両方を使っている素材の7パターンです。PSD形式でダウンロードできます。
パソコンの画面上に見えるモックアップ
他のモックアップ素材と異なり、パソコンの画面を中心にサービスの階層を明確にしているデザインです。PSD形式でダウンロードできます。
ベッド脇に置かれたMacBook ProとiPhone 5のモックアップ
ベッド脇に置かれたスマートフォンとノートパソコンのあるデザイン素材です。PSD形式でダウンロードできます。
ベッド脇に置かれたMacBook ProとiPhone 5のモックアップ
MacBookとスマートフォンの画面を重視しているモックアップ
このモックアップ素材は、スマートフォンとノートパソコンをイメージにしたデザインです。スマートフォンとパソコンの間に画像を挿入でき、サービスをイメージしやすくなります。PSD形式でダウンロードできます。
MacBookとスマートフォンの画面を重視しているモックアップ
机に置かれているスマートフォンとMacBookのモックアップ
MacBook ProとiPhone 8がデスクに置かれているモックアップです。PSD形式でダウンロードできます。
机に置かれているスマートフォンとMacBookののモックアップ
（執筆：Jordan Colston 編集：Workship MAGAZINE編集部）
無料Androidモックアップ20選！流行デザインのみ厳選
Workship MAGAZINE
人気のフリーランス・副業求人
【リモートワークOK】大手からスタートアップまで、幅広い領域でユーザー体験を担うデザイナー/アートディレクター募集！
- #副業OK
- #新規事業
- #スタートアップ
- #急募
- #長期案件
- #スポット案件（1ヶ月）
- #フルリモートOK
職種：デザイナー
時給：2,500円 〜 4,000円
働き方：どちらでも可
エリア：東京都
【リモート可】【子育てママ歓迎】IoTサービスで世界中の家族を幸せに。アプリデザイナー(スマホ・タブレット) /Webデザイナー募集
- #スタートアップ
職種：デザイナー
時給：2,000円 〜
働き方：どちらでも可
エリア：東京都
【リモートOK】アート・エンタメ×ITでイノベーションを！新規事業のデザイナー募集！
- #スタートアップ
- #土日週末OK
- #急募
- #長期案件
- #正社員募集
- #フルリモートOK
職種：デザイナー
時給：5,000円 〜 8,000円
働き方：どちらでも可
エリア：東京都
Workship MAGAZINE（ワークシップマガジン）は、日本最大級のフリーランス・副業メディアです。エンジニア、デザイナー、マーケターなどデジタル系専門職のフリーランス・副業者にとって役立ち、刺激になる情報をお届け。 海外最新情報や働き方ノウハウ・ツール、著名人・専門家インタビューなど、さまざまなコンテンツを発信中です。2017年5月開設。
この記事はWorkship MAGAZINE編集部からの転載です。配信元または著者とコンテンツ契約を結び配信しています。
100 Free High-Resolution Photorealistic Mockup Templates
