Webサイトのページ滞在時間を伸ばすには？ポイントは「読みやすさ、動画、回遊数」
- SEO
- コンテンツマーケティング
クライアントやチームメンバーに、自社サービスやWebサイト、アプリケーションなどを、より実際の環境に近い状態で見せたい。そんなときには、デバイスのモックアップ素材が便利です。スマートフォン（iPhone）とPCにサービスのモックアップを作成するのなら、質の高い素材が必要です。
今回、モバイルアプリやWebサイトの制作過程で使える、無料モックアップ素材を50個ご紹介します。
iPhone X編
最も新しく発売されたiPhone X。最新のiPhoneでデザインモックアップを作りたいとき、次のような素材を使ってみてはいかがでしょうか？
1. 2色のiPhone Xのモックアップ
こちらのリンクから、iPhone Xのモックアップ素材10パターンのにアクセスできます。このモックアップ素材には、5つのアングルが2色ずつ入っています。PSD形式でダウンロードできます。
2. SmartObjectsに対応するiPhone Xのモックアップ
こちらのパッケージに、正面のiPhone Xのモックアップ素材が入っています。このファイルの素材が、PhotoshopのSmartObjectsに対応しています。PSD形式でダウンロードできます。
SmartObjectsに対応するiPhone Xのモックアップ
3. PSDとSketch形式でダウンロードできるiPhone Xのモックアップ
こちらのリンクから、正面のiPhone Xのモックアップ素材2パターンを入手できます。PSDおよびSketch形式でダウンロードできます。
PSDとSketch形式でダウンロードできるiPhone Xのモックアップ
4. デバイス2台で背面にiPhone Xの画面を映っているモックアップ
こちらは、正面と背面のある、背面にデバイスを写ってるiPhone Xのモックアップです。PSD形式でダウンロードできます。
デバイス2台で背面にiPhone Xの画面を映っているモックアップ
5. デバイスの色を変更できるiPhone Xのモックアップ
デバイスの色を変更できるiPhone Xのモックアップです。PSDおよびSketch形式でダウンロードできます。
6. ワイヤレスチャージに置かれているiPhone Xのモックアップ
ワイヤレスチャージに置かれているiPhone Xのモックアップ素材です。PSD形式でダウンロードできます。
ワイヤレスチャージに置かれているiPhone Xのモックアップ
7. 廊下の様子を写っているiPhone Xのモックアップ
こちらのパッケージは、廊下の様子を、手にしているiPhone Xで写っているモックアップ素材です。PSD形式でダウンロードできます。
8. Sketch用iPhone Xのモックアップ
彩度低めのモックアップです。このパッケージに、Sketch用iPhone Xのデザイン素材が入っています。
9. カラフルなiPhone Xのモックアップ
このパッケージに、Photoshop用iPhone Xのデザインモックアップが入っています。各デバイスの背面色は、iPhone Xではなく、iPhone 5cの色をそれぞれモチーフにしています。
10. フラットカラーのiPhone X
このパッケージに、Photoshop用iPhone Xのデザインモックアップが入っています。フラットカラーとは、ドロップシャドウや質感のある色合いを重視にしているデザイン手段です。この素材は、フラットカラーでiPhone Xを再現できています。
11. アニメーション付きのiPhone Xのモックアップ
このパッケージに、Photoshop用iPhone Xのデザインモックアップが入っています。iPhone Xが浮かんでいるアニメーション付きのモックアップであるため、PhotoshopからGIF形式で書き出すと、フローティングアニメーションになります。
12. HomePodと並んだiPhone Xのモックアップ
Photoshop用iPhone Xのデザインです。Siri搭載ホームスピーカー「HomePod」もモックアップに入っています。
iPhone 8編
Xとほぼ同時に発売されたiPhone 8。ホームボタンがついているタイプのモックアップも、まだまだ需要がありそうです。
13. ゴールドのiPhone 8のモックアップ
このパッケージは、iPhone 8の正面のみ、ゴールドバージョンのモックアップ素材です。PSD形式でダウンロードできます。
14. デバイス2台で背面にiPhone 8の画面を映っているモックアップ
これは、iPhone 8の正面と背面のある、前にあるiPhone 8が後ろの一台の背面に画面を映っているモックアップ素材です。PSD形式でダウンロードできます。
デバイス2台で背面にiPhone 8の画面を映っているモックアップ
15. 正面と背面のiPhone 8のモックアップ
このモックアップ素材は、ブラックの本体が背中合わせに倒立しているPhone 8です。PSD形式でダウンロードできます。
16. アプリの様子も並べられるiPhone 8のモックアップ
Photoshop用iPhone 8のデザインモックアップです。このiPhone 8の両脇に、サービスに関連しているスクリーンショットを並べられます。
17. 正面のiPhone 8のモックアップ
このパッケージに、Photoshop用iPhone 8の正面のみのデザインモックアップが入っています。高級感のあるデザインにおすすめです。
18. フラットカラーのiPhone 8のモックアップ
このパッケージに、Photoshop用iPhone 8の正面のみのデザインモックアップが入っています。画像として、フラットカラーを再現しています。
19. 生活で使われているiPhone 8のモックアップ
さまざまな生活シーンでiPhone 8を使っている様子をモチーフにしています。PSD形式でダウンロードできます。
20. Sketch用iPhone 8のモックアップ
こちらは、画質が高い、Sketch用iPhone 8のデザインです。デザイン素材は、デバイスのブラックバージョンのみです。
iPhone 6編
iPhone 6は最新モデルではありませんが、iPhone 6のユーザーは未だに多くいます。多くの人にとって、馴染みのあるスマートフォンです。
21. 街や机が背景になっているiPhone 6のモックアップ
この6つのモックアップの6パターンでは、自然な環境でiPhone 6を使っている様子を再現しています。アプリケーションが使われるシーンを想定した提案ができますね。PSD形式でダウンロードできます。
22. 2色のiPhone 6のモックアップ
上記のモックアップ2パターンを使うと、画質が高い2色でデザインをモックアップできます。PSD形式でダウンロードできます。
23. 生活で使われているiPhone 6のモックアップ
このモックアップ素材3パターンは、都会でiPhone 6を手で持っているような素材です。PSD形式でダウンロードできます。
24. SamsungとiPhone 6のモックアップ
iPhone 6SとSamsung Galaxy S6のモックアップ素材です。スマートフォンを異なる角度で手にしているため、幅広く使えます。PSD形式でダウンロードできます。
25. 森で使われているiPhone 6のモックアップ
森のような自然な環境でiPhone 6で使われている場面を基に作られたデザインモックアップです。iPad Air 2の素材もパッケージに入っています。PSD形式でダウンロードできます。
26. 3色のiPhone 6のモックアップ
ホワイト、ブラック、ゴールドバージョンのiPhone 6のモックアップの素材です。スマートフォンの正面のみです。PSD形式でダウンロードできます。
27. アングルが多い3色のiPhone 6のモックアップ
iPhone 6の全カラーに加え、右と左の角度も入っている、Photoshop用モックアップ素材です。
28. Vector形式のiPhone 6のモックアップ
全カラーのiPhone 6のPhotoshop用モックアップ素材です。Vectorで作られている上、画質が高いため、iPhone 6の画像のサイズを大きく調整できます。
29. iPhone 6と6 Plusのモックアップ
こちらは、iPhone 6と6 Plusの全サイズとカラーが揃っている、Photoshop用モックアップ素材です。どれのカラーのiPhone 6でも斜めのアングルのみです。
30. iPhone 6と6 Plusの2色のモックアップ
ホワイトとブラック2バージョンのiPhone 6 Plusが用意されています。PSD形式でダウンロードできます。
31. フラットカラーのiPhone 6モックアップ
フラットカラーを再現しているiPhone 6のパッケージです。PSD形式でダウンロードできます。
32. フラットカラーのiPhone 6の3色のモックアップ
フラットカラーを再現しているiPhone 6デザインです。ゴールド、シルバー、ブラックの3色が入っています。PSD形式でダウンロードできます。
33. アイコンが含まれているiPhone 6のモックアップ
iPhone 6 PlusのPhotoshop用モックアップ素材です。Apple Watchの素材も収録されています。
34. Illustrator用iPhone 6のモックアップ
Webデザインのワイヤーフレームを作成するときに役に立つiPhone 6のモックアップ素材です。Illustrator形式でダウンロードできます。
35. Sketch用iPhone 6のモックアップ
こちらは、Sketch用iPhone 6のモックアップ素材のパッケージです。Vector形式で作成されています。
その他のiPhone編
ここからは、iPhoneX、iPhone8、iPhone6以外のモックアップ素材をご紹介します。
36. 外と家の中のiPhone 5のモックアップ
机や車、公園などでiPhone 5を使っているシーンの素材です。PSD形式でダウンロードできます。
37. アメリカ国旗の上にあるiPhone 5のモックアップ
机の上にiPhoneを使っている4つのシーンのモックアップ素材です。PSD形式でダウンロードできます。
38. 机の上にあるiPhone 5のモックアップ
机の上に置かれているiPhone 5を基に、ユーザーのニーズに合わせるための写真のフィルターでも入っています。PSD形式でダウンロードできます。
39. iPhone SEの2色のモックアップ
iPhone SEのPhotoshop用モックアップ素材です。デバイスのホワイトとブラックバージョンがあります。
40. 4色のiPhone SEのモックアップ
こちらは、iPhone SEのPhotoshop用モックアップ素材4パターンです。iPhone SEの全カラーが含まれているパッケージです。
MacBook編
PCをモックアップ素材として使いたい場合、下記のような例を使ってみてはいかがでしょうか？
41. MacBook Airのモックアップ
ウッドテーブルの上にMacbook Airが置かれた様子を再現したモックアップ素材です。全部で3パターン入っています。PSD形式でダウンロードできます。
42. ベンチの上のMacBook Proのモックアップ
木製ベンチの上に、MacBook Proと本3冊が置かれている素材です。PSD形式でダウンロードできます。
43. MacBook Pro Retinaのモックアップ
4パターンのあるMacBook Pro Retinaのモックアップ素材です。机に置かれる様子などはあります。PSD形式でダウンロードできます。
44. 正面のみのMacBookのモックアップ
正面のみのMacBookのモックアップ素材です。PSD形式でダウンロードできます。
45. 3色のMacBookのモックアップ
シルバーとグレーとゴールドの3色のMacBookの正面が入っているパッケージです。正面のみです。PSD形式でダウンロードできます。
スマートフォンとPC編
スマートフォンとPCを組み合わせるモックアップは、イメージにデバイス2台が入っているため、レスポンシブなデザインを提案するときにぴったりです。
46. MacBookとiPhoneののモックアップ
ウッドテーブルにMacBook ProとiPhoneが置かれていて、実際に両方を使っている素材の7パターンです。PSD形式でダウンロードできます。
47. パソコンの画面上に見えるモックアップ
他のモックアップ素材と異なり、パソコンの画面を中心にサービスの階層を明確にしているデザインです。PSD形式でダウンロードできます。
48. ベッド脇に置かれたMacBook ProとiPhone 5のモックアップ
ベッド脇に置かれたスマートフォンとノートパソコンのあるデザイン素材です。PSD形式でダウンロードできます。
ベッド脇に置かれたMacBook ProとiPhone 5のモックアップ
49. MacBookとスマートフォンの画面を重視しているモックアップ
このモックアップ素材は、スマートフォンとノートパソコンをイメージにしたデザインです。スマートフォンとパソコンの間に画像を挿入でき、サービスをイメージしやすくなります。PSD形式でダウンロードできます。
MacBookとスマートフォンの画面を重視しているモックアップ
50. 机に置かれているスマートフォンとMacBookのモックアップ
MacBook ProとiPhone 8がデスクに置かれているモックアップです。PSD形式でダウンロードできます。
机に置かれているスマートフォンとMacBookののモックアップ
（翻訳：Jordan Colston）
