オウンドメディアのKPI本当にそれで大丈夫?事例を交えて目標設定を解説
- KPI
- オウンドメディア
- 事例/ケーススタディ
クライアントやチームメンバーに、自社サービスやWebサイト、アプリケーションなどを、より実際の環境に近い状態で見せたい。そんなときには、デバイスのモックアップ素材が便利です。スマートフォン(iPhone)とPCにサービスのモックアップを作成するのなら、質の高い素材が必要です。
今回、モバイルアプリやWebサイトの制作過程で使える、無料モックアップ素材を50個ご紹介します。
最も新しく発売されたiPhone X。最新のiPhoneでデザインモックアップを作りたいとき、次のような素材を使ってみてはいかがでしょうか?
こちらのリンクから、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形式で作成されています。
ここからは、iPhoneX、iPhone8、iPhone6以外のモックアップ素材をご紹介します。
机や車、公園などでiPhone 5を使っているシーンの素材です。PSD形式でダウンロードできます。
机の上にiPhoneを使っている4つのシーンのモックアップ素材です。PSD形式でダウンロードできます。
机の上に置かれているiPhone 5を基に、ユーザーのニーズに合わせるための写真のフィルターでも入っています。PSD形式でダウンロードできます。
iPhone SEのPhotoshop用モックアップ素材です。デバイスのホワイトとブラックバージョンがあります。
こちらは、iPhone SEのPhotoshop用モックアップ素材4パターンです。iPhone SEの全カラーが含まれているパッケージです。
PCをモックアップ素材として使いたい場合、下記のような例を使ってみてはいかがでしょうか?
ウッドテーブルの上にMacbook Airが置かれた様子を再現したモックアップ素材です。全部で3パターン入っています。PSD形式でダウンロードできます。
木製ベンチの上に、MacBook Proと本3冊が置かれている素材です。PSD形式でダウンロードできます。
4パターンのあるMacBook Pro Retinaのモックアップ素材です。机に置かれる様子などはあります。PSD形式でダウンロードできます。
正面のみのMacBookのモックアップ素材です。PSD形式でダウンロードできます。
シルバーとグレーとゴールドの3色のMacBookの正面が入っているパッケージです。正面のみです。PSD形式でダウンロードできます。
スマートフォンとPCを組み合わせるモックアップは、イメージにデバイス2台が入っているため、レスポンシブなデザインを提案するときにぴったりです。
ウッドテーブルにMacBook ProとiPhoneが置かれていて、実際に両方を使っている素材の7パターンです。PSD形式でダウンロードできます。
他のモックアップ素材と異なり、パソコンの画面を中心にサービスの階層を明確にしているデザインです。PSD形式でダウンロードできます。
ベッド脇に置かれたスマートフォンとノートパソコンのあるデザイン素材です。PSD形式でダウンロードできます。
ベッド脇に置かれたMacBook ProとiPhone 5のモックアップ
このモックアップ素材は、スマートフォンとノートパソコンをイメージにしたデザインです。スマートフォンとパソコンの間に画像を挿入でき、サービスをイメージしやすくなります。PSD形式でダウンロードできます。
MacBookとスマートフォンの画面を重視しているモックアップ
MacBook ProとiPhone 8がデスクに置かれているモックアップです。PSD形式でダウンロードできます。
机に置かれているスマートフォンとMacBookののモックアップ
(翻訳:Jordan Colston)
いまの働き方に悩んでいるあなたへ。
「フリーランスとして、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」新しい働き方が加速するいまこそ、キャリアの選択肢を広げるフリーランス・複業・副業向けお仕事マッチングサービス『Workship(ワークシップ)』がおすすめです。
- 20,000人以上のフリーランス、パラレルワーカーが登録
- 朝日新聞社、mixi、リクルートなど人気企業も多数登録
- 公開中の募集のうち60%以上がリモートOKのお仕事
- 土日、週1、フルタイムなどさまざまな働き方あり
- 万一のトラブル時にも無料で賠償責任保険つき
- お仕事成約でお祝い金1万円プレゼント!
登録から案件獲得まで、お金は一切かかりません。一度詳細をのぞいてみませんか?