高収入フリーランスのための、社会保険料を賢く抑える方法
- お金
- コラム
- フリーランス/個人事業主
「クライアントやチームメンバーに、自社サービスやWebサイト、アプリケーションなどを、より実際の環境に近い状態で見せたい……!」
そんなときには、デバイスのモックアップ素材が便利。スマートフォン(iPhone)にサービスのモックアップを作成するのなら、質の高い素材が必要です。
今回はモバイルアプリなどの制作過程で使える、無料モックアップ素材をご紹介します。
Androidのモックアップをお求めの方は、以下の記事をご覧ください。
無料Androidモックアップ20選!流行デザインのみ厳選
Workship MAGAZINE
目次
最新のiPhone 13 シリーズのモックアップをご紹介します。
スタンダードなiPhone 13のモックアップです。全5色用意されています。
PSDデータで用意されているiPhone 13モックアップです。縦に5台並んだデザインがオシャレ。
Freebie iPhone 13 Mockup – PSD
Sketchで使えるiPhone 13モックアップです。14台まとめて使うことも、一部分解することも可能。
Figmaですぐに使える、iPhone 13のモックアップです。
こちらもFigma上ですぐに使えるiPhone 13モックアップ。周囲にAppleデバイスが散らばったデザインです。
iPhone 13 Pro Maxのモックアップ。3台並んだデザインです。
iPhone 12シリーズのモックアップをご紹介します。
▲引用:pixeden
2台のiPhone12が宙に浮いているモックアップです。
Gravity Psd Iphone 12 Mockup Set
▲引用:pixeden
iPhone12が数台並んでいるモックアップです。
Isometric Psd iPhone 12 Mockup Set
▲引用:sketchfav
各色揃ったiPhone 12 Proのモックアップです。
▲引用:gitu
使いやすいスタンダードなモックアップです。
▲引用:gitu
iPhone 12 Proが2台並んだモックアップです。
▲引用:pixeden
iPhone 12 Proが数台重なった、スタイリッシュなモックアップです。
Perspective Psd Iphone 12 Pro Mockup Set
▲引用:pixeden
カラーバリエーションが豊富なiPhone 12 Proのモックアップです。
iPhone 11シリーズのモックアップをご紹介します。
▲出典:speckyboy
iPhone 11 Proのモックアップ。3種類のシーンを提供しています。それぞれのテンプレートには4種類のデフォルトカラーが設定されており、アプリやWebサイトなどのデザインをアピールできます。
▲出典:speckyboy
iPhone XIのモックアップ。スマートオブジェクトを使って、簡単にカスタマイズできます。
iPhone XI Clay Minimalist Mockups
▲出典:speckyboy
正面と背面の両方を同時に見せられる、アイソメトリックなモックアップ。アプリのデザインや、iPhoneカバーのデザインを紹介するときにおすすめです。
個人利用だけでなく、商用利用も無料です。
Isometric iPhone 11 Pro Max Mockup
今も現役のiPhone X/XR/XS/XS Maxのモックアップをご紹介します。
▲iPhone XS vector mockup by Virgil PanaiPhone Xs Mockup — Freebie PSD by Asylab
フォーマット:AI
サイズ:900KB
▲iPhone Xs Mockup — Freebie PSD by Asylab
フォーマット:PSD
サイズ:20.4MB
▲iPhone XR Mockup Free PSD by Amrit Pal Singh
フォーマット:PSD
サイズ:5.1 MB
▲iPhone XS Mockup on a Solid Background by place it
フォーマット:PSD
サイズ:15 MB
▲iPhone XS Mockup Floating on a Black Background by place it
フォーマット:PSD
サイズ:13.8 MB
▲Free Mockup — iPhone Xs by Val Pavliuchenko
フォーマット:PSD
サイズ:5MB
▲iPhone Xs Sketch Mockup (vector) by Alexander Hess
フォーマット:Sketch
サイズ:1MB
▲Apple iPhone Xs, iPhoneXsMax MockUp free Sketch by Volodymyr
フォーマット:Sketch
サイズ:8MB
▲iPhone XR Mockup — Freebie PSD by Asylab
フォーマット:PSD
サイズ:14.3MB
こちらのリンクから、iPhone Xのモックアップ素材10パターンにアクセス可能。5つのアングルが2色ずつ入っています。PSD形式でダウンロード可能です。
こちらのパッケージに、正面のiPhone Xのモックアップ素材が入っています。このファイルの素材が、PhotoshopのSmartObjectsに対応。PSD形式でダウンロード可能です。
SmartObjectsに対応するiPhone Xのモックアップ
こちらのリンクから、正面のiPhone Xのモックアップ素材2パターンを入手可能。PSDおよびSketch形式でダウンロードできます。
PSDとSketch形式でダウンロードできるiPhone Xのモックアップ
こちらは、正面と背面があり、背面にデバイスが写ってるiPhone Xのモックアップです。PSD形式でダウンロードできます。
デバイス2台で背面にiPhone Xの画面を映っているモックアップ
デバイスの色を変更できるiPhone Xのモックアップ。PSDおよびSketch形式でダウンロードできます。
ワイヤレスチャージに置かれているiPhone Xのモックアップ素材です。PSD形式でダウンロードできます。
ワイヤレスチャージに置かれているiPhone Xのモックアップ
こちらのパッケージは、廊下の様子を、手にしているiPhone Xで写っているモックアップ素材です。PSD形式でダウンロードできます。
彩度低めのモックアップです。このパッケージに、Sketch用iPhone Xのデザイン素材が入っています。
このパッケージに、Photoshop用iPhone Xのデザインモックアップが入っています。各デバイスの背面色は、iPhone Xではなく、iPhone 5cの色をそれぞれモチーフにしています。
このパッケージに、Photoshop用iPhone Xのデザインモックアップが入っています。フラットカラーとは、ドロップシャドウや質感のある色合いを重視にしているデザイン手段です。この素材は、フラットカラーでiPhone Xを再現できています。
このパッケージに、Photoshop用iPhone Xのデザインモックアップが入っています。iPhone Xが浮かんでいるアニメーション付きのモックアップであるため、PhotoshopからGIF形式で書き出すと、フローティングアニメーションになります。
Photoshop用iPhone Xのデザインです。Siri搭載ホームスピーカー「HomePod」もモックアップに入っています。
Xとほぼ同時に発売されたiPhone 8。いまでも根強い人気があります。
ホームボタンがついているタイプのモックアップも、まだまだ需要がありそうです。
このパッケージは、iPhone 8の正面のみ、ゴールドバージョンのモックアップ素材です。PSD形式でダウンロードできます。
これはiPhone 8の正面と背面のある、前にあるiPhone 8が後ろの一台の背面に画面を映っているモックアップ素材です。PSD形式でダウンロードできます。
デバイス2台で背面にiPhone 8の画面を映っているモックアップ
このモックアップ素材は、ブラックの本体が背中合わせに倒立しているPhone 8です。PSD形式でダウンロードできます。
Photoshop用iPhone 8のデザインモックアップです。このiPhone 8の両脇に、サービスに関連しているスクリーンショットを並べられます。
このパッケージに、Photoshop用iPhone 8の正面のみのデザインモックアップが入っています。高級感のあるデザインにおすすめです。
このパッケージに、Photoshop用iPhone 8の正面のみのデザインモックアップが入っています。画像として、フラットカラーを再現しています。
さまざまな生活シーンでiPhone 8を使っている様子をモチーフに。PSD形式でダウンロードできます。
こちらは、画質が高い、Sketch用iPhone 8のデザインです。デザイン素材は、デバイスのブラックバージョンのみです。
iPhone 6は最新モデルではありませんが、iPhone 6のユーザーは未だに多くいます。多くの人にとって、馴染みのあるスマートフォンです。
この6つのモックアップの6パターンでは、自然な環境でiPhone 6を使っている様子を再現しています。アプリケーションが使われるシーンを想定した提案ができますね。PSD形式でダウンロードできます。
上記のモックアップ2パターンを使うと、画質が高い2色でデザインをモックアップできます。PSD形式でダウンロードできます。
このモックアップ素材3パターンは、都会でiPhone 6を手で持っているような素材です。PSD形式でダウンロードできます。
iPhone 6SとSamsung Galaxy S6のモックアップ素材です。スマートフォンを異なる角度で手にしているため、幅広く使えます。PSD形式でダウンロード可能です。
森のような自然な環境でiPhone 6で使われている場面を基に作られたデザインモックアップです。iPad Air 2の素材もパッケージに入っています。PSD形式でダウンロードできます。
ホワイト、ブラック、ゴールドバージョンのiPhone 6のモックアップの素材です。スマートフォンの正面のみです。PSD形式でダウンロードできます。
iPhone 6の全カラーに加え、右と左の角度も入っている、Photoshop用モックアップ素材です。
全カラーのiPhone 6のPhotoshop用モックアップ素材です。Vectorで作られている上、画質が高いため、iPhone 6の画像のサイズを大きく調整できます。
こちらは、iPhone 6と6 Plusの全サイズとカラーが揃っている、Photoshop用モックアップ素材。どれのカラーのiPhone 6でも斜めのアングルのみです。
ホワイトとブラック2バージョンのiPhone 6 Plusが用意されています。PSD形式でダウンロードできます。
フラットカラーを再現しているiPhone 6のパッケージです。PSD形式でダウンロードできます。
フラットカラーを再現しているiPhone 6デザインです。ゴールド、シルバー、ブラックの3色が入っています。PSD形式でダウンロードできます。
iPhone 6 PlusのPhotoshop用モックアップ素材です。Apple Watchの素材も収録されています。
Webデザインのワイヤーフレームを作成するときに役に立つiPhone 6のモックアップ素材です。Illustrator形式でダウンロードできます。
こちらは、Sketch用iPhone 6のモックアップ素材のパッケージです。Vector形式で作成されています。
「コンパクトなボディがいい!」と今でも熱烈なファンを抱えるiPhone5とiPhoneSEのモックアップをご紹介します。
机や車、公園などでiPhone 5を使っているシーンの素材です。PSD形式でダウンロードできます。
机の上にiPhoneを使っている4つのシーンのモックアップ素材です。PSD形式でダウンロードできます。
机の上に置かれているiPhone 5を基に、ユーザーのニーズに合わせるための写真のフィルターも入っています。PSD形式でダウンロード可能です。
iPhone SEのPhotoshop用モックアップ素材です。デバイスのホワイトとブラックバージョンがあります。
こちらは、iPhone SEのPhotoshop用モックアップ素材4パターン。iPhone SEの全カラーが含まれているパッケージです。
スマートフォンとMacBook PCを組み合わせるモックアップは、イメージにデバイス2台が入っているため、レスポンシブなデザインを提案するときにぴったりです。
ウッドテーブルにMacBook Proとスマートフォンが置かれていて、実際に両方を使っている素材の7パターンです。PSD形式でダウンロードできます。
他のモックアップ素材と異なり、パソコンの画面を中心にサービスの階層を明確にしているデザインです。PSD形式でダウンロードできます。
ベッド脇に置かれたスマートフォンとノートパソコンのあるデザイン素材です。PSD形式でダウンロードできます。
ベッド脇に置かれたMacBook ProとiPhone 5のモックアップ
このモックアップ素材は、スマートフォンとノートパソコンをイメージにしたデザインです。スマートフォンとパソコンの間に画像を挿入でき、サービスをイメージしやすくなります。PSD形式でダウンロードできます。
MacBookとスマートフォンの画面を重視しているモックアップ
MacBook ProとiPhone 8がデスクに置かれているモックアップです。PSD形式でダウンロードできます。
机に置かれているスマートフォンとMacBookののモックアップ
(執筆:Jordan Colston 編集:Workship MAGAZINE編集部)
無料Androidモックアップ20選!流行デザインのみ厳選
Workship MAGAZINE